BitWithBite
Full-Stack Worksheet
📄 HTML Document Structure
SCORE___ / 20
NameClassDate
After this worksheet you can
Write the HTML5 boilerplateExplain doctype and headUse meta viewportStructure a basic page📚 Quick Recap
🎯 What you'll practice: The doctype, html/head/body structure, and required meta tags.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1The doctype declaration is written as:
2Which element holds the visible page content?
3The viewport meta tag is needed for:
4The lang attribute on <html> mainly helps:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The charset used in modern HTML documents is .
6The <> element sets the text shown in the browser tab.
7Write the full HTML5 boilerplate from memory.
8What's the difference between <head> and <body>?
9Why must the viewport meta tag come before any CSS that uses media queries?
🚀 Section C · Challenge ● CHALLENGE 5
10A page looks fine on desktop but is zoomed-in and broken on mobile. What single line is most likely missing, and why does it fix the problem?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-C 3-B 4-B | 5 = UTF-8 6 = title 7 = <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Page Title</title></head><body></body></html> 8 = head holds metadata not shown on the page (title, links, charset); body holds everything the user actually sees 9 = Because the viewport tag defines the layout width the browser uses before any responsive CSS breakpoints are evaluated | 10 = The missing meta viewport tag — without it, mobile browsers render the page at a fixed desktop-width virtual viewport and then zoom to fit, ignoring any responsive CSS.