My girlfriend's guide to coding - Day 4: Standard HTML Structures
Daily bite-size tutorials for my girlfriend who want's to learn how to code!
Hey Girlfriend! So you want to learn how to code? I got you.
I know you are super busy, so I've designed these tutorials to be super bitesize. It should take no more than 15 minutes of your time to read through and try out an exercise.
Stick to it and with consistency, you'll be writing code in no time
- Your BF
Overview
Last time, you built a full-on webpage using HTML and inline styles. That’s a huge step, and I’m so proud of you!
Today, we are going to learn about how to organise your project and follow standard coding practices.
Why do I need to learn how to organise my files? Or follow coding conventions? Don't tell me what to do >:(
Um… actually, organising your files and following standard coding conventions is super important.
When you start working on larger projects where you might have tens or hundreds of components that create your website, organisation is key. Good organisation will allow you to find relevant files quickly, and bad organisation will make implementing the simplest change feel like digging through a messy suitcase to find your earring.
Coding standards help everyone (including Future You) understand what the code is doing. When you follow standards, your code becomes easier to read, debug, and build on. It also means that if someone else joins your project (or you revisit it months later), they won’t spend a bajillion years figuring out what you wrote.
Therefore, we’re going to focus on learning two things today that will help you program like a real developer:
What a proper HTML document looks like
What's in standard HTML
Refactor last week's code
Ready? Let's begin :)
Proper HTML Document Structure
So far, we've been writing HTML code like this:
```
<div>We have just been</div>
<div>listing containers</div>
<div>with no real structure</div>
```And it has worked, but that's kind of like writing a story with no punctuation and no spacing. Your browser is smart, so it can guess what you meant. But once your project gets more complicated, we need to be more explicit about structure.
For reference, try reading the excerpt below. You can make guesses about where the sentences split, but it's possible to make mistakes. It's also just a pain to read.
This is what it's like for a computer to read HTML code without using the standard HTML format. Adding coding structure to our documents makes the structure super explicit to the computer, and the doc easier to read for us.
What’s in standard HTML?
Here is some standard HTML boilerplate code.
Boilerplate code refers to sections of code that are repeated with little to no variation across different parts of a program or in multiple programs.
In other words, it’s a template.
Why didn’t I just say template? Because we developers like to come up with our own cool terminologies and feel extra special about ourselves. Anyways…
```
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<div>Hello World</div>
</body>
</html>
```I know this looks a bit more complicated than what we've worked with, but it's really not. Let me break it down.
<!DOCTYPE html> - This line tells the browser what kind of document it’s dealing with. It's like saying to the browser, "Hey! I am an HTML page! Treat me like one." Without it, the browser might use outdated methods of rendering the page, which could break it.
<html> - This is the root element of your whole webpage. Every bit of HTML you write should go inside this tag. Don't worry about what it does, just remember that everything you write in your HTML document should be inside this tag.
<head> - This is a super important tag! This is where we put the information *about* the page that isn't rendered. Metadata, for example, is written inside the `<head>` tag. Metadata is used by stuff like search engines so they can find your website when you search for it.
<body> - This is the star of the show. The <body> tag contains everything that the user actually sees and interacts with, like text, images, buttons, your <div> containers, etc. Whatever you want to appear on the page, it goes inside here!
Subscribe to follow along!
I’m dropping tutorials every week, subscribe to follow this newsletter and learn how to code :D
Exercise: Refactoring Last Week's Project
Refactoring means rewriting or reorganising your code. It’s like tidying your room to make it presentable when your parents come to visit. You do the same in programming. We want to make sure our code is presentable to you, the computer, and collaborators on your project.
In this exercise, we are going to refactor your personal website from last week so that it follows a proper HTML structure! Let's begin :)
Open up Cursor and create a new file called
index.html(You can click the "New File" button on the left file tab)In your new file, type in
!and your IDE should suggest a shortcut for some boilerplate HTML. Simply press "Enter" to confirm.
You should see something like this now. This is your HTML template.
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> ```I won't go into details about what each of these tags and attributes is, but I encourage you to highlight sections you have questions about, press cmd + L or ctrl + L and ask Co-pilot questions. Just make sure to change it from Agent to Ask! Otherwise, it might write code for you (we don’t want that yet!)
Now, copy and paste your code from last week into the
<body>tag. Make sure you indent your tags properly so your code is organised and readable! After you've done that, change the<title>tag to "{your name}'s Website"!
It should look something like this Nice! Go to your
index.htmlfile in your file explorer or finder, select "Open With" and choose your web browser. You should see your website, and if you check the tab, it should say "{your name}'s Website"!
As we can see, everything still works the same, but now it's structured properly and looks a lot more professional. We love an organised queen #slay
You've taken your first step into writing code that not only functions, but is also clean, organised, and easy to fix.
Also, let’s just take a moment to appreciate how cool it is that your name is showing up in the browser tab now? You’re basically a web developer already hehe :D
Next Time
Next lesson, we’re going to clean up the way we apply styles. Instead of writing all our colours and padding directly inside each tag, we’ll move that into a proper CSS file.
This will make your code look cleaner, easier to manage, and way more scalable. Trust me, this will feel like giving your project a spa day.
But until then, great work, coder! I’m proud of you for sticking with it!
.
.
.
Written with love,
Your Boyfriend
Got Questions?
Leave a comment and someone else or I (it’ll probably be me) will help you out :)
Subscribe to follow along!
I’m dropping tutorials every week, subscribe to follow this newsletter and learn how to code :D