Labels

Learning HTML in 10 days : From beginner to making websites. Part 1

 


Coding is an essential skill in today's world. Most jobs require it on your application and forget jobs - there's so much you can do learning how to code! Building websites , apps and games all by yourself for free! But here comes the issue: learning how to code. HTML is the simplest coding language but don't underestimate it - there are SO MANY possibilities .

⚠️ NOTE : Any advanced coding or animations will not be covered. I cannot teach a topic I myself am not familiar with and this is a beginner series only :)

🌐 What Even Is HTML?

HTML stands for HyperText Markup Language. It’s the skeleton of every website. While CSS makes it pretty and JavaScript makes it interactive, HTML is the structure—like the walls and doors in a house.

Think of HTML like LEGO bricks: You snap together blocks (tags) to build a structure (a website).

🧠 What Will You Learn in This Series?

Here’s what we’ll cover over the next 10 days:

  • Day 1: What is HTML & how websites work along (you’re here!)

  • Day 2: Basic tags

  • Day 3: How to beautify your webpage without CSS

  • Day 4: Lists,Tables & forms – the neat stuff

  • Day 5: CSS – adding a splash of colour

  • Day 6: Divs & spans – the hidden heroes

  • Day 7: Creating your first webpage layout along with more advanced but necessary layout

  • Day 8: Links and images

  • Day 9: More on CSS

  • Day 10: Making your own website!

  • So, let’s get started!(FINALLY😅)

🏷️ Understanding Tags: Paired Tags vs. Empty Tags

HTML uses tags to mark up the content on a page. But not all tags work the same way. There are two main types:

✅ 1. Paired Tags (aka Container Tags)

These tags come in pairs—an opening tag and a closing tag—and wrap around content.

Structure:

html

<openingtag>Content goes here</closingtag>

Examples:

html
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<strong>This is bold</strong>

You must always close the tag, or things can break or look weird!

🚫 2. Empty Tags (aka Self-Closing Tags)

These tags don’t wrap around anything and don’t have a closing tag. They just sit there and do their job.

Structure:

html
<tagname>

Examples:

html
<br>    <!-- Line break -->
<hr>    <!-- Horizontal line -->
<img src="image.jpg" alt="An image">  <!-- Image -->

These are like instant tools. You don't need to open and close them—they just work.

⚠️ In older HTML or XML-style HTML, you might see them written like <br /> or <img />. But in modern HTML5, the / at the end is optional. I will only be teaching HTML 5


Basic syntax and structure of HTML

All HTML uses the same basic structure/syntax and that is 
<!doctype html>
<html>
<head>
<title> Hello World </title>
</head>
<body>
---------Content---------------
</body>
</html>

You need to start your code with , you got no choice.
<!doctype html>
<html>

Inside the <head> element you have all the stuff that isnt visible on your webpage like metadata , CSS code , etc.

The <title> element , obviously is the title of your webpage.

In the <body> element you have all the fun stuff - the content visible on your webpage.

Since these are all paired tags except for <!doctype html> , you also have the closing tag - </tagname>

🎉 You Made It Through Day 1!

I know it might feel like: Wait, that’s it?!
But trust me — we’re starting small on purpose.

You’re on a tight schedule (10 days!), and I don’t want to overwhelm you on Day 1. Burnout is real — and totally unnecessary. The goal is to learn, not stress. 🧘

See you tomorrow for Day 2: Basic Tags — where you’ll start writing real HTML that shows up on screen! 💌

Labels:

Comments

Post a Comment

Popular Posts