Preface |
|
xvii | |
About the Authors |
|
xxiii | |
|
PART I HYPERTEXT MARKUP LANGUAGE |
|
|
1 | (100) |
|
|
3 | (26) |
|
|
6 | (2) |
|
|
8 | (4) |
|
|
11 | (1) |
|
|
12 | (5) |
|
|
17 | (1) |
|
|
17 | (3) |
|
|
20 | (1) |
|
|
20 | (9) |
|
|
27 | (2) |
|
Chapter 2 Filling in the Index Page |
|
|
29 | (22) |
|
|
29 | (2) |
|
|
31 | (1) |
|
|
31 | (4) |
|
|
32 | (2) |
|
|
34 | (1) |
|
|
35 | (1) |
|
|
35 | (6) |
|
|
38 | (3) |
|
|
41 | (10) |
|
|
44 | (4) |
|
|
48 | (3) |
|
Chapter 3 More Pages, More Tags |
|
|
51 | (22) |
|
3.1 An HTML Page About HTML |
|
|
51 | (3) |
|
|
53 | (1) |
|
|
54 | (8) |
|
|
55 | (4) |
|
|
59 | (1) |
|
|
60 | (2) |
|
|
62 | (4) |
|
|
66 | (1) |
|
|
66 | (2) |
|
|
68 | (1) |
|
|
68 | (5) |
|
|
72 | (1) |
|
|
73 | (28) |
|
|
74 | (5) |
|
|
79 | (1) |
|
|
79 | (3) |
|
|
82 | (1) |
|
|
82 | (3) |
|
|
85 | (1) |
|
|
85 | (3) |
|
|
88 | (1) |
|
|
88 | (2) |
|
|
89 | (1) |
|
|
90 | (3) |
|
|
92 | (1) |
|
|
93 | (5) |
|
4.7.1 Internal Stylesheets |
|
|
93 | (3) |
|
4.7.2 External Stylesheets |
|
|
96 | (1) |
|
|
97 | (1) |
|
|
98 | (3) |
|
PART II CASCADING STYLE SHEETS AND PAGE LAYOUT |
|
|
101 | (490) |
|
Chapter 5 Introduction to CSS |
|
|
103 | (30) |
|
5.1 You're a Front-End Developer |
|
|
106 | (3) |
|
5.1.1 So, What Is Front-End Development? |
|
|
108 | (1) |
|
5.2 CSS Overview and History |
|
|
109 | (7) |
|
5.2.1 CSS Is Always Changing |
|
|
110 | (2) |
|
5.2.2 How Did CSS Develop? |
|
|
112 | (3) |
|
5.2.3 The Bog of Eternal Subjectivity |
|
|
115 | (1) |
|
|
116 | (5) |
|
|
121 | (1) |
|
|
121 | (7) |
|
|
128 | (1) |
|
|
128 | (5) |
|
|
132 | (1) |
|
Chapter 6 The Style of Style |
|
|
133 | (24) |
|
|
134 | (3) |
|
|
137 | (3) |
|
6.3 Priority and Specificity |
|
|
140 | (5) |
|
|
145 | (1) |
|
6.4 How to Be a Good Styling Citizen |
|
|
145 | (12) |
|
|
156 | (1) |
|
Chapter 7 CSS Values: Color and Sizing |
|
|
157 | (36) |
|
|
157 | (6) |
|
|
158 | (3) |
|
7.1.2 Setting Color and Transparency via rgb() and rgba() |
|
|
161 | (2) |
|
|
163 | (1) |
|
7.2 Introduction to Sizing |
|
|
163 | (1) |
|
7.3 Pixels (and Their Less-Used Cousin, the Point) |
|
|
164 | (5) |
|
|
168 | (1) |
|
|
169 | (6) |
|
|
174 | (1) |
|
|
174 | (1) |
|
|
175 | (6) |
|
|
181 | (1) |
|
7.6 Rem Isn't Just for Dreaming |
|
|
181 | (3) |
|
|
184 | (1) |
|
7.7 Vh, vw: The New(er) Kids on the Block |
|
|
184 | (6) |
|
|
189 | (1) |
|
7.8 Just Make It Look Nice |
|
|
190 | (3) |
|
|
191 | (2) |
|
|
193 | (58) |
|
|
193 | (6) |
|
|
194 | (1) |
|
|
195 | (1) |
|
|
196 | (1) |
|
8.1.4 Display: Inline-block |
|
|
197 | (2) |
|
|
199 | (1) |
|
|
199 | (1) |
|
8.2 Margins, Padding, and Borders |
|
|
199 | (7) |
|
|
202 | (4) |
|
|
206 | (1) |
|
|
206 | (8) |
|
|
208 | (6) |
|
|
214 | (1) |
|
8.4 A Little More About the overflow Style |
|
|
214 | (5) |
|
|
219 | (4) |
|
|
223 | (1) |
|
|
223 | (11) |
|
8.6.1 An Exception: margin: auto |
|
|
229 | (2) |
|
8.6.2 Yet Another Exception: Negative Margins |
|
|
231 | (3) |
|
|
234 | (1) |
|
8.7 Padding... Not Just for Chairs |
|
|
234 | (1) |
|
|
235 | (1) |
|
|
235 | (16) |
|
|
238 | (1) |
|
|
238 | (6) |
|
|
244 | (1) |
|
|
245 | (4) |
|
|
249 | (2) |
|
Chapter 9 Laying It All Out |
|
|
251 | (76) |
|
|
251 | (2) |
|
|
253 | (6) |
|
9.2.1 Installing and Running Jekyll |
|
|
254 | (5) |
|
|
259 | (1) |
|
9.3 Layouts, Includes, and Pages (Oh My!) |
|
|
259 | (2) |
|
9.3.1 Layouts/Layout Templates |
|
|
259 | (2) |
|
|
261 | (1) |
|
9.3.3 Pages/Page Templates |
|
|
261 | (1) |
|
9.3.4 Posts, and Post-Type Files |
|
|
261 | (1) |
|
|
261 | (3) |
|
|
263 | (1) |
|
|
264 | (11) |
|
|
274 | (1) |
|
9.6 Includes Intro: Head and Header |
|
|
275 | (9) |
|
9.6.1 Page Header: Up Top! |
|
|
277 | (3) |
|
9.6.2 Navigation and Children |
|
|
280 | (4) |
|
|
284 | (1) |
|
|
284 | (7) |
|
|
284 | (2) |
|
|
286 | (1) |
|
|
287 | (1) |
|
|
288 | (1) |
|
|
288 | (3) |
|
|
291 | (1) |
|
|
291 | (18) |
|
|
304 | (4) |
|
|
308 | (1) |
|
|
309 | (3) |
|
|
312 | (1) |
|
9.10 A Footer, and Includes in Includes |
|
|
312 | (15) |
|
|
325 | (2) |
|
Chapter 10 Page Templates and Frontmatter |
|
|
327 | (34) |
|
|
327 | (3) |
|
|
330 | (1) |
|
10.2 There's No Place Like Home |
|
|
330 | (12) |
|
|
342 | (1) |
|
10.3 More Advanced Selectors |
|
|
342 | (14) |
|
10.3.1 The :before and :after Pseudo-Elements |
|
|
343 | (4) |
|
10.3.2 The :before and :after CSS Triangle |
|
|
347 | (9) |
|
|
356 | (1) |
|
10.4 Other Pages, Other Folders |
|
|
356 | (5) |
|
|
360 | (1) |
|
Chapter 11 Specialty Page Layouts with Flexbox |
|
|
361 | (36) |
|
11.1 Having Content Fill a Container |
|
|
363 | (8) |
|
|
371 | (1) |
|
11.2 Vertical Flex Centering |
|
|
371 | (4) |
|
|
375 | (1) |
|
11.3 Flexbox Style Options and Shorthand |
|
|
375 | (6) |
|
11.3.1 Flex Container Properties |
|
|
375 | (1) |
|
11.3.2 Flex Item Properties |
|
|
376 | (5) |
|
|
381 | (1) |
|
11.4 Three-Column Page Layout |
|
|
381 | (5) |
|
|
386 | (1) |
|
|
386 | (11) |
|
|
395 | (2) |
|
|
397 | (32) |
|
|
398 | (14) |
|
12.1.1 Blog Index Structure |
|
|
402 | (9) |
|
|
411 | (1) |
|
12.2 Blog Index Content Loop |
|
|
412 | (7) |
|
|
418 | (1) |
|
|
419 | (10) |
|
|
427 | (2) |
|
Chapter 13 Mobile Media Queries |
|
|
429 | (46) |
|
13.1 Getting Started with Mobile Designs |
|
|
429 | (9) |
|
|
433 | (1) |
|
13.1.2 How to See in Mobile (Without Looking at Your Phone) |
|
|
434 | (4) |
|
|
438 | (11) |
|
|
449 | (1) |
|
|
449 | (4) |
|
|
453 | (1) |
|
|
453 | (10) |
|
|
454 | (1) |
|
13.4.2 Making the Dropdown |
|
|
455 | (8) |
|
|
463 | (1) |
|
13.5 Mobile Dropdown Menu |
|
|
463 | (12) |
|
|
473 | (2) |
|
Chapter 14 Adding More Little Touches |
|
|
475 | (24) |
|
|
475 | (13) |
|
14.1.1 Installing Vector Image Fonts |
|
|
477 | (6) |
|
14.1.2 Loading Text Fonts via a CDN |
|
|
483 | (5) |
|
|
488 | (1) |
|
|
488 | (2) |
|
|
490 | (1) |
|
14.3 Custom Title and Meta Description |
|
|
490 | (7) |
|
|
492 | (2) |
|
14.3.2 Custom Descriptions |
|
|
494 | (3) |
|
|
497 | (1) |
|
|
497 | (2) |
|
|
499 | (92) |
|
15.1 CSS Grid at a High Level |
|
|
501 | (3) |
|
15.2 A Simple Grid of Content |
|
|
504 | (11) |
|
15.2.1 Grid Columns and the Grid fr Unit |
|
|
507 | (3) |
|
15.2.2 Grid Rows and Gaps |
|
|
510 | (5) |
|
|
515 | (1) |
|
15.3 Minmax, auto-fit, and auto-fill |
|
|
515 | (12) |
|
15.3.1 Using Grid auto-fit |
|
|
516 | (6) |
|
15.3.2 Relative Spanning Columns |
|
|
522 | (2) |
|
15.3.3 Leveling Up CSS Grid Understanding |
|
|
524 | (3) |
|
|
527 | (1) |
|
15.4 Grid Lines, Areas, and Layouts |
|
|
527 | (29) |
|
15.4.1 Getting Started with Grid Lines |
|
|
529 | (5) |
|
15.4.2 The Simple Grid Layout |
|
|
534 | (6) |
|
15.4.3 Named Lines and Areas |
|
|
540 | (5) |
|
15.4.4 Overlapping Using Grid |
|
|
545 | (1) |
|
15.4.5 Source-Independent Positioning |
|
|
546 | (4) |
|
15.4.6 Finishing the Layout |
|
|
550 | (5) |
|
|
555 | (1) |
|
|
556 | (33) |
|
15.5.1 Setting Up the Page |
|
|
559 | (4) |
|
15.5.2 Adding a Global Grid and Header Positioning |
|
|
563 | (7) |
|
15.5.3 Using Building Blocks and Justifying |
|
|
570 | (4) |
|
15.5.4 More Column Positioning |
|
|
574 | (1) |
|
15.5.5 Using Overlapping in a Feature Section |
|
|
575 | (7) |
|
15.5.6 Starting at a Specific Column and Self-Aligning |
|
|
582 | (2) |
|
15.5.7 Grid Inside a Grid Inside a Page |
|
|
584 | (5) |
|
|
589 | (1) |
|
|
589 | (2) |
|
|
591 | (44) |
|
Chapter 16 A Name of Our Own |
|
|
593 | (26) |
|
16.1 Custom Domain Registration |
|
|
594 | (5) |
|
|
594 | (4) |
|
16.1.2 You've Got a Domain, Now What? |
|
|
598 | (1) |
|
|
599 | (7) |
|
16.2.1 Cloudflare Features |
|
|
599 | (5) |
|
|
604 | (1) |
|
16.2.3 Connecting Registrar Nameservers |
|
|
604 | (2) |
|
16.3 Custom Domains at GitHub Pages |
|
|
606 | (13) |
|
16.3.1 Configuring Cloudflare for GitHub Pages |
|
|
607 | (3) |
|
16.3.2 Configuring GitHub Pages |
|
|
610 | (3) |
|
16.3.3 Cloudflare Page Rules |
|
|
613 | (5) |
|
|
618 | (1) |
|
|
619 | (16) |
|
|
619 | (3) |
|
17.1.1 Google Workspace Signup |
|
|
621 | (1) |
|
|
622 | (4) |
|
|
626 | (4) |
|
|
627 | (3) |
|
|
630 | (5) |
Index |
|
635 | |