DEV Community: Helen Burgess

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

Helen Burgess — Mon, 02 Jun 2025 16:00:00 +0000

"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>

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 */
}

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.

How to Work with Clients as a Web Developer: The Essential Guide

Helen Burgess — Tue, 27 May 2025 16:00:00 +0000

Introduction: Why Web Developers Need Strong Client Communication
Building a website isn't just about writing HTML, CSS, and JavaScript—it's about understanding the client's needs, managing expectations, and ensuring the project is a success.

Many new developers, especially those who are self-taught or transitioning from design, struggle with the client conversation part of web development. They either:

Jump into coding without clarifying project goals, leading to endless revisions.
Get caught up in technical explanations, losing the client's trust.
Forget to set boundaries, leading to scope creep and unpaid work.
This guide will teach you:
How to start the conversation with a client (and what questions to ask).
What you need from them before you even touch a line of code.
How to set expectations around pricing, contracts, and project timelines.
How to handle common issues like unclear requirements, late payments, and unrealistic expectations.

Step 1: Setting the Right Expectations from the Start

Before you start coding, you need to have a real conversation with your client. This isn't just a list of questions—it's about understanding their needs, goals, and expectations.

Key Questions to Ask Clients Before Starting a Web Project

What's the main purpose of this website? Portfolio, e-commerce, blog?
What features are necessary? Contact form, booking system, blog, payment gateway?
Who will be updating the site after launch? Do they need training or a maintenance plan?
What is their budget and timeline? What's realistic for their goals?
Who is providing the content? Do they have branding, images, or do they need help?

Pro Tip: Clients often say, "I just need a simple website." This is a red flag! Always clarify exactly what they mean by 'simple'
.

Step 2: Avoiding Scope Creep & Setting Boundaries

Scope creep happens when a client keeps adding features beyond what was agreed upon—without increasing the budget or timeline. Here's how to avoid it:

Have a clear contract.
Outline what's included and what's extra.
Create a feature list.
If something's not on the list, it's a separate project.
Use change orders.
New features require a quote for additional work.
Be upfront about costs.
Extra work = extra payment.

Step 3: Technical Details Clients Need to Understand

Clients don't need to be developers, but they should understand the basics:

Domain, Hosting, and DNS: Explain that buying a domain doesn't mean they have a website.
SEO & Performance: A site needs optimization to rank and load quickly.
Security & Maintenance: Explain risks of outdated plugins, weak passwords, and cheap hosting.

Step 4: How to Handle Difficult Clients (Without Losing Your Sanity)

Some common client issues and how to handle them:

"I need this website finished in two weeks." - Require all content upfront.
"I'll pay you when the website is done." - Require a 50% deposit before starting.
"I don't like how this looks. Can you just change everything?" - Limit revisions in your contract.

Conclusion: Set Yourself Up for Success

Working with clients is a skill—just like coding. If you learn to ask the right questions, set boundaries, and communicate effectively, you'll avoid stressful projects and build successful websites.

This article was originally published on GraphitEdge,. 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.

The Internet is Everywhere—But Do You Really Understand How It Works?

Helen Burgess — Mon, 19 May 2025 03:08:00 +0000

There was a time when technology was simpler. Phones were just for calls, letters were physical, and websites? Well, they were static pages—no dynamic content, no fancy frameworks, and definitely no SEO strategy.

Fast forward to today, and everything is connected. Your phone holds your entire digital life, your website isn't just a collection of pages—it's an interactive experience, and if your business isn't online, does it even exist?

For web developers, this technological shift isn't just fascinating—it's essential to understand. If you're building websites, you need to go beyond just code. You need to know:

How the Internet actually works—DNS, hosting, and deployment.
How to translate a design into a real, functioning site.
How search engines rank websites (SEO isn't magic, it's science).
How to optimize for speed, usability, and accessibility.

The Hidden Layers of Web Development

Most tutorials teach how to code, but they rarely explain how that code actually reaches people.

Take a simple website. When someone types a URL into their browser, do you know what happens next?

DNS Resolution: The browser translates the domain name (like graphitedge.com.au) into an IP address.
Server Request: Your browser sends a request to the web server.
Response & Rendering: The server sends back files (HTML, CSS, JavaScript), which the browser assembles into a webpage.
SEO & Performance Checks: Google analyzes how fast, accessible, and structured your site is.

If you only focus on writing code but don't understand how that code reaches the end user, you'll always be missing half the picture.

