The HTML and CSS Workshop

• Get to grips with the key features of HTML5 and CSS3
• Learn how to integrate animation, media, and custom themes
• Understand how you can easily customize and maintain CSS
• Develop your own mobile-first approach while designing websites
• Learn how to diagnose and resolve common style and structural problems

You already know you want to learn HTML and CSS, and a smarter way to learn HTML and CSS is to learn by doing. The HTML and CSS Workshop focuses on building up your practical skills so that you can build your own static web pages from scratch, or work with existing themes on modern platforms like WordPress and Shopify. It’s the perfect way to get started with web development. You'll learn from real examples that lead to real results. Throughout The HTML and CSS Workshop, you'll take an engaging step-by-step approach to beginning HTML and CSS development. You won't have to sit through any unnecessary theory. If you're short on time you can jump into a single exercise each day or spend an entire weekend learning about CSS pre-processors. It's your choice. Learning on your terms, you'll build up and reinforce key skills in a way that feels rewarding. Every physical print copy of The HTML and CSS Workshop unlocks access to the interactive edition. With videos detailing all exercises and activities, you'll always have a guided solution. You can also benchmark yourself against assessments, track progress, and receive free content updates. You'll even earn a secure credential that you can share and verify online upon completion. It's a premium learning experience that's included with your printed copy. To redeem, follow the instructions located at the start of your HTML CSS book. Fast-paced and direct, The HTML and CSS Workshop is the ideal companion for a HTML and CSS beginner. You'll build and iterate on your code like a software developer, learning along the way. This process means that you'll find that your new skills stick, embedded as best practice. A solid foundation for the years ahead.

• An HTML and CSS tutorial with step-by-step exercises and activities
• Structured to let you progress at your own pace, on your own terms
• Use your physical print copy to redeem free access to the online interactive edition

Table of contents

1. Introduction to HTML and CSS
Introduction
HTML
Structuring an HTML Document
Mistakes in HTML
Validating HTML
CSS
CSSOM
CSS Selectors
CSS Specificity
The Special Case of !important
Dev Tools
How a Web Page Renders
Summary

2. Structure and Layout
Introduction
Structural Elements
Wireframes
CSS Page Layouts
The Box Model
Summary

3. Text and Typography
Introduction
Text-Based Elements
Semantic Markup
Styling Text-Based Elements
Breadcrumbs
Summary

4. Forms
Introduction
Form Elements
Styling Form Elements
Summary

5. Themes, Colors, and Polish
Introduction
Summary

6. Responsive Web Design and Media Queries
Introduction
Mobile-First
Summary

7. Media – Audio, Video, and Canvas
Introduction
Audio
The video Element
Limitations
The track Element
Images
Gradients
Animating a Canvas
Summary

8. Animations
Introduction
CSS Transitions
Summary

9. Accessibility
Introduction
What Is Accessibility?
Accessible Images
Semantic HTML
Accessible Forms
Keyboard Accessibility
Accessible Motion
Accessibility Tools
Summary

10. Preprocessors and Tooling
Introduction to CSS Preprocessors
Getting Started with Node.js, npm, and SASS
SCSS Introduction
Nesting in SCSS
Import, Control Directives, and Mixins in SCSS
Loops in SCSS
Summary

11. Maintainable CSS
Introduction to Maintainable CSS
Block, Element, and Modifier
Using BEM Markup with SCSS
Structuring Your SCSS into Maintainable Files
Good Practices for Maintainable CSS
Summary

12. Web Components
Introduction
Custom Elements
Shadow DOM
HTML Templates
Sharing a Web Component
Summary

13. The Future of HTML and CSS
Introduction
Keeping up with the Web
Caniuse
CSS Houdini
Custom Properties
Progressive Enhancement
Summary