Chapter 1: HTML and CSS Home

What actually is the “Home” in HTML + CSS world?

The homepage is:

• The very first page almost everyone sees when they type your website address (example: https://www.yourname.com)
• The digital front door of your site
• Usually the place that answers:
  • Who are you / what is this website?
  • What do you offer?
  • Where should I go next? (navigation)

Technically speaking:

Most web servers (Apache, Nginx, Vercel, Netlify, GitHub Pages, etc.) follow this rule:

When someone visits a folder (especially the root folder /) and does not write any filename → the server automatically looks for a special default file.

The most common default names (in this order on most servers):

1. index.html
2. index.htm
3. home.html
4. default.html

→ index.html wins almost everywhere today.

So when you type:

→ server thinks: “no file name → let me give them index.html”

That’s why we almost always name the homepage file index.html.

Real-life comparison (very Indian style 😄)

Think of your website like your house in Hyderabad:

• The gate + nameplate = domain name (yourname.com)
• The main front door = index.html
• If someone rings the bell and says nothing extra → you open the main door (not the kitchen door or bedroom door)
• If they say “take me to photos” → you open another door (photos.html)

Naming it home.html is like writing “Main Door” on the door instead of just opening the front one — it works only if you tell the server “hey, my default door is called home.html” (possible but extra work and not standard).

Let’s build a proper index.html homepage together (2026 modern style)

Create two files in one folder:

1. index.html
2. style.css

index.html (copy-paste this)

style.css (modern, clean look)

Save both files → double-click index.html (or open with Live Server in VS Code)

You now have a proper modern homepage!

Quick Summary Table – Homepage vs Normal Page

Your mini-challenge today

1. Change the name in <h1>Hello! I’m <span>Webliance</span></h1> to something fun
2. Add one more link in the nav (example: <a href=”#skills”>Skills</a>)
3. Change hero background gradient colors (try #8b5cf6 → #d946ef)
4. Add your real photo below the subtitle (use <img src=”your-photo.jpg” alt=”Webliance smiling” class=”avatar”> and style it round)

Tell me how it looks — or say “next → make it mobile friendly” or “add project cards” or “teach Flexbox now” 🚀

Keep building! You’re doing awesome. Chai break ho gaya? ☕😄