DEV Community

Cover image for Building Your First Web Page: Understanding the Why, Not Just the How
Helen Burgess
Helen Burgess

Posted on • Originally published at graphitedge.com.au

Building Your First Web Page: Understanding the Why, Not Just the How

#webdev #webpage #html #css

"Just copy this code..." That's how most first web page tutorials start, right? But copying and pasting won't help you understand how websites actually work. After 20 plus years of teaching web development, I've seen too many beginners get stuck because they learn the syntax but miss the bigger picture.

This tutorial is different. We'll build your first webpage together, but we'll also demystify what's happening behind the scenes. You'll learn:

  • Why HTML elements work the way they do (not just which tags to use)
  • How browsers actually read and display your code
  • The relationship between HTML, CSS, and your web browser
  • Common pitfalls and how to avoid them

Whether you're completely new to web development or you've tried tutorials before but felt something was missing, this guide will help you build a solid foundation. Ready to create your first webpage – and actually understand how it works?

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

<!DOCTYPE html> <!-- Tells browsers this is an HTML5 document -->
<html lang="en"><!-- Root element of the page, 'lang' specifies language -->
<head>
    <!-- Meta information about our webpage -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <!-- Link to our CSS file -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
     <!-- Header section with main title -->
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <!-- Main content area -->
    <main>
        <p>This is my first webpage. I'm learning HTML and CSS!</p> <!-- Paragraph text -->
    </main>
     <!-- Footer section -->
    <footer> <!-- Groups footer content -->
        <p>&copy; 2025 My First Website</p> <!-- Copyright notice -->
    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

/* Basic reset and body styles */
body {
    font-family: Arial, sans-serif;/* Sets the main font for the whole page */
    margin: 0; /* Removes default spacing around the edge */
    padding: 0; /* Removes internal spacing */
    text-align: center; /* Centers all text content */
    background-color: #f4f4f4; /* Light grey background color */
}

/* Header styling */
header {
    background: #333; /* Dark grey background for header */
    color: white; /* White text color */
    padding: 20px; /* Adds space inside the header */
}

/* Main content area styling */
main {
    margin: 20px; /* Adds space around the main content */
    padding: 20px; * Adds space inside the main content */
    background: white;  /* White background for content area */
    border-radius: 5px;   /* Rounds the corners */
}

/* Footer styling */
footer {
    margin-top: 20px; /* Adds space above the footer */
    padding: 10px; /* Adds space inside the footer */
    background: #222; /* Very dark grey background */
    color: white; /* White text color */
}
Enter fullscreen mode Exit fullscreen mode

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

Step 4: Viewing Your Webpage

Now that you have both your HTML and CSS files ready, it's time to see your creation in action! There are two simple ways to view your webpage:

Direct Method:

  • Navigate to your "my-first-website" folder
  • Double-click the index.html file
  • It will automatically open in your default web browser

Drag and Drop Method:

  • Open any web browser (Chrome, Firefox, Safari, or Edge)
  • Drag your index.html file from your folder directly into the browser window

Every time you make changes to your HTML or CSS files, save them and refresh your browser page to see the updates. This is called the "save-refresh cycle" and it's a fundamental part of web development.

Pro Tip: Keep your code editor and browser windows side by side. This makes it easier to see your changes in real-time as you work.

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

This article was originally published on graphitedge.com.au. Want to dive deeper into web development beyond just code? Join us at Graphitedge where we break down everything from DNS to deployment in clear, practical steps designed for beginners and self-taught developers.

Top comments (0)