Lesson1

Lesson 1: HTML Basics – Your First Step Toward Internet Domination (Now with a Side of Caddy Server!)

Welcome, budding web overlord! Today, we’re diving into the wonderful world of HTML, the not-so-secret sauce behind every website. You’ll be creating your very first web page (yes, for real!), and if you’re feeling fancy, we’ll even show you how to host it locally using Caddy. But don’t stress, Caddy isn’t essential for learning HTML—it’s just here to make you look extra cool. Ready? Let’s get started!

Step 1: What Is HTML?

HTML (Hypertext Markup Language) is the backbone of every website. It’s the language that tells browsers how to display content like text, images, and links. Think of it like a recipe for your website: you add ingredients (content), and HTML shows your browser how to cook it up just right.

Now that you know what HTML is, let’s get our hands dirty and start building a web page!

Step 2: Writing HTML (Pick Your Favorite Text Editor)

Before we start coding, you need a place to write your HTML. You can open VIM like me (if you’re feeling like a command-line pro), or go with VS Code if you prefer a modern, feature-rich environment. Honestly, any text editor will do—even Notepad if you’re feeling nostalgic (though you’ll probably want something with syntax highlighting because, well, life’s easier that way).

Here’s the basic structure of an HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>Your First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Look at me, I’m coding and serving my webpage like a pro!</p>
</body>
</html>

What’s Going On Here?

<!DOCTYPE html>: This tells the browser, “Hey, this is an HTML5 document!”
<html>: It’s like a cozy wrapper for all your code. Everything goes inside here.
<head>: This is where all the behind-the-scenes info goes (like the page title—yawn).
<title>: This is what shows up in the browser tab.
<body>: This is where all the visible content goes—text, images, you name it.

Now that you have your first web page, let’s crank things up a notch and host it locally!

Step 3: Installing Caddy (Because You’re Awesome)

Why Caddy?

You don’t need Caddy to learn HTML, but it’s a cool way to see your web page served on your local network. Think of it as the finishing touch that makes you look like a coding rockstar. Plus, it’s ridiculously easy to set up.

Installing Caddy on Ubuntu

Update your system:

sudo apt update && sudo apt upgrade -y

Install Caddy:

Run this one simple command:

sudo apt install caddy

Check if it’s working:

caddy version

You should see the version number pop up. Success!

Installing Caddy on Arch Linux

Update your system:

sudo pacman -Syu

Install Caddy:

Install Caddy with pacman:

sudo pacman -S caddy

Verify it’s installed:

caddy version

Boom! You’re all set with Caddy on Arch Linux. Now let’s use it to serve your web page.

Step 4: Running Your First HTML Page with Caddy

Create a directory for your HTML file:

mkdir ~/my-website
cd ~/my-website

Create your first HTML file:

Save the following code as index.html in your ~/my-website folder:

<!DOCTYPE html>
<html>
<head>
    <title>My First Caddy-Served Web Page</title>
</head>
<body>
    <h1>Welcome to My First Web Page</h1>
    <p>This page is being served by Caddy. How cool is that?</p>
</body>
</html>

Run Caddy:

Navigate to your website folder and run:

caddy file-server --listen :8080

Caddy will now serve your web page on port 8080. Let’s check it out!

View your page:

Open your browser and go to http://localhost:8080. You should see your beautiful web page up and running. Nice job!

Step 5: Your Task – Build and Host Your Own Web Page

Now it’s time for you to shine. Build your own web page and host it with Caddy. Include:

A bold heading with your name.
A paragraph explaining why you’re learning HTML (to rule the internet, obviously).
A link to your favorite website (because why not?).

Here’s a quick example to get you started:

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to My Awesome Website</title>
</head>
<body>
    <h1>Hello, I'm [Your Name]</h1>
    <p>I’m learning HTML to create the next big thing (or at least avoid breaking my own website).</p>
    <a href="https://www.example.com">Check out my favorite website!</a>
</body>
</html>

Run the Caddy server again:

caddy file-server --listen :8080

Visit http://localhost:8080 and admire your work. You’ve just built and hosted your very own web page!

In Summary:

You’ve mastered the basics of HTML and built your first web page.
You’ve installed and used Caddy to host your web page locally (because why not show off a little?).
But remember, Caddy is just for fun—it’s not essential for learning HTML. It’s here to make you look extra fancy.

Next, we’ll explore more ways to make your web pages exciting, from text formatting to lists. Until then, bask in the glory of your locally hosted website!