How to Build a Simple Website with HTML & CSS

Want to learn how to make a website using HTML and CSS? Great! You're in the right spot. This guide is for beginners. I'll show you how to build your first webpage. It's easier than you think! We'll cover the basics of HTML and CSS. You'll be able to create your own simple website. This is your first step into web development. Let's get started!

Why Learn HTML and CSS?

Why are HTML and CSS important? They're the building blocks of the web. Every website uses them. Want to make websites? You need to know these!

HTML (HyperText Markup Language): It's the structure of your website. Think of it like the skeleton. It has things like headings, paragraphs, and images.
CSS (Cascading Style Sheets): This makes your website look good. Colors, fonts, and how things are laid out. It's like the skin and clothes of your website.

HTML and CSS together make your website work and look nice. People on phones, tablets, and computers can see it. Learning these is key if you want to get into coding for beginners or become a web developer.

Read Also: How to Learn to Code in Prolog

Setting Up Your Development Environment

Before we start, you need a place to write your code. This is your development environment. It's just a text editor and a folder for your files.

Choosing a Text Editor

A text editor is where you write HTML and CSS. Lots of good ones exist! Some are free. Some cost money. Here are a few popular ones:

Visual Studio Code (VS Code): Free! It's great for HTML, CSS, and JavaScript. It helps you write code and find mistakes.
Sublime Text: Costs money, but it's fast and simple.
Atom: Also free! Made by GitHub. You can change it to fit your needs.
Notepad++ (Windows): Free and easy to use on Windows.

Pick the one you like best! I'll use Visual Studio Code in this guide. Lots of people use it.

Creating Your Project Folder

Make a folder on your computer for your website files. This keeps things organized.

Make a new folder. Name it something like "my-first-website".
Open your text editor and find that folder.

Creating Your HTML File

Inside that folder, make a new file. Name it index.html. This is the main file for your website.

Writing Your First HTML Code

Time to write some code! Open index.html in your text editor. Copy and paste this code:

<!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> </head> <body> <h1>Hello, World!</h1> <p>This is my first website built with HTML and CSS.</p> </body> </html>

Let's see what this means:

<!DOCTYPE html>: Tells the browser it's HTML5.
<html lang="en">: This is the start of your HTML page. lang says it's in English.
<head>: This has info about your page. Like the title.
<meta charset="UTF-8">: This helps show all kinds of characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This makes your website look good on phones and tablets.
<title>My First Website</title>: This is the title in the browser tab.
<body>: This is where the content of your website goes.
<h1>Hello, World!</h1>: This is a big heading.
<p>This is my first website built with HTML and CSS.</p>: This is a paragraph of text.

Save index.html. Open it in a browser (like Chrome or Firefox). You should see "Hello, World!" in big letters. And a paragraph under it. Congrats! You made your first webpage!

Adding More HTML Elements

Let's add more stuff! Edit index.html and add this inside the <body> tags:

<h2>About Me</h2> <p>My name is [Your Name] and I'm learning web development.</p> <ul> <li>I love coding.</li> <li>I enjoy learning new technologies.</li> <li>I'm excited about the future of web development.</li> </ul> <img src="image.jpg" alt="My Image" width="200">

What's new here?

<h2>About Me</h2>: This is a smaller heading.
<p>My name is [Your Name] and I'm learning web development.</p>: Another paragraph. Put your name in there!
<ul><li>...</li></ul>: This is a list.
<li>...</li>: These are the things in the list.
<img src="image.jpg" alt="My Image" width="200">: This is an image. Put an image named 'image.jpg' in the same folder as your HTML file. Change "My Image" to describe the picture. width makes the image smaller.

Save the file. Refresh your browser. You should see a new heading, paragraph, list, and image.

Adding CSS Styles

Now, let's make it look better with CSS! There are three ways to add CSS:

Inline Styles: Put the style right in the HTML tag. (Not good for big projects.)
Internal Styles: Put the style in the <head> of your HTML file.
External Styles: Make a separate CSS file. (Best for big projects.)

We'll use internal styles for now. Add this code inside the <head> tags of your index.html file:

<style> body { font-family: sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } h1 { color: #333; text-align: center; } h2 { color: #555; } p { line-height: 1.6; } ul { list-style-type: disc; } img { border: 1px solid #ccc; border-radius: 5px; } </style>

What does this CSS do?

body { ... }: This styles the whole page. It changes the font, background color, and adds some space around the edge.
h1 { ... }: This styles the big headings. It makes them dark gray and centers them.
h2 { ... }: This styles the smaller headings.
p { ... }: This styles the paragraphs. It makes the lines easier to read.
ul { ... }: This styles the lists.
img { ... }: This styles the images. It adds a border and rounds the corners.

Save the file. Refresh your browser. See the changes?

Using External CSS

Let's make it even better! Make a separate CSS file. This keeps things tidy.

Make a new file. Name it style.css. Put it in the same folder as index.html.
Copy the CSS code from the <style> tag in index.html to the style.css file.
Take out the <style> tag from index.html.
Add this code to the <head> of index.html:

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

This <link> tag tells the browser to use the style.css file.

Save both files. Refresh your browser. It should look the same as before.

Adding More CSS Properties

CSS can do so much! Here are some more things you can change:

color: Changes the text color.
font-size: Changes the text size.
font-weight: Makes the text bold.
text-align: Aligns the text (center, left, right).
background-color: Changes the background color.
margin: Adds space around an element.
padding: Adds space inside an element.
border: Adds a border around an element.
border-radius: Makes the corners rounded.

Try them out! Change the font size. Add a background color. Put a border on the images.

Responsive Design

Websites should look good on phones, tablets, and computers. That's responsive design! Websites adapt to the screen size.

CSS media queries let you change the style based on the screen size. Make the font smaller on phones. Change the layout.

Add this to your style.css file:

@media (max-width: 768px) { body { padding: 10px; } h1 { font-size: 2em; } img { width: 100%; } }

This code says: If the screen is smaller than 768 pixels (like a phone or tablet), then make these changes: Less space around the body. Smaller headings. Make the images fill the screen.

Save the file. Make your browser window smaller. See how the website changes?

Conclusion

Great job! You learned how to make a simple website with HTML and CSS! We covered the basics. Setting up your tools. Writing code. Making it look good. Making it responsive. Coding for beginners can be hard. But with practice, you can do it!

This is just the beginning! Lots more to learn! Advanced CSS. JavaScript. And more! Keep practicing! Keep building! Have fun!

Look at the official HTML and CSS websites to learn more. Happy coding!