Preface

About the Book

You already know you want to learn HTML and CSS, and a smart 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 such as 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 preprocessors. It's your choice. Learning on your terms, you'll build up and reinforce key skills in a way that feels rewarding.

Every physical copy of The HTML and CSS Workshop unlocks access to the interactive edition. With videos detailing all the exercises and activities, you'll always have a guided solution. You can also benchmark yourself against assessments, track your progress, and receive free content updates. It's a premium learning experience that's included with your printed copy. To redeem this, 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 an 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, and this will constitute a solid foundation for the years ahead.

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:

<!doctype html>

<html lang="en">

<head>

<title>Page Title</title>

</head>

</html>

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

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):

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

   Figure 0.1: Downloading VSCode

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

Installing the "Open in Default Browser" Extension

1. 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

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

Figure 0.3: Installing the extension

Installing the Code Bundle

Download the code files from GitHub at https://packt.live/2N7M3yC and place them in a new folder called C:Code. Refer to these code files for the complete code bundle.

If you face any trouble with installation or with getting the code up and running, please reach out to the team at [email protected]