The HTML and CSS Workshop: A New, Interactive Approach to Learning HTML and CSS

663 Pages·2019·15.181 MB·English

by  Lewis Coulson, Brett Jephson, Rob Larsen, Matt Park, Marian Zburlea

The HTML and CSS
Workshop
A New, Interactive Approach
to Learning HTML and CSS
Lewis Coulson
Brett Jephson
Rob Larsen
Matt Park
Marian Zburlea
The HTML and CSS Workshop
Copyright © 2019 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: Terry O'Brien, Kurri Sudarshan Reddy, and Adam Rosson
Managing Editor: Anush Kumar Mehalavarunan
Acquisitions Editor: Sarah Lawton
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: 1271119
ISBN 978-1-83882-453-2
Published by Packt Publishing Ltd.
Livery Place, 35 Livery Street
Birmingham B3 2PB, UK
Table of Contents
Preface i
Chapter 1: Introduction to HTML and CSS 1
Introduction .................................................................................................... 2
HTML ............................................................................................................... 4
Syntax .................................................................................................................... 4
Content Types ...................................................................................................... 7
The HTML Document ......................................................................................... 10
The HTML DOM .................................................................................................. 12
The Doctype Declaration .................................................................................. 12
Structuring an HTML Document ................................................................ 13
HTML .................................................................................................................... 13
Head .................................................................................................................... 14
Body ..................................................................................................................... 14
Our First Web Page ............................................................................................ 15
Exercise 1.01: Creating a Web Page ................................................................. 15
Metadata ............................................................................................................. 16
Exercise 1.02: Adding Metadata ....................................................................... 18
Mistakes in HTML ......................................................................................... 20
Validating HTML ........................................................................................... 23
Exercise 1.03: Validation ................................................................................... 25
Exercise 1.04: Validation Errors ........................................................................ 26
Activity 1.01: Video Store Page Template ....................................................... 28
CSS ................................................................................................................. 30
Syntax .................................................................................................................. 30
Adding Styles to a Web Page ............................................................................ 32
Exercise 1.05: Adding Styles .............................................................................. 33
Exercise 1.06: Styles in an External File ........................................................... 35
CSSOM ........................................................................................................... 37
CSS Selectors ................................................................................................ 37
Element, ID, and Class ....................................................................................... 38
The Universal Selector (*) ................................................................................. 38
Attribute Selectors ............................................................................................. 39
Pseudo-classes ................................................................................................... 39
Pseudo-elements ............................................................................................... 42
Combining Selectors .......................................................................................... 43
Exercise 1.07: Selecting Elements .................................................................... 44
CSS Specificity ............................................................................................... 48
The Special Case of !important .................................................................. 50
Activity 1.02: Styling the Video Store Template Page .................................... 51
Dev Tools ....................................................................................................... 53
The Top Bar ......................................................................................................... 54
The Elements Tab ............................................................................................... 55
How a Web Page Renders ........................................................................... 56
Summary ....................................................................................................... 58
Chapter 2: Structure and Layout 61
Introduction .................................................................................................. 62
Structural Elements ..................................................................................... 63
The header Tag ................................................................................................... 64
The footer Tag .................................................................................................... 65
The section Tag .................................................................................................. 66
The article Tag .................................................................................................... 67
The nav Tag ......................................................................................................... 68
The aside Tag ...................................................................................................... 69
The div Tag .......................................................................................................... 70
A News Article Web Page .................................................................................. 70
Exercise 2.01: Marking up the Page ................................................................. 71
Wireframes ................................................................................................... 74
Activity 2.01: Video Store Home Page .............................................................. 76
CSS Page Layouts ......................................................................................... 78
Video Store Product Page ................................................................................. 79
Float-Based Layouts .......................................................................................... 80
The float Property .........................................................................................80
The width Property .......................................................................................80
Clearing Floated Elements ...........................................................................81
Flex-Based Layouts ............................................................................................ 82
The flex Container ........................................................................................82
The flex Items ................................................................................................83
Grid-Based Layouts ............................................................................................ 83
The grid Container ........................................................................................84
The grid Items................................................................................................84
Exercise 2.02: A grid-Based Layout .................................................................. 84
The Box Model .............................................................................................. 86
Content Box ........................................................................................................ 87
The padding Property ........................................................................................ 88
The border Property .......................................................................................... 89
The margin Property ......................................................................................... 91
Exercise 2.03: Experimenting with the Box Model ......................................... 92
Putting It All Together ....................................................................................... 95
Exercise 2.04: Home Page Revisited ................................................................ 96
Exercise 2.05: Video Store Product Page Revisited ........................................ 98
Activity 2.02: Online Clothes Store Home Page ........................................... 101
Summary ..................................................................................................... 102
Chapter 3: Text and Typography 105
Introduction ................................................................................................ 106
Text-Based Elements ................................................................................. 106
Headings .......................................................................................................... 106
Paragraphs ....................................................................................................... 107
Inline Text Elements ....................................................................................... 108
Lists ................................................................................................................... 110
Exercise 3.01: Combining Text-Based Elements .......................................... 114
Semantic Markup ....................................................................................... 115
Styling Text-Based Elements .................................................................... 116
CSS Resets ........................................................................................................ 116
CSS Text Properties ......................................................................................... 118
CSS Font Properties ........................................................................................ 122
The display Property ....................................................................................... 123
Video Store Product Page (Revisited) ........................................................... 124
Exercise 3.02: Navigation ............................................................................... 125
Breadcrumbs .............................................................................................. 128
Exercise 3.03: Breadcrumb ............................................................................ 129
Exercise 3.04: Page Heading and Introduction ............................................ 132
Exercise 3.05: Product Cards ......................................................................... 134
Activity 3.01: Converting a Newspaper Article to a Web Page .................. 143
Summary ..................................................................................................... 144
Chapter 4: Forms 147
Introduction ................................................................................................ 148
Form Elements ........................................................................................... 148
The form Element ........................................................................................... 149
The input Element ........................................................................................... 149
The label Element ........................................................................................... 153
The textarea Element ..................................................................................... 153
The fieldset Element ....................................................................................... 154
The select Element .......................................................................................... 156
The button Element ........................................................................................ 157
Exercise 4.01: Creating a Simple Form ......................................................... 157
Styling Form Elements ............................................................................... 160
Label, Textbox, and Textarea ........................................................................ 161
Buttons ............................................................................................................. 163
Select Boxes ..................................................................................................... 164
Validation Styling ............................................................................................ 165
Exercise 4.02: Creating a Form with Validation Styling .............................. 166
Video Store Forms ........................................................................................... 170
Exercise 4.03: New Account Signup Form .................................................... 171
Exercise 4.04: Checkout Form ....................................................................... 178
Activity 4.01: Building an Online Property Portal Website Form .............. 186
Summary ..................................................................................................... 187
Chapter 5: Themes, Colors, and Polish 189
Introduction ................................................................................................ 190
The Markup ...................................................................................................... 192
Inverting Colors ............................................................................................... 197
New HTML Elements in the Theme .............................................................. 199
New CSS Background Properties .................................................................. 199
Exercise 5.01: Creating a Dark Theme .......................................................... 200
Creating a Dark Theme with the HSL Function ........................................... 206
Exercise 5.02: Creating a Dark Theme Using hsl() ....................................... 207
CSS Invert Filter ............................................................................................... 213
Exercise 5.03: Creating a Dark Theme with the CSS Invert Filter .............. 216
CSS Hooks ........................................................................................................ 220
Exercise 5.04: Customizing a Theme with CSS Hooks ................................. 221
Activity 5.01: Creating Your Own Theme Using a New Color Palette ....... 227
Summary ..................................................................................................... 229
Chapter 6: Responsive Web Design and Media Queries 231
Introduction ................................................................................................ 232
Mobile-First ................................................................................................. 232
Responsive Web Design ................................................................................. 234
Responsive Viewport ..................................................................................... 236
Understanding Basic Media Queries ............................................................ 236
Exercise 6.01: Using Media Queries to Change the Page Layout .............. 241
Device Orientation Media Queries ............................................................... 245
Exercise 6.02: Using Media Queries to Detect Device Orientation ........... 247
Combining Multiple Media Queries .............................................................. 253
Print Stylesheets ............................................................................................. 254
Exercise 6.03: Generating a Printable Version of a Web Page
Using CSS Media Queries ............................................................................... 255
Activity 6.01: Refactoring the Video Store Product Cards
into a Responsive Web Page .......................................................................... 258
Summary ..................................................................................................... 260
Chapter 7: Media – Audio, Video, and Canvas 263
Introduction ................................................................................................ 264
Audio ........................................................................................................... 264
Exercise 7.01: Adding Audio to a Web Page ................................................. 265
Attributes ......................................................................................................... 267
The Autoplay Attribute ...............................................................................267
The preload Attribute .................................................................................268
The loop Attribute .......................................................................................270
The controls Attribute ................................................................................271
Styling Audio Controls .................................................................................... 271
Exercise 7.02: Styling Controls ....................................................................... 272
Multiple Sources ............................................................................................. 277
The video Element ..................................................................................... 278
Attributes ......................................................................................................... 278
The width and height Attributes ...............................................................278
The poster Attribute ...................................................................................278
Exercise 7.03: Adding Video to a Web Page ................................................. 278
Limitations .................................................................................................. 280
The track Element ...................................................................................... 281
Adding Subtitles .............................................................................................. 283
Exercise 7.04: Adding Subtitles ...................................................................... 283
Images ......................................................................................................... 286
The img Element ............................................................................................. 287
The picture Element ....................................................................................... 287
Programmable Graphics ................................................................................ 289
The svg Element ..........................................................................................289
The canvas Element ....................................................................................290
Exercise 7.05: Drawing Shapes ...................................................................... 296