HTML and CSS Visual QuickStart Guide, 9th Edition

Table of contents

1. Lesson 1
   1. Creating a visual hierarchy with HTML
   2. Changing Styles on CSS Zen Garden
   3. Applying simple styles to Markup
   4. Styles vs. No Styles
   5. Browser Comparison
2. Lesson 2
   1. Creating a New Webpage
   2. Installing VS Code
   3. Setting Up a Directory Structure
   4. How Default Files Work
   5. Setting Up MAMP
   6. CodePen Demo
3. Lesson 3
   1. Changing a Tag
   2. Excluding Necessary Attributes
   3. Creating an HTML Boilerplate File
   4. Screen Reader in Action
4. Lesson 4
   1. HTML with No Elements
   2. Creating Paragraphs
   3. How to Order Headings
   4. Creating Ordered and Unordered Lists
   5. Converting a Fully Formatted Word Doc to HTML
5. Lesson 5
   1. The Components of Hyperlink Markup
   2. Walking Through a URL
   3. HTTP vs. HTTPS
   4. Errors in External Links
   5. Creating Relative Links
   6. Link to a Specific Location on a Pag
   7. Advanced Mailto Links
   8. Open a Link in a New Window
6. Lesson 6
   1. Preview of the Box Model
   2. Outlining Elements with the Web Developer Extension
   3. Outlining Block and Inline Elements Together
   4. Walking Through the Wireframe
   5. Making a Header with Navigation
   6. Building a Blog Article Layout
7. Lesson 7
   1. Scaling SVGs
   2. Adding an Image to a Webpage
   3. Using Figures for Code Samples
   4. Image Download Test
   5. Resizing an Image
   6. Seeing srcset in Action
   7. Experimenting with SVG
   8. Creating a Graphic with Canva
   9. Embedding a Video
   10. Converting and Embedding Audio
   11. Using Libsyn to Host Audio
   12. Embedding a YouTube Video
8. Lesson 8
   1. Building a Table
   2. Experimenting with colspan and rowspan
   3. Writing a Script with a Description List
   4. Walking through Schema Examples
9. Lesson 9
   1. Interacting with Forms
   2. Comparing the GET and POST Form Submission Methods
   3. Converting a Select Box to a Multiselect Box
   4. Creating Checkboxes and Radio Buttons
   5. Building a Rental Application
   6. Working with Dates on Forms
   7. Picking Colors
   8. Using Range
   9. Building and Testing a Valid Form
10. Lesson 10
    1. Rendering Elements Differently in Different Browsers
    2. Examples of the Element in Use
       1. Store Form Data in Offline Storage
       2. How Twitter Uses Offline Storage
       3. Using Lazy Loading on Images
    3. Lesson 11
       1. Demonstrating the Cascade in CSS
       2. Using an Internal Style Sheet
       3. Moving Internal CSS to an External File
       4. Review of the new File System
    4. Lesson 12
       1. Setting Basic Styles on HTML Elements
       2. Targeting Specific Classes
       3. Creating a Set of Alert Elements
       4. Putting Child and Sibling Selectors to Wor
       5. A Look at Styles and Precedence
       6. Trying to Override IDs in CSS
       7. Reimagining the p.intro Class with Advanced Selectors
    5. Lesson 13
       1. Using Distinct Styles for Heading and Body Elements
       2. Browsing Google Fonts
       3. Embedding Fonts from Google Fonts
       4. Converting a Font with Transfonter
       5. Using @font-face
       6. Font Size Demo
       7. Creating a Heading Hierarchy with Font Sizes
       8. Using text-indent to Hide Text
       9. Building the Page from Figure 13.21
    6. Lesson 14
       1. Using a Color Picker
       2. Using Transparency to Make Text Stand Out
       3. Generating HSL Values
       4. Experimenting with Gradients
       5. Background Images
       6. Doing More with Borders
       7. Creating a Stylized Aside Section
    7. Lesson 15
       1. Demonstrating Flow
       2. Adjusting Heights and Widths in Layout
       3. Building a Completely Styled Butto
       4. Making a Simple Twocolumn Layout with Floats
       5. Demonstrating the position Property
       6. Creating a Pricing Table
    8. Lesson 16
       1. Stacking Order
       2. Using flex-item Properties
       3. Using flex-basis, flexflow, and justify-content
       4. The align-items Property in Action
       5. Grid Templates
       6. Aligning Grid Elements
       7. Prefixes in Action
    9. Lesson 17
       1. Choosing Breakpoints
       2. Making a Full ThreeColumn Layout Responsive
       3. Creating a Responsive Nav Menu
       4. Advanced Media Queries
    10. Lesson 18
        1. Demo of Transition Functions
        2. Increasing the Size of an Input Field
        3. Transformation Examples
        4. Creating an Image Gallery with Mouseover Effects
        5. Rainbow Animation
        6. Follow the Bouncing Ball
    11. Lesson 19
        1. Changing Multiple Elements by Changing a Single Variable
        2. Changing the Scope of Variables
        3. Complex Layouts with Variables
    12. Lesson 20
        1. Configuring Sass on Your Computer
        2. More Nesting Examples
    13. Lesson 21
        1. Registering a Domain
        2. Pointing Your Domain to SiteGround
        3. Uploading Your Files
    14. Lesson 22
        1. Using the W3C Markup Validator to Find and Fix Errors
        2. Using the Xcode Simulator
        3. Emulating Android Devices
        4. Chrome DevTools Overview
        5. Responsive Testing in Chrome
    15. Lesson 23
        1. Doing a Live GTmetrix Test
        2. A Closer Look at the Network Tab
        3. Testing Critical CSS
    16. Lesson 24
        1. hanging ARIA States and Properties
        2. Digging into the Accessibility Test in Chrome
        3. There are a lot of features in WAVE, so we walk through the interface to show you what the icons mean and how you can use the data provided by the test
    17. Lesson 25
        1. Using GitHub