Lesson 1 of 3

Welcome & Setup

Welcome to Web Foundations — a short, hands-on taster that takes you from "I've never written a line of code" to a real, styled web page you build yourself. No setup, no fluff: you'll write code and see it run right here in the lesson. This lesson covers what the web is, the tools you need, and your very first page. Let's begin.

How the web actually works

Try it Yourself

Loading editor…

Result

That box above is live — it's real HTML being rendered by a browser, exactly like a real website. Edit it and re-run it; you're already writing the web. Here's the mental model behind it. A website is just files that a browser reads + displays. When you visit a site, your browser (Chrome, Safari, Firefox) requests files from a server (a computer somewhere that stores them) over the internet, then reads those files + paints them on your screen. The web = your browser fetching + displaying files. Three languages build every web page (learn them in order): HTML (the structure + content — headings, paragraphs, images, links; the "what it is" — this course's focus, lesson 2); CSS (the styling — colours, fonts, spacing, layout; the "how it looks" — lesson 3); and JavaScript (the behaviour/interactivity — buttons that do things, live updates; the "what it does" — a later course). A useful analogy: HTML is the skeleton (structure), CSS is the skin + clothes (appearance), JavaScript is the muscles (movement). This course covers the first two — the true foundations — because HTML + CSS alone can build a complete, real, deployable website.

Your tools (you already have them)

The wonderful thing about web development: the tools are free + you likely already have them. You need exactly two things. A web browser (to view your pages — Chrome/Firefox/Safari/Edge; you have one right now). And a text editor (to write your code — for real projects, install VS Code (free, the industry standard); to just learn + experiment, the runnable boxes in these lessons are your editor — write code, hit run, see it live, no install needed). That's the entire setup. Unlike most software, you don't need expensive programs or a powerful computer — a browser + a text file is a complete web-development environment. An HTML file is just a plain text file whose name ends in .html (like index.html). You write HTML tags in it, open it in a browser, + the browser renders it as a web page. index.html is the special name browsers look for as a site's home page.

Your first page, explained

Try it Yourself

Loading editor…

Result

This is the skeleton every HTML page shares — memorise its shape: <!DOCTYPE html> (tells the browser "this is modern HTML" — always the first line); <html> (wraps the entire page); <head> (invisible setup info — the <title> shows in the browser tab, plus metadata + links to CSS; nothing here appears in the page body); and <body> (everything VISIBLE on the page — your headings, text, images, links — all your content goes here). Inside <body>, notice the pattern: <h1>About Me</h1> is an element — an opening tag <h1>, some content, + a closing tag </h1> (the slash marks the close). <h1> is a big heading; <p> is a paragraph; <strong> makes text bold. You write content, wrap it in tags to give it meaning, + the browser displays it accordingly. That's the whole game — + it's exactly what lesson 2 dives into. Change "About Me" to your name and re-run the box; you're editing a real web page.

The mistake beginners make

The first mistake is thinking you need special/expensive software — believing web development requires costly tools or a powerful machine, when a free browser + a text file is a complete setup; you already have everything. The second mistake is confusing the three languages — mixing up what HTML, CSS, + JavaScript each do; remember HTML = structure, CSS = style, JavaScript = behaviour (skeleton, skin, muscles). The third mistake is skipping the skeleton — forgetting <!DOCTYPE html>, <html>, <head>, or <body>, so pages behave oddly; every page shares that same frame. And fearing you'll break something — hesitating to experiment; you can't break anything by editing a practice box — change it, run it, learn from what happens. And only reading, never running — passively reading code without typing + running it; the whole point is hands-on — edit every box. Know the tools are free, distinguish the three languages, use the skeleton, experiment fearlessly, and run every example.

Your turn

