Cover image for The HTML and CSS Workshop

The HTML and CSS Workshop

Author Marian Zburlea , Matt Park , Rob Larsen , Brett Jephson , Lewis Coulson
Release Date: 2019/11/01
ISBN: 9781838824532
Topic:
0%
17
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

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