Why Web Developers Need to Think Beyond Just Code

Technology has infiltrated every part of our lives—but as a developer, you're not just a coder. You're also:

A Problem Solver: Figuring out why a site is slow isn't just about code—it's about server load, caching, and image optimization.
A Translator: Taking a static design and turning it into a functional, interactive experience.
A Strategist: Understanding how SEO, user experience, and marketing shape how websites are built.

The best developers don't just write code that works—they build sites that succeed.

Want to Learn More?

This article was originally published on GraphitEdge, where we're building a complete learning resource that demystifies web development beyond just code. If this resonates with you, check out our full tutorial series where we dive deep into DNS, deployment, SEO, and everything else that makes websites work. Whether you're just starting out or filling in knowledge gaps, let's explore how the internet really works together.

Understanding DNS: The Internet's Phone Book and Why It's Critical for Web Browsing

Helen Burgess — Mon, 12 May 2025 02:17:48 +0000

Have you ever wondered how typing a website address magically takes you to the right page? Behind the scenes, a vital system called DNS (Domain Name System) makes this possible. Think of DNS as the internet's address book — a translator that connects human-friendly URLs like www.graphitedge.com.au to the numerical IP addresses computers understand.

What is DNS?

DNS stands for Domain Name System. It's essentially a network of servers that translate domain names (like graphitedge.com.au) into IP (Internet Protocol) addresses, which are strings of numbers that identify devices on a network. For example, the IP address for a website might look like 192.168.1.1 or, in modern cases, a longer string like 2606:4700:4700::1111 (IPv6).

Why Do We Need DNS?

DNS solves a fundamental problem of accessibility. While computers rely on IP addresses to locate each other on the internet, these addresses are difficult for humans to remember. Without DNS, you'd need to memorize complex number sequences for every website you want to visit. DNS acts as an intermediary, allowing us to use readable domain names while computers handle the technical details in the background.

How Does DNS Work?

The process of resolving a domain name involves several steps:

You Type a URL into Your Browser

When you enter www.graphitedge.com.au, your browser first checks if it already knows the IP address (this is called caching).[rest of the content remains the same]
1. Querying a Recursive Resolver
If your browser doesn't have the IP address cached, it sends a request to a DNS resolver, typically provided by your ISP or services like Google Public DNS or Cloudflare.
1. Contacting the Root Servers
The resolver asks one of the 13 sets of root servers worldwide, which direct it to the next step.
1. Asking the TLD Servers
TLD servers manage domain extensions like .com, .org, or .au. For www.graphitedge.com.au, the resolver contacts the .au TLD server.
1. Getting the Final Answer
The authoritative server for graphitedge.com.au provides the IP address, which is then sent back to your browser to load the website.

Why Should You Care About DNS?

Understanding DNS is crucial for several reasons:

Performance: Using fast DNS services like Cloudflare (1.1.1.1) or Google Public DNS (8.8.8.8) can improve your browsing speed.
Security: Criminals can exploit DNS vulnerabilities through attacks like DNS spoofing. Secure DNS services, such as DNS-over-HTTPS (DoH), help protect against these threats.
Reliability: When DNS servers fail, you may experience website outages. Having backup DNS providers can help mitigate this risk.
Privacy: DNS queries can reveal your browsing history, even in incognito mode. Privacy-focused DNS services ensure your data isn't logged or shared.

What Happens When DNS Fails?

When DNS services go down, several critical problems occur:

Browsers can't translate domain names into IP addresses
Email services stop working properly
Web applications become unreachable
Only direct IP address access would work (if you know them)

Best Practices for DNS Management

Use reliable DNS providers
Configure backup DNS servers
Implement DNS caching
Keep local DNS records for critical services
Monitor DNS health regularly

Conclusion

DNS plays an indispensable role in web browsing, acting as the backbone of the internet's navigation system. By understanding its basics, you can make informed choices about your online security, privacy, and performance. Just as you wouldn't want to memorize phone numbers for every person you know, DNS ensures you don't have to memorize IP addresses for every website you visit.

This article was originally published on Graphitedge, where we demystify web development concepts with clear, practical explanations.

What's your experience with DNS? Have you ever encountered DNS-related issues, or do you use any alternative DNS providers? Share your stories and let's learn from each other's experiences in the comments below!

Want more tutorials that break down web concepts into clear, practical explanations? Visit us at Graphitedge.