Build Your First Web Page

Getting Started with HTML and CSS: Building Your First Web Page

Want to create your own website but don't know where to start? This beginner-friendly guide will walk you through creating a simple web page using HTML and CSS. By the end of this tutorial, you'll have a basic understanding of web development fundamentals and a working webpage to show for it!

Prerequisites:

A computer with internet access
Basic familiarity with using a text editor
No prior coding experience required

Creating your first web page can be both exciting and rewarding. HTML (HyperText Markup Language) forms the structure of a webpage, while CSS (Cascading Style Sheets) enhances its visual appearance.

Step 1: Setting Up Your Project

Before we begin, you'll need a code editor like VS Code or Sublime Text. These tools make writing and organising your HTML and CSS files easier. They provide features like syntax highlighting and auto-completion that make coding much easier than using a basic text editor.

Create a new folder on your computer and name it "my-first-website". Inside this folder, create two files:

index.html (for the HTML structure)
style.css (for styling with CSS)

Step 2: Writing Your First HTML

HTML uses tags to structure your content. Each tag serves a specific purpose in organizing your webpage. Here's a basic template to get you started:

Open index.html in your code editor and add the following code:

HTML Structure

Let's break down what each main section does:

The <head> section contains information about your webpage that isn't visible to users
The <body> section contains all the visible content
<header>, <main>, and <footer> are semantic tags that help organize your content in a meaningful way
<h1> is the most important heading on your page
<p> tags contain paragraph text

Step 3: Adding CSS for Styling

Now, let's make the page look better by adding styles in style.css. CSS uses selectors to target HTML elements and properties to define their appearance:

CSS Styling

Understanding CSS Properties:

font-family: Specifies what fonts to use, with fallbacks after the comma
margin: Controls space outside an element
padding: Controls space inside an element
background-color/background: Sets the background color (can use color names, hex codes, or RGB values)
color: Sets the text color
border-radius: Rounds the corners of an element
text-align: Controls how text is aligned within an element

Common Issues and Troubleshooting

If your styles aren't appearing, make sure your CSS file is in the same folder as your HTML file
Check that the file names match exactly in your link tag
Verify that all your CSS curly braces {} and semicolons ; are in place
Use your browser's developer tools (F12) to inspect elements and debug issues

Try These Modifications!

Now that you have a basic page, try these simple changes to practice:

Change the background color to your favorite color
Add a new paragraph in the main section
Modify the header text to say something different
Try adding an image using the <img> tag

Next Steps

Congratulations! You've built your first web page using HTML and CSS.

You've learned about:

Basic HTML structure
CSS styling fundamentals
File organization
How to view your page in a browser

Ready for More?

Learn about responsive design
Explore JavaScript basics
Discover CSS flexbox and grid
Start building more complex layouts

If you have any questions, drop an email or join our community! Happy coding! 🎉