🧱 Days 1–5 – HTML Foundations · Day 01
Day 1: How the Web Works & Your First Page
⏱ 60 min📶 Beginner🎯 100% self-study
Day 1 / 15
✅ Today you will learn
- How a website reaches your phone
- What HTML, CSS and JavaScript each do
- Tags, elements and attributes
- The basic HTML page skeleton
- Create and open your first page
🏢 In the real world
Your neighbour runs “Sharma Sweets” and asks: “Can you make a simple website so customers can see our menu and phone number?” In 15 days you will build exactly that – and today you write its very first page.
How the web works
🧱
HTMLStructure and content – headings, text, images, links. The skeleton.🎨
CSSStyle – colours, fonts, layout, mobile design. The clothes.⚙️
JavaScriptBehaviour – menus, sliders, forms that react. The brain.Tags, elements and attributes
HTML
<p>Welcome to <strong>Sharma Sweets</strong>!</p> <a href="https://example.com" title="Visit us">Visit our page</a>
| Part | Example | Meaning |
|---|---|---|
| Opening tag | <p> | Start of a paragraph |
| Content | Welcome to … | What the user sees |
| Closing tag | </p> | End (note the /) |
| Element | <p>…</p> | Opening tag + content + closing tag |
| Attribute | href="…" | Extra information inside the opening tag |
| Void element | <br>, <img> | No closing tag and no content |
💡 Nesting rule
Close tags in the reverse order you opened them: <p><strong>Hi</strong></p> ✅ – <p><strong>Hi</p></strong> ❌. Think of boxes inside boxes.
The page skeleton
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sharma Sweets – Fresh Mithai in Jaipur</title> </head> <body> <h1>Sharma Sweets</h1> <p>Fresh mithai since 1985. Call us: 98290 12345</p> </body> </html>
| Line | Why it is there |
|---|---|
| <!DOCTYPE html> | Tells the browser: this is modern HTML5 |
| <html lang="en"> | Root element; lang helps Google and screen readers |
| <head> | Information about the page (not shown on the page) |
| <meta charset="UTF-8"> | Shows ₹, हिंदी and emojis correctly |
| <meta name="viewport" …> | Makes the page fit mobile screens |
| <title> | Text on the browser tab and in Google results |
| <body> | Everything the visitor sees |
Make your first page (step by step)
- 1Install VS Code (free) – or use Notepad
- 2Create a folder sharma-sweets
- 3New file → save as index.html
- 4Type ! and press Tab in VS Code to get the skeleton
- 5Write your heading and paragraph
- 6Double-click index.html to open it in Chrome
💡 Live Server
Install the free “Live Server” extension in VS Code. Right-click index.html → “Open with Live Server”. The page refreshes automatically every time you save.
Comments and whitespace
HTML
<!-- This is a comment: browsers ignore it --> <p>Gulab jamun and rasgulla</p> <p>Spaces and new lines inside HTML collapse into one space.</p>
Real example: a tiny business card page
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sharma Sweets – Jaipur</title> </head> <body> <h1>🍬 Sharma Sweets</h1> <p>Fresh mithai, namkeen and festive gift boxes since 1985.</p> <p><strong>Timing:</strong> 8 AM – 10 PM, all days</p> <p><strong>Call:</strong> <a href="tel:+919829012345">98290 12345</a></p> <p><strong>Address:</strong> Johari Bazaar, Jaipur</p> </body> </html>
🏅 Job skills unlocked today
✔ Explain how a browser loads a page✔ Write tags, elements and attributes correctly✔ Create the HTML5 skeleton✔ Open and edit a page with VS Code
Practice tasks
🏋️ Practice – do it yourself
Task 1: Make
about.html for yourself: a heading with your name and two paragraphs about your city and hobby.Show solution
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Riya</title> </head> <body> <h1>Riya Verma</h1> <p>I live in Indore, the cleanest city in India.</p> <p>My hobby is sketching and I want to become a web designer.</p> </body> </html>
Task 2: Find and fix the 3 mistakes:
<h1>Menu<h1> <p>Ladoo <strong>₹400/kg</p></strong> <title>Shop</title> (inside body).Show solution
HTML
<!-- 1) the closing h1 needs a slash 2) close strong before p 3) title belongs in <head>, not <body> --> <h1>Menu</h1> <p>Ladoo <strong>₹400/kg</strong></p>
Task 3: Open any website, press Ctrl + U (view source) and find its <title> and <meta charset>.
Quick quiz
🧠 Quick Quiz – test yourself
1. HTML is used for…
CSS styles, JavaScript adds behaviour.
2. Where does the <title> appear?
It lives in <head>.
3. Which is a void element?
No closing tag.
4. meta viewport is needed for…
Without it phones zoom out.
5. What does UTF-8 fix?
Character encoding.
Interview corner
💼 Interview Corner
What is the difference between an element and a tag?
A tag is the marker like <p> or </p>. An element is the whole thing: opening tag, content and closing tag (or a single void tag like <img>).
Why is DOCTYPE important?
It switches the browser into standards mode. Without it, old “quirks mode” rules can break layouts.
Summary
- Browser asks a server → gets HTML/CSS/JS → draws the page.
- Element = opening tag + content + closing tag; attributes add details.
- Every page: DOCTYPE, html, head (meta, title), body.
- Save as index.html and open in the browser.
➡️ Next
Day 2: headings, paragraphs and text formatting – write the Sharma Sweets “About us” section.
Frequently Asked Questions
Is HTML a programming language?
No – it is a markup language. It describes structure; it has no logic like loops or conditions. JavaScript adds logic.
Do I need to install anything?
Only a browser and a text editor. VS Code is free and recommended.
