🗒 Cheat Sheet← Lesson
BitWithBite
Full-Stack Worksheet

💼 Project 1: Portfolio

Chapter: HTML5 Foundations · Level ★★☆ · Time: 40 min
SCORE___ / 20
NameClassDate
After this worksheet you can
Plan a page's semantic structureApply lessons 1–5 togetherSelf-review against a checklistWrite accessible markup
📚 Quick Recap

🎯 What you'll practice: Planning and reviewing a full semantic HTML portfolio page before you build it.

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

1The portfolio's nav bar should use:
2Every image on the page must have:
3The skills section is best marked up as:
4A "mailto:" link is used in the:

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5The portfolio page should have exactly <h1> element(s).
6Projects should be listed as at least items.
7List the 6 required sections of the portfolio checklist in order.
8Why should the projects section use <article> for each project?
9Write the anchor link syntax to jump the nav to a section with id="projects".

🚀 Section C · Challenge ● CHALLENGE 5

10Before writing any code, outline (tag names only) the full semantic structure of your portfolio from <header> to <footer>.
💭 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-B   2-B   3-B   4-B  |  5 = one   6 = three   7 = nav, hero, about, skills, projects, contact (footer also required)   8 = Each project is a standalone, self-contained piece of content that could be extracted or syndicated on its own — the definition of <article>   9 = <a href="#projects">Projects</a> with the target section having id="projects"  |  10 = header>nav, main>section(about), section(skills>ul), section(projects>article x3), section(contact), footer — matching the checklist's required sections in semantic order.

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.
🗒 Cheat Sheet