-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
252 lines (250 loc) · 24.4 KB
/
Copy pathindex.html
File metadata and controls
252 lines (250 loc) · 24.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML Fundamentals — Techbase STEM Academy</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{--bg:#f8fafc;--surface:#fff;--s2:#f1f5f9;--border:#e2e8f0;--border2:#cbd5e1;--text:#0f172a;--t2:#334155;--muted:#64748b;--light:#94a3b8;--D:'Space Grotesk',sans-serif;--B:'Plus Jakarta Sans',sans-serif;--M:'JetBrains Mono',monospace;--sh:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);--sh2:0 4px 12px rgba(0,0,0,.1),0 16px 48px rgba(0,0,0,.08)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text);font-family:var(--B);font-size:16px;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);height:64px;display:flex;align-items:center;padding:0 2rem}
.nav-inner{max-width:1200px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-logo{font-family:var(--D);font-weight:700;font-size:1rem;color:var(--text);text-decoration:none}
.nav-logo em{font-style:normal;color:#0d9488}
.nav-links{list-style:none;display:flex;align-items:center;gap:1.8rem}
.nav-links a{color:var(--muted);font-size:.875rem;font-weight:500;text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.hero{padding:100px 2rem 70px;background:var(--hero-bg);position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:50px 50px;opacity:.5;mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 0%,transparent 100%)}
.hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:5rem;align-items:center}
.wrap{max-width:1200px;margin:0 auto;padding:0 2rem}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;border-radius:100px;padding:.28rem 1rem;font-family:var(--M);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.5rem;border:1px solid;font-weight:500}
h1{font-family:var(--D);font-weight:700;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.05;letter-spacing:-.03em;color:var(--text);margin-bottom:1.2rem;animation:rise .6s .1s both}
.hero-sub{font-size:1rem;color:var(--muted);max-width:520px;line-height:1.8;margin-bottom:2rem;animation:rise .6s .2s both}
.hero-sub code{font-family:var(--M);font-size:.88em;background:var(--s2);border:1px solid var(--border2);padding:.1rem .4rem;border-radius:4px}
.hero-stats{display:flex;gap:2.5rem;margin-bottom:2rem;animation:rise .6s .3s both}
.stat-n{font-family:var(--D);font-weight:700;font-size:1.9rem;display:block;line-height:1}
.stat-l{font-size:.7rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:.1rem}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap;animation:rise .6s .4s both}
.btn-p{display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-family:var(--D);font-weight:600;font-size:.875rem;padding:.8rem 1.6rem;border-radius:10px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn-p:hover{transform:translateY(-2px)}
.btn-g{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);color:var(--t2);font-family:var(--D);font-weight:600;font-size:.875rem;padding:.8rem 1.6rem;border-radius:10px;text-decoration:none;border:1.5px solid var(--border2);transition:border-color .2s,box-shadow .2s}
.btn-g:hover{border-color:var(--light);box-shadow:var(--sh)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* PREVIEW CARD (right side of hero) */
.prev-card{background:#0f172a;border-radius:16px;overflow:hidden;box-shadow:var(--sh2);animation:rise .6s .5s both}
.pc-bar{padding:.75rem 1rem;background:#1e293b;display:flex;align-items:center;gap:.4rem}
.dot{width:9px;height:9px;border-radius:50%}.dr{background:#ff5f57}.dy{background:#febc2e}.dg{background:#28c840}
.pc-tab{margin-left:.5rem;font-family:var(--M);font-size:.65rem;color:#64748b}
.pc-body{padding:1.3rem 1.5rem;font-family:var(--M);font-size:.78rem;line-height:2;color:#e2e8f0}
/* TICKER */
.ticker-wrap{overflow:hidden;padding:.65rem 0}
.ticker{display:flex;white-space:nowrap;animation:scroll 30s linear infinite}
.ti{font-family:var(--M);font-size:.72rem;padding:0 2rem}
.ti em{font-style:normal}
.ti::after{content:'·';margin-left:2rem;opacity:.3}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* SECTIONS */
.sec{padding:5rem 0}
.sec-div{border-top:1px solid var(--border)}
.sec-white{background:var(--surface)}
.slbl{font-family:var(--M);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.8rem;font-weight:500}
.sec-h2{font-family:var(--D);font-weight:700;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.025em;line-height:1.15;color:var(--text)}
/* ABOUT 2-COL */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4.5rem;align-items:start}
.about-text h2{font-family:var(--D);font-weight:700;font-size:clamp(1.5rem,2.8vw,2rem);letter-spacing:-.02em;margin-bottom:1rem;line-height:1.2;color:var(--text)}
.about-text p{color:var(--muted);margin-bottom:.9rem;line-height:1.8;font-size:.95rem}
.learn-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-top:.5rem}
.learn-list li{display:flex;align-items:flex-start;gap:.7rem;font-size:.9rem;color:var(--t2)}
.learn-list li::before{content:'✓';font-family:var(--M);flex-shrink:0;margin-top:2px;font-size:.8rem;font-weight:700}
/* TOOLS CARD */
.tc{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
.tc-head{padding:.85rem 1.4rem;border-bottom:1px solid var(--border);font-family:var(--M);font-size:.7rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;background:var(--s2)}
.tc-row{display:flex;align-items:center;justify-content:space-between;padding:.95rem 1.4rem;border-bottom:1px solid var(--border);transition:background .15s}
.tc-row:last-child{border-bottom:none}.tc-row:hover{background:var(--s2)}
.tc-name{font-weight:600;font-size:.88rem;color:var(--text)}
.tc-info{font-size:.78rem;color:var(--muted)}
.tc-link{font-family:var(--M);font-size:.68rem;color:#0284c7;text-decoration:none;opacity:.75;transition:opacity .2s}
.tc-link:hover{opacity:1}
/* PHASE DIVIDER */
.phase-div{display:flex;align-items:center;gap:1rem;margin:2.5rem 0 1rem}
.phase-div span{font-family:var(--M);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-weight:500}
.phase-div::after{content:'';flex:1;height:1px;background:var(--border)}
/* LESSON GRID */
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--border);border:1.5px solid var(--border);border-radius:16px;overflow:hidden}
.lc{background:var(--surface);padding:1.15rem 1.4rem;display:flex;align-items:flex-start;gap:.85rem;text-decoration:none;transition:background .18s;position:relative}
.lc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;transform:scaleY(0);transform-origin:bottom;transition:transform .2s}
.lc:hover{background:var(--s2)}.lc:hover::before{transform:scaleY(1)}
.lnum{font-family:var(--M);font-size:.63rem;padding:.15rem .5rem;border-radius:5px;border:1px solid;flex-shrink:0;margin-top:3px;font-weight:500}
.ltitle{font-size:.875rem;color:var(--t2);line-height:1.45;transition:color .18s}
.lc:hover .ltitle{color:var(--text)}
/* STEPS */
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3rem;position:relative}
.steps-row::before{content:'';position:absolute;top:26px;left:calc(12.5% + 1rem);right:calc(12.5% + 1rem);height:1.5px;opacity:.25;background:linear-gradient(90deg,#0d9488,#3b82f6,#f59e0b,#0d9488)}
.step{text-align:center}
.step-n{width:52px;height:52px;border-radius:50%;background:var(--surface);border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:var(--M);font-size:.8rem;font-weight:500;margin:0 auto 1.1rem;transition:border-color .2s,box-shadow .2s;position:relative;z-index:1}
.step h3{font-family:var(--D);font-weight:600;font-size:.93rem;margin-bottom:.4rem;color:var(--text)}
.step p{font-size:.83rem;color:var(--muted);line-height:1.65}
/* FOOTER */
footer{background:var(--text);color:rgba(255,255,255,.65);padding:4rem 2rem 2rem}
.fi{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1)}
.fb{font-family:var(--D);font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:.4rem}
.fb p{font-family:var(--B);font-weight:400;font-size:.82rem;margin-top:.3rem;line-height:1.65}
.fl-h{font-family:var(--D);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1rem}
.fl{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.fl a{color:rgba(255,255,255,.6);font-size:.84rem;text-decoration:none;transition:color .2s}
.fl a:hover{color:#fff}
.f-bot{max-width:1200px;margin:1.5rem auto 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:rgba(255,255,255,.4)}
/* SCROLL REVEAL */
.sr{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.sr.in{opacity:1;transform:none}
/* RESPONSIVE */
@media(max-width:960px){.hero-inner{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr;gap:2.5rem}.steps-row{grid-template-columns:1fr 1fr;gap:1.5rem}.steps-row::before{display:none}.fi{grid-template-columns:1fr 1fr;gap:2rem}.nav-links li:not(.keep){display:none}}
@media(max-width:600px){.hero-inner{grid-template-columns:1fr}.lesson-grid{grid-template-columns:1fr}.steps-row{grid-template-columns:1fr}h1{font-size:2rem}.fi{grid-template-columns:1fr}}
:root{--c:#ea4f21;--hero-bg:linear-gradient(160deg,#fff7f5 0%,#f8fafc 50%,#fef9f7 100%)}
.eyebrow{color:#ea4f21;background:rgba(234,79,33,.07);border-color:rgba(234,79,33,.2)}
.stat-n{color:#ea4f21}.slbl{color:#ea4f21}
.step-n{color:#ea4f21}.step:hover .step-n{border-color:#ea4f21;box-shadow:0 0 0 4px rgba(234,79,33,.1)}
.lc::before{background:#ea4f21}.lnum{color:#ea4f21;background:rgba(234,79,33,.07);border-color:rgba(234,79,33,.2)}
.btn-p{background:#ea4f21;box-shadow:0 4px 14px rgba(234,79,33,.3)}.btn-p:hover{box-shadow:0 8px 24px rgba(234,79,33,.4)}
.ticker-wrap{background:#fff7f5;border-top:1px solid #ffd5c8;border-bottom:1px solid #ffd5c8}
.ti{color:#c2410c}.ti em{color:#ea4f21}.fb{color:#ea4f21}
</style></head><body>
<nav><div class="nav-inner">
<a href="https://techbaseng.github.io" class="nav-logo"><em>Techbase</em> Academy</a>
<ul class="nav-links">
<li class="keep"><a href="#lessons">Lessons</a></li><li><a href="#about">About</a></li>
<li><a href="https://techbaseng.github.io">← All Courses</a></li>
<li class="keep"><a href="lessons/lesson_01.html" style="color:#ea4f21;font-weight:600">Start Course →</a></li>
</ul>
</div></nav>
<section class="hero"><div class="hero-grid"></div>
<div class="hero-inner">
<div>
<div class="eyebrow">Free Course · Beginner · Ibadan, Nigeria</div>
<h1>HTML<br>Fundamentals</h1>
<p class="hero-sub">Learn the language that powers every website. From your first <code><html></code> tag to responsive layouts and Web APIs — <strong>34 lessons</strong>, zero prerequisites.</p>
<div class="hero-stats">
<div><span class="stat-n">34</span><span class="stat-l">Lessons</span></div>
<div><span class="stat-n">4</span><span class="stat-l">Phases</span></div>
<div><span class="stat-n">None</span><span class="stat-l">Prerequisites</span></div>
</div>
<div class="btn-row">
<a href="lessons/lesson_01.html" class="btn-p">Start Lesson 01 →</a>
<a href="#lessons" class="btn-g">View All 34 Lessons</a>
</div>
</div>
<div class="prev-card">
<div class="pc-bar"><span class="dot dr"></span><span class="dot dy"></span><span class="dot dg"></span><span class="pc-tab">index.html</span></div>
<div class="pc-body">
<div><span style="color:#c084fc"><!DOCTYPE</span> <span style="color:#86efac">html</span><span style="color:#c084fc">></span></div>
<div><span style="color:#38bdf8"><html</span> <span style="color:#86efac">lang</span><span style="color:#fb923c">="en"</span><span style="color:#38bdf8">></span></div>
<div style="padding-left:1.2em"><span style="color:#38bdf8"><head></span></div>
<div style="padding-left:2.4em"><span style="color:#c084fc"><title></span><span style="color:#e2e8f0">My First Page</span><span style="color:#c084fc"></title></span></div>
<div style="padding-left:1.2em"><span style="color:#38bdf8"></head></span></div>
<div style="padding-left:1.2em"><span style="color:#38bdf8"><body></span></div>
<div style="padding-left:2.4em"><span style="color:#c084fc"><h1></span><span style="color:#34d399">Hello, World!</span><span style="color:#c084fc"></h1></span></div>
<div style="padding-left:2.4em"><span style="color:#c084fc"><p></span><span style="color:#e2e8f0">Built with HTML.</span><span style="color:#c084fc"></p></span></div>
<div style="padding-left:1.2em"><span style="color:#38bdf8"></body></span></div>
<div><span style="color:#38bdf8"></html></span></div>
</div>
</div>
</div></section>
<div class="ticker-wrap" aria-hidden="true"><div class="ticker">
<span class="ti"><em><html></em> structure</span><span class="ti"><em><a></em> links</span><span class="ti"><em><img></em> images</span><span class="ti"><em><table></em> tables</span><span class="ti"><em><form></em> input</span><span class="ti"><em><header></em> semantic</span><span class="ti"><em><canvas></em> graphics</span><span class="ti"><em><meta></em> SEO</span>
<span class="ti"><em><html></em> structure</span><span class="ti"><em><a></em> links</span><span class="ti"><em><img></em> images</span><span class="ti"><em><table></em> tables</span><span class="ti"><em><form></em> input</span><span class="ti"><em><header></em> semantic</span><span class="ti"><em><canvas></em> graphics</span><span class="ti"><em><meta></em> SEO</span>
</div></div>
<main>
<section class="sec" id="about"><div class="wrap"><div class="about-grid sr">
<div class="about-text">
<div class="slbl">About This Course</div>
<h2>Build the web from scratch.</h2>
<p>HTML is the skeleton of every webpage. Before styling or scripting, you need HTML — the language that gives the web its structure and meaning. Designed by <strong>Babatunde Awoyemi</strong>, Techbase Consultant Services, Ibadan. 34 lessons, zero prerequisites.</p>
<ul class="learn-list">
<li>How browsers read and render HTML documents</li>
<li>Headings, paragraphs, text formatting and links</li>
<li>Images, tables, lists and accessible forms</li>
<li>Semantic HTML — header, nav, main, footer, article</li>
<li>Responsive design and layout techniques</li>
<li>Canvas, SVG, media and HTML5 Web APIs</li>
</ul>
</div>
<div class="tc">
<div class="tc-head"><span class="dot dr"></span><span class="dot dy"></span><span class="dot dg"></span> tools_needed.txt</div>
<div class="tc-row"><div><div class="tc-name">VS Code</div><div class="tc-info">Write your HTML code</div></div><a href="https://code.visualstudio.com" class="tc-link" target="_blank">↗ Download</a></div>
<div class="tc-row"><div><div class="tc-name">Chrome / Firefox</div><div class="tc-info">Preview your pages live</div></div><span class="tc-link">Already installed</span></div>
<div class="tc-row"><div><div class="tc-name">Chrome DevTools</div><div class="tc-info">Inspect and debug HTML</div></div><span class="tc-link">Press F12</span></div>
<div class="tc-row"><div><div class="tc-name">GitHub Pages</div><div class="tc-info">Publish your site free</div></div><a href="https://pages.github.com" class="tc-link" target="_blank">↗ Learn more</a></div>
<div class="tc-row"><div><div class="tc-name">Next: CSS Styling</div><div class="tc-info">After this course</div></div><a href="https://techbaseng.github.io/techbase-css/" class="tc-link">↗ Go there</a></div>
</div>
</div></div></section>
<section class="sec sec-div sec-white" id="lessons"><div class="wrap">
<div class="sr"><div class="slbl">Course Content</div><h2 class="sec-h2">34 Lessons</h2></div>
<div class="phase-div sr"><span>Phase 1 — HTML Foundations (01–10)</span></div>
<div class="lesson-grid sr">
<a href="lessons/lesson_01.html" class="lc"><span class="lnum">01</span><span class="ltitle">Introduction to HTML & Setting Up Your Editor</span></a>
<a href="lessons/lesson_02.html" class="lc"><span class="lnum">02</span><span class="ltitle">HTML Basic Examples: Documents, Headings, Paragraphs, Links & Images</span></a>
<a href="lessons/lesson_03.html" class="lc"><span class="lnum">03</span><span class="ltitle">HTML Elements: Anatomy, Nesting, Empty Elements & Case Sensitivity</span></a>
<a href="lessons/lesson_04.html" class="lc"><span class="lnum">04</span><span class="ltitle">HTML Attributes: Syntax, Key Attributes, Quoting Rules & Best Practices</span></a>
<a href="lessons/lesson_05.html" class="lc"><span class="lnum">05</span><span class="ltitle">HTML Headings: Levels, Importance, SEO, Sizing & Best Practices</span></a>
<a href="lessons/lesson_06.html" class="lc"><span class="lnum">06</span><span class="ltitle">Mastering HTML Paragraphs — Organizing Text Like a Pro</span></a>
<a href="lessons/lesson_07.html" class="lc"><span class="lnum">07</span><span class="ltitle">HTML Styles — Making Your Web Pages Look Great</span></a>
<a href="lessons/lesson_08.html" class="lc"><span class="lnum">08</span><span class="ltitle">HTML Text Formatting</span></a>
<a href="lessons/lesson_09.html" class="lc"><span class="lnum">09</span><span class="ltitle">HTML Quotation and Citation Elements</span></a>
<a href="lessons/lesson_10.html" class="lc"><span class="lnum">10</span><span class="ltitle">HTML Comments</span></a>
</div>
<div class="phase-div sr"><span>Phase 2 — Color, Style & Links (11–15)</span></div>
<div class="lesson-grid sr">
<a href="lessons/lesson_11.html" class="lc"><span class="lnum">11</span><span class="ltitle">HTML Colors — Named Colors, RGB, HEX, and HSL</span></a>
<a href="lessons/lesson_12.html" class="lc"><span class="lnum">12</span><span class="ltitle">HTML Styles — Introduction to CSS</span></a>
<a href="lessons/lesson_13.html" class="lc"><span class="lnum">13</span><span class="ltitle">HTML Links — Hyperlinks, Colors, Bookmarks & Challenges</span></a>
<a href="lessons/lesson_14.html" class="lc"><span class="lnum">14</span><span class="ltitle">HTML Images: From Basics to Responsive Pictures</span></a>
<a href="lessons/lesson_15.html" class="lc"><span class="lnum">15</span><span class="ltitle">HTML Favicon and Page Title</span></a>
</div>
<div class="phase-div sr"><span>Phase 3 — Tables, Lists & Structure (16–22)</span></div>
<div class="lesson-grid sr">
<a href="lessons/lesson_16.html" class="lc"><span class="lnum">16</span><span class="ltitle">HTML Tables — From Zero to Professional</span></a>
<a href="lessons/lesson_17.html" class="lc"><span class="lnum">17</span><span class="ltitle">HTML Lists — Unordered, Ordered, Description, and Nested Lists</span></a>
<a href="lessons/lesson_18.html" class="lc"><span class="lnum">18</span><span class="ltitle">HTML Block & Inline Elements, Div & Span</span></a>
<a href="lessons/lesson_19.html" class="lc"><span class="lnum">19</span><span class="ltitle">HTML class and id Attributes</span></a>
<a href="lessons/lesson_20.html" class="lc"><span class="lnum">20</span><span class="ltitle">HTML Buttons — Creating, Styling, Disabling, and Using Buttons</span></a>
<a href="lessons/lesson_21.html" class="lc"><span class="lnum">21</span><span class="ltitle">HTML Iframes — Embedding Web Pages Inside Web Pages</span></a>
<a href="lessons/lesson_22.html" class="lc"><span class="lnum">22</span><span class="ltitle">HTML JavaScript — Making Web Pages Come Alive</span></a>
</div>
<div class="phase-div sr"><span>Phase 4 — Advanced & Real-World HTML (23–34)</span></div>
<div class="lesson-grid sr">
<a href="lessons/lesson_23.html" class="lc"><span class="lnum">23</span><span class="ltitle">HTML File Paths</span></a>
<a href="lessons/lesson_24.html" class="lc"><span class="lnum">24</span><span class="ltitle">The HTML Head — Metadata, Titles, Styles, Links, Scripts & More</span></a>
<a href="lessons/lesson_25.html" class="lc"><span class="lnum">25</span><span class="ltitle">HTML Layout Elements and Techniques</span></a>
<a href="lessons/lesson_26.html" class="lc"><span class="lnum">26</span><span class="ltitle">HTML Responsive Web Design</span></a>
<a href="lessons/lesson_27.html" class="lc"><span class="lnum">27</span><span class="ltitle">HTML Computer Code Elements</span></a>
<a href="lessons/lesson_28.html" class="lc"><span class="lnum">28</span><span class="ltitle">HTML Semantic Elements</span></a>
<a href="lessons/lesson_29.html" class="lc"><span class="lnum">29</span><span class="ltitle">HTML Style Guide, Character Entities, Symbols & Emojis</span></a>
<a href="lessons/lesson_30.html" class="lc"><span class="lnum">30</span><span class="ltitle">HTML Charsets, URL Encoding, and XHTML</span></a>
<a href="lessons/lesson_31.html" class="lc"><span class="lnum">31</span><span class="ltitle">HTML Forms — Collecting Input from Users</span></a>
<a href="lessons/lesson_32.html" class="lc"><span class="lnum">32</span><span class="ltitle">HTML Canvas and SVG Graphics</span></a>
<a href="lessons/lesson_33.html" class="lc"><span class="lnum">33</span><span class="ltitle">HTML Media — Video, Audio, Plug-ins & YouTube</span></a>
<a href="lessons/lesson_34.html" class="lc"><span class="lnum">34</span><span class="ltitle">HTML5 Web APIs — Geolocation, Drag & Drop, Web Storage, Web Workers & SSE</span></a>
</div>
</div></section>
<section class="sec sec-div"><div class="wrap sr">
<div class="slbl">How It Works</div><h2 class="sec-h2" style="margin-bottom:3rem">Learn at your own pace.</h2>
<div class="steps-row">
<div class="step"><div class="step-n">01</div><h3>Start Here</h3><p>Read this overview to understand all 34 lessons and what you will build.</p></div>
<div class="step"><div class="step-n">02</div><h3>Open Lesson 01</h3><p>Click the button above or the first lesson card. No installation needed.</p></div>
<div class="step"><div class="step-n">03</div><h3>Read & Code</h3><p>Each lesson explains a concept with code examples and hands-on exercises.</p></div>
<div class="step"><div class="step-n">04</div><h3>Move Forward</h3><p>Work at your own pace. Complete all 34 lessons to finish the course.</p></div>
</div>
</div></section>
</main>
<footer>
<div class="fi">
<div><div class="fb">HTML Fundamentals</div><p>Part of the Techbase STEM Academy free course series. Ibadan, Nigeria.</p></div>
<div><p class="fl-h">Lessons</p><ul class="fl"><li><a href="#lessons">All 34 Lessons</a></li><li><a href="https://github.com/techbaseng/techbase-html" target="_blank">GitHub Repo</a></li></ul></div>
<div><p class="fl-h">Next Steps</p><ul class="fl"><li><a href="https://techbaseng.github.io/techbase-css/">CSS Styling →</a></li><li><a href="https://techbaseng.github.io/techbase-js/">JavaScript →</a></li></ul></div>
<div><p class="fl-h">Academy</p><ul class="fl"><li><a href="https://techbaseng.github.io">← All Courses</a></li><li><a href="https://techbasengr.com.ng" target="_blank">Website</a></li></ul></div>
</div>
<div class="f-bot"><span>© 2025 Techbase Consultant Services</span><span>MIT License · Made with ❤️ in Ibadan</span></div>
</footer>
<script>const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('in')}),{threshold:.07});document.querySelectorAll('.sr').forEach(el=>io.observe(el));</script>
</body></html>