🚀 Days 11–15 – Pro Skills & Projects · Day 13
Day 13: Validation, DevTools & Free Hosting
⏱ 90 min📶 Intermediate🎯 100% self-study
Day 13 / 15
✅ Today you will learn
- Validate HTML like a professional
- Debug with Chrome DevTools
- Clean folders, file names and comments
- A performance checklist + Lighthouse
- Publish free: GitHub Pages, Netlify, Hostinger
🏢 In the real world
Rohit, a fresher, built a site that looked fine on his laptop. On the client’s phone, images were missing (wrong file-name case), the menu broke (an unclosed div) and it took 9 seconds to load (5 MB photos). Today you learn the habits that stop this – and how to send the client a real live link.
Step 1: validate
Invalid (browser guesses)
- <p>Fresh <b>ghewar</p></b>
- <img src="Ladoo.JPG"> (no alt)
- Two elements with id="menu"
- <div> never closed
Valid
- <p>Fresh <b>ghewar</b></p>
- <img src="ladoo.webp" alt="Besan ladoo">
- Each id is unique
- Every opened tag is closed in order
- 1Open validator.w3.org/nu
- 2Choose “Validate by File Upload” or “by URL”
- 3Fix Errors first (red), then Warnings
- 4Re-check until “No errors”
- 5In VS Code, install the “HTMLHint” extension to catch mistakes while typing
Step 2: Chrome DevTools
| Shortcut / panel | Use it to |
|---|---|
| F12 or Ctrl+Shift+I | Open DevTools |
| Ctrl+Shift+C | Click any element to inspect its HTML & CSS |
| Elements | Edit HTML live, see the DOM tree, find unclosed tags |
| Console | Red errors, e.g. 404 for a missing image |
| Network | See every file, size and load time (spot 5 MB photos) |
| Ctrl+Shift+M | Device mode: test iPhone/Android sizes |
| Lighthouse | Scores for Performance, Accessibility, Best Practices, SEO |
Step 3: a clean project structure
Folder structure – sharma-sweets/
sharma-sweets/ ├── index.html ← home page MUST be named index.html ├── menu.html ├── about.html ├── contact.html ├── thank-you.html ├── 404.html ├── css/ │ └── style.css ├── js/ │ └── main.js ├── images/ │ ├── logo.svg │ ├── kaju-katli-800.webp │ └── kaju-katli-400.webp ├── favicon.ico ├── robots.txt └── sitemap.xml
- File names: lower-case, hyphens, no spaces –
kaju-katli.webp, neverKaju Katli.JPG. Linux servers are case-sensitive! - Relative paths (
images/logo.svg) so the site works on any domain. - Indent nested tags by 2 spaces; one block element per line.
- Lower-case tags and attributes, always quote attribute values.
- Comment big sections:
<!-- ===== MENU ===== -->– but never leave passwords or private notes in comments: anyone can View Source.
Step 4: performance checklist
🖼️
ImagesWebP, resized (≤ 200 KB), width/height set, loading="lazy" below the fold.📜
ScriptsUse defer; avoid huge libraries for small tasks.🎨
CSSOne stylesheet in the head; remove unused CSS.🌐
ServerHTTPS, gzip/brotli compression, browser caching.💡 Core Web Vitals
Google measures LCP (main content visible, target ≤ 2.5 s), INP (response to taps, ≤ 200 ms) and CLS (layout jumping, ≤ 0.1). Setting width/height on images alone fixes most CLS problems.
Step 5: put it live
| Option | Cost | Best for |
|---|---|---|
| GitHub Pages | Free | Portfolios; you get username.github.io |
| Netlify / Vercel | Free tier | Drag-and-drop a folder; free HTTPS; forms on Netlify |
| Shared hosting (Hostinger etc.) | ₹70–₹300/month | Client sites with own domain, e-mail, PHP |
| Domain name (.in / .com) | ₹500–₹1,000/year | sharmasweets.in – point it to any host above |
- 1Create a free GitHub account
- 2New repository named
yourname.github.io(public) - 3“Add file → Upload files” – drag your whole site folder (index.html at the top level)
- 4Commit changes
- 5Settings → Pages → Branch: main → Save
- 6Open https://yourname.github.io after 1–2 minutes 🎉
🧠 Before you hand it over
Test on a real phone, click every link, submit every form, check the 404 page, run the validator and Lighthouse, and submit sitemap.xml in Google Search Console.
HTML – a friendly 404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page not found | Sharma Sweets</title>
<meta name="robots" content="noindex">
</head>
<body>
<main>
<h1>Oops! This sweet box is empty 🍬</h1>
<p>The page you wanted has moved or never existed.</p>
<p><a href="/">Back to home</a> · <a href="/menu.html">See today’s menu</a></p>
</main>
</body>
</html>🏅 Job skills unlocked today
✔ Validate HTML and fix errors✔ Debug pages with DevTools✔ Organise files with clean naming✔ Optimise performance and publish live
Practice tasks
🏋️ Practice – do it yourself
Task 1: Fix every error in this snippet.
Show solution
HTML
<!-- before: <P>Order <B>now</P></B> <img src="Ladoo Box.JPG"> <a href=menu.html>click here --> <p>Order <b>now</b></p> <img src="/assets/img/tutorials/html/ladoo-400.webp" alt="Besan ladoo gift box" width="160" height="120"> <a href="menu.html">See our full sweets menu</a>
Task 2: Run Lighthouse on your Day 8 page in Device mode (mobile) and note all four scores.
Task 3: Publish any page you have built so far on GitHub Pages and share the link with a friend.
Quick quiz
🧠 Quick Quiz – test yourself
1. The home page file should be named…
Servers open index.html by default.
2. Images vanish on the server but work locally. Most likely cause?
Linux is case-sensitive.
3. Which DevTools panel shows file sizes?
With timing too.
4. Setting width and height on images mainly improves…
Prevents layout jumps.
5. Free HTTPS hosting for a portfolio?
Netlify too.
Interview corner
💼 Interview Corner
How do you improve a slow website?
Measure first (Lighthouse/Network). Then compress and resize images to WebP with dimensions and lazy loading, defer scripts, remove unused CSS/JS, enable compression and caching, use a CDN, and re-measure Core Web Vitals.
Why validate HTML if the browser shows it fine?
Browsers silently guess around errors, but different browsers, screen readers and search engines guess differently. Valid markup behaves predictably, is accessible and easier to maintain.
Summary
- Validate, then debug with DevTools.
- Lower-case hyphenated file names and a clean folder structure.
- Optimise images, defer scripts, aim for Lighthouse 90+.
- Publish free on GitHub Pages or Netlify; add a 404 page.
➡️ Next
Day 14: mini project – build and publish your own personal portfolio page with everything you have learnt.
Frequently Asked Questions
Do I need to buy a domain?
Not for learning – username.github.io is free. For a business, a ₹500–₹1,000/year .in domain looks far more trustworthy.
Can forms work on GitHub Pages?
GitHub Pages has no server, so use Netlify Forms, Formspree or Google Forms for the action URL.
