The HTML and CSS Workshop: A New, Interactive Approach to Learning HTML and CSS

Cover
FM
Copyright
Table of Contents
Preface
Chapter 1: Introduction to HTML and CSS
Introduction
HTML
Syntax
Content Types
The HTML Document
The HTML DOM
The Doctype Declaration
Structuring an HTML Document
HTML
Head
Body
Our First Web Page
Exercise 1.01: Creating a Web Page
Metadata
Exercise 1.02: Adding Metadata
Mistakes in HTML
Validating HTML
Exercise 1.03: Validation
Exercise 1.04: Validation Errors
Activity 1.01: Video Store Page Template
CSS
Syntax
Adding Styles to a Web Page
Exercise 1.05: Adding Styles
Exercise 1.06: Styles in an External File
CSSOM
CSS Selectors
Element, ID, and Class
The Universal Selector (*)
Attribute Selectors
Pseudo-classes
Pseudo-elements
Combining Selectors
Exercise 1.07: Selecting Elements
CSS Specificity
The Special Case of !important
Activity 1.02: Styling the Video Store Template Page
Dev Tools
The Top Bar
The Elements Tab
How a Web Page Renders
Summary
Chapter 2: Structure and Layout
Introduction
Structural Elements
The header Tag
The footer Tag
The section Tag
The article Tag
The nav Tag
The aside Tag
The div Tag
A News Article Web Page
Exercise 2.01: Marking up the Page
Wireframes
Activity 2.01: Video Store Home Page
CSS Page Layouts
Video Store Product Page
Float-Based Layouts
The float Property
The width Property
Clearing Floated Elements
Flex-Based Layouts
The flex Container
The flex Items
Grid-Based Layouts
The grid Container
The grid Items
Exercise 2.02: A grid-Based Layout
The Box Model
Content Box
The padding Property
The border Property
The margin Property
Exercise 2.03: Experimenting with the Box Model
Putting It All Together
Exercise 2.04: Home Page Revisited
Exercise 2.05: Video Store Product Page Revisited
Activity 2.02: Online Clothes Store Home Page
Summary
Chapter 3: Text and Typography
Introduction
Text-Based Elements
Headings
Paragraphs
Inline Text Elements
Lists
Exercise 3.01: Combining Text-Based Elements
Semantic Markup
Styling Text-Based Elements
CSS Resets
CSS Text Properties
CSS Font Properties
The display Property
Video Store Product Page (Revisited)
Exercise 3.02: Navigation
Breadcrumbs
Exercise 3.03: Breadcrumb
Exercise 3.04: Page Heading and Introduction
Exercise 3.05: Product Cards
Activity 3.01: Converting a Newspaper Article to a Web Page
Summary
Chapter 4: Forms
Introduction
Form Elements
The form Element
The input Element
The label Element
The textarea Element
The fieldset Element
The select Element
The button Element
Exercise 4.01: Creating a Simple Form
Styling Form Elements
Label, Textbox, and Textarea
Buttons
Select Boxes
Validation Styling
Exercise 4.02: Creating a Form with Validation Styling
Video Store Forms
Exercise 4.03: New Account Signup Form
Exercise 4.04: Checkout Form
Activity 4.01: Building an Online Property Portal Website Form
Summary
Chapter 5: Themes, Colors, and Polish
Introduction
The Markup
Inverting Colors
New HTML Elements in the Theme
New CSS Background Properties
Exercise 5.01: Creating a Dark Theme
Creating a Dark Theme with the HSL Function
Exercise 5.02: Creating a Dark Theme Using hsl()
CSS Invert Filter
Exercise 5.03: Creating a Dark Theme with the CSS Invert Filter
CSS Hooks
Exercise 5.04: Customizing a Theme with CSS Hooks
Activity 5.01: Creating Your Own Theme Using a New Color Palette
Summary
Chapter 6: Responsive Web Design and Media Queries
Introduction
Mobile-First
Responsive Web Design
Responsive Viewport
Understanding Basic Media Queries
Exercise 6.01: Using Media Queries to Change the Page Layout
Device Orientation Media Queries
Exercise 6.02: Using Media Queries to Detect Device Orientation
Combining Multiple Media Queries
Print Stylesheets
Exercise 6.03: Generating a Printable Version of a Web Page Using CSS Media Queries
Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page
Summary
Chapter 7: Media – Audio, Video, and Canvas
Introduction
Audio
Exercise 7.01: Adding Audio to a Web Page
Attributes
The Autoplay Attribute
The preload Attribute
The loop Attribute
The controls Attribute
Styling Audio Controls
Exercise 7.02: Styling Controls
Multiple Sources
The video Element
Attributes
The width and height Attributes
The poster Attribute
Exercise 7.03: Adding Video to a Web Page
Limitations
The track Element
Adding Subtitles
Exercise 7.04: Adding Subtitles
Images
The img Element
The picture Element
Programmable Graphics
The svg Element
The canvas Element
Exercise 7.05: Drawing Shapes
Gradients
Exercise 7.06: Gradients
Animating a Canvas
Exercise 7.07: Animated canvas
Activity 7.01: Media Page
Summary
Chapter 8: Animations
Introduction
CSS Transitions
Exercise 8.01: Implementing Our First Simple Animation
Exercise 8.02: Enhanced Control in CSS Transitions
Exercise 8.03: CSS Transition Performance
Exercise 8.04: CSS Transition with Multiple Values
Advanced CSS for Animations
CSS Positioning
Overflow
Opacity
Blur
Inserting Content with attr()
Exercise 8.05: Animating a Website Menu
Transition Duration Sweet Spot
Slowing Animations Down
Animation Acceleration and Deceleration
Keyframe Animations in CSS
Using the CSS Animation Property
Exercise 8.06: CSS Preloader Using Keyframes
More CSS Tips and Tricks
Activity 8.01: Animating Our Video Store Home Page
Summary
Chapter 9: Accessibility
Introduction
What Is Accessibility?
Accessible Images
Exercise 9.01: Accessible Ratings
Semantic HTML
Accessible Forms
Exercise 9.02: Accessible Signup Form
Keyboard Accessibility
Accessible Motion
Accessibility Tools
Axe Tool
Exercise 9.03: Using Axe
Activity 9.01: Making a Page Accessible
Summary
Chapter 10: Preprocessors and Tooling
Introduction to CSS Preprocessors
Getting Started with Node.js, npm, and SASS
SCSS Introduction
Exercise 10.01: Using SCSS Variables
Nesting in SCSS
Exercise 10.02: Rewriting Existing CSS with Nested SCSS
Import, Control Directives, and Mixins in SCSS
Exercise 10.03: Using SCSS Mixins and Control Directives
Loops in SCSS
Exercise 10.04: Loops in SCSS
Activity 10.01: Converting the Video Store Home Page into SCSS
Summary
Chapter 11: Maintainable CSS
Introduction to Maintainable CSS
Block, Element, and Modifier
Block
Element
Modifier
Exercise 11.01: Using BEM Markup
Using BEM Markup with SCSS
Exercise 11.02: Applying SCSS to BEM
Structuring Your SCSS into Maintainable Files
Exercise 11.03: Using Structured SCSS Files
Good Practices for Maintainable CSS
Activity 11.01: Making Our Video Store Web Page Maintainable
Summary
Chapter 12: Web Components
Introduction
Custom Elements
The define Method
Naming Conventions
Unique Names
Extends HTMLElement
Exercise 12.01: Creating a Custom Element
Behavior of a Custom Element
Exercise 12.02: Adding and Using Custom Elements with Attributes
Custom Element Life Cycle
Exercise 12.03: Custom Element Life Cycle
Extending a Built-in Element
Exercise 12.04: Custom Element Extending HTMLAnchorElement
Shadow DOM
Attaching a Shadow DOM
Inspecting the Shadow DOM
Exercise 12.05: Shadow DOM with a Custom Element
HTML Templates
Exercise 12.06: Templates
Creating a Web Component
Activity 12.01: Creating a Profile
Sharing a Web Component
Summary
Chapter 13: The Future of HTML and CSS
Introduction
Keeping up with the Web
Chrome Canary
Experimental Flags
Browser Vendor Status
Caniuse
Exercise 13.01: Verifying Browser Support for Web Pages Created Using CSS Grid
CSS Houdini
CSS Paint API
Exercise 13.02: Creating a Red Fill Paint Worklet
Custom Properties
Exercise 13.03: The Fill Color Paint Worklet
Input Properties
Exercise 13.04: Paint Worklet with Mouse Input
CSS Properties and Values API
Animating Custom Properties
Exercise 13.05: Animating a Paint Worklet
Current Browser Support
Progressive Enhancement
Exercise 13.06: Progressive Enhancement
Activity 13.01: Button Library
Summary
Appendix
Index

!!!!!!!!!!!!!!!!!!!!
wooh! took a lot of time to hack the packet website and get the damn book without paying :)