The HTML and CSS Workshop

The HTML and CSS Workshop

by Lewis Coulson, Brett Jephson, Rob Larsen, Matt Park, Marian Zburlea
Released November 2019
Publisher(s): Packt Publishing
ISBN: 9781838824532

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Cut through the noise and get real results with a step-by-step approach to learning HTML and CSS programming

Key Features

  • 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

Book Description

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.

What you will learn

  • 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

Who this book is for

Our goal at Packt is to help you be successful, in whatever it is you choose to do. The HTML and CSS Workshop is an ideal HTML and CSS tutorial for the HTML and CSS beginner who is just getting started. Pick up a Workshop today, and let Packt help you develop skills that stick with you for life.

Table of contents

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

Product information

  • Title: The HTML and CSS Workshop
  • Author(s): Lewis Coulson, Brett Jephson, Rob Larsen, Matt Park, Marian Zburlea
  • Release date: November 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781838824532