Hands-on STEM, coding, robotics and digital skills — in Abuja and online.Explore certifications
UNIQUE MAGNIFIER SOLUTIONSSTEM learning
Store Student portalPortal

UMS Learning Path

Web Design/FrontEnd: HTML, CSS & JavaScript

Beginner 8 weeks $111.30 CodingDesign

Build a simple, responsive website and learn how pages come together.

Web Design/FrontEnd: HTML, CSS & JavaScript

Beginner · 8 weeks

Paid course

Build a simple, responsive website from scratch. You learn HTML for structure, CSS for style and layout, and a little JavaScript for interaction.

You finish with a small multi-page site that works on phones and computers.

324 lessons8 weeks$111.30

Create a student account or log in to enroll and track your progress.

Go to student portal

Your learning path

Lessons and quizzes unlock in sequence.

324 steps
Show all 324 steps
  1. 1Week 1 · Welcome to the Web — How Websites Work & Setting Up Your WorkshopLesson + quiz
  2. 2How a page reaches your screen: your browser asks, the server answers with files.Lesson + quiz
  3. 3EXAMPLELesson + quiz
  4. 4HTMLLesson + quiz
  5. 5CHECKPOINTLesson + quiz
  6. 6conversation. Mix-up: in freelance work, “the client” means the payingLesson + quiz
  7. 7Your turn — mini challenge (about 7 minutes)Lesson + quiz
  8. 8AI ASSIST (OPTIONAL — EXPLANATIONS ONLY THIS WEEK)Lesson + quiz
  9. 9Week 2 · The Skeleton of Every Page & Text TagsLesson + quiz
  10. 10Build it — the guided practicalLesson + quiz
  11. 11COMMON MISTAKE — HEADINGS AS FONT SIZESLesson + quiz
  12. 12HTMLLesson + quiz
  13. 13Self-closing (void) tag — a tag with no content and no closing tag: ,Lesson + quiz
  14. 14Your turn — mini challenge (about 7 minutes)Lesson + quiz
  15. 15AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  16. 16Week 3 · Links, Images & File PathsLesson + quiz
  17. 17Build it — the guided practicalLesson + quiz
  18. 18HTMLLesson + quiz
  19. 19CHECKPOINTLesson + quiz
  20. 20Terms you met todayLesson + quiz
  21. 21Common mistakes & quick fixesLesson + quiz
  22. 22WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  23. 23Week 4 · Lists & Tables — Organising InformationLesson + quiz
  24. 24HTMLLesson + quiz
  25. 25COMMON MISTAKE — CLOSING TAGS IN THE WRONG ORDERLesson + quiz
  26. 26HTMLLesson + quiz
  27. 27Terms you met todayLesson + quiz
  28. 28List looks broken / items Wrong closing order of Close the inner list before theLesson + quiz
  29. 29AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  30. 30Week 5 · Forms — Collecting Information from VisitorsLesson + quiz
  31. 31Step 2 — A labelled text box. Always pair a with its input, using theLesson + quiz
  32. 32HTMLLesson + quiz
  33. 33Step 7 — The SEND button — and required . A submit button sends the form.Lesson + quiz
  34. 34action / method — form attributes saying WHERE the data goes and HOWLesson + quiz
  35. 35Common mistakes & quick fixesLesson + quiz
  36. 36WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  37. 37Week 6 · Meet CSS — Painting Your PagesLesson + quiz
  38. 38Step 2 — Create and link style.css . Create week-06 with an index.html (yourLesson + quiz
  39. 39CSSLesson + quiz
  40. 40Step 7 — Tidy the links. Links arrive blue and underlined — the browser’sLesson + quiz
  41. 41Selector — the part choosing WHICH elements get styled ( h2 , .card ,Lesson + quiz
  42. 42Your turn — mini challenge (about 7 minutes)Lesson + quiz
  43. 43AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  44. 44Week 7 · The Box Model — Every Element Is a BoxLesson + quiz
  45. 45HTMLLesson + quiz
  46. 46Step 4 — BORDER — the frame, and rounded corners. A border needs threeLesson + quiz
  47. 47your box live: content in blue, padding in green, border, and margin in orange —Lesson + quiz
  48. 48Border — the visible line wrapping padding and content. Mix-up: settingLesson + quiz
  49. 49Your turn — mini challenge (about 7 minutes)Lesson + quiz
  50. 50AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  51. 51Week 8 · Backgrounds, Buttons & DisplayLesson + quiz
  52. 52CSSLesson + quiz
  53. 53CSSLesson + quiz
  54. 54Works on both and . Notice display: inline-block —Lesson + quiz
  55. 55Step 9 — Assemble a hero section, properly. Combine everything into oneLesson + quiz
  56. 56absence reads as “broken”. (Accessibility note: never hide critical infoLesson + quiz
  57. 57Your turn — mini challenge (about 7 minutes)Lesson + quiz
  58. 58KEEP PRACTISING & SELF-CHECKLesson + quiz
  59. 59Week 9 · Beginner Project — Build Your Profile PageLesson + quiz
  60. 60skills with levels. Do not skip this — the sketch is where the project happens; theLesson + quiz
  61. 61HTMLLesson + quiz
  62. 62& is how you write a literal ampersand in HTML — a tiny detail that marksLesson + quiz
  63. 63CHECKPOINTLesson + quiz
  64. 64& — the HTML code for a literal ampersand. Why it matters: a symbolLesson + quiz
  65. 65WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  66. 66KEEP PRACTISING & SELF-CHECKLesson + quiz
  67. 67Week 10 · Flexbox — Lining Things Up Like a ProLesson + quiz
  68. 68HTMLLesson + quiz
  69. 69CSSLesson + quiz
  70. 70CSSLesson + quiz
  71. 71TERMS YOU MET TODAYLesson + quiz
  72. 72Common mistakes & quick fixesLesson + quiz
  73. 73WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  74. 74Week 11 · CSS Grid — Architecting Whole PagesLesson + quiz
  75. 75Step 2 — Your first grid and the fr unit. Make six coloured div s inside aLesson + quiz
  76. 76Step 5 — Rows under control. Columns are the usual need, but rows matter forLesson + quiz
  77. 77Step 7 — Aligning inside grid. Grid has its own alignment that reuses Flexbox’sLesson + quiz
  78. 78TERMS YOU MET TODAYLesson + quiz
  79. 79Your turn — mini challenge (about 7 minutes)Lesson + quiz
  80. 80AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  81. 81Week 12 · Responsive Design — One Site, Every ScreenLesson + quiz
  82. 82Add it to every page you build from today. “width = the device’s real width, at 1×Lesson + quiz
  83. 83Read it as a sentence: “when the screen is at least 768px wide, also apply this.”Lesson + quiz
  84. 84CSSLesson + quiz
  85. 85Note the pattern: no media query = phone, queries add the desktop view. YouLesson + quiz
  86. 86Device toolbar — DevTools’ phone/tablet simulator ( Ctrl + Shift + M ).Lesson + quiz
  87. 874. From 768px: photo beside the intro text ( .intro { display: flex; } ).Lesson + quiz
  88. 88KEEP PRACTISING & SELF-CHECKLesson + quiz
  89. 89Week 13 · Transitions, Transforms & Animations — Bringing Pages to LifeLesson + quiz
  90. 90Hover the card: it rises 6 pixels over a third of a second. That tiny lift is theLesson + quiz
  91. 91CSSLesson + quiz
  92. 92CSSLesson + quiz
  93. 93COMMON MISTAKE — TRANSITIONING EVERYTHING, FOREVERLesson + quiz
  94. 94box-shadow — the drop shadow that sells a lift. Why it matters: shadow +Lesson + quiz
  95. 95You are finished when: hovering feels instant-yet-smooth, the pulse isLesson + quiz
  96. 96KEEP PRACTISING & SELF-CHECKLesson + quiz
  97. 97Week 14 · JavaScript — Giving Your Page a BrainLesson + quiz
  98. 98HTMLLesson + quiz
  99. 99Step 5 — Variables — labelled boxes. A variable is a labelled box holding aLesson + quiz
  100. 100The single most important insight of the day: “30” and 30 are different things.Lesson + quiz
  101. 101CHECKPOINTLesson + quiz
  102. 102String / Number / Boolean / undefined — the core data types: text inLesson + quiz
  103. 103Your turn — mini challenge (about 7 minutes)Lesson + quiz
  104. 104KEEP PRACTISING & SELF-CHECKLesson + quiz
  105. 105Week 15 · Decisions & Loops — Teaching Pages to ThinkLesson + quiz
  106. 106JSLesson + quiz
  107. 107JSLesson + quiz
  108. 108Trace it once with your finger: i starts at 1 › is 1 <= 5? yes › log › i++ › checkLesson + quiz
  109. 109COMMON MISTAKE — THE ASSIGNMENT TRAPLesson + quiz
  110. 110i++ / n– — shorthand for add-1 / subtract-1. Why it matters: the standardLesson + quiz
  111. 111You are finished when: all four tested scores grade correctly, and the consoleLesson + quiz
  112. 112KEEP PRACTISING & SELF-CHECKLesson + quiz
  113. 113Week 16 · Functions & Events — Reusable MachinesLesson + quiz
  114. 114Step 2 — Parameters — the machine’s input slots. Parameters are namedLesson + quiz
  115. 115JSLesson + quiz
  116. 116JSLesson + quiz
  117. 117CHECKPOINTLesson + quiz
  118. 118Event — something that happens on a page: click , submit , keyup ,Lesson + quiz
  119. 119Your turn — mini challenge (about 7 minutes)Lesson + quiz
  120. 120KEEP PRACTISING & SELF-CHECKLesson + quiz
  121. 121Week 17 · The DOM — Where JavaScript Meets Your PageLesson + quiz
  122. 122Build it — the guided practicalLesson + quiz
  123. 123need tags — and never innerHTML with anything a user typed. (Week 20 showsLesson + quiz
  124. 124JSLesson + quiz
  125. 125CHECKPOINTLesson + quiz
  126. 126textContent — the plain text inside an element; the safe way to read or setLesson + quiz
  127. 127Your turn — mini challenge (about 7 minutes)Lesson + quiz
  128. 128AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  129. 129Week 18 · Intermediate Project — Build a Responsive Business Landing PageLesson + quiz
  130. 130font stack, palette comment. Build structure first, styling second, like Week 9Lesson + quiz
  131. 131Step 5 — Features — the card trio. A Grid of three cards (icon/emoji, h3 , oneLesson + quiz
  132. 132• Console has zero red errorsLesson + quiz
  133. 133QA (quality assurance) — systematically checking a build against realLesson + quiz
  134. 134Your turn — mini challenge (about 7 minutes)Lesson + quiz
  135. 135KEEP PRACTISING & SELF-CHECKLesson + quiz
  136. 136Week 19 · Events Deep-Dive & Bullet- Proof Form ValidationLesson + quiz
  137. 137Add that to any text input and watch the console count your typing. input is theLesson + quiz
  138. 138Whitespace-only input is the sneakiest empty value there is; trim() removes itLesson + quiz
  139. 139JSLesson + quiz
  140. 140JSLesson + quiz
  141. 141Tiny detail; huge professionalism signal. It is the difference between a form thatLesson + quiz
  142. 142matters: the object is the full story of the interaction — learn toLesson + quiz
  143. 143Your turn — mini challenge (about 7 minutes)Lesson + quiz
  144. 144AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  145. 145Week 20 · Arrays, Objects & Modern JavaScriptLesson + quiz
  146. 146JSLesson + quiz
  147. 147JSLesson + quiz
  148. 148Rules: back-ticks (not quotes), ${expression} sockets, and you can do maths orLesson + quiz
  149. 149CHECKPOINTLesson + quiz
  150. 150Object — one thing stored as labelled key: value properties. Why itLesson + quiz
  151. 151Your turn — mini challenge (about 7 minutes)Lesson + quiz
  152. 152KEEP PRACTISING & SELF-CHECKLesson + quiz
  153. 153Week 21 · Fetch API & JSON — Talking to the WorldLesson + quiz
  154. 154EXAMPLELesson + quiz
  155. 155Step 4 — Paint the data. Now combine Week 20 with today: map the fetchedLesson + quiz
  156. 156Step 6 — Things go wrong — catch them. Wi-Fi dies, servers nap, someoneLesson + quiz
  157. 157CHECKPOINTLesson + quiz
  158. 158Promise — an IOU object for a result that arrives later: pending › resolved /Lesson + quiz
  159. 159Your turn — mini challenge (about 7 minutes)Lesson + quiz
  160. 160AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  161. 161Week 22 · Async/Await & Local Storage — Smooth Pages with MemoryLesson + quiz
  162. 162JSLesson + quiz
  163. 163Everything from Week 21 survives the rewrite: peek-before-paint, res.ok , kindLesson + quiz
  164. 164JSLesson + quiz
  165. 165TERMS YOU MET TODAYLesson + quiz
  166. 166Common mistakes & quick fixesLesson + quiz
  167. 167WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  168. 168KEEP PRACTISING & SELF-CHECKLesson + quiz
  169. 169Week 23 · Working Faster with Frameworks — BootstrapLesson + quiz
  170. 170HTMLLesson + quiz
  171. 171Two class names, a designed component. Compare with the button you built inLesson + quiz
  172. 172Read the class list aloud and it is the CSS — your Week 7–10 vocabulary,Lesson + quiz
  173. 173TERMS YOU MET TODAYLesson + quiz
  174. 174Common mistakes & quick fixesLesson + quiz
  175. 175WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  176. 176Week 24 · Git & GitHub — Save, Share & Ship Your WorkLesson + quiz
  177. 177TERMINALLesson + quiz
  178. 178EXAMPLELesson + quiz
  179. 179TERMINALLesson + quiz
  180. 180Commit — a labelled snapshot of your project’s state. Why it matters: theLesson + quiz
  181. 181Your turn — mini challenge (about 7 minutes)Lesson + quiz
  182. 182WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  183. 183KEEP PRACTISING & SELF-CHECKLesson + quiz
  184. 184Week 25 · Accessibility & SEO — Be Found, Be Usable by EveryoneLesson + quiz
  185. 185HTMLLesson + quiz
  186. 186CSSLesson + quiz
  187. 187HTMLLesson + quiz
  188. 188TERMS YOU MET TODAYLesson + quiz
  189. 189Meta description — the ~160-character advert under your title in searchLesson + quiz
  190. 190WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  191. 191KEEP PRACTISING & SELF-CHECKLesson + quiz
  192. 192Week 26 · DevTools Mastery & Performance — Work Like a DetectiveLesson + quiz
  193. 193Read it as a sentence: on line 14 of app.js, the code used a name — greet —Lesson + quiz
  194. 194todo list. Run it on your live Week 24 site. Screenshot your scores — they areLesson + quiz
  195. 195COMMON MISTAKE — “DEBUGGING” BY RANDOM EDITINGLesson + quiz
  196. 196Lazy loading ( loading=”lazy” ) — images load only when scrolled near.Lesson + quiz
  197. 197Find all three using DevTools only — console messages, Elements inspectionLesson + quiz
  198. 198KEEP PRACTISING & SELF-CHECKLesson + quiz
  199. 199Week 27 · Capstone — Build & Launch Your Personal PortfolioLesson + quiz
  200. 200TERMINALLesson + quiz
  201. 201• Keyboard Tab test passes with visible focus (Week 25)Lesson + quiz
  202. 202COMMON MISTAKE — BUILDING THE PORTFOLIO FOREVERLesson + quiz
  203. 203Your turn — mini challenge (about 7 minutes)Lesson + quiz
  204. 204WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  205. 205AI Session 1 · Meet Your AI Pair Programmer — Prompting Like a ProLesson + quiz
  206. 206Step 2 — The 4-part prompt formula. The difference between “make a card”Lesson + quiz
  207. 207Small follow-ups beat one giant prompt — it is a conversation, not an examLesson + quiz
  208. 208COMMON MISTAKE — ONE GIANT PROMPT, THEN BLAMING THE AILesson + quiz
  209. 209Copilot — an AI assistant living inside your editor, suggesting code as youLesson + quiz
  210. 210You are finished when: the navbar runs, sticks, hovers, and behaves correctly atLesson + quiz
  211. 211KEEP PRACTISING & SELF-CHECKLesson + quiz
  212. 212AI Session 2 · Building & Debugging with AI — Trust But VerifyLesson + quiz
  213. 213Step 2 — Generate, run, score it. Paste the spec (wrap it in the 4-part formulaLesson + quiz
  214. 21426 again), and now the intern gets a clean question. Notice: the quality of theLesson + quiz
  215. 215COMMON MISTAKE — ACCEPTING THE FIX YOU CANNOT EXPLAINLesson + quiz
  216. 216Common mistakes & quick fixesLesson + quiz
  217. 217WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  218. 218KEEP PRACTISING & SELF-CHECKLesson + quiz
  219. 219AI Session 3 · From Idea to Live Site — Your 2026 WorkflowLesson + quiz
  220. 220Step 2 — Step B — GENERATE in chunks, not cathedrals. Never request “theLesson + quiz
  221. 221Live in a minute. Then the real test: open it on your phone, tap the feature, andLesson + quiz
  222. 222TERMS YOU MET TODAYLesson + quiz
  223. 223Your turn — mini challenge (about 7 minutes)Lesson + quiz
  224. 224AI ASSIST (META — USE AI ON AI)Lesson + quiz
  225. 225Pro Session 1 · CSS Custom Properties & the Modern CascadeLesson + quiz
  226. 226CSSLesson + quiz
  227. 227CSSLesson + quiz
  228. 228CSSLesson + quiz
  229. 229CSSLesson + quiz
  230. 230start/end terms, so the same CSS serves Arabic, Hebrew and English — aLesson + quiz
  231. 231CHECKPOINTLesson + quiz
  232. 232:is() — a forgiving selector list; weight equals its heaviest member.Lesson + quiz
  233. 233Your turn — mini challenge (about 7 minutes)Lesson + quiz
  234. 234AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  235. 235Pro Session 2 · Fluid Type, Container Queries & Responsive ImagesLesson + quiz
  236. 236Step 2 — The mobile 100vh trap and the fix. On phones, 100vh includesLesson + quiz
  237. 237by side and watch two layouts appear. That experiment converts scepticsLesson + quiz
  238. 238HTMLLesson + quiz
  239. 239CHECKPOINTLesson + quiz
  240. 240Container query — a query against a container’s size, not the viewport’s.Lesson + quiz
  241. 241Your turn — mini challenge (about 7 minutes)Lesson + quiz
  242. 242AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  243. 243Pro Session 3 · Motion, Feedback & Native-Feeling UILesson + quiz
  244. 244Build it — the guided practicalLesson + quiz
  245. 245CSSLesson + quiz
  246. 246HTMLLesson + quiz
  247. 247HTMLLesson + quiz
  248. 248CSSLesson + quiz
  249. 249category of JavaScript libraries; treat as enhancement while Firefox finishesLesson + quiz
  250. 250Your turn — mini challenge (about 7 minutes)Lesson + quiz
  251. 251WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  252. 252KEEP PRACTISING & SELF-CHECKLesson + quiz
  253. 253Pro Session 4 · The Toolchain Bridge: npm, Vite & TypeScriptLesson + quiz
  254. 254TERMINALLesson + quiz
  255. 255the page updates in place without a full reload (HMR, hot module replacement).Lesson + quiz
  256. 256TSLesson + quiz
  257. 257TERMINALLesson + quiz
  258. 258Terms you met todayLesson + quiz
  259. 259ES Modules — the standard import / export module system. Why itLesson + quiz
  260. 260Your turn — mini challenge (about 10 minutes)Lesson + quiz
  261. 261AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  262. 262Pro Session 5 · Performance Engineering & Core Web VitalsLesson + quiz
  263. 263Build it — the guided practicalLesson + quiz
  264. 264HTMLLesson + quiz
  265. 265JSLesson + quiz
  266. 266Then wire the discipline: every new dependency, image or tag must “pay forLesson + quiz
  267. 267JSLesson + quiz
  268. 268TERMS YOU MET TODAYLesson + quiz
  269. 269Byte budget — an explicit limit on every asset type. Why it matters: turnsLesson + quiz
  270. 2704. Re-run both tools; note the three vitals before and after.Lesson + quiz
  271. 271KEEP PRACTISING & SELF-CHECKLesson + quiz
  272. 272Pro Session 6 · Security, Privacy & Shipping SafelyLesson + quiz
  273. 273Build it — the guided practicalLesson + quiz
  274. 274JSLesson + quiz
  275. 275Practical note: CSP punishes inline scripts ( onclick=”” , ) —Lesson + quiz
  276. 276scripts under five, use defer , pin versions where possible, load chat maps onLesson + quiz
  277. 277COMMON MISTAKE — “IT IS ONLY A PORTFOLIO FORM”Lesson + quiz
  278. 278X-Content-Type-Options: nosniff — obey declared content types. Why itLesson + quiz
  279. 279Your turn — mini challenge (about 8 minutes)Lesson + quiz
  280. 280WRAP-UP — TICK WHAT YOU CAN NOW DOLesson + quiz
  281. 281KEEP PRACTISING & SELF-CHECKLesson + quiz
  282. 282Pro Session 7 · React 19: Thinking in ComponentsLesson + quiz
  283. 283Build it — the guided practicalLesson + quiz
  284. 284JSXLesson + quiz
  285. 285JSXLesson + quiz
  286. 286Note the two professional touches: the lazy initialiser (a function passed toLesson + quiz
  287. 287JSXLesson + quiz
  288. 288And React 19.3 ships stable plus addTransitionType — theLesson + quiz
  289. 289COMMON MISTAKE — USING EFFECTS TO COMPUTE STATELesson + quiz
  290. 290Key — stable identity for list items. Why it matters: wrong keys cause stateLesson + quiz
  291. 291Common mistakes & quick fixesLesson + quiz
  292. 2925. npm run build , deploy to Pages, and measure: JS bytes vs your budget,Lesson + quiz
  293. 293KEEP PRACTISING & SELF-CHECKLesson + quiz
  294. 294Pro Session 8 · Global, Accessible, Audit-Ready: i18n, RTL & WCAG 2.2 AALesson + quiz
  295. 295For inline foreign text, mark it too: je ne sais quoiLesson + quiz
  296. 296JSLesson + quiz
  297. 297Step 5 — WCAG 2.2 AA: what is new and how to actually pass it. The fourLesson + quiz
  298. 298Step 6 — The audit you can run today (and show in an interview). AutomatedLesson + quiz
  299. 299CHECKPOINTLesson + quiz
  300. 300Logical properties — margin-inline , padding-block , border-inline-start ,Lesson + quiz
  301. 301Common mistakes & quick fixesLesson + quiz
  302. 302You are finished when: you can screenshot an RTL mirror that looks designed,Lesson + quiz
  303. 303KEEP PRACTISING & SELF-CHECKLesson + quiz
  304. 304Pro Session 9 · The Evergreen Expert: Staying Current for the Next DecadesLesson + quiz
  305. 305• Currency — knowing this year’s versions, features and defaults. This is theLesson + quiz
  306. 306Two conclusions follow immediately. First: spend your learning timeLesson + quiz
  307. 3072. web.dev (Google’s dev site) — articles and the Baseline status of platformLesson + quiz
  308. 308• Then decide in writing: Adopt (use it on the next real project), Watch (revisitLesson + quiz
  309. 309Step 7 — The compounding map (your next decade, sketched). Deliberate, notLesson + quiz
  310. 310COMMON MISTAKE — CURRENCY PANIC AND CURRENCY DENIALLesson + quiz
  311. 311Attention budget — the finite resource you spend learning. Why it matters:Lesson + quiz
  312. 312Your turn — mini challenge (about 10 minutes)Lesson + quiz
  313. 313AI ASSIST (OPTIONAL — EXPLANATIONS ONLY)Lesson + quiz
  314. 314Appendix C · Staying Current: Fact Sheet, Ritual & Career MapLesson + quiz
  315. 315Page 315Lesson + quiz
  316. 316C.2 Baseline quick reference — what to ship todayLesson + quiz
  317. 317grouping: newerLesson + quiz
  318. 318The decision tree that survives every future feature (memorise this, not theLesson + quiz
  319. 3197. 5 min — Calendar yourself. Set next month’s block. That is the entire system:Lesson + quiz
  320. 320Page 320Lesson + quiz
  321. 321C.6 Interview question bank (basics to mid-level)Lesson + quiz
  322. 3226. “What is event delegation and why would you use it?” Attach one listener toLesson + quiz
  323. 323months projects from memory; run the currency loop studies with real numbers,Lesson + quiz
  324. 324Why keep the log: everything in this appendix was verified in October 2026,Lesson + quiz

Build a simple, responsive website from scratch. You learn HTML for structure, CSS for style and layout, and a little JavaScript for interaction.

You finish with a small multi-page site that works on phones and computers.

Ready to start?

Enroll and learn at your pace.