The HTML and CSS Workshop: Learn to build your own websites and kickstart your career as a web designer or developer

The HTML and CSS Workshop

Copyright © 2020 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Authors: Lewis Coulson, Brett Jephson, Rob Larsen, Matt Park, and Marian Zburlea

Reviewers: Tarunkumar Bagmar, Tiffany Ford, Terry O'Brien, Kurri Sudarshan Reddy, and Adam Rosson

Managing Editors: Anush Kumar Mehalavarunan and Anushree Arun Tendulkar

Acquisitions Editors: Sarah Lawton and Sneha Shinde

Production Editor: Shantanu Zagade

Editorial Board: Shubhopriya Banerjee, Bharat Botle, Ewan Buckingham, Megan Carlisle, Mahesh Dhyani, Manasa Kumar, Alex Mazonowicz, Bridget Neale, Dominic Pereira, Shiny Poojary, Abhishek Rane, Erol Staveley, Ankita Thakur, Nitesh Thakur, and Jonathan Wray

First Published: November 2019

Production Reference: 5291220

ISBN: 978-1-83882-453-2

Published by Packt Publishing Ltd.

Livery Place, 35 Livery Street

Birmingham B3 2PB, UK

Table of Contents

Preface

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

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

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

Exercise 3.06: Putting It All Together

Activity 3.01: Converting a Newspaper Article to a Web Page

Summary

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

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

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

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

Checking for canvas Support

Drawing in canvas

The canvas Grid

Drawing a Rectangle

Drawing a Circle

Clearing the canvas

Exercise 7.05: Drawing Shapes

Drawing Other Shapes

Gradients

Exercise 7.06: Gradients

Animating a Canvas

Exercise 7.07: Animated canvas

Activity 7.01: Media Page

Summary

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

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

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

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

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

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

Preface

About

This section briefly introduces the coverage of this book, the technical skills you'll need to get started, and the software requirements required to complete all of the included activities and exercises.

About the Book

With knowledge of CSS and HTML, you can build visually appealing, interactive websites without relying on website-building tools that come with lots of pre-packaged restrictions. The HTML and CSS Workshop takes you on a journey to learning how to create beautiful websites using your own content, understanding how they work, and how to manage them long-term.

The book begins by introducing you to HTML5 and CSS3, and takes you through the process of website development with easy-to-follow steps. Exploring how the browser renders websites from code to display, you'll advance to adding a cinematic experience to your website by incorporating video and audio elements into your code. You’ll also use JavaScript to add interactivity to your site, integrate HTML forms for capturing user data, incorporate animations to create slick transitions, and build stunning themes using advanced CSS. You’ll also get to grips with mobile-first development using responsive design and media queries, to ensure your sites perform well on any device.

Throughout the book, you’ll work on engaging projects, including a video store home page that you will iteratively add functionality to as you learn new skills.

By the end of this Workshop, you’ll have gained the confidence to creatively tackle your own ambitious web development projects.

About the Chapters

Chapter 1, Introduction to HTML and CSS, introduces you to the two foundation technologies of the web – HTML and CSS. We'll go over the syntax of both and look at how they are combined to make a web page.

Chapter 2, Structure and Layout, introduces you to the structural elements in HTML, including header, footer, and section tags. You will also learn the three main CSS layout techniques – float, flex, and grid.

Chapter 3, Text and Typography, introduces you to text-based elements, such as paragraphs, headings, and lists. We will go over how to style text-based elements in web pages and let your creativity run wild.

Chapter 4, Forms, introduces you to the creation of web forms, starting with the key HTML elements used in forms and then learning how to style them with CSS. Along the way, you will also learn how to style your forms with validation styling.

Chapter 5, Themes, Colors, and Polish, introduces you to the practical world of CSS. Applying what you've learned so far, you will craft multiple themes to apply to a website in order to change the look and feel.

Chapter 6, Responsive Web Design and Media Queries, introduces you to the world of mobile-first web design, building web pages that can adapt to different screen sizes in order to give the user a better browsing experience, regardless of their browser size. This chapter will teach you how to use modern responsive web design techniques using a CSS feature called Media Queries.

Chapter 7, Media – Audio, Video, and Canvas, introduces you to HTML's audio, video, and canvas elements, all of which can be used to make our web pages a richer, more interactive experience.

Chapter 8, Animations, introduces you to CSS animation, which can be used to animate elements on a page or application to add moving elements that can add richness to your page and tell a complex story.

