How to Build Your First Website with HTML and CSS

Building your first website can be a fun and rewarding experience. HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies used to create websites. HTML provides the structure and content of a webpage, while CSS is responsible for styling and layout. In this guide, we’ll walk you through the process of building a simple website using HTML and CSS, step by step.

Step 1: Setting Up Your Development Environment

Before you start coding, you’ll need a text editor to write your code and a web browser to view your website.

Text Editor: Use a simple text editor like Notepad (Windows) or TextEdit (Mac), or more advanced editors like Visual Studio Code or Sublime Text.
Web Browser: You can use any modern browser like Google Chrome, Firefox, or Safari to view your website.

Step 2: Create Your Project Folder

Start by creating a folder on your computer where all the files for your website will be stored. For example, create a folder named my-first-website. Inside this folder, create two files:

index.html: This will be your main HTML file.
styles.css: This will be your CSS file.

Your folder structure should look like this:

Step 3: Write Your First HTML Code

HTML uses “tags” to structure content. A basic webpage requires a few fundamental elements like the <!DOCTYPE html>, <html>, <head>, and <body> tags.

Open your index.html file in your text editor and type the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My First Website</title>

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

</head>

<body>

<header>

<h1>Welcome to My First Website</h1>

</header>

<section>
<h2>About Me</h2>
<p>Hello! I’m learning HTML and CSS to build my first website. It’s an exciting journey!</p>
</section><footer>
<p>Created by Me © 2025</p>
</footer>
</body>
</html>

Explanation:

<!DOCTYPE html>: Tells the browser that this document is an HTML5 document.
<html lang="en">: Opens the HTML document and specifies that the language is English.
<head>: Contains metadata about the page like the title and links to stylesheets.
<body>: Contains the visible content of the page.
<header>, <section>, and <footer>: These are structural tags that organize content on the page.
<h1> and <h2>: These are heading tags, which are used to define titles and subtitles.
<p>: This tag defines a paragraph.

Step 4: Style Your Website with CSS

Now, open your styles.css file and add some simple styles to improve the look of your website. Here’s an example:

Explanation:

We’re setting a font for the body with font-family.
The header has a dark background color, and the text is centered and white.
The h1 tag is styled to be large.
The section has a margin for spacing, and the footer has a similar style as the header.
Paragraph text (p) is given a light gray color.

Step 5: Preview Your Website

Now that you’ve written both your HTML and CSS, it’s time to preview your website.

Open the index.html file in your web browser. You should see a basic webpage with a heading, a section with some text, and a footer.
If your styles aren’t showing up, make sure the link to your styles.css file in the <head> of your HTML is correct: <link rel="stylesheet" href="styles.css">.

Step 6: Experiment with More HTML and CSS

Now that you have the basics down, try adding more elements to your website. Here are some ideas:

Images: Use the <img> tag to add pictures.

Links: Use the <a> tag to add hyperlinks.

Lists: Use <ul> for unordered lists and <ol> for ordered lists.

Buttons: Use the <button> tag to create interactive buttons.

You can style these elements by adding more rules to your styles.css file.

Step 7: Publish Your Website

Once you’re happy with your website, you can host it online so that others can view it. You can use free hosting platforms like:

GitHub Pages: A free service from GitHub that hosts static websites.
Netlify: Offers free hosting for static websites with continuous deployment from GitHub.
Vercel: Another great platform for hosting static websites.

Conclusion

Building your first website with HTML and CSS is a great introduction to web development. With just these two technologies, you can create static webpages and get a feel for the basics of web design. As you become more comfortable, you can dive into more advanced topics like JavaScript, responsive design, and CSS frameworks.