Understand how the web works: a website is just FILES a BROWSER reads + displays - when you visit a site, your browser fetches files from a server and paints them on screen. The web = your browser fetching + displaying files.
Learn the three languages + their roles: HTML (structure/content - the skeleton), CSS (styling/appearance - the skin + clothes), JavaScript (behaviour/interactivity - the muscles). This course covers HTML + CSS, the true foundations.
Know your (free) tools: a web BROWSER to view pages (you have one) + a TEXT EDITOR to write code (VS Code for real projects, or the runnable boxes here to learn) - and that an HTML file is just a plain text file ending in .html (index.html = the home page).
Learn the page skeleton every HTML file shares: (modern HTML), (wraps everything), (invisible setup - /metadata), <body> (everything VISIBLE - your content goes here).</li> <li>Edit + run the live boxes: change the text in the 'About Me' example above to your own name/details and re-run it - you're editing a real web page. Experiment fearlessly; you can't break anything.</li> </ol> <p><strong>Key points</strong></p> <ul> <li>A WEBSITE = FILES a BROWSER reads + displays. When you visit a site, your BROWSER (Chrome/Firefox/Safari) fetches files from a SERVER over the internet and paints them on screen. The web = browser fetching + displaying files.</li> <li>THREE LANGUAGES build every page (in order): HTML (structure/content — 'what it is' — this course), CSS (styling/appearance — 'how it looks' — this course), JavaScript (behaviour/interactivity — 'what it does' — later). Analogy: HTML = skeleton, CSS = skin/clothes, JS = muscles. HTML + CSS alone build a complete, real website.</li> <li>TOOLS (free — you already have them): a BROWSER (to view) + a TEXT EDITOR (to write — VS Code for real work, or the runnable lesson boxes to learn). An HTML file = a plain text file ending in .html; index.html = the special home-page name.</li> <li>The PAGE SKELETON every HTML file shares: <!DOCTYPE html> (modern HTML — first line), <html> (wraps the page), <head> (invisible setup — <title> shows in the tab, plus metadata/CSS links), <body> (everything VISIBLE — your content). ELEMENT pattern: <h1>content</h1> = opening tag + content + closing tag (slash = close).</li> <li>The mistakes: thinking you need special/expensive software (a free browser + text file is enough), confusing the three languages (HTML/CSS/JS = structure/style/behaviour), skipping the skeleton, fearing you'll break something (experiment freely), and only reading without running (edit + run every box — it's hands-on).</li> </ul> </div></div><div class="mt-8 rounded-2xl border border-line bg-card p-5"><p class="flex items-center gap-2 text-[0.7rem] uppercase tracking-[0.14em] text-ink-faint"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg> Resources</p><div class="mt-3 flex flex-col gap-2"><a href="https://example.com/cheatsheet" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-3 rounded-xl border border-line bg-paper px-4 py-2.5 text-sm transition-colors hover:border-accent"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link text-accent" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg><span class="flex-1 text-ink">Course cheat sheet (link)</span><span class="text-xs text-ink-faint group-hover:text-accent">Open</span></a><a href="/uploads/starter.zip" target="_blank" rel="noopener noreferrer" download="" class="group flex items-center gap-3 rounded-xl border border-line bg-paper px-4 py-2.5 text-sm transition-colors hover:border-accent"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text text-accent" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg><span class="flex-1 text-ink">Starter files</span><span class="text-xs text-ink-faint group-hover:text-accent">Download</span></a></div></div><div class="mt-10 flex flex-wrap items-center justify-between gap-4 border-t border-line pt-6"><a class="rounded-full bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-[0_10px_30px_-10px_var(--accent)] transition-transform hover:-translate-y-0.5" href="/academy/web-foundations">Enrol to track progress</a><div class="flex items-center gap-2"></div></div><section id="qa" class="mt-12 scroll-mt-20 border-t border-line pt-8"><h2 class="flex items-center gap-2 text-[0.7rem] uppercase tracking-[0.14em] text-ink-faint"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg> Q&A · 0</h2><p class="mt-4 text-sm text-ink-soft">Enrol to ask questions and join the discussion.</p><div class="mt-6 flex flex-col gap-5"><p class="text-sm text-ink-soft">No questions yet — be the first to ask.</p></div></section></article></div></div><footer class="border-t border-line bg-[color-mix(in_srgb,var(--ink)_7%,var(--card))]"><div class="mx-auto max-w-6xl px-5 py-12"><div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-12"><div class="lg:col-span-5"><a class="inline-flex items-center" href="/"><span class="font-display text-xl font-bold tracking-tight text-ink">Chika Ani Simon</span></a><p class="mt-3 max-w-sm text-sm leading-relaxed text-ink-soft">I design, code and ship — building software, ventures, films and an academy from Enugu, Nigeria. Building products, platforms, media and communities across Africa.</p><div class="mt-5 flex flex-wrap gap-2"><a href="https://facebook.com/iamchika" target="_blank" rel="noopener noreferrer" class="rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent">Facebook</a><a href="https://instagram.com/casmonas" target="_blank" rel="noopener noreferrer" class="rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent">Instagram</a><a href="https://linkedin.com/in/iamchika" target="_blank" rel="noopener noreferrer" class="rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent">LinkedIn</a><a href="https://x.com/chika_lord" target="_blank" rel="noopener noreferrer" class="rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent">X</a><a href="https://youtube.com/@casmonas" target="_blank" rel="noopener noreferrer" class="rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent">YouTube</a></div></div><div class="lg:col-span-3"><h3 class="text-[0.62rem] font-semibold uppercase tracking-[0.16em] text-ink-faint">Explore</h3><ul class="mt-4 flex flex-col gap-2.5"><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/ventures">Ventures</a></li><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/build">Build</a></li><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/academy">Academy</a></li><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/films">Films</a></li><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/shop">Shop</a></li><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/blog">Blog</a></li><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/contact">Contact</a></li></ul></div><div class="lg:col-span-2"><h3 class="text-[0.62rem] font-semibold uppercase tracking-[0.16em] text-ink-faint">Academy</h3><ul class="mt-4 flex flex-col gap-2.5"><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/academy">All courses</a></li><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/academy/paths">Career tracks</a></li><li><a class="text-sm text-ink-soft transition-colors hover:text-accent" href="/academy/cv-builder">Free CV Builder</a></li></ul></div><div class="lg:col-span-2"><h3 class="text-[0.62rem] font-semibold uppercase tracking-[0.16em] text-ink-faint">Get in touch</h3><ul class="mt-4 flex flex-col gap-2.5 text-sm text-ink-soft"><li><a href="mailto:info@chika.ng" class="inline-flex items-center gap-1.5 transition-colors hover:text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg> info@chika.ng</a></li><li class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg> Enugu, Nigeria</li><li><a class="inline-flex items-center gap-1 font-medium text-accent hover:underline" href="/contact">Send a message <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></li></ul></div></div><div class="mt-12 flex flex-col-reverse items-start justify-between gap-3 border-t border-line pt-6 text-xs text-ink-faint sm:flex-row sm:items-center"><span>© 2026 Chika Ani Simon. All rights reserved.</span><span class="font-medium">chika.ng</span></div></div></footer></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/1s55y77z5wzw6.js" id="_R_" async=""></script><div style="display:none" id="S:0"><nav class="border-t border-line/70"><div class="mx-auto max-w-6xl px-5"><div class="flex gap-1 overflow-x-auto py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"><a class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium transition-colors text-ink-soft hover:bg-card hover:text-ink" href="/academy?view=all"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg> All courses</a><a class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium transition-colors text-ink-soft hover:bg-card hover:text-ink" href="/academy/library"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library" aria-hidden="true"><path d="m16 6 4 14"></path><path d="M12 6v14"></path><path d="M8 8v12"></path><path d="M4 4v16"></path></svg> The Library</a><a class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium transition-colors text-ink-soft hover:bg-card hover:text-ink" href="/academy/paths"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-route" aria-hidden="true"><circle cx="6" cy="19" r="3"></circle><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"></path><circle cx="18" cy="5" r="3"></circle></svg> Career tracks</a><a class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium transition-colors text-ink-soft hover:bg-card hover:text-ink" href="/academy/bundles"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-boxes" aria-hidden="true"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"></path><path d="m7 16.5-4.74-2.85"></path><path d="m7 16.5 5-3"></path><path d="M7 16.5v5.17"></path><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"></path><path d="m17 16.5-5-3"></path><path d="m17 16.5 4.74-2.85"></path><path d="M17 16.5v5.17"></path><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"></path><path d="M12 8 7.26 5.15"></path><path d="m12 8 4.74-2.85"></path><path d="M12 13.5V8"></path></svg> Bundles</a><a class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium transition-colors text-ink-soft hover:bg-card hover:text-ink" href="/academy?price=free"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gift" aria-hidden="true"><path d="M12 7v14"></path><path d="M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"></path><path d="M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"></path><rect x="3" y="7" width="18" height="4" rx="1"></rect></svg> Free</a><a class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium transition-colors text-ink-soft hover:bg-card hover:text-ink" href="/academy/cv-builder"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg> CV Builder</a></div></div></nav></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n4:I[339756,[\"/_next/static/chunks/2yl1jv4w6po1z.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n5:I[837457,[\"/_next/static/chunks/2yl1jv4w6po1z.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n7:I[897367,[\"/_next/static/chunks/2yl1jv4w6po1z.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"OutletBoundary\"]\n8:\"$Sreact.suspense\"\nb:I[897367,[\"/_next/static/chunks/2yl1jv4w6po1z.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"ViewportBoundary\"]\nd:I[897367,[\"/_next/static/chunks/2yl1jv4w6po1z.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"MetadataBoundary\"]\nf:I[168027,[\"/_next/static/chunks/2gy-_gqux3q2e.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/30w0fjmplq6bg.css\",\"style\"]\n:HL[\"/_next/static/chunks/1666rzg93th3c.css\",\"style\"]\n:HL[\"/_next/static/media/0c795a286deabae8-s.p.3vm0tq4e-zz_5.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/0c89a48fa5027cee-s.p.2cyn07wtgehh0.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/1b99372b3eaef0c8-s.p.1gsd1jahc5dg_.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/2a65768255d6b625-s.p.3u4lli0-axodc.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/47fe1b7cd6e6ed85-s.p.3bh2vc0w-r-ll.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/5c285b27cdda1fe8-s.p.2_mbdogr7ni8i.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/6bd983bd58a87a3d-s.p.1hey5yyym6mz_.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/8c2eb9ceedecfc8e-s.p.23aeddxv5enbo.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/8e6fa89aa22d24ec-s.p.2o7m9ogm38dql.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/9e9f04e3c37952ab-s.p.0pan85mumqyf3.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/a218039a3287bcfd-s.p.43zbiuwnnoiok.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/a343f882a40d2cc9-s.p.1sj6eobyi31rd.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/a85fe84266768609-s.p.0h6ig86gwutp4.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e2334d715941921e-s.p.3o_v2fun1jzxk.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e8f2fbee2754df70-s.p.1dqa_6e_ad4sj.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/f06bf9da926bae75-s.p.2874ccu1_u7jf.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/fabcf92ba1ccea36-s.p.1w_qz2ahumqmz.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"academy\",\"web-foundations\",\"learn\",\"welcome\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"academy\",{\"children\":[[\"slug\",\"web-foundations\",\"d\",null],{\"children\":[\"learn\",{\"children\":[[\"lessonSlug\",\"welcome\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/30w0fjmplq6bg.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/1666rzg93th3c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/2gy-_gqux3q2e.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/3keve_yt1xuu4.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/2jd_f8vkw-_gv.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/2qumv64lc9l8j.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L3\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L6\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/2fry1bkd_p9z9.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/02w_n3kjkneys.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L7\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@9\"}]}]]}],{},null,false,null]},null,false,\"$@a\"]},null,false,\"$@a\"]},null,false,\"$@a\"]},null,false,null]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Le\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/30w0fjmplq6bg.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/1666rzg93th3c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"H-AxwNx50tjiCrRxXIxqm\"}\n"])</script><script>self.__next_f.push([1,"10:[]\na:\"$W10\"\nc:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"11:I[522016,[\"/_next/static/chunks/2gy-_gqux3q2e.js\",\"/_next/static/chunks/3keve_yt1xuu4.js\",\"/_next/static/chunks/2jd_f8vkw-_gv.js\",\"/_next/static/chunks/2qumv64lc9l8j.js\",\"/_next/static/chunks/2fry1bkd_p9z9.js\",\"/_next/static/chunks/02w_n3kjkneys.js\"],\"\"]\n12:I[505014,[\"/_next/static/chunks/2gy-_gqux3q2e.js\",\"/_next/static/chunks/3keve_yt1xuu4.js\",\"/_next/static/chunks/2jd_f8vkw-_gv.js\",\"/_next/static/chunks/2qumv64lc9l8j.js\",\"/_next/static/chunks/2fry1bkd_p9z9.js\",\"/_next/static/chunks/02w_n3kjkneys.js\"],\"default\"]\n13:I[418662,[\"/_next/static/chunks/2gy-_gqux3q2e.js\"],\"PageViewTracker\"]\n14:I[847645,[\"/_next/static/chunks/2gy-_gqux3q2e.js\",\"/_next/static/chunks/3keve_yt1xuu4.js\",\"/_next/static/chunks/2jd_f8vkw-_gv.js\",\"/_next/static/chunks/2qumv64lc9l8j.js\"],\"HeaderSearch\"]\n1f:I[27201,[\"/_next/static/chunks/2yl1jv4w6po1z.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"IconMark\"]\n"])</script><script>self.__next_f.push([1,"2:[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"syne_a1b2e1f-module__O77EAW__variable dm_sans_27facfba-module__5sb5yW__variable playfair_display_53a625b1-module__XHYflW__variable anton_1cd4e15e-module__A-Y-nW__variable bebas_neue_28e2425b-module__0vtK3q__variable caveat_7c5c483e-module__0ZIKpW__variable space_grotesk_1b6412cb-module__PycUKq__variable instrument_sans_5eebac6e-module__NKU_Lq__variable poppins_39de20a3-module__8LurOG__variable montserrat_a7e66e18-module__Faw1Kq__variable sora_d7644c04-module__hDow1G__variable outfit_cbfa4884-module__hWmOPq__variable manrope_9f003831-module__HIT9Bq__variable lora_9380c913-module__uyD5Pa__variable h-full\",\"style\":{\"--font-display\":\"var(--font-syne)\",\"--font-sans\":\"var(--font-dmsans)\"},\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-full\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"main\",null,{\"className\":\"flex min-h-screen items-center justify-center px-4 py-14\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full max-w-md rounded-3xl bg-card p-10 text-center shadow-[0_32px_90px_rgba(0,0,0,0.12)]\",\"children\":[[\"$\",\"p\",null,{\"className\":\"font-display text-7xl font-extrabold text-accent\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"mt-4 font-display text-2xl font-bold text-ink\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-relaxed text-ink-soft\",\"children\":\"That page doesn't exist — it may have moved, or never did.\"}],[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"group mt-7 inline-flex items-center gap-2 rounded-full bg-ink px-5 py-2.5 text-sm font-medium text-card transition-colors hover:bg-accent\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m12 19-7-7 7-7\",\"key\":\"1l729n\"}],[\"path\",{\"d\":\"M19 12H5\",\"key\":\"x3x0zl\"}]],\"className\":\"lucide-arrow-left transition-transform group-hover:-translate-x-0.5\",\"size\":15}],\"Back to hub\"]}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L13\",null,{}]]}]}]\n"])</script><script>self.__next_f.push([1,"3:[\"$\",\"div\",null,{\"id\":\"academy-root\",\"className\":\"home-theme-lavender academy-aurora min-h-screen bg-paper text-ink\",\"children\":[false,[\"$\",\"header\",null,{\"className\":\"sticky top-0 z-20 border-b border-line bg-paper/80 backdrop-blur-xl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mx-auto flex max-w-6xl items-center justify-between px-5 py-3.5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2.5\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/academy\",\"className\":\"group flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex h-8 w-8 items-center justify-center rounded-lg bg-accent/15 text-accent ring-1 ring-accent/30 transition-shadow group-hover:shadow-[0_0_18px_-2px_var(--accent)]\",\"children\":[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z\",\"key\":\"j76jl0\"}],[\"path\",{\"d\":\"M22 10v6\",\"key\":\"1lu8f3\"}],[\"path\",{\"d\":\"M6 12.5V16a6 3 0 0 0 12 0v-3.5\",\"key\":\"1r8lef\"}]],\"className\":\"lucide-graduation-cap\",\"size\":17}]}],[\"$\",\"span\",null,{\"className\":\"font-display text-lg font-bold tracking-tight text-ink\",\"children\":\"Academy\"}]]}],[\"$\",\"span\",null,{\"className\":\"hidden text-line sm:inline\",\"children\":\"·\"}],[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"group hidden items-center gap-1 text-[0.62rem] uppercase tracking-[0.18em] text-ink-faint transition-colors hover:text-accent sm:inline-flex\",\"title\":\"Back to chika.ng\",\"children\":[\"chika.ng\",[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M7 7h10v10\",\"key\":\"1tivn9\"}],[\"path\",{\"d\":\"M7 17 17 7\",\"key\":\"1vkiza\"}]],\"className\":\"lucide-arrow-up-right transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\",\"size\":11}]]}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"ml-1 hidden h-4 w-px bg-line md:block\"}],[\"$\",\"nav\",null,{\"className\":\"ml-1 hidden items-center gap-5 md:flex\",\"children\":[[\"$\",\"$L11\",\"/ventures\",{\"href\":\"/ventures\",\"className\":\"text-[0.66rem] font-medium uppercase tracking-[0.16em] text-ink-faint transition-colors hover:text-accent\",\"children\":\"Ventures\"}],[\"$\",\"$L11\",\"/build\",{\"href\":\"/build\",\"className\":\"text-[0.66rem] font-medium uppercase tracking-[0.16em] text-ink-faint transition-colors hover:text-accent\",\"children\":\"Build\"}],[\"$\",\"$L11\",\"/films\",{\"href\":\"/films\",\"className\":\"text-[0.66rem] font-medium uppercase tracking-[0.16em] text-ink-faint transition-colors hover:text-accent\",\"children\":\"Films\"}],[\"$\",\"$L11\",\"/shop\",{\"href\":\"/shop\",\"className\":\"text-[0.66rem] font-medium uppercase tracking-[0.16em] text-ink-faint transition-colors hover:text-accent\",\"children\":\"Shop\"}],[\"$\",\"$L11\",\"/blog\",{\"href\":\"/blog\",\"className\":\"text-[0.66rem] font-medium uppercase tracking-[0.16em] text-ink-faint transition-colors hover:text-accent\",\"children\":\"Blog\"}]]}]]}],[\"$\",\"nav\",null,{\"className\":\"flex items-center gap-1.5 text-sm\",\"children\":[[\"$\",\"$L14\",null,{}],[false,[\"$\",\"$L11\",null,{\"href\":\"/academy/login\",\"className\":\"whitespace-nowrap rounded-full px-2.5 py-1.5 text-ink-soft hover:bg-card hover:text-ink sm:px-3\",\"children\":\"Sign in\"}],[\"$\",\"$L11\",null,{\"href\":\"/academy/signup\",\"className\":\"whitespace-nowrap rounded-full bg-accent px-3.5 py-1.5 font-medium text-white shadow-[0_8px_24px_-8px_var(--accent)] transition-transform hover:-translate-y-0.5 sm:px-4\",\"children\":\"Sign up\"}]]]}]]}],[\"$\",\"nav\",null,{\"className\":\"flex items-center gap-4 overflow-x-auto border-t border-line px-5 py-2 [scrollbar-width:none] md:hidden [\u0026::-webkit-scrollbar]:hidden\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"inline-flex shrink-0 items-center gap-1 text-[0.64rem] font-medium uppercase tracking-[0.16em] text-ink-faint transition-colors hover:text-accent\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\",\"key\":\"5wwlr5\"}],[\"path\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\",\"key\":\"r6nss1\"}]],\"className\":\"lucide-house\",\"size\":11}],\" Home\"]}],\"$L15\",[\"$L16\",\"$L17\",\"$L18\",\"$L19\",\"$L1a\",\"$L1b\"]]}],\"$L1c\"]}],\"$L1d\",\"$L1e\"]}]\n"])</script><script>self.__next_f.push([1,"9:null\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"title\",\"0\",{\"children\":\"Chika Ani — Founder, Builder \u0026 Storyteller\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"I design, code and ship — building software, ventures, films and an academy from Enugu, Nigeria.\\r\\n\\r\\nBuilding products, platforms, media and communities across Africa.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://chika.ng\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Chika Ani\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"Chika Ani,founder,full-stack developer,startups,Enugu,Nigeria,academy,film\"}],[\"$\",\"meta\",\"5\",{\"name\":\"google-site-verification\",\"content\":\"uthhxDKzyTCJHke3ehLsO_E7FTvyemZrNIQNPUrVAG4\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Chika Ani — Founder, Builder \u0026 Storyteller\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"I design, code and ship — building software, ventures, films and an academy from Enugu, Nigeria.\\r\\n\\r\\nBuilding products, platforms, media and communities across Africa.\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:url\",\"content\":\"https://chika.ng\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:site_name\",\"content\":\"Chika Ani\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:locale\",\"content\":\"en_NG\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image\",\"content\":\"https://chika.ng/academy/web-foundations/opengraph-image?e5cfe8b6d7096bc9\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:alt\",\"content\":\"Course on chika.ng Academy\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"Chika Ani — Founder, Builder \u0026 Storyteller\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"I design, code and ship — building software, ventures, films and an academy from Enugu, Nigeria.\\r\\n\\r\\nBuilding products, platforms, media and communities across Africa.\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://chika.ng/academy/web-foundations/opengraph-image?e5cfe8b6d7096bc9\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image:alt\",\"content\":\"Course on chika.ng Academy\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.2vob68tjqpejf.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L1f\",\"26\",{}]]\n"])</script><script>self.__next_f.push([1,"20:I[142976,[\"/_next/static/chunks/2gy-_gqux3q2e.js\",\"/_next/static/chunks/3keve_yt1xuu4.js\",\"/_next/static/chunks/2jd_f8vkw-_gv.js\",\"/_next/static/chunks/2qumv64lc9l8j.js\"],\"AcademySubNav\"]\n15:[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-line\",\"children\":\"·\"}]\n16:[\"$\",\"$L11\",\"/ventures\",{\"href\":\"/ventures\",\"className\":\"shrink-0 text-[0.64rem] uppercase tracking-[0.16em] transition-colors font-medium text-ink-faint hover:text-accent\",\"children\":\"Ventures\"}]\n17:[\"$\",\"$L11\",\"/build\",{\"href\":\"/build\",\"className\":\"shrink-0 text-[0.64rem] uppercase tracking-[0.16em] transition-colors font-medium text-ink-faint hover:text-accent\",\"children\":\"Build\"}]\n18:[\"$\",\"$L11\",\"/academy\",{\"href\":\"/academy\",\"className\":\"shrink-0 text-[0.64rem] uppercase tracking-[0.16em] transition-colors font-bold text-accent\",\"children\":\"Academy\"}]\n19:[\"$\",\"$L11\",\"/films\",{\"href\":\"/films\",\"className\":\"shrink-0 text-[0.64rem] uppercase tracking-[0.16em] transition-colors font-medium text-ink-faint hover:text-accent\",\"children\":\"Films\"}]\n1a:[\"$\",\"$L11\",\"/shop\",{\"href\":\"/shop\",\"className\":\"shrink-0 text-[0.64rem] uppercase tracking-[0.16em] transition-colors font-medium text-ink-faint hover:text-accent\",\"children\":\"Shop\"}]\n1b:[\"$\",\"$L11\",\"/blog\",{\"href\":\"/blog\",\"className\":\"shrink-0 text-[0.64rem] uppercase tracking-[0.16em] transition-colors font-medium text-ink-faint hover:text-accent\",\"children\":\"Blog\"}]\n1c:[\"$\",\"$8\",null,{\"fallback\":null,\"children\":[\"$\",\"$L20\",null,{}]}]\n1d:[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-6xl px-5 py-10\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]\n"])</script><script>self.__next_f.push([1,"1e:[\"$\",\"footer\",null,{\"className\":\"border-t border-line bg-[color-mix(in_srgb,var(--ink)_7%,var(--card))]\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-6xl px-5 py-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid gap-10 sm:grid-cols-2 lg:grid-cols-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"lg:col-span-5\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center\",\"children\":[\"$\",\"span\",null,{\"className\":\"font-display text-xl font-bold tracking-tight text-ink\",\"children\":\"Chika Ani Simon\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 max-w-sm text-sm leading-relaxed text-ink-soft\",\"children\":\"I design, code and ship — building software, ventures, films and an academy from Enugu, Nigeria.\\r\\n\\r\\nBuilding products, platforms, media and communities across Africa.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex flex-wrap gap-2\",\"children\":[[\"$\",\"a\",\"FB\",{\"href\":\"https://facebook.com/iamchika\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent\",\"children\":\"Facebook\"}],[\"$\",\"a\",\"IG\",{\"href\":\"https://instagram.com/casmonas\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent\",\"children\":\"Instagram\"}],[\"$\",\"a\",\"IN\",{\"href\":\"https://linkedin.com/in/iamchika\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent\",\"children\":\"LinkedIn\"}],[\"$\",\"a\",\"X\",{\"href\":\"https://x.com/chika_lord\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent\",\"children\":\"X\"}],[\"$\",\"a\",\"YT\",{\"href\":\"https://youtube.com/@casmonas\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-ink-soft transition-colors hover:border-accent hover:text-accent\",\"children\":\"YouTube\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"lg:col-span-3\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-[0.62rem] font-semibold uppercase tracking-[0.16em] text-ink-faint\",\"children\":\"Explore\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 flex flex-col gap-2.5\",\"children\":[[[\"$\",\"li\",\"/ventures\",{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/ventures\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"Ventures\"}]}],[\"$\",\"li\",\"/build\",{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/build\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"Build\"}]}],[\"$\",\"li\",\"/academy\",{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/academy\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"Academy\"}]}],[\"$\",\"li\",\"/films\",{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/films\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"Films\"}]}],[\"$\",\"li\",\"/shop\",{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/shop\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"Shop\"}]}],[\"$\",\"li\",\"/blog\",{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"Blog\"}]}]],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/contact\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"Contact\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"lg:col-span-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-[0.62rem] font-semibold uppercase tracking-[0.16em] text-ink-faint\",\"children\":\"Academy\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 flex flex-col gap-2.5\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/academy\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"All courses\"}]}],[\"$\",\"li\",null,{\"children\":\"$L21\"}],\"$L22\"]}]]}],\"$L23\"]}],\"$L24\"]}]}]\n"])</script><script>self.__next_f.push([1,"21:[\"$\",\"$L11\",null,{\"href\":\"/academy/paths\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"Career tracks\"}]\n22:[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/academy/cv-builder\",\"className\":\"text-sm text-ink-soft transition-colors hover:text-accent\",\"children\":\"Free CV Builder\"}]}]\n"])</script><script>self.__next_f.push([1,"23:[\"$\",\"div\",null,{\"className\":\"lg:col-span-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-[0.62rem] font-semibold uppercase tracking-[0.16em] text-ink-faint\",\"children\":\"Get in touch\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 flex flex-col gap-2.5 text-sm text-ink-soft\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"mailto:info@chika.ng\",\"className\":\"inline-flex items-center gap-1.5 transition-colors hover:text-accent\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7\",\"key\":\"132q7q\"}],[\"rect\",{\"x\":\"2\",\"y\":\"4\",\"width\":\"20\",\"height\":\"16\",\"rx\":\"2\",\"key\":\"izxlao\"}]],\"className\":\"lucide-mail\",\"size\":13}],\" \",\"info@chika.ng\"]}]}],[\"$\",\"li\",null,{\"className\":\"inline-flex items-center gap-1.5\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\",\"key\":\"1r0f0z\"}],[\"circle\",{\"cx\":\"12\",\"cy\":\"10\",\"r\":\"3\",\"key\":\"ilqhr7\"}]],\"className\":\"lucide-map-pin\",\"size\":13}],\" \",\"Enugu, Nigeria\"]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/contact\",\"className\":\"inline-flex items-center gap-1 font-medium text-accent hover:underline\",\"children\":[\"Send a message \",[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$3:props:children:1:props:children:0:props:children:0:props:children:2:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-up-right\",\"size\":13}]]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"div\",null,{\"className\":\"mt-12 flex flex-col-reverse items-start justify-between gap-3 border-t border-line pt-6 text-xs text-ink-faint sm:flex-row sm:items-center\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"© \",2026,\" \",\"Chika Ani Simon\",\". All rights reserved.\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium\",\"children\":\"chika.ng\"}]]}]\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"div\",null,{\"className\":\"grid gap-8 lg:grid-cols-[240px_1fr]\",\"children\":[[\"$\",\"aside\",null,{\"className\":\"order-2 lg:order-1 lg:sticky lg:top-24 lg:max-h-[calc(100vh-7rem)] lg:self-start lg:overflow-y-auto lg:pr-1\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/academy/web-foundations\",\"className\":\"text-[0.7rem] uppercase tracking-[0.14em] text-ink-faint hover:text-ink\",\"children\":[\"← \",\"Web Foundations\"]}],false,[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-col gap-4\",\"children\":[[\"$\",\"div\",\"1\",{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-1 px-2.5 text-[0.6rem] uppercase tracking-[0.12em] text-ink-faint\",\"children\":\"Getting Started\"}],[\"$\",\"ol\",null,{\"className\":\"flex flex-col gap-0.5\",\"children\":[[\"$\",\"$L11\",\"1\",{\"href\":\"/academy/web-foundations/learn/welcome\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors bg-card font-medium text-ink ring-1 ring-accent/30\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z\",\"key\":\"kmsa83\"}],[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}]],\"className\":\"lucide-circle-play shrink-0 text-ink-faint\",\"size\":14}],[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Welcome \u0026 Setup\"}]]}]}],[\"$\",\"div\",\"2\",{\"className\":\"cursor-not-allowed opacity-60\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors text-ink-soft hover:bg-card/60 hover:text-ink\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"rect\",{\"width\":\"18\",\"height\":\"11\",\"x\":\"3\",\"y\":\"11\",\"rx\":\"2\",\"ry\":\"2\",\"key\":\"1w4ew1\"}],[\"path\",{\"d\":\"M7 11V7a5 5 0 0 1 10 0v4\",\"key\":\"fwvmzm\"}]],\"className\":\"lucide-lock shrink-0 text-ink-faint\",\"size\":13}],[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"HTML Basics\"}]]}]}]]}]]}],[\"$\",\"div\",\"2\",{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-1 px-2.5 text-[0.6rem] uppercase tracking-[0.12em] text-ink-faint\",\"children\":\"Core Concepts\"}],[\"$\",\"ol\",null,{\"className\":\"flex flex-col gap-0.5\",\"children\":[[\"$\",\"div\",\"4\",{\"className\":\"cursor-not-allowed opacity-60\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors text-ink-soft hover:bg-card/60 hover:text-ink\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$6:props:children:0:props:children:2:props:children:0:props:children:1:props:children:1:props:children:props:children:0:props:iconNode\",\"className\":\"lucide-lock shrink-0 text-ink-faint\",\"size\":13}],[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"The CSS Box Model\"}]]}]}]]}]]}]]}]]}],[\"$\",\"article\",null,{\"className\":\"order-1 min-w-0 lg:order-2\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/academy/web-foundations\",\"className\":\"mb-4 inline-flex items-center gap-1 text-[0.7rem] uppercase tracking-[0.14em] text-ink-faint transition-colors hover:text-ink lg:hidden\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m15 18-6-6 6-6\",\"key\":\"1wnfg3\"}]],\"className\":\"lucide-chevron-left\",\"size\":14}],\" \",\"Web Foundations\"]}],false,[\"$\",\"p\",null,{\"className\":\"text-[0.7rem] uppercase tracking-[0.14em] text-ink-faint\",\"children\":[\"Lesson \",1,\" of \",3]}],[\"$\",\"h1\",null,{\"className\":\"mt-2 font-display text-3xl font-extrabold tracking-tight text-ink\",\"children\":\"Welcome \u0026 Setup\"}],[null,\"$L25\",false,[\"$\",\"div\",null,{\"className\":\"mt-8 rounded-2xl border border-line bg-card p-5\",\"children\":[[\"$\",\"p\",null,{\"className\":\"flex items-center gap-2 text-[0.7rem] uppercase tracking-[0.14em] text-ink-faint\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12 15V3\",\"key\":\"m9g1x1\"}],[\"path\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\",\"key\":\"ih7n3h\"}],[\"path\",{\"d\":\"m7 10 5 5 5-5\",\"key\":\"brsn70\"}]],\"className\":\"lucide-download\",\"size\":14}],\" Resources\"]}],[\"$\",\"div\",null,{\"className\":\"mt-3 flex flex-col gap-2\",\"children\":[[\"$\",\"a\",\"1\",{\"href\":\"https://example.com/cheatsheet\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"group flex items-center gap-3 rounded-xl border border-line bg-paper px-4 py-2.5 text-sm transition-colors hover:border-accent\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M15 3h6v6\",\"key\":\"1q9fwt\"}],[\"path\",{\"d\":\"M10 14 21 3\",\"key\":\"gplh6r\"}],[\"path\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\",\"key\":\"a6xqqp\"}]],\"className\":\"lucide-external-link text-accent\",\"size\":15}],\"$L26\",\"$L27\"]}],\"$L28\"]}]]}],\"$L29\",\"$L2a\"]]}]]}]\n"])</script><script>self.__next_f.push([1,"2b:I[787611,[\"/_next/static/chunks/2gy-_gqux3q2e.js\",\"/_next/static/chunks/3keve_yt1xuu4.js\",\"/_next/static/chunks/2jd_f8vkw-_gv.js\",\"/_next/static/chunks/2qumv64lc9l8j.js\",\"/_next/static/chunks/2fry1bkd_p9z9.js\",\"/_next/static/chunks/02w_n3kjkneys.js\"],\"CodePlayground\"]\n26:[\"$\",\"span\",null,{\"className\":\"flex-1 text-ink\",\"children\":\"Course cheat sheet (link)\"}]\n27:[\"$\",\"span\",null,{\"className\":\"text-xs text-ink-faint group-hover:text-accent\",\"children\":\"Open\"}]\n28:[\"$\",\"a\",\"2\",{\"href\":\"/uploads/starter.zip\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"download\":\"\",\"className\":\"group flex items-center gap-3 rounded-xl border border-line bg-paper px-4 py-2.5 text-sm transition-colors hover:border-accent\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\",\"key\":\"1oefj6\"}],[\"path\",{\"d\":\"M14 2v5a1 1 0 0 0 1 1h5\",\"key\":\"wfsgrz\"}],[\"path\",{\"d\":\"M10 9H8\",\"key\":\"b1mrlr\"}],[\"path\",{\"d\":\"M16 13H8\",\"key\":\"t4e002\"}],[\"path\",{\"d\":\"M16 17H8\",\"key\":\"z1uh3a\"}]],\"className\":\"lucide-file-text text-accent\",\"size\":15}],[\"$\",\"span\",null,{\"className\":\"flex-1 text-ink\",\"children\":\"Starter files\"}],[\"$\",\"span\",null,{\"className\":\"text-xs text-ink-faint group-hover:text-accent\",\"children\":\"Download\"}]]}]\n29:[\"$\",\"div\",null,{\"className\":\"mt-10 flex flex-wrap items-center justify-between gap-4 border-t border-line pt-6\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/academy/web-foundations\",\"className\":\"rounded-full bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-[0_10px_30px_-10px_var(--accent)] transition-transform hover:-translate-y-0.5\",\"children\":\"Enrol to track progress\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[\"$undefined\",null]}]]}]\n2a:[\"$\",\"section\",null,{\"id\":\"qa\",\"className\":\"mt-12 scroll-mt-20 border-t border-line pt-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"flex items-center gap-2 text-[0.7rem] uppercase tracking-[0.14em] text-ink-faint\",\"children\":[[\"$\",\"$L12\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\",\"key\":\"1sd12s\"}]],\"className\":\"lucide-message-circle\",\"size\":14}],\" Q\u0026A · \",0]}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-sm text-ink-soft\",\"children\":\"Enrol to ask questions and join the discussion.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex flex-col gap-5\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-ink-soft\",\"children\":\"No questions yet — be the first to ask.\"}],[]]}]]}]\n2c:T9be,"])</script><script>self.__next_f.push([1,"\u003cp\u003eThat box above is \u003cem\u003elive\u003c/em\u003e — it\u0026#39;s real HTML being rendered by a browser, exactly like a real website. Edit it and re-run it; you\u0026#39;re already writing the web. Here\u0026#39;s the mental model behind it. \u003cstrong\u003eA website is just files that a browser reads + displays.\u003c/strong\u003e When you visit a site, your \u003cem\u003ebrowser\u003c/em\u003e (Chrome, Safari, Firefox) requests files from a \u003cem\u003eserver\u003c/em\u003e (a computer somewhere that stores them) over the internet, then reads those files + paints them on your screen. \u003cem\u003eThe web = your browser fetching + displaying files.\u003c/em\u003e \u003cstrong\u003eThree languages build every web page\u003c/strong\u003e (learn them in order): \u003cstrong\u003eHTML\u003c/strong\u003e (\u003cem\u003ethe structure + content — headings, paragraphs, images, links; the \u0026quot;what it is\u0026quot; — this course\u0026#39;s focus, lesson 2\u003c/em\u003e); \u003cstrong\u003eCSS\u003c/strong\u003e (\u003cem\u003ethe styling — colours, fonts, spacing, layout; the \u0026quot;how it looks\u0026quot; — lesson 3\u003c/em\u003e); and \u003cstrong\u003eJavaScript\u003c/strong\u003e (\u003cem\u003ethe behaviour/interactivity — buttons that do things, live updates; the \u0026quot;what it does\u0026quot; — a later course\u003c/em\u003e). \u003cem\u003eA useful analogy\u003c/em\u003e: HTML is the \u003cem\u003eskeleton\u003c/em\u003e (structure), CSS is the \u003cem\u003eskin + clothes\u003c/em\u003e (appearance), JavaScript is the \u003cem\u003emuscles\u003c/em\u003e (movement). This course covers the first two — the true foundations — because HTML + CSS alone can build a complete, real, deployable website.\u003c/p\u003e\n\u003ch2\u003eYour tools (you already have them)\u003c/h2\u003e\n\u003cp\u003eThe wonderful thing about web development: \u003cem\u003ethe tools are free + you likely already have them.\u003c/em\u003e You need exactly two things. \u003cstrong\u003eA web browser\u003c/strong\u003e (\u003cem\u003eto view your pages — Chrome/Firefox/Safari/Edge; you have one right now\u003c/em\u003e). And \u003cstrong\u003ea text editor\u003c/strong\u003e (\u003cem\u003eto write your code — for real projects, install VS Code (free, the industry standard); to just learn + experiment, the runnable boxes in these lessons are your editor — write code, hit run, see it live, no install needed\u003c/em\u003e). \u003cem\u003eThat\u0026#39;s the entire setup.\u003c/em\u003e Unlike most software, you don\u0026#39;t need expensive programs or a powerful computer — a browser + a text file is a complete web-development environment. \u003cstrong\u003eAn HTML file\u003c/strong\u003e is just a plain text file whose name ends in \u003cem\u003e.html\u003c/em\u003e (like \u003cem\u003eindex.html\u003c/em\u003e). You write HTML tags in it, open it in a browser, + the browser renders it as a web page. \u003cem\u003eindex.html\u003c/em\u003e is the special name browsers look for as a site\u0026#39;s home page.\u003c/p\u003e\n\u003ch2\u003eYour first page, explained\u003c/h2\u003e\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"div\",null,{\"className\":\"mt-6 max-w-2xl space-y-2 break-words\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"lesson-content\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp\u003eWelcome to \u003cstrong\u003eWeb Foundations\u003c/strong\u003e — a short, hands-on taster that takes you from \u003cem\u003e\u0026quot;I\u0026#39;ve never written a line of code\u0026quot;\u003c/em\u003e to a real, styled web page you build yourself. No setup, no fluff: you\u0026#39;ll write code and see it run \u003cem\u003eright here in the lesson.\u003c/em\u003e This lesson covers \u003cem\u003ewhat the web is, the tools you need, and your very first page.\u003c/em\u003e Let\u0026#39;s begin.\u003c/p\u003e\\n\u003ch2\u003eHow the web actually works\u003c/h2\u003e\\n\"}}],[\"$\",\"$L2b\",\"1\",{\"initialCode\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n \u003cbody\u003e\\n \u003ch1\u003eHello, web!\u003c/h1\u003e\\n \u003cp\u003eI just wrote my first web page.\u003c/p\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\"}],[\"$\",\"div\",\"2\",{\"className\":\"lesson-content\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2c\"}}],\"$L2d\",\"$L2e\"]}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"$L2b\",\"3\",{\"initialCode\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n \u003chead\u003e\\n \u003ctitle\u003eMy First Page\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003ch1\u003eAbout Me\u003c/h1\u003e\\n \u003cp\u003eHi! I'm learning web development.\u003c/p\u003e\\n \u003cp\u003eThis page is built with \u003cstrong\u003ereal HTML\u003c/strong\u003e.\u003c/p\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\"}]\n2f:T1529,"])</script><script>self.__next_f.push([1,"\u003cp\u003eThis is the \u003cstrong\u003eskeleton every HTML page shares\u003c/strong\u003e — memorise its shape: \u003cstrong\u003e\u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/code\u003e\u003c/strong\u003e (\u003cem\u003etells the browser \u0026quot;this is modern HTML\u0026quot; — always the first line\u003c/em\u003e); \u003cstrong\u003e\u003ccode\u003e\u0026lt;html\u0026gt;\u003c/code\u003e\u003c/strong\u003e (\u003cem\u003ewraps the entire page\u003c/em\u003e); \u003cstrong\u003e\u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e\u003c/strong\u003e (\u003cem\u003einvisible setup info — the \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e shows in the browser tab, plus metadata + links to CSS; nothing here appears in the page body\u003c/em\u003e); and \u003cstrong\u003e\u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e\u003c/strong\u003e (\u003cem\u003eeverything VISIBLE on the page — your headings, text, images, links — all your content goes here\u003c/em\u003e). Inside \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e, notice the pattern: \u003cstrong\u003e\u003ccode\u003e\u0026lt;h1\u0026gt;About Me\u0026lt;/h1\u0026gt;\u003c/code\u003e\u003c/strong\u003e is an \u003cem\u003eelement\u003c/em\u003e — an opening tag \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e, some content, + a closing tag \u003ccode\u003e\u0026lt;/h1\u0026gt;\u003c/code\u003e (the slash marks the close). \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e is a big heading; \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e is a paragraph; \u003ccode\u003e\u0026lt;strong\u0026gt;\u003c/code\u003e makes text bold. \u003cem\u003eYou write content, wrap it in tags to give it meaning, + the browser displays it accordingly.\u003c/em\u003e That\u0026#39;s the whole game — + it\u0026#39;s exactly what lesson 2 dives into. Change \u0026quot;About Me\u0026quot; to your name and re-run the box; you\u0026#39;re editing a real web page.\u003c/p\u003e\n\u003ch2\u003eThe mistake beginners make\u003c/h2\u003e\n\u003cp\u003eThe first mistake is \u003cstrong\u003ethinking you need special/expensive software\u003c/strong\u003e — believing web development requires costly tools or a powerful machine, when a \u003cem\u003efree browser + a text file\u003c/em\u003e is a complete setup; you already have everything. The second mistake is \u003cstrong\u003econfusing the three languages\u003c/strong\u003e — mixing up what \u003cem\u003eHTML, CSS, + JavaScript\u003c/em\u003e each do; remember \u003cem\u003eHTML = structure, CSS = style, JavaScript = behaviour\u003c/em\u003e (skeleton, skin, muscles). The third mistake is \u003cstrong\u003eskipping the skeleton\u003c/strong\u003e — forgetting \u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;html\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e, or \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e, so pages behave oddly; every page shares that same frame. And \u003cstrong\u003efearing you\u0026#39;ll break something\u003c/strong\u003e — hesitating to \u003cem\u003eexperiment\u003c/em\u003e; you can\u0026#39;t break anything by editing a practice box — change it, run it, learn from what happens. And \u003cstrong\u003eonly reading, never running\u003c/strong\u003e — passively reading code without \u003cem\u003etyping + running\u003c/em\u003e it; the whole point is hands-on — edit every box. Know the tools are free, distinguish the three languages, use the skeleton, experiment fearlessly, and run every example.\u003c/p\u003e\n\u003ch2\u003eYour turn\u003c/h2\u003e\n\u003chr\u003e\n\u003ch3\u003eYour turn\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eUnderstand how the web works: a website is just FILES a BROWSER reads + displays - when you visit a site, your browser fetches files from a server and paints them on screen. The web = your browser fetching + displaying files.\u003c/li\u003e\n\u003cli\u003eLearn the three languages + their roles: HTML (structure/content - the skeleton), CSS (styling/appearance - the skin + clothes), JavaScript (behaviour/interactivity - the muscles). This course covers HTML + CSS, the true foundations.\u003c/li\u003e\n\u003cli\u003eKnow your (free) tools: a web BROWSER to view pages (you have one) + a TEXT EDITOR to write code (VS Code for real projects, or the runnable boxes here to learn) - and that an HTML file is just a plain text file ending in .html (index.html = the home page).\u003c/li\u003e\n\u003cli\u003eLearn the page skeleton every HTML file shares: \u003c!DOCTYPE html\u003e (modern HTML), \u003chtml\u003e (wraps everything), \u003chead\u003e (invisible setup - \u003ctitle\u003e/metadata), \u003cbody\u003e (everything VISIBLE - your content goes here).\u003c/li\u003e\n\u003cli\u003eEdit + run the live boxes: change the text in the \u0026#39;About Me\u0026#39; example above to your own name/details and re-run it - you\u0026#39;re editing a real web page. Experiment fearlessly; you can\u0026#39;t break anything.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003cstrong\u003eKey points\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eA WEBSITE = FILES a BROWSER reads + displays. When you visit a site, your BROWSER (Chrome/Firefox/Safari) fetches files from a SERVER over the internet and paints them on screen. The web = browser fetching + displaying files.\u003c/li\u003e\n\u003cli\u003eTHREE LANGUAGES build every page (in order): HTML (structure/content — \u0026#39;what it is\u0026#39; — this course), CSS (styling/appearance — \u0026#39;how it looks\u0026#39; — this course), JavaScript (behaviour/interactivity — \u0026#39;what it does\u0026#39; — later). Analogy: HTML = skeleton, CSS = skin/clothes, JS = muscles. HTML + CSS alone build a complete, real website.\u003c/li\u003e\n\u003cli\u003eTOOLS (free — you already have them): a BROWSER (to view) + a TEXT EDITOR (to write — VS Code for real work, or the runnable lesson boxes to learn). An HTML file = a plain text file ending in .html; index.html = the special home-page name.\u003c/li\u003e\n\u003cli\u003eThe PAGE SKELETON every HTML file shares: \u003c!DOCTYPE html\u003e (modern HTML — first line), \u003chtml\u003e (wraps the page), \u003chead\u003e (invisible setup — \u003ctitle\u003e shows in the tab, plus metadata/CSS links), \u003cbody\u003e (everything VISIBLE — your content). ELEMENT pattern: \u003ch1\u003econtent\u003c/h1\u003e = opening tag + content + closing tag (slash = close).\u003c/li\u003e\n\u003cli\u003eThe mistakes: thinking you need special/expensive software (a free browser + text file is enough), confusing the three languages (HTML/CSS/JS = structure/style/behaviour), skipping the skeleton, fearing you\u0026#39;ll break something (experiment freely), and only reading without running (edit + run every box — it\u0026#39;s hands-on).\u003c/li\u003e\n\u003c/ul\u003e\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"div\",\"4\",{\"className\":\"lesson-content\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2f\"}}]\n"])</script></body></html>