Chapter 9, Accessibility, introduces you to the important topic of accessibility. The web is meant for everyone, and we can use a variety of simple techniques to make it accessible.

Chapter 10, Preprocessors and Tooling, introduces you to the world of CSS preprocessing and explains how to write a CSS preprocessing language called SCSS (Sassy Cascading Style Sheets). With these new skills, you will be able to compile SCSS into CSS, creating more maintainable code by writing less in order to achieve more.

Chapter 11, Maintainable CSS, introduces you to a variety of different techniques that we can use to create CSS that is easy to maintain, including writing semantic markup using Block Element Modifier (BEM), making reusable components in CSS, grouping CSS rules, and structuring SCSS files correctly.

Chapter 12, Web Components, introduces you to several technologies – custom elements, HTML templates, and the shadow DOM – that can be combined into composable, reusable, and shareable web components.

Chapter 13, The Future of HTML and CSS, introduces you to the cutting edge of web technologies through the CSS Paint API and looks at how we can make use of progressive enhancements to open up future technologies to us now.

Conventions

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, onscreen text, and Twitter handles are shown as follows: The head element is home to most machine-read information in an HTML  document.

A block of code is set as follows:

en>

New terms and important words are shown like this: We can also represent the HTML document as a Document Object Model (DOM).

Long code snippets are truncated and the corresponding names of the code files on GitHub are placed at the top of the truncated code. The permalinks to the entire code are placed below the code snippet. It should look as follows:

Example 6.01.html

13 @media (orientation: landscape) {

14 p.warning {

15 display: block;

16 }

17 }

The complete code for this example is available at: https://packt.live/2JXLsyM

Before You Begin

Each great journey begins with a humble step. Our upcoming adventure in the land of HTML and CSS is no exception. Before we can do awesome things with data, we need to be prepared with a productive environment. In this section, we shall see how to do that.

Installing Chrome

In this book, we have used Chrome version 76, which was the latest version at the time of publication. Make sure you have downloaded and installed the latest version of Chrome to ensure an optimal experience.

To install Chrome on Windows, follow the instructions given here: https://www.google.com/chrome/

For other platforms such as macOS and Linux, scroll down to the bottom left-hand corner of this website: https://www.google.com/chrome/ and click on Other Platforms, and choose accordingly.

Installing Visual Studio Code

Here are the steps to install Visual Studio Code (VSCode):

Download the latest VSCode from https://packt.live/2BIlniA:

Figure 0.1: Downloading VSCode

Open the downloaded file, follow the installation steps, and complete the installation process.

Installing the Open in Default Browser Extension

Open your VSCode, click on the Extensions icon, and type in Open In Default Browser in the search bar, as shown in the following screenshot:

Figure 0.2: Open in Default Browser extension search

Click on Install to complete the installation process, as shown in the following screenshot:

Figure 0.3: Installing the extension

Installing the web sever

Some exercises in the book will require the use of a personal web server to run the scripts and view the pages you'll be creating. If you do not have a personal web server already set up, you can use the following steps to get one installed.

To begin, you will need to go to https://www.apachefriends.org/index.html and download the XAMPP package for your operating system. XAMPP is available for Windows, Mac, and Linux.

Instructions for Windows

Once the web server package has been downloaded and installed on your system, open the XAMPP Control Panel and check the status of your web server. If Apache is highlighted in green, then the web server is running:

Figure 0.4: The XAMPP Control Panel

If it is not highlighted in green, then you will need to start the Apache web server:

Figure 0.5: Starting the Apache Web Server for Windows

Click the first Start button in the control panel that corresponds to Apache. The web server will then initialize and start so you can use it.

To check if your web server is running correctly, open your browser, type localhost into the browser's URL bar and then hit Enter:

Figure 0.6: Navigating to localhost in the browser

If your installation was successful and Apache is running, you will get the XAMPP welcome page:

Figure 0.7: Viewing the XAMPP Welcome Page

Next, open your XAMPP directory so you understand where to place your files when you want to use the web server to view your pages. From the XAMPP Control Panel, click the Explorer tab:

Figure 0.8: Navigating to the File Explorer

This will open the Windows Explorer and show the files used by XAMPP for running your web server. Locate the folder named htdocs. This is the folder that holds any files that you want to view in the browser:

Figure 0.9: Viewing the Web Server Folders and Files

Any files you place into this folder can be accessed through your localhost. For example, we see the file applications.html. If we want to access this file in the browser, we would type localhost/applications.html:

Figure 0.10: Navigating to the applications.html Page

Press Enter and your browser will open the file. You can now