-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
304 lines (303 loc) · 31.9 KB
/
Copy pathindex.html
File metadata and controls
304 lines (303 loc) · 31.9 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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSS Styling — 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:#0284c7;--hero-bg:linear-gradient(160deg,#f0f9ff 0%,#f8fafc 50%,#eef2ff 100%)}
.eyebrow{color:#0284c7;background:rgba(2,132,199,.07);border-color:rgba(2,132,199,.2)}
.stat-n{color:#0284c7}.slbl{color:#0284c7}
.step-n{color:#0284c7}.step:hover .step-n{border-color:#0284c7;box-shadow:0 0 0 4px rgba(2,132,199,.1)}
.lc::before{background:#0284c7}.lnum{color:#0284c7;background:rgba(2,132,199,.07);border-color:rgba(2,132,199,.2)}
.btn-p{background:#0284c7;box-shadow:0 4px 14px rgba(2,132,199,.3)}.btn-p:hover{box-shadow:0 8px 24px rgba(2,132,199,.4)}
.ticker-wrap{background:#f0f9ff;border-top:1px solid #bae6fd;border-bottom:1px solid #bae6fd}
.ti{color:#075985}.ti em{color:#0284c7}.fb{color:#0284c7}
.cpv{background:#0f172a;border-radius:12px;overflow:hidden;margin:.8rem 1.2rem 1.2rem}
.cpv-code{padding:1rem 1.2rem;font-family:var(--M);font-size:.75rem;line-height:1.8;color:#e2e8f0}
.cpv-demo{background:linear-gradient(135deg,#1e3a5f,#0f2040);padding:1.2rem;display:flex;align-items:center;gap:1rem;border-top:1px solid rgba(255,255,255,.08)}
.cpv-box{width:56px;height:56px;background:linear-gradient(135deg,#38bdf8,#818cf8);border-radius:10px;transition:transform .3s;cursor:pointer;flex-shrink:0}
.cpv-box:hover{transform:rotate(12deg) scale(1.1)}
</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:#0284c7;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 → Advanced · Ibadan, Nigeria</div>
<h1>CSS Styling</h1>
<p class="hero-sub">From your first <code>color: red</code> to Flexbox, Grid, animations and Sass — <strong>73 lessons</strong> covering every CSS concept completely. The most comprehensive course in the series.</p>
<div class="hero-stats">
<div><span class="stat-n">73</span><span class="stat-l">Lessons</span></div>
<div><span class="stat-n">6</span><span class="stat-l">Phases</span></div>
<div><span class="stat-n">HTML</span><span class="stat-l">Prerequisite</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 73 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">styles.css</span></div>
<div class="pc-body">
<div><span style="color:#38bdf8">.card</span> <span style="color:#94a3b8">{</span></div>
<div style="padding-left:1.2em"><span style="color:#c084fc">background</span><span style="color:#94a3b8">:</span> <span style="color:#86efac">linear-gradient(</span></div>
<div style="padding-left:2.4em"><span style="color:#86efac">135deg, #38bdf8, #818cf8)</span><span style="color:#94a3b8">;</span></div>
<div style="padding-left:1.2em"><span style="color:#c084fc">border-radius</span><span style="color:#94a3b8">:</span> <span style="color:#fb923c">12px</span><span style="color:#94a3b8">;</span></div>
<div style="padding-left:1.2em"><span style="color:#c084fc">transition</span><span style="color:#94a3b8">:</span> <span style="color:#86efac">transform .3s ease</span><span style="color:#94a3b8">;</span></div>
<div><span style="color:#94a3b8">}</span></div>
<div><span style="color:#38bdf8">.card:hover</span> <span style="color:#94a3b8">{</span></div>
<div style="padding-left:1.2em"><span style="color:#c084fc">transform</span><span style="color:#94a3b8">:</span> <span style="color:#86efac">rotate(12deg) scale(1.1)</span><span style="color:#94a3b8">;</span></div>
<div><span style="color:#94a3b8">}</span></div>
</div>
<div class="cpv">
<div class="cpv-demo">
<div class="cpv-box" title="Hover me!"></div>
<div style="font-size:.75rem;color:rgba(255,255,255,.55);line-height:1.5"><strong style="color:#fff;display:block;margin-bottom:.2rem">Live Preview</strong>Hover the box to see CSS transforms. This is what you will master.</div>
</div>
</div>
</div>
</div></section>
<div class="ticker-wrap" aria-hidden="true"><div class="ticker">
<span class="ti"><em>selectors</em> targeting</span><span class="ti"><em>box-model</em> spacing</span><span class="ti"><em>flexbox</em> layout</span><span class="ti"><em>grid</em> 2D layout</span><span class="ti"><em>@keyframes</em> animation</span><span class="ti"><em>:hover</em> states</span><span class="ti"><em>media queries</em> responsive</span><span class="ti"><em>variables</em> custom props</span><span class="ti"><em>sass</em> preprocessor</span>
<span class="ti"><em>selectors</em> targeting</span><span class="ti"><em>box-model</em> spacing</span><span class="ti"><em>flexbox</em> layout</span><span class="ti"><em>grid</em> 2D layout</span><span class="ti"><em>@keyframes</em> animation</span><span class="ti"><em>:hover</em> states</span><span class="ti"><em>media queries</em> responsive</span><span class="ti"><em>variables</em> custom props</span><span class="ti"><em>sass</em> preprocessor</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>Make the web beautiful.</h2>
<p>CSS transforms plain HTML into polished, stunning websites. It controls everything you see — colors, fonts, spacing, layout, hover effects and animations. At <strong>73 lessons</strong>, this is the most comprehensive course in the Techbase series. Designed by <strong>Babatunde Awoyemi</strong>, Ibadan.</p>
<ul class="learn-list">
<li>Selectors, specificity, the cascade and inheritance</li><li>Box model, display, positioning and overflow</li>
<li>Flexbox — the modern one-dimensional layout system</li><li>CSS Grid — two-dimensional layouts</li>
<li>Transitions, animations and 2D/3D transforms</li><li>CSS Variables, media queries and responsive design</li>
<li>Sass — smarter CSS with nesting and functions</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 + Live Server</div><div class="tc-info">Auto-refresh on every save</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 DevTools</div><div class="tc-info">Inspect & edit CSS live</div></div><span class="tc-link">Press F12</span></div>
<div class="tc-row"><div><div class="tc-name">Sass (optional)</div><div class="tc-info">For Phase 6 — Sass lessons</div></div><a href="https://sass-lang.com/install" class="tc-link" target="_blank">↗ Install</a></div>
<div class="tc-row"><div><div class="tc-name">Prerequisite: HTML</div><div class="tc-info">Complete first — required</div></div><a href="https://techbaseng.github.io/techbase-html/" class="tc-link">↗ Take it first</a></div>
<div class="tc-row"><div><div class="tc-name">Next: JavaScript</div><div class="tc-info">After completing this course</div></div><a href="https://techbaseng.github.io/techbase-js/" 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">73 Lessons</h2></div>
<div class="phase-div sr"><span>Phase 1 — CSS Foundations (01–12)</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 CSS — What It Is, Why It Exists, and How It Works</span></a>
<a href="lessons/lesson_02.html" class="lc"><span class="lnum">02</span><span class="ltitle">CSS Selectors — Targeting Elements Like a Pro</span></a>
<a href="lessons/lesson_03.html" class="lc"><span class="lnum">03</span><span class="ltitle">How to Add CSS — External, Internal, Inline & the Cascade</span></a>
<a href="lessons/lesson_04.html" class="lc"><span class="lnum">04</span><span class="ltitle">CSS Comments and CSS Errors</span></a>
<a href="lessons/lesson_05.html" class="lc"><span class="lnum">05</span><span class="ltitle">CSS Colors — Named Colors, RGB, RGBA, HEX, HSL, and HSLA</span></a>
<a href="lessons/lesson_06.html" class="lc"><span class="lnum">06</span><span class="ltitle">CSS Backgrounds — Colors, Images, Repeat, Attachment & Shorthand</span></a>
<a href="lessons/lesson_07.html" class="lc"><span class="lnum">07</span><span class="ltitle">CSS Borders — Style, Width, Color, Sides, Shorthand & Rounded Corners</span></a>
<a href="lessons/lesson_08.html" class="lc"><span class="lnum">08</span><span class="ltitle">CSS Margins and Margin Collapse</span></a>
<a href="lessons/lesson_09.html" class="lc"><span class="lnum">09</span><span class="ltitle">CSS Padding — Inner Space, Shorthand & the box-sizing Fix</span></a>
<a href="lessons/lesson_10.html" class="lc"><span class="lnum">10</span><span class="ltitle">CSS Height and Width — Setting, Limiting, and Controlling Element Size</span></a>
<a href="lessons/lesson_11.html" class="lc"><span class="lnum">11</span><span class="ltitle">The CSS Box Model</span></a>
<a href="lessons/lesson_12.html" class="lc"><span class="lnum">12</span><span class="ltitle">CSS Outlines — Style, Width, Color, Shorthand & Offset</span></a>
</div>
<div class="phase-div sr"><span>Phase 2 — Text, Fonts & UI Elements (13–22)</span></div>
<div class="lesson-grid sr">
<a href="lessons/lesson_13.html" class="lc"><span class="lnum">13</span><span class="ltitle">CSS Text Styling — Color, Alignment, Decoration, Transformation, Spacing & Shadow</span></a>
<a href="lessons/lesson_14.html" class="lc"><span class="lnum">14</span><span class="ltitle">CSS Fonts for Absolute Beginners</span></a>
<a href="lessons/lesson_15.html" class="lc"><span class="lnum">15</span><span class="ltitle">CSS Icons — Font Awesome, Bootstrap, and Google Material Icons</span></a>
<a href="lessons/lesson_16.html" class="lc"><span class="lnum">16</span><span class="ltitle">CSS Links — Styling, States, and Button-Style Links</span></a>
<a href="lessons/lesson_17.html" class="lc"><span class="lnum">17</span><span class="ltitle">CSS Lists — Styling Unordered and Ordered Lists</span></a>
<a href="lessons/lesson_18.html" class="lc"><span class="lnum">18</span><span class="ltitle">CSS Tables — Borders, Size, Alignment, Styling & Responsive</span></a>
<a href="lessons/lesson_19.html" class="lc"><span class="lnum">19</span><span class="ltitle">CSS Display — Block, Inline, Inline-Block, None & Visibility</span></a>
<a href="lessons/lesson_20.html" class="lc"><span class="lnum">20</span><span class="ltitle">CSS max-width — Controlling How Wide Elements Can Grow</span></a>
<a href="lessons/lesson_21.html" class="lc"><span class="lnum">21</span><span class="ltitle">CSS Position — Static, Relative, Fixed, Absolute, and Sticky</span></a>
<a href="lessons/lesson_22.html" class="lc"><span class="lnum">22</span><span class="ltitle">CSS Position Offsets — top, right, bottom, left</span></a>
</div>
<div class="phase-div sr"><span>Phase 3 — Layout & Positioning (23–35)</span></div>
<div class="lesson-grid sr">
<a href="lessons/lesson_23.html" class="lc"><span class="lnum">23</span><span class="ltitle">CSS z-index — Controlling the Stack Order of Elements</span></a>
<a href="lessons/lesson_24.html" class="lc"><span class="lnum">24</span><span class="ltitle">CSS Overflow — Controlling What Happens When Content Is Too Big</span></a>
<a href="lessons/lesson_25.html" class="lc"><span class="lnum">25</span><span class="ltitle">CSS Float, Clear, and Clearfix</span></a>
<a href="lessons/lesson_26.html" class="lc"><span class="lnum">26</span><span class="ltitle">CSS display: inline-block — The Best of Both Worlds</span></a>
<a href="lessons/lesson_27.html" class="lc"><span class="lnum">27</span><span class="ltitle">CSS Alignment — Center, Horizontal, and Vertical Alignment</span></a>
<a href="lessons/lesson_28.html" class="lc"><span class="lnum">28</span><span class="ltitle">CSS Combinators — Targeting Elements by Their Relationships</span></a>
<a href="lessons/lesson_29.html" class="lc"><span class="lnum">29</span><span class="ltitle">CSS Pseudo-classes — Styling Elements by State and Position</span></a>
<a href="lessons/lesson_30.html" class="lc"><span class="lnum">30</span><span class="ltitle">CSS Pseudo-elements — Styling Parts of Elements Without Extra HTML</span></a>
<a href="lessons/lesson_31.html" class="lc"><span class="lnum">31</span><span class="ltitle">CSS Opacity and Transparency</span></a>
<a href="lessons/lesson_32.html" class="lc"><span class="lnum">32</span><span class="ltitle">CSS Navigation Bars — Vertical and Horizontal Navbars</span></a>
<a href="lessons/lesson_33.html" class="lc"><span class="lnum">33</span><span class="ltitle">CSS Dropdowns — Hidden Menus That Appear on Hover</span></a>
<a href="lessons/lesson_34.html" class="lc"><span class="lnum">34</span><span class="ltitle">CSS Image Gallery and Image Sprites</span></a>
<a href="lessons/lesson_35.html" class="lc"><span class="lnum">35</span><span class="ltitle">CSS Attribute Selectors</span></a>
</div>
<div class="phase-div sr"><span>Phase 4 — Intermediate CSS (36–50)</span></div>
<div class="lesson-grid sr">
<a href="lessons/lesson_36.html" class="lc"><span class="lnum">36</span><span class="ltitle">CSS Form Styling — Inputs, Focus, Icons & Form Elements</span></a>
<a href="lessons/lesson_37.html" class="lc"><span class="lnum">37</span><span class="ltitle">CSS Counters & Nested Counters</span></a>
<a href="lessons/lesson_38.html" class="lc"><span class="lnum">38</span><span class="ltitle">CSS Units — Absolute and Relative</span></a>
<a href="lessons/lesson_39.html" class="lc"><span class="lnum">39</span><span class="ltitle">CSS Inheritance</span></a>
<a href="lessons/lesson_40.html" class="lc"><span class="lnum">40</span><span class="ltitle">CSS Specificity — Who Wins When Rules Conflict?</span></a>
<a href="lessons/lesson_41.html" class="lc"><span class="lnum">41</span><span class="ltitle">CSS !important Rule</span></a>
<a href="lessons/lesson_42.html" class="lc"><span class="lnum">42</span><span class="ltitle">CSS Math Functions: calc(), min(), max(), and clamp()</span></a>
<a href="lessons/lesson_43.html" class="lc"><span class="lnum">43</span><span class="ltitle">CSS Performance Optimization</span></a>
<a href="lessons/lesson_44.html" class="lc"><span class="lnum">44</span><span class="ltitle">CSS Accessibility Styling</span></a>
<a href="lessons/lesson_45.html" class="lc"><span class="lnum">45</span><span class="ltitle">CSS Website Layout</span></a>
<a href="lessons/lesson_46.html" class="lc"><span class="lnum">46</span><span class="ltitle">CSS Rounded Corners</span></a>
<a href="lessons/lesson_47.html" class="lc"><span class="lnum">47</span><span class="ltitle">CSS Border Images</span></a>
<a href="lessons/lesson_48.html" class="lc"><span class="lnum">48</span><span class="ltitle">CSS Advanced Backgrounds</span></a>
<a href="lessons/lesson_49.html" class="lc"><span class="lnum">49</span><span class="ltitle">CSS Advanced Colors and Color Keywords</span></a>
<a href="lessons/lesson_50.html" class="lc"><span class="lnum">50</span><span class="ltitle">CSS Gradients — Linear, Radial, and Conic</span></a>
</div>
<div class="phase-div sr"><span>Phase 5 — Visual Effects & Motion (51–63)</span></div>
<div class="lesson-grid sr">
<a href="lessons/lesson_51.html" class="lc"><span class="lnum">51</span><span class="ltitle">CSS Shadow Effects — Text Shadows and Box Shadows</span></a>
<a href="lessons/lesson_52.html" class="lc"><span class="lnum">52</span><span class="ltitle">CSS Text Effects — Overflow, Word Wrapping, Line Breaking & Writing Modes</span></a>
<a href="lessons/lesson_53.html" class="lc"><span class="lnum">53</span><span class="ltitle">CSS Custom Fonts — The @font-face Rule</span></a>
<a href="lessons/lesson_54.html" class="lc"><span class="lnum">54</span><span class="ltitle">CSS 2D and 3D Transforms — Moving, Rotating, Scaling, Skewing & 3D Space</span></a>
<a href="lessons/lesson_55.html" class="lc"><span class="lnum">55</span><span class="ltitle">CSS Transitions — Making Elements Move Smoothly</span></a>
<a href="lessons/lesson_56.html" class="lc"><span class="lnum">56</span><span class="ltitle">CSS Animations</span></a>
<a href="lessons/lesson_57.html" class="lc"><span class="lnum">57</span><span class="ltitle">CSS Tooltips and Tooltip Arrows</span></a>
<a href="lessons/lesson_58.html" class="lc"><span class="lnum">58</span><span class="ltitle">CSS Image Styling — Shapes, Effects, Filters, Hover, Modals & Centering</span></a>
<a href="lessons/lesson_59.html" class="lc"><span class="lnum">59</span><span class="ltitle">CSS object-fit and object-position</span></a>
<a href="lessons/lesson_60.html" class="lc"><span class="lnum">60</span><span class="ltitle">CSS Masking — PNG Images, Gradients, and SVG Masks</span></a>
<a href="lessons/lesson_61.html" class="lc"><span class="lnum">61</span><span class="ltitle">CSS Buttons — Styling, Hover Effects & Button Groups</span></a>
<a href="lessons/lesson_62.html" class="lc"><span class="lnum">62</span><span class="ltitle">CSS Pagination — Building & Styling Page Navigation</span></a>
<a href="lessons/lesson_63.html" class="lc"><span class="lnum">63</span><span class="ltitle">CSS Multiple Columns — Newspaper-Style Layouts</span></a>
</div>
<div class="phase-div sr"><span>Phase 6 — Modern CSS & Sass (64–73)</span></div>
<div class="lesson-grid sr">
<a href="lessons/lesson_64.html" class="lc"><span class="lnum">64</span><span class="ltitle">CSS User Interface — Resize and Outline Offset</span></a>
<a href="lessons/lesson_65.html" class="lc"><span class="lnum">65</span><span class="ltitle">CSS Variables — var(), Overriding, JavaScript & Media Queries</span></a>
<a href="lessons/lesson_66.html" class="lc"><span class="lnum">66</span><span class="ltitle">CSS @property Rule — Defining and Animating Custom Properties</span></a>
<a href="lessons/lesson_67.html" class="lc"><span class="lnum">67</span><span class="ltitle">CSS Box Sizing</span></a>
<a href="lessons/lesson_68.html" class="lc"><span class="lnum">68</span><span class="ltitle">CSS Media Queries</span></a>
<a href="lessons/lesson_69.html" class="lc"><span class="lnum">69</span><span class="ltitle">CSS Flexbox — Flexible Box Layout Complete Guide</span></a>
<a href="lessons/lesson_70.html" class="lc"><span class="lnum">70</span><span class="ltitle">CSS Grid Layout — Complete Guide from Intro to @supports</span></a>
<a href="lessons/lesson_71.html" class="lc"><span class="lnum">71</span><span class="ltitle">CSS Responsive Web Design (RWD)</span></a>
<a href="lessons/lesson_72.html" class="lc"><span class="lnum">72</span><span class="ltitle">Sass — A Complete Beginner's Guide to Smarter CSS</span></a>
<a href="lessons/lesson_73.html" class="lc"><span class="lnum">73</span><span class="ltitle">Sass Built-In Functions — String, Numeric, List, Map, Selector & Color</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>Finish HTML First</h3><p>CSS selects and styles HTML elements — you must understand HTML before starting.</p></div>
<div class="step"><div class="step-n">02</div><h3>Open Lesson 01</h3><p>Have your HTML file open alongside. See every CSS change instantly.</p></div>
<div class="step"><div class="step-n">03</div><h3>Apply & Refresh</h3><p>Use Live Server to see styles update in real time as you code along.</p></div>
<div class="step"><div class="step-n">04</div><h3>Build the Project</h3><p>Complete all 73 lessons and style a full multi-page website from scratch.</p></div>
</div>
</div></section>
</main>
<footer>
<div class="fi">
<div><div class="fb">CSS Styling</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 73 Lessons</a></li><li><a href="https://github.com/techbaseng/techbase-css" target="_blank">GitHub Repo</a></li></ul></div>
<div><p class="fl-h">Path</p><ul class="fl"><li><a href="https://techbaseng.github.io/techbase-html/">← HTML</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>