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:

<!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)."

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