Lesson 4 of 32
Your first page
You've seen fragments of HTML. Now let's build a complete, proper web page — the real structure every website starts from. This is the boilerplate you'll begin every page with, and it's worth understanding each line.
The full skeleton
Here's a complete HTML document. Run it, then we'll walk through each part:
Try it Yourself
Loading editor…
Result
Every real page has this shape. Line by line:
<!DOCTYPE html>— tells the browser "this is modern HTML." Always the first line.<html>— the root element that wraps the entire page. Everything lives inside it.<head>— information about the page that isn't shown in the main content: the title, links to stylesheets, metadata. (More on this later.)<title>— the page's title, shown in the browser tab (not on the page itself).<body>— everything the visitor actually sees: headings, text, images, links. This is where most of your work goes.
head vs body — the key split
The most important idea here: <head> is invisible information; <body> is visible content. The title in the head shows in the tab; the heading in the body shows on the page. Beginners sometimes put visible content in the head (where it won't show) — visible things go in the body.
Try it Yourself
Loading editor…
Result
Indentation keeps it readable
Notice how nested elements are indented. HTML doesn't require indentation (the browser ignores the extra spaces), but indenting nested elements makes the structure obvious to humans. As pages grow, this readability is essential. Get in the habit now.
The mistake beginners make
Putting content in the wrong place — visible text in <head> (won't show), or forgetting to nest everything inside <html>, <head>, and <body> correctly. The nesting order is always: html wraps head and body; body holds your visible content.
Your turn
Try it Yourself
Loading editor…
Result
Your turn
- Build a complete page with doctype, html, head, title, and body.
- Change the title and watch the browser tab (in the result) update.
- Move the h1 into the head instead of the body and see that it disappears — then move it back.
Key points
- Every page starts with , then wrapping and .
- = invisible info (title, metadata); = the visible content.
shows in the browser tab, not on the page.</li> <li>Indent nested elements for readability — the browser ignores it, but humans need it.</li> </ul> </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/html-essentials">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 hidden 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/2gltei591vd6k.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\",\"html-essentials\",\"learn\",\"your-first-page\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"academy\",{\"children\":[[\"slug\",\"html-essentials\",\"d\",null],{\"children\":[\"learn\",{\"children\":[[\"lessonSlug\",\"your-first-page\",\"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/2gltei591vd6k.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/2y7t2iyada78f.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/0hn9lmnv-zeap.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0egleqe_imyqp.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0th3wmenb_dov.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/2gltei591vd6k.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"IaLVAm00oczbnJh0TGy-Y\"}\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/2y7t2iyada78f.js\",\"/_next/static/chunks/2jd_f8vkw-_gv.js\",\"/_next/static/chunks/2qumv64lc9l8j.js\",\"/_next/static/chunks/0hn9lmnv-zeap.js\",\"/_next/static/chunks/0egleqe_imyqp.js\",\"/_next/static/chunks/0th3wmenb_dov.js\"],\"\"]\n12:I[505014,[\"/_next/static/chunks/2gy-_gqux3q2e.js\",\"/_next/static/chunks/2y7t2iyada78f.js\",\"/_next/static/chunks/2jd_f8vkw-_gv.js\",\"/_next/static/chunks/2qumv64lc9l8j.js\",\"/_next/static/chunks/0hn9lmnv-zeap.js\",\"/_next/static/chunks/0egleqe_imyqp.js\",\"/_next/static/chunks/0th3wmenb_dov.js\"],\"default\"]\n13:I[418662,[\"/_next/static/chunks/2gy-_gqux3q2e.js\"],\"PageViewTracker\"]\n14:I[847645,[\"/_next/static/chunks/2gy-_gqux3q2e.js\",\"/_next/static/chunks/2y7t2iyada78f.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-poppins)\",\"--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-rose 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/html-essentials/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/html-essentials/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/2y7t2iyada78f.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/html-essentials\",\"className\":\"text-[0.7rem] uppercase tracking-[0.14em] text-ink-faint hover:text-ink\",\"children\":[\"← \",\"HTML Essentials\"]}],false,[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-col gap-4\",\"children\":[[\"$\",\"div\",\"122\",{\"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\",\"279\",{\"href\":\"/academy/html-essentials/learn/what-html-is\",\"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\":[[\"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\":\"What HTML is\"}]]}]}],[\"$\",\"div\",\"280\",{\"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\":\"How the browser reads HTML\"}]]}]}],[\"$\",\"div\",\"281\",{\"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\":\"Elements, tags \u0026 attributes\"}]]}]}],[\"$\",\"$L11\",\"282\",{\"href\":\"/academy/html-essentials/learn/your-first-page\",\"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\":\"$6:props:children:0:props:children:2:props:children:0:props:children:1:props:children:0:props:children:props:children:0:props:iconNode\",\"className\":\"lucide-circle-play shrink-0 text-ink-faint\",\"size\":14}],[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Your first page\"}]]}]}],[\"$\",\"div\",\"283\",{\"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\":\"Page structure: head \u0026 body\"}]]}]}]]}]]}],[\"$\",\"div\",\"123\",{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-1 px-2.5 text-[0.6rem] uppercase tracking-[0.12em] text-ink-faint\",\"children\":\"Text \u0026 content\"}],[\"$\",\"ol\",null,{\"className\":\"flex flex-col gap-0.5\",\"children\":[[\"$\",\"div\",\"284\",{\"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\":\"Headings\"}]]}]}],[\"$\",\"div\",\"285\",{\"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\":\"Paragraphs \u0026 whitespace\"}]]}]}],\"$L25\",\"$L26\",\"$L27\"]}]]}],\"$L28\",\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\"]}]]}],\"$L2e\"]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"div\",\"286\",{\"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\":\"Bold, italic \u0026 emphasis\"}]]}]}]\n26:[\"$\",\"div\",\"287\",{\"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\":\"Line breaks \u0026 dividers\"}]]}]}]\n27:[\"$\",\"div\",\"288\",{\"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\":\"Comments\"}]]}]}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"div\",\"124\",{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-1 px-2.5 text-[0.6rem] uppercase tracking-[0.12em] text-ink-faint\",\"children\":\"Links \u0026 media\"}],[\"$\",\"ol\",null,{\"className\":\"flex flex-col gap-0.5\",\"children\":[[\"$\",\"$L11\",\"289\",{\"href\":\"/academy/html-essentials/learn/links\",\"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:0:props:children:props:children:0:props:iconNode\",\"className\":\"lucide-circle-play shrink-0 text-ink-faint\",\"size\":14}],[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Links\"}]]}]}],[\"$\",\"div\",\"290\",{\"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\":\"Link types \u0026 targets\"}]]}]}],[\"$\",\"div\",\"291\",{\"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\":\"Images\"}]]}]}],[\"$\",\"div\",\"292\",{\"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\":\"Image attributes\"}]]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"div\",\"125\",{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-1 px-2.5 text-[0.6rem] uppercase tracking-[0.12em] text-ink-faint\",\"children\":\"Lists \u0026 tables\"}],[\"$\",\"ol\",null,{\"className\":\"flex flex-col gap-0.5\",\"children\":[[\"$\",\"div\",\"293\",{\"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\":\"Lists\"}]]}]}],[\"$\",\"div\",\"294\",{\"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\":\"Nested lists\"}]]}]}],[\"$\",\"div\",\"295\",{\"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\":\"Tables\"}]]}]}],[\"$\",\"div\",\"296\",{\"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\":\"Table headers \u0026 spanning\"}]]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"div\",\"126\",{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-1 px-2.5 text-[0.6rem] uppercase tracking-[0.12em] text-ink-faint\",\"children\":\"Structure \u0026 layout\"}],[\"$\",\"ol\",null,{\"className\":\"flex flex-col gap-0.5\",\"children\":[[\"$\",\"div\",\"297\",{\"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\":\"Divs \u0026 spans\"}]]}]}],[\"$\",\"div\",\"298\",{\"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\":\"Semantic structure\"}]]}]}],[\"$\",\"div\",\"299\",{\"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\":\"Sections \u0026 articles\"}]]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"2b:[\"$\",\"div\",\"127\",{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-1 px-2.5 text-[0.6rem] uppercase tracking-[0.12em] text-ink-faint\",\"children\":\"Forms\"}],[\"$\",\"ol\",null,{\"className\":\"flex flex-col gap-0.5\",\"children\":[[\"$\",\"div\",\"300\",{\"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\":\"Forms \u0026 inputs\"}]]}]}],[\"$\",\"div\",\"301\",{\"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\":\"Labels \u0026 accessibility\"}]]}]}],[\"$\",\"div\",\"302\",{\"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\":\"Input types\"}]]}]}],[\"$\",\"div\",\"303\",{\"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\":\"Text areas, selects \u0026 buttons\"}]]}]}],[\"$\",\"div\",\"304\",{\"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\":\"Basic validation\"}]]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"2c:[\"$\",\"div\",\"128\",{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-1 px-2.5 text-[0.6rem] uppercase tracking-[0.12em] text-ink-faint\",\"children\":\"Attributes \u0026 the head\"}],[\"$\",\"ol\",null,{\"className\":\"flex flex-col gap-0.5\",\"children\":[[\"$\",\"div\",\"305\",{\"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\":\"id, class \u0026 style\"}]]}]}],[\"$\",\"div\",\"306\",{\"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 head \u0026 meta tags\"}]]}]}],[\"$\",\"div\",\"307\",{\"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\":\"Linking CSS \u0026 JavaScript\"}]]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"div\",\"129\",{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-1 px-2.5 text-[0.6rem] uppercase tracking-[0.12em] text-ink-faint\",\"children\":\"Putting it together\"}],[\"$\",\"ol\",null,{\"className\":\"flex flex-col gap-0.5\",\"children\":[[\"$\",\"div\",\"308\",{\"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\":\"Build a profile page\"}]]}]}],[\"$\",\"div\",\"309\",{\"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\":\"Common mistakes\"}]]}]}],[\"$\",\"div\",\"310\",{\"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\":\"Where to go next\"}]]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"article\",null,{\"className\":\"order-1 min-w-0 lg:order-2\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/academy/html-essentials\",\"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}],\" \",\"HTML Essentials\"]}],false,[\"$\",\"p\",null,{\"className\":\"text-[0.7rem] uppercase tracking-[0.14em] text-ink-faint\",\"children\":[\"Lesson \",4,\" of \",32]}],[\"$\",\"h1\",null,{\"className\":\"mt-2 font-display text-3xl font-extrabold tracking-tight text-ink\",\"children\":\"Your first page\"}],[null,\"$L2f\",false,false,[\"$\",\"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/html-essentials\",\"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\":[false,null]}]]}],[\"$\",\"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.\"}],[]]}]]}]]]}]\n"])</script><script>self.__next_f.push([1,"30:I[787611,[\"/_next/static/chunks/2gy-_gqux3q2e.js\",\"/_next/static/chunks/2y7t2iyada78f.js\",\"/_next/static/chunks/2jd_f8vkw-_gv.js\",\"/_next/static/chunks/2qumv64lc9l8j.js\",\"/_next/static/chunks/0hn9lmnv-zeap.js\",\"/_next/static/chunks/0egleqe_imyqp.js\",\"/_next/static/chunks/0th3wmenb_dov.js\"],\"CodePlayground\"]\n31:T4df,\u003cp\u003eEvery real page has this shape. Line by line:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/code\u003e\u003c/strong\u003e — tells the browser \u0026quot;this is modern HTML.\u0026quot; Always the first line.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;html\u0026gt;\u003c/code\u003e\u003c/strong\u003e — the root element that wraps the \u003cem\u003eentire\u003c/em\u003e page. Everything lives inside it.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e\u003c/strong\u003e — information \u003cem\u003eabout\u003c/em\u003e the page that isn\u0026#39;t shown in the main content: the title, links to stylesheets, metadata. (More on this later.)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e\u003c/strong\u003e — the page\u0026#39;s title, shown in the browser tab (not on the page itself).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e\u003c/strong\u003e — everything the visitor actually \u003cem\u003esees\u003c/em\u003e: headings, text, images, links. This is where most of your work goes.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003ehead vs body — the key split\u003c/h2\u003e\n\u003cp\u003eThe most important idea here: \u003cstrong\u003e\u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e is invisible information; \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e is visible content.\u003c/strong\u003e The title in the head shows in the tab; the heading in the body shows on the page. Beginners sometimes put visible content in the head (where it won\u0026#39;t show) — visible things go in the \u003cstrong\u003ebody\u003c/strong\u003e.\u003c/p\u003e\n"])</script><script>self.__next_f.push([1,"2f:[\"$\",\"div\",null,{\"className\":\"mt-6 max-w-2xl space-y-2 break-words\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"lesson-content\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp\u003eYou\u0026#39;ve seen fragments of HTML. Now let\u0026#39;s build a \u003cem\u003ecomplete, proper\u003c/em\u003e web page — the real structure every website starts from. This is the boilerplate you\u0026#39;ll begin every page with, and it\u0026#39;s worth understanding each line.\u003c/p\u003e\\n\u003ch2\u003eThe full skeleton\u003c/h2\u003e\\n\u003cp\u003eHere\u0026#39;s a complete HTML document. Run it, then we\u0026#39;ll walk through each part:\u003c/p\u003e\\n\"}}],[\"$\",\"$L30\",\"1\",{\"initialCode\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n \u003chead\u003e\\n \u003ctitle\u003eMy Page\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003ch1\u003eWelcome\u003c/h1\u003e\\n \u003cp\u003eThis is a complete web page.\u003c/p\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\"}],[\"$\",\"div\",\"2\",{\"className\":\"lesson-content\",\"dangerouslySetInnerHTML\":{\"__html\":\"$31\"}}],[\"$\",\"$L30\",\"3\",{\"initialCode\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n \u003chead\u003e\\n \u003ctitle\u003eLook at the browser tab title\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003ch1\u003eThis shows on the page\u003c/h1\u003e\\n \u003cp\u003eEverything visible goes in the body.\u003c/p\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\"}],[\"$\",\"div\",\"4\",{\"className\":\"lesson-content\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003ch2\u003eIndentation keeps it readable\u003c/h2\u003e\\n\u003cp\u003eNotice how nested elements are \u003cem\u003eindented\u003c/em\u003e. HTML doesn\u0026#39;t \u003cem\u003erequire\u003c/em\u003e indentation (the browser ignores the extra spaces), but indenting nested elements makes the structure obvious to \u003cem\u003ehumans\u003c/em\u003e. As pages grow, this readability is essential. Get in the habit now.\u003c/p\u003e\\n\u003ch2\u003eThe mistake beginners make\u003c/h2\u003e\\n\u003cp\u003ePutting content in the wrong place — visible text in \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e (won\u0026#39;t show), or forgetting to nest everything inside \u003ccode\u003e\u0026lt;html\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e, and \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e correctly. The nesting order is always: \u003ccode\u003ehtml\u003c/code\u003e wraps \u003ccode\u003ehead\u003c/code\u003e and \u003ccode\u003ebody\u003c/code\u003e; \u003ccode\u003ebody\u003c/code\u003e holds your visible content.\u003c/p\u003e\\n\u003ch2\u003eYour turn\u003c/h2\u003e\\n\"}}],[\"$\",\"$L30\",\"5\",{\"initialCode\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n \u003chead\u003e\\n \u003ctitle\u003eChange the tab title\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003ch1\u003eYour name here\u003c/h1\u003e\\n \u003cp\u003eWrite a short intro about yourself.\u003c/p\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\"}],[\"$\",\"div\",\"6\",{\"className\":\"lesson-content\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003chr\u003e\\n\u003ch3\u003eYour turn\u003c/h3\u003e\\n\u003col\u003e\\n\u003cli\u003eBuild a complete page with doctype, html, head, title, and body.\u003c/li\u003e\\n\u003cli\u003eChange the title and watch the browser tab (in the result) update.\u003c/li\u003e\\n\u003cli\u003eMove the h1 into the head instead of the body and see that it disappears — then move it back.\u003c/li\u003e\\n\u003c/ol\u003e\\n\u003cp\u003e\u003cstrong\u003eKey points\u003c/strong\u003e\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEvery page starts with \u003c!DOCTYPE html\u003e, then \u003chtml\u003e wrapping \u003chead\u003e and \u003cbody\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003chead\u003e = invisible info (title, metadata); \u003cbody\u003e = the visible content.\u003c/li\u003e\\n\u003cli\u003e\u003ctitle\u003e shows in the browser tab, not on the page.\u003c/li\u003e\\n\u003cli\u003eIndent nested elements for readability — the browser ignores it, but humans need it.\u003c/li\u003e\\n\u003c/ul\u003e\\n\"}}]]}]\n"])</script></body></html>