Contents

1. Preface

2. About the Authors

3. PART I HYPERTEXT MARKUP LANGUAGE

   1. Chapter 1 Basic HTML

      1. 1.1 Introduction

      2. 1.2 HTML Tags

      3. 1.2.1 Exercises

      4. 1.3 Starting the Project

      5. 1.3.1 Exercises

      6. 1.4 The First Tag

      7. 1.4.1 Exercises

      8. 1.5 An HTML Skeleton

      9. 1.5.1 Exercises

   2. Chapter 2 Filling in the Index Page

      1. 2.1 Headings

      2. 2.1.1 Exercise

      3. 2.2 Text Formatting

      4. 2.2.1 Emphasized Text

      5. 2.2.2 Strong Text

      6. 2.2.3 Exercises

      7. 2.3 Links

      8. 2.3.1 Exercises

      9. 2.4 Adding Images

      10. 2.4.1 Hotlinking

      11. 2.4.2 Exercises

   3. Chapter 3 More Pages, More Tags

      1. 3.1 An HTML Page About HTML

      2. 3.1.1 Exercises

      3. 3.2 Tables

      4. 3.2.1 Block Elements

      5. 3.2.2 Inline Elements

      6. 3.2.3 Exercises

      7. 3.3 Divs and Spans

      8. 3.3.1 Exercises

      9. 3.4 Lists

      10. 3.4.1 Exercise

      11. 3.5 A Navigation Menu

      12. 3.5.1 Exercises

   4. Chapter 4 Inline Styling

      1. 4.1 Text Styling

      2. 4.1.1 Exercises

      3. 4.2 Floats

      4. 4.2.1 Exercise

      5. 4.3 Applying a Margin

      6. 4.3.1 Exercises

      7. 4.4 More Margin Tricks

      8. 4.4.1 Exercise

      9. 4.5 Box Styling

      10. 4.5.1 Exercises

      11. 4.6 Navigation Styling

      12. 4.6.1 Exercises

      13. 4.7 A Taste of CSS

      14. 4.7.1 Internal Stylesheets

      15. 4.7.2 External Stylesheets

      16. 4.7.3 Exercises

      17. 4.8 Conclusion

4. PART II CASCADING STYLE SHEETS AND PAGE LAYOUT

   1. Chapter 5 Introduction to CSS

      1. 5.1 You’re a Front-End Developer

      2. 5.1.1 So, What Is Front-End Development?

      3. 5.2 CSS Overview and History

      4. 5.2.1 CSS Is Always Changing

      5. 5.2.2 How Did CSS Develop?

      6. 5.2.3 The Bog of Eternal Subjectivity

      7. 5.3 Sample Site Setup

      8. 5.3.1 Exercise

      9. 5.4 Start Stylin’

      10. 5.4.1 Exercises

      11. 5.5 CSS Selectors

      12. 5.5.1 Exercises

   2. Chapter 6 The Style of Style

      1. 6.1 Naming Things

      2. 6.2 When and Why

      3. 6.3 Priority and Specificity

      4. 6.3.1 Exercises

      5. 6.4 How to Be a Good Styling Citizen

      6. 6.4.1 Exercises

   3. Chapter 7 CSS Values: Color and Sizing

      1. 7.1 CSS Color

      2. 7.1.1 Hexadecimal Colors

      3. 7.1.2 Setting Color and Transparency via rgb() and rgba()

      4. 7.1.3 Exercises

      5. 7.2 Introduction to Sizing

      6. 7.3 Pixels (and Their Less-Used Cousin, the Point)

      7. 7.3.1 Exercise

      8. 7.4 Percentages

      9. 7.4.1 Percentage Fonts

      10. 7.4.2 Exercises

      11. 7.5 em

      12. 7.5.1 Exercises

      13. 7.6 rem Isn’t Just for Dreaming

      14. 7.6.1 Exercises

      15. 7.7 vh, vw: The New(er) Kids on the Block

      16. 7.7.1 Exercises

      17. 7.8 Just Make It Look Nice

      18. 7.8.1 Exercises

   4. Chapter 8 The Box Model

      1. 8.1 Inline vs. Block

      2. 8.1.1 display: none

      3. 8.1.2 display: block

      4. 8.1.3 display: inline

      5. 8.1.4 display: inline-block

      6. 8.1.5 display: flex

      7. 8.1.6 Exercises

      8. 8.2 Margins, Padding, and Borders

      9. 8.2.1 Margin Weirdness

      10. 8.2.2 Exercises

      11. 8.3 Floats

      12. 8.3.1 Clearing Floats

      13. 8.3.2 Exercises

      14. 8.4 A Little More About the overflow Style

      15. 8.5 Inline Block

      16. 8.5.1 Exercises

      17. 8.6 Margins for Boxes

      18. 8.6.1 An Exception: margin: auto

      19. 8.6.2 Yet Another Exception: Negative Margins

      20. 8.6.3 Exercises

      21. 8.7 Padding… Not Just for Chairs

      22. 8.7.1 Exercise

      23. 8.8 Fun with Borders

      24. 8.8.1 Border Radius

      25. 8.8.2 Making Circles

      26. 8.8.3 Line Height

      27. 8.8.4 Syncing Up

      28. 8.8.5 Exercises

   5. Chapter 9 Laying It All Out

      1. 9.1 Layout Basics

      2. 9.2 Jekyll

      3. 9.2.1 Installing and Running Jekyll

      4. 9.2.2 Exercises

      5. 9.3 Layouts, Includes, and Pages (Oh My!)

      6. 9.3.1 Layouts/Layout Templates

      7. 9.3.2 Includes

      8. 9.3.3 Pages/Page Templates

      9. 9.3.4 Posts, and Post-Type Files

      10. 9.4 The Layout File

      11. 9.4.1 Exercises

      12. 9.5 CSS File and Reset

      13. 9.5.1 Exercises

      14. 9.6 Includes Intro: Head and Header

      15. 9.6.1 Page Header: Up Top!

      16. 9.6.2 Navigation and Children

      17. 9.6.3 Exercise

      18. 9.7 Advanced Selectors

      19. 9.7.1 Pseudo-Classes

      20. 9.7.2 Exercises

      21. 9.7.3 first-child

      22. 9.7.4 Exercise

      23. 9.7.5 Siblings

      24. 9.7.6 Exercise

      25. 9.8 Positioning

      26. 9.8.1 A Real Logo

      27. 9.8.2 Exercise

      28. 9.9 Fixed Header

      29. 9.9.1 Exercise

      30. 9.10 A Footer, and Includes in Includes

      31. 9.10.1 Exercise

   6. Chapter 10 Page Templates and Frontmatter

      1. 10.1 Template Content

      2. 10.1.1 Exercises

      3. 10.2 There’s No Place Like Home

      4. 10.2.1 Exercises

      5. 10.3 More Advanced Selectors

      6. 10.3.1 The :before and :after Pseudo-Elements

      7. 10.3.2 The :before and :after CSS Triangle

      8. 10.3.3 Exercises

      9. 10.4 Other Pages, Other Folders

      10. 10.4.1 Exercises

   7. Chapter 11 Specialty Page Layouts with Flexbox

      1. 11.1 Having Content Fill a Container

      2. 11.1.1 Exercises

      3. 11.2 Vertical Flex Centering

      4. 11.2.1 Exercises

      5. 11.3 Flexbox Style Options and Shorthand

      6. 11.3.1 Flex Container Properties

      7. 11.3.2 Flex Item Properties

      8. 11.3.3 Exercises

      9. 11.4 Three-Column Page Layout

      10. 11.4.1 Exercises

      11. 11.5 A Gallery Stub

      12. 11.5.1 Exercises

   8. Chapter 12 Adding a Blog

      1. 12.1 Adding Blog Posts

      2. 12.1.1 Blog Index Structure

      3. 12.1.2 Exercises

      4. 12.2 Blog Index Content Loop

      5. 12.2.1 Exercises

      6. 12.3 A Blog Post Page

      7. 12.3.1 Exercises

   9. Chapter 13 Mobile Media Queries

      1. 13.1 Getting Started with Mobile Designs

      2. 13.1.1 Exercise

      3. 13.1.2 How to See in Mobile (Without Looking at Your Phone)

      4. 13.2 Mobile Adaptation

      5. 13.2.1 Exercise

      6. 13.3 Mobile Viewport

      7. 13.3.1 Exercise

      8. 13.4 Dropdown Menu

      9. 13.4.1 The Hitbox

      10. 13.4.2 Making the Dropdown

      11. 13.4.3 Exercise

      12. 13.5 Mobile Dropdown Menu

      13. 13.5.1 Exercises

   10. Chapter 14 Adding More Little Touches

       1. 14.1 Custom Fonts

       2. 14.1.1 Installing Vector Image Fonts

       3. 14.1.2 Loading Text Fonts via a CDN

       4. 14.1.3 Exercises

       5. 14.2 Favicons

       6. 14.2.1 Exercise

       7. 14.3 Custom Title and Meta Description

       8. 14.3.1 Custom Title

       9. 14.3.2 Custom Descriptions

       10. 14.3.3 Exercise

       11. 14.4 Next Steps

   11. Chapter 15 CSS Grid

       1. 15.1 CSS Grid at a High Level

       2. 15.2 A Simple Grid of Content

       3. 15.2.1 Grid Columns and the Grid fr Unit

       4. 15.2.2 Grid Rows and Gaps

       5. 15.2.3 Exercises

       6. 15.3 minmax, auto-fit, and auto-fill

       7. 15.3.1 Using Grid auto-fit

       8. 15.3.2 Relative Spanning Columns

       9. 15.3.3 Leveling Up CSS Grid Understanding

       10. 15.3.4 Exercises

       11. 15.4 Grid Lines, Areas, and Layouts

       12. 15.4.1 Getting Started with Grid Lines

       13. 15.4.2 The Simple Grid Layout

       14. 15.4.3 Named Lines and Areas

       15. 15.4.4 Overlapping Using Grid

       16. 15.4.5 Source-Independent Positioning

       17. 15.4.6 Finishing the Layout

       18. 15.4.7 Exercises

       19. 15.5 Grid on the Inside

       20. 15.5.1 Setting Up the Page

       21. 15.5.2 Adding a Global Grid and Header Positioning

       22. 15.5.3 Using Building Blocks and Justifying

       23. 15.5.4 More Column Positioning

       24. 15.5.5 Using Overlapping in a Feature Section

       25. 15.5.6 Starting at a Specific Column and Self-Aligning

       26. 15.5.7 Grid Inside a Grid Inside a Page

       27. 15.5.8 Exercises

       28. 15.6 Conclusion

5. PART III CUSTOM DOMAINS

   1. Chapter 16 A Name of Our Own

      1. 16.1 Custom Domain Registration

      2. 16.1.1 What to Register?

      3. 16.1.2 You’ve Got a Domain, Now What?

      4. 16.2 Cloudflare Setup

      5. 16.2.1 Cloudflare Features

      6. 16.2.2 Cloudflare Signup

      7. 16.2.3 Connecting Registrar Nameservers

      8. 16.3 Custom Domains at GitHub Pages

      9. 16.3.1 Configuring Cloudflare for GitHub Pages

      10. 16.3.2 Configuring GitHub Pages

      11. 16.3.3 Cloudflare Page Rules

      12. 16.3.4 Profit!!

   2. Chapter 17 Custom Email

      1. 17.1 Google Mail

      2. 17.1.1 Google Workspace Signup

      3. 17.2 MX Records

      4. 17.3 Site Analytics

      5. 17.3.1 Add Snippet

      6. 17.4 Conclusion

   3. Index