The
HTML and CSS
Workshop

Built by a team of experts to help you unlock your next promotion, reboot your career, or kick off your latest side project.
Cover for The HTML and CSS Workshop

Get Started Today

You'll be up and running with HTML and CSS in no time at all.

  • $34.99

    $34.99The HTML and CSS Workshop

    Unlock one year of full, unlimited access and get started right away!
    Learn for Free

Engineered for Success

Nobody likes going through hundreds of pages of dry theory, or struggling with uninteresting examples that don’t compile. We've got you covered. Any time, any device.

  • Learn by doing real-world development, supported by detailed step-by-step examples, screencasts and knowledge checks.

  • Become a verified practitioner, building your credentials by completing exercises, activities and assessment checks.

  • Manage your learning based on your personal schedule, with content structured to easily let you pause and progress at will.

Learn By Doing

You already know you want to learn HTML and CSS, and a smarter way to learn is to learn by doing.

The HTML and CSS Workshop is ideal if you’re looking to build your own web pages from scratch, or tinker with existing themes on modern platforms like WordPress and Shopify.

On Your Terms

Build up and reinforce key skills in a way that feels rewarding.

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 third-party libraries. It's your choice.

An Ideal Start

The HTML and CSS Workshop is the perfect companion for beginners.

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.

Begin Your Journey

A simple, straightforward and pain-free way to learn HTML and CSS.

  • $34.99

    $34.99The HTML and CSS Workshop

    Unlock one year of full, unlimited access and get started right away!
    Learn for Free

Everything You Need

Every Workshop includes access to dedicated support, course discussions and a wider learning community. Ask questions, share answers and work with the community to expand your learning.

  • Engage and participate in live user discussions, baked right into your course from start to finish. Share, learn and grow together.

  • Get live updates and interact directly with the product development, editorial and authoring teams across the Packt network.

  • Create, showcase and share your own learning outcomes and motivational stories across the entire workshop community.

Get Build-Ready

Every Workshop includes a whole host of features that work together to help you get the job done. You’ll be ready to tackle real-world development in no time.

  • Hack Your Brain

    We've applied the latest pedagogical techniques to deliver a truly multimodal experience. It'll keep you engaged and make the learning stick. It's science!

  • Build Real Things

    Nobody likes wasting their time. We cut right to the action and get you building real skills that real, working developers value. The perfect approach for a career move.

  • Learn From Experts

    We've paired technical experts with top editorial talent. They've worked hard to deliver you the maximum impact for each minute you spend learning. It's our secret sauce.

  • Verify Your Credentials

    You can become a verified practitioner. Complete the course to get a certificate. It's perfect for sharing on social media. Hello LinkedIn!

  • Receive Free Updates

    Technology keeps changing, and so do we. We keep versions updated independently, so you'll always have access. No more worrying about third-party release cycles.

  • Access Anywhere

    All you need is an internet connection. We've built every course so that it works on desktop and mobile, giving you options that fit within your schedule.

What's Inside

From A to Z, we've got you covered!

  • Workshop Onboarding

    • Welcome to The HTML and CSS Workshop
    • Installation and Setup
    • Credits

  • 1. Introduction to HTML and CSS

    • Overview
    • HTML
    • Structuring an HTML Document
    • Exercise 1.01: Creating a Web Page
    • Exercise 1.01: Creating a Web Page
    • Exercise 1.02: Adding Metadata
    • Exercise 1.02: Adding Metadata
    • Mistakes in HTML
    • Validating HTML
    • Exercise 1.03: Validation
    • Exercise 1.03: Validation
    • Exercise 1.04: Validation Errors
    • Exercise 1.04: Validation Errors
    • Activity 1.01: Video Store Page Template
    • CSS
    • Exercise 1.05: Adding Styles
    • Exercise 1.05: Adding Styles
    • Exercise 1.06: Styles in an External File
    • Exercise 1.06: Styles in an External File
    • CSSOM
    • CSS Selectors
    • Exercise 1.07: Selecting Elements
    • Exercise 1.07: Selecting Elements
    • CSS Specificity
    • The Special Case of !important
    • Activity 1.02: Styling the Video Store Template Page
    • Dev Tools
    • How a Web Page Renders
    • Summary

  • 2. Structure and Layout

    • Overview
    • Structural Elements
    • Exercise 2.01: Marking up the Page
    • Exercise 2.01: Marking up the Page
    • Activity 2.01: Video Store Home Page
    • CSS Page Layouts
    • Exercise 2.02: A grid-Based Layout
    • Exercise 2.02: A grid-Based Layout
    • The Box Model
    • Exercise 2.03: Experimenting with the Box Model
    • Exercise 2.03: Experimenting with the Box Model
    • Exercise 2.04: Home Page Revisited
    • Exercise 2.04: Home Page Revisited
    • Exercise 2.05: Video Store Product Page Revisited
    • Exercise 2.05: Video Store Product Page Revisited
    • Activity 2.02: Online Clothes Store Home Page
    • Summary

  • 3. Text and Typography

    • Overview
    • Text-Based Elements
    • Exercise 3.01: Combining Text-Based Elements
    • Exercise 3.01: Combining Text-Based Elements
    • Semantic Markup
    • Exercise 3.02: Navigation
    • Exercise 3.02: Navigation
    • Exercise 3.03: Breadcrumbs
    • Exercise 3.03: Breadcrumbs
    • Exercise 3.04: Page Heading and Introduction
    • Exercise 3.04: Page Heading and Introduction
    • Exercise 3.05: Product Cards
    • Exercise 3.05: Product Cards
    • Exercise 3.06: Putting It All Together
    • Exercise 3.06: Putting It All Together
    • Activity 3.01: Converting a Newspaper Article to a Web Page
    • Summary

  • 4. Forms

    • Overview
    • Form Elements
    • Exercise 4.01: Creating a Simple Form
    • Exercise 4.01: Creating a Simple Form
    • Styling Form Elements
    • Exercise 4.02: Creating a Form with Validation Styling
    • Exercise 4.02: Creating a Form with Validation Styling
    • Exercise 4.03: New Account Signup Form
    • Exercise 4.03: New Account Signup Form
    • Exercise 4.04: Checkout Form
    • Exercise 4.04: Checkout Form
    • Activity 4.01: Building an Online Property Portal Website Form
    • Summary
    • Survey I

  • 5. Themes, Colors, and Polish

    • Overview
    • The Markup
    • Exercise 5.01: Creating a Dark Theme
    • Exercise 5.01: Creating a Dark Theme
    • Exercise 5.02: Creating a Dark Theme Using hsl()
    • Exercise 5.02: Creating a Dark Theme with the HSL Function
    • Exercise 5.03: Creating a Dark Theme with the CSS Invert Filter
    • Exercise 5.03: Creating a Dark Theme with the CSS Invert Filter
    • Exercise 5.04: Customizing a Theme with CSS Hooks
    • Exercise 5.04: Customizing a Theme with CSS Hooks
    • Activity 5.01: Creating Your Own Theme Using a New Color Palette
    • Summary

  • 6: Responsive Web Design and Media Queries

    • Overview
    • Mobile-First
    • Exercise 6.01: Using Media Queries to Change the Page Layout
    • Exercise 6.01: Using Media Queries to Change the Page Layout
    • Exercise 6.02: Using Media Queries to Detect Device Orientation
    • Exercise 6.02: Using Media Queries to Detect Device Orientation
    • Exercise 6.03: Generating a Printable Version of a Web Page Using CSS Media Queries
    • 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

  • 7. Media – Audio, Video, and Canvas

    • Overview
    • Exercise 7.01: Adding Audio to a Web Page
    • Exercise 7.01: Adding Audio to a Web Page
    • Attributes
    • Exercise 7.02: Styling Controls
    • Exercise 7.02: Styling Controls
    • Multiple Sources
    • Exercise 7.03: Adding Video to a Web Page
    • Exercise 7.03: Adding Video to a Web Page
    • Limitations
    • Exercise 7.04: Adding Subtitles
    • Exercise 7.04: Adding Subtitles
    • Images
    • Exercise 7.05: Drawing Shapes
    • Exercise 7.05: Drawing Shapes
    • Exercise 7.06: Gradients
    • Exercise 7.06: Gradients
    • Exercise 7.07: Animated Canvas
    • Exercise 7.07: Animated Canvas
    • Activity 7.01: Media Page
    • Summary

  • 8. Animations

    • Overview
    • Exercise 8.01: Implementing Our First Simple Animation
    • Exercise 8.01: Implementing Our First Simple Animation
    • Exercise 8.02: Enhanced Control in CSS Transitions
    • Exercise 8.02: Enhanced Control in CSS Transitions
    • Exercise 8.03: CSS Transition Performance
    • Exercise 8.03: CSS Transition Performance
    • Exercise 8.04: CSS Transition with Multiple Values
    • Exercise 8.04: CSS Transition with Multiple Values
    • Advanced CSS for Animations
    • Exercise 8.05: Animating a Website Menu
    • Exercise 8.05: Animating a Website Menu
    • Transition Duration Sweet Spot
    • Exercise 8.06: CSS Preloader Using Keyframes
    • Exercise 8.06: CSS Preloader Using Keyframes
    • More CSS Tips and Tricks
    • Activity 8.01: Animating Our Video Store Home Page
    • Summary
    • Survey II

  • 9. Accessibility

    • Overview
    • What Is Accessibility?
    • Exercise 9.01: Accessible Ratings
    • Exercise 9.01: Accessible Ratings
    • Semantic HTML
    • Exercise 9.02: Accessible Signup Form
    • Exercise 9.02: Accessible Signup Form
    • Keyboard Accessibility
    • Exercise 9.03: Using Axe
    • Exercise 9.03: Using Axe
    • Activity 9.01: Making a Page Accessible
    • Summary

  • 10. Preprocessors and Tooling

    • Overview
    • Getting Started with Node.js, npm, and SASS
    • Exercise 10.01: Using SCSS Variables
    • Exercise 10.01: Using SCSS Variables
    • Nesting in SCSS
    • Exercise 10.02: Rewriting Existing CSS with Nested 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
    • Exercise 10.03: Using SCSS Mixins and Control Directives
    • Loops in SCSS
    • Exercise 10.04: Loops in SCSS
    • Exercise 10.04: Loops in SCSS
    • Activity 10.01: Converting the Video Store Home Page into SCSS
    • Summary

  • 11. Maintainable CSS

    • Overview
    • Block, Element, and Modifier
    • Exercise 11.01: Using BEM Markup
    • Exercise 11.01: Using BEM Markup
    • Using BEM Markup with SCSS
    • Exercise 11.02: Applying SCSS to BEM
    • Exercise 11.02: Applying SCSS to BEM
    • Structuring Your SCSS into Maintainable Files
    • Exercise 11.03: Using Structured SCSS Files
    • Exercise 11.03: Using Structured SCSS Files
    • Good Practices for Maintainable CSS
    • Activity 11.01: Making Our Video Store Web Page Maintainable
    • Summary

  • 12. Web Components

    • Overview
    • Custom Elements
    • Exercise 12.01: Creating a Custom Element
    • Exercise 12.01: Creating a Custom Element
    • Exercise 12.02: Adding and Using Custom Elements with Attributes
    • Exercise 12.02: Adding and Using Custom Elements with Attributes
    • Exercise 12.03: Custom Element Life Cycle
    • Exercise 12.03: Custom Element Life Cycle
    • Exercise 12.04: Custom Element Extending HTMLAnchorElement
    • Exercise 12.04: Custom Element Extending HTMLAnchorElement
    • Shadow DOM
    • Exercise 12.05: Shadow DOM with a Custom Element
    • Exercise 12.05: Shadow DOM with a Custom Element
    • HTML Templates
    • Exercise 12.06: Templates
    • Exercise 12.06: Templates
    • Activity 12.01: Creating a Profile
    • Sharing a Web Component
    • Summary
    • Survey III

  • 13. The Future of HTML and CSS

    • Overview
    • Keeping Up With the Web
    • Caniuse
    • Exercise 13.01: Verifying Browser Support for Web Pages Created Using CSS Grid
    • Exercise 13.01: Verifying Browser Support for Web Pages Created Using CSS Grid
    • CSS Houdini
    • Exercise 13.02: Creating a Red Fill Paint Worklet
    • Exercise 13.02: Creating a Red Fill Paint Worklet
    • Custom Properties
    • Exercise 13.03: The Fill Color Paint Worklet
    • Exercise 13.03: The Fill Color Paint Worklet
    • Exercise 13.04: Paint Worklet with Mouse Input
    • Exercise 13.04: Paint Worklet with Mouse Input
    • Exercise 13.05: Animating a Paint Worklet
    • Exercise 13.05: Animating a Paint Worklet
    • Current Browser Support
    • Exercise 13.06: Progressive Enhancement
    • Exercise 13.06: Progressive Enhancement
    • Activity 13.01: Button Library
    • Summary

  • Activity Solutions

    • Activity 1.01: Video Store Page Template
    • Activity 1.01: Video Store Page Template
    • Activity 1.02: Styling the Video Store Template Page
    • Activity 1.02: Styling the Video Store Template Page
    • Activity 2.01: Video Store Home Page
    • Activity 2.01: Video Store Home Page
    • Activity 2.02: Online Clothes Store Home Page
    • Activity 2.02: Online Clothes Store Home Page
    • Activity 3.01: Converting a Newspaper Article to a Web Page
    • Activity 3.01: Converting a Newspaper Article to a Web Page
    • Activity 4.01: Building an Online Property Portal Website Form
    • Activity 4.01: Building an Online Property Portal Website Form
    • Activity 5.01: Creating Your Own Theme Using a New Color Palette
    • Activity 5.01: Creating Your Own Theme Using a New Color Palette
    • Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page
    • Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page
    • Activity 7.01: Media Page
    • Activity 7.01: Media Page
    • Activity 8.01: Animating Our Video Store Home Page
    • Activity 8.01: Animating Our Video Store Home Page
    • Activity 9.01: Making a Page Accessible
    • Activity 9.01: Making a Page Accessible
    • Activity 10.01: Converting the Video Store Home Page into SCSS
    • Activity 10.01: Converting the Video Store Home Page into SCSS
    • Activity 11.01: Making Our Video Store Web Page Maintainable
    • Activity 11.01: Making Our Video Store Web Page Maintainable
    • Activity 12.01: Creating a Profile
    • Activity 12.01: Creating a Profile
    • Activity 13.01: Button Library
    • Activity 13.01: Button Library

Get Verified

Complete The HTML and CSS Workshop to unlock your certificate.

You can unlock the certificate by completing the course. The credentials are easy to share, and are ideal for displaying on your LinkedIn profile.
A copy of a certificate for The HTML and CSS Workshop

Take A Step Forward

There has never been a better time to start learning HTML and CSS.

  • $34.99

    $34.99The HTML and CSS Workshop

    Unlock one year of full, unlimited access and get started right away!
    Learn for Free

Already Know
HTML and CSS?

Don't worry, we've got your back with other languages and frameworks too!

Show me my options!