My girlfriend's guide to coding - Day 2: HTML Basics

Daily bite-size tutorials for my girlfriend who want's to learn how to code!

Jun 16, 2025

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

To achieve our goal of creating your personal website, we need to learn how to write code.

But before we write, we must first learn to read code.

Like all languages, code is the medium through which meaning is conveyed between two entities. In English, that would be a speaker conveying meaning to another speaker; In programming, it would be you communicating with a computer.

Luckily for you, even though programming languages have different syntax (grammar and structures) from English, they're still written in English! Which means all you really need to learn is the syntax.

Today we’ll be familiarising ourselves with computer syntax by starting to read HTML!

If you're reading this on a computer web browser, right-click your page and select "Inspect" or "Inspect Element".

That "Elements" panel that popped up on the right? That's HTML!

Don't panic, we are not reading all that LOL.

HyperText Markup Language (HTML) is basically a document that contains all the instructions to tell a browser how to render a page. At its core, HTML uses "tags" like <div> to create containers which has information in them (i.e. text, pictures, or colours), and the computer puts these containers on the screen to create what you see on the webpage.

Containers? Tags? Div? What are these hieroglyphs?

Don't worry, we're going to look at some examples :)

Basic HTML Concepts

Let's look at this super simple HTML document. We have the texts "Container One" and "Container Two," each wrapped in its own <div> tag.

div stands for divider. Any tag in HTML is formed by an opening tag (in this case <div>) and a closing tag, denoted with a ‘/‘ (in this case </div>). Each tag must have a opening and closing tag, otherwise your page would break.

```

<div>Container One</div>
<div>Container Two</div>

```

If we gave this HTML file to a web browser, below is kind of what you would see. I say kind of because first, I added colours to make it easier to see, which isn't included in the script above. Second, the default attributes of <div> tags are actually a bit more complicated (we will get to that later), but for now, just imagine that adding a <div> will create boxes that fill the page equally.

If we add another container, it will split the web page into three equal rows like so.

```

<div>Container One</div>
<div>Container Two</div>
<div>Container Three</div>

```

As you can see, each time we are adding a <div> tag to our HTML document, we are adding another container to our webpage.

But that’s just the basics. <div> tags are really cool because they can be nested.

That means you can place one tag inside another tag, like this:

```

<div>Container 1<div>Child Container 1</div><div>Child Container 2</div></div>
<div>Container 2</div>

```

But this is very difficult to read, so in HTML we use a new line for each <div> you add (unless they begin and end on the same line). We also indent with space to make it readable. Like this:

If you’re reading this on your phone, Substack compresses the code so it’s still really ugly. I recommend reading it on a computer.

```

<div>Container 1
    <div>Child Container 1</div>
    <div>Child Container 2</div>
</div>
<div>Container 2</div>

```

As you can see, by nesting child containers 1 and 2 in Container One, they only expand to fill Container One.

In case you were wondering, "Why am I seeing any red? Shouldn't child containers 1 and 2 fill the whole thing?"

Yes, you are right, in typical circumstances you won't see the red bits, but in this case the text "Container One" is included in the <div>, so the space is actually shared between the text "Container One" and the two child containers, hence why you see the red.

If I got rid of the text "Container One" in the first <div> it would look like this:

```

<div>
    <div>Child Container 1</div>
    <div>Child Container 2</div>
</div>
<div>Container 2</div>

```

As you can see, the nested containers are created within the parent container, and you don’t see any red because the children's container fills it up.

Explaining nesting in 3D

If you’re having a hard time understanding, don’t stress. It took me maybe 2 weeks to fully understand containers when I was doing it.

Here’s another way to understand containers and nesting, but this time in 3-dimensional space.

Think of each container as a cardboard box, and what’s rendered on your website is a top-down view of that box.

Nesting containers just means adding more boxes into your box. In this case, you’re adding child 1 and child 2 into your box.

When you look at the box from top down (i.e. when your web page renders), you won’t see the parent box, only the child boxes. However, the parent box is still there and it affects child boxes 1 and 2.

If you increase the size of the parent box, child 1 and 2 will also increase in size because they will stretch out to fill the parent box.

Some Housekeeping

Before we start with the exercise, remember how I said the pictures above are kind of what you will see if you run that example HTML script?

The default behaviour of containers is to span (fancy tech word for expand) across the page, but only be as tall as it's contents.

So in reality, this code will render this (colours added for clarity):

```

<div>Container One</div>
<div>Container Two</div>

```

As you can see, the container spans across the whole page, but is only as tall as the text within. I added some extra behaviours in the examples at the beginning to make understanding the core functionality of <div> tags a bit easier.

Keep this in mind when you're doing the exercise.

Subscribe to follow along!

I’m dropping tutorials every week, subscribe to follow this newsletter and learn how to code :D

Exercise: Creating an HTML Document

Open up Cursor to your "Coding with Remus" Folder
In the left panel (if it's hidden, press cmd + B or ctrl + B), create a new file called hello-world.html
In your document, write and save this in your hello-world.html file:

```

<div>Hello</div>
<div>World</div>

```

Cursor has an autocomplete feature, if that’s annoying, you can switch it off here.

Now go to your "Coding with Remus" with File Explorer or Finder, and find the hello-world.html file.
Right-click the file, select "Open with", and choose the web browser you use.
This should open up the HTML document in a web browser, and you should see "Hello World" on separate lines.
Go add more <div> tags to your document and play around with it. Try adding nested <div> tags. Whenever you make new changes, make sure you save the document and reload the webpage to see your changes.

Need Help?

If at any point you get lost, you can use Cursor’s AI assistant to help you! You can open the AI panel with option+cmd+B or ctrl+alt+B.

Secret Tip

You can add background colour to your <div> tags by adding this inside the tag itself:

```

<div style="background-color: red">Hello</div>
<div style="background-color: green">World</div>

```

Next time

Yippee! You just wrote your first HTML document! You go girl~ Keep killing it ;)

Come back next time, and we will jump into the different types of tags there are, and we will look at some more HTML document structures.

For now, you should feel proud that you know how <div> tags work, and you can get a browser to render some text for you! See you soon :)

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

Remus's guide to Everything

Discussion about this post