How to Make a Website with HTML and CSS

Want to build your own website? Not sure where to begin? You've come to the right place! I'll walk you through creating a website using HTML and CSS. We'll cover the basics, explain the code, and give you examples. You'll launch your first website with confidence. So, let's jump into web development and web design!

What is HTML and Why Do You Need It?

HTML, or HyperText Markup Language, is the foundation of every website. It's the structure and content of your web pages. Think of it as your website's skeleton. Without it, your website is just a blank page.

Why is HTML so important?

Structure: It defines sections, paragraphs, and headings.
Content: It holds text, images, and videos.
Links: It allows you to navigate between pages.
Accessibility: It helps make your website accessible to everyone.

HTML is the base upon which your website is built. Understanding it is the first step to mastering web development.

What is CSS and Why is it Important?

HTML gives you the structure, but CSS, or Cascading Style Sheets, handles the visuals. It controls colors, fonts, and layout. Think of CSS as the makeup and clothing for your website. Without it, your website would be functional, but not pretty.

Why is CSS vital for web design?

Appearance: It controls colors, fonts, and spacing.
Layout: It defines how things are placed on the page.
Responsiveness: It makes your website work on phones and computers.
Consistency: It keeps your website looking the same across all pages.

CSS improves the user experience and helps you create a beautiful website that shows off your brand. You need CSS to become a great web designer.

Setting Up Your Development Environment

Before you start coding, you need a few things:

Text Editor: This is where you write your code. VS Code (Visual Studio Code) is a popular choice. It's free and has lots of features.
Web Browser: You use this to see your website. Chrome and Firefox are good choices because of their developer tools.

That's it! You don't need expensive software to get started.

Your First HTML Page: The Basics

Let's make your first HTML page. Open your text editor and create a new file called index.html. Copy and paste this code into the file:

<!DOCTYPE html> <html> <head> <title>My First Website</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first website created with HTML and CSS.</p> </body> </html>

Let's break it down:

<!DOCTYPE html>: Tells the browser this is an HTML5 document.
<html>: The main part of your HTML page. Everything else goes inside.
<head>: Information about the page, like the title.
<title>: The title of your page (shows in the browser tab).
<body>: The visible content of your page.
<h1>: A big heading.
<p>: A paragraph of text.

Save the index.html file and open it in your browser. You should see "Hello, World!" as a heading, followed by your paragraph.

Adding Structure with HTML Tags

HTML has lots of tags to structure your content. Here are some common ones:

<h2>, <h3>, <h4>, <h5>, <h6>: Different sized headings.
<p>: A paragraph of text.
<a>: A link. Use the href attribute to set the URL. Example: <a href="https://www.example.com">Visit Example</a>
<img>: An image. Use the src attribute for the image URL. Example: <img src="image.jpg" alt="My Image">. The alt attribute is important!
<ul>: An unordered (bulleted) list. Use <li> for each item.
<ol>: An ordered (numbered) list. Use <li> for each item.
<li>: A list item.
<div>: A container for other elements.
<span>: A small container for text.

Try these tags! Add headings, paragraphs, images, links, and lists to your index.html file.

Styling Your Website with CSS

Now, let's add some style! There are three ways to add CSS:

Inline CSS: Adding CSS directly to HTML elements. Not great for big projects. Example: <p style="color: blue;">This is a blue paragraph.</p>
Internal CSS: Putting CSS inside the <style> tag in your HTML's <head>. Okay for small websites.
External CSS: Creating a separate CSS file (like style.css) and linking it in your HTML's <head>. This is the best way!

We'll use the external CSS method. Create a new file called style.css and save it in the same folder as index.html. Then, add this line to your index.html file, inside the <head> section:

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

This tells the browser to use the styles in style.css.

Basic CSS Syntax

CSS rules have two parts: a selector and a declaration block. The selector says which HTML elements to style. The declaration block says how to style them.

selector { property: value; }

For example, to make all <h1> headings blue, add this to your style.css file:

h1 { color: blue; }

Refresh your browser. Your "Hello, World!" heading should now be blue!

Common CSS Properties

Here are some CSS properties you'll use often:

color: Sets the text color.
font-family: Sets the font.
font-size: Sets the text size.
font-weight: Sets the text boldness.
text-align: Sets the text alignment.
background-color: Sets the background color.
width: Sets the width of an element.
height: Sets the height of an element.
margin: Sets the space around an element.
padding: Sets the space inside an element.
border: Sets a border around an element.

Play around with these properties! Change the font, size, and color of your text. Add backgrounds, margins, and padding.

CSS Selectors

CSS selectors target specific HTML elements. Here are the most common:

Element Selector: Selects all elements of a type (like h1, p, a).
Class Selector: Selects elements with a specific class. Use a dot (.). Example: .my-class
ID Selector: Selects the element with a specific ID. Use a hash (#). Example: #my-id
Universal Selector: Selects everything. Use an asterisk (*).

To style all elements with the class "highlight", use this CSS rule:

.highlight { background-color: yellow; }

To use this style, add the class attribute to an element:

<p class="highlight">This is a highlighted paragraph.</p>

Building a Simple Layout

CSS helps you create website layouts. Use the <div> tag to make containers. Then, use CSS properties like width, height, margin, and padding to position them.

Let's create a two-column layout. Add this HTML to your index.html file, inside the <body>:

<div class="container"> <div class="left-column"> <h2>Left Column</h2> <p>This is the content of the left column.</p> </div> <div class="right-column"> <h2>Right Column</h2> <p>This is the content of the right column.</p> </div> </div>

Then, add this CSS to your style.css file:

.container { display: flex; } .left-column { width: 50%; padding: 20px; } .right-column { width: 50%; padding: 20px; }

This uses flexbox to create the two columns. display: flex turns on flexbox. width: 50% makes each column take up half the space. padding adds space around the content.

Responsive Web Design

Make your website responsive! This means it looks good on phones and computers. CSS has several ways to do this:

Media Queries: Apply different CSS rules based on screen size.
Flexible Layouts: Use percentages instead of pixels for widths and heights.
Responsive Images: Show different images based on screen size.

To make your website one column on small screens, use this media query:

@media (max-width: 768px) { .container { flex-direction: column; } .left-column { width: 100%; } .right-column { width: 100%; } }

This tells the browser to only use these CSS rules when the screen is 768 pixels wide or less. It stacks the columns on top of each other and makes them full width.

Resources for Learning More

This guide gave you a basic intro to building websites with HTML and CSS. To keep learning, here are some good resources:

MDN Web Docs: A huge website with web development info.
freeCodeCamp: A website with tutorials and coding challenges.
Codecademy: Another website with courses on web development.
CSS-Tricks: A website about CSS techniques.

Conclusion

You did it! You've learned the basics of building a website with HTML and CSS. You made your first HTML page, styled it, and learned about responsive design. Now, practice! Web development is a journey. Keep coding!