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 :)