How to Make a Website with HTML and CSS

Want to make your own website? Cool! But maybe you're not sure where to start. Don't worry. This guide will show you how to build a website using HTML and CSS. Even if you're a total beginner.

Why HTML and CSS?

HTML and CSS are key. They're what you need to build websites. HTML puts the stuff on the page. CSS makes it look good. Want to design websites? Then you gotta know these!

HTML: The Structure of Your Website

HTML uses tags. These tags tell the browser what to show. Here are some basics:

Read Also: How to Code in JavaScript

<!DOCTYPE html>: Tells the browser what kind of document it is.
<html>: The main part of your HTML page.
<head>: This has info about your page. Like the title.
<title>: The title! It shows in the browser tab.
<body>: This is where all the stuff people see goes.
<h1> to <h6>: These are headings. <h1> is the biggest and most important.
<p>: This makes a paragraph.
<a>: This is a link to another page.
<img>: This puts a picture on your page.
<ul>: This makes a list with bullet points.
<ol>: This makes a numbered list.
<li>: This is one thing in a list.
<div>: This is a section on your page.
<span>: This is a small part of text.

Here's some simple HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website!</h1>
  <p>This is my first website. I'm learning HTML and CSS.</p>
</body>
</html>

Save it as "index.html". Open it in your browser. See? Heading and paragraph!

CSS: Styling Your Website

CSS makes your website look nice. It controls the colors, fonts, and how things are arranged. CSS has two parts: a selector and a declaration.

Selector: What HTML thing you want to change.
Declaration: What you want to change about that thing. Like the color.

How do you add CSS to HTML?

Inline CSS: Put the style right in the HTML tag. Like this: <p style="color: blue;">. Don't do this for big projects.
Internal CSS: Put the CSS in the <head> of your HTML, inside <style> tags.
External CSS: Make a separate file called "style.css". Link it to your HTML. This is the best way.

Let's make a "style.css" file. Put this in it:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  color: #666;
  line-height: 1.6;
  padding: 10px;
}

Now, add this to the <head> of your HTML:

<link rel="stylesheet" href="style.css">

Refresh your browser. Cool, right? The page now has colors and a different font!

Basic HTML Elements and their Usage

Let's look at some common HTML things:

Headings (`<h1>` to `<h6>`)

Use these to organize your content. <h1> is the main title. Smaller headings are for smaller sections. Google likes it when you use headings right. It helps them understand your page.

Paragraphs (`<p>`)

Use paragraphs to break up your text. Don't make them too long. People don't like reading big blocks of text online.

Links (`<a>`)

Links take you to other pages. The href tells the link where to go. Like this: <a href="https://www.example.com">Visit Example.com</a>. Use words that tell people where the link goes.

Images (`<img>`)

Images put pictures on your page. The src tells the browser where to find the picture. The alt is important. It tells what the picture is about. If the picture doesn't load, the alt text shows up. It's also good for Google. Like this: <img src="image.jpg" alt="A cute cat">

Lists (`<ul>` and `<ol>`)

Lists are for lists of things. <ul> is a bullet point list. <ol> is a numbered list. Use <li> for each thing in the list.

Divisions (`<div>`) and Spans (`<span>`)

These are containers. They hold other HTML things. <div> makes a section. It takes up the whole line. <span> is for small parts of text. You use these with CSS to style parts of your page.

Common CSS Properties and Their Use

Let's talk about some CSS you'll use a lot:

Color

Changes the text color. You can use names like "red" or codes like "#FF0000".

Background-color

Changes the background color. Same as with text color.

Font-family

Changes the font. Always add a backup font in case the first one doesn't work. Like this: font-family: Arial, sans-serif;

Font-size

Changes how big the text is.

Margin

Adds space outside an HTML thing.

Padding

Adds space inside an HTML thing.

Border

Adds a border around an HTML thing. You need to say how thick, what kind, and what color. Like this: border: 1px solid black;

Text-align

Puts the text on the left, right, or in the center.

Display

This is important! It controls how the HTML thing is shown on the page. It's key for arranging things.

Responsive Website Design

Websites need to look good on phones, tablets, and computers. That's called "responsive design". Here's how to do it:

Viewport Meta Tag: Put this in the <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0">. It tells the browser to make the page fit the screen.
Fluid Layouts: Use percentages instead of pixels for widths. This lets things stretch and shrink.

Media Queries: Use these in your CSS to change styles for different screen sizes. Like this:

@media (max-width: 768px) {
  / Styles for screens smaller than 768px /
  h1 {
    font-size: 24px;
  }
}

Flexible Images: Make images shrink if they're too big. Set max-width to 100% and height to auto.

Coding Best Practices

Good habits make your code easier to read and fix:

Valid HTML: Check your HTML to make sure it's right.
Semantic HTML: Use tags like <article> and <nav>. They help describe what the content is.
Well-Formatted CSS: Keep your CSS neat and tidy.
Comments: Explain what your code does with comments.
Organize Files: Put your HTML, CSS, and JavaScript in separate folders.
Use a Code Editor: Use a good code editor. It helps you write code.

Advanced HTML and CSS Techniques

Once you know the basics, try these:

CSS Frameworks: Use tools like Bootstrap to build layouts faster.
CSS Preprocessors: Use Sass or Less to write better CSS.
JavaScript: Use JavaScript to make your website do cool things.
Accessibility: Make sure people with disabilities can use your website.

Conclusion

Learning how to make website with html and css is worth it! With some work, you can make awesome websites. This guide is a good start. Keep practicing and you'll get better. Happy coding!