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

Description

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