The HTML and CSS Workshop

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

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

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

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

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

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

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

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

Gradients   302

Exercise 7.06: Gradients   304

Animating a Canvas   306

Exercise 7.07: Animated canvas   309

Activity 7.01: Media Page   310

Summary   312

8. Animations   315

Introduction   316

CSS Transitions   316

Exercise 8.01: Implementing Our First Simple Animation   318

Exercise 8.02: Enhanced Control in CSS Transitions   320

Exercise 8.03: CSS Transition Performance   323

Exercise 8.04: CSS Transition with Multiple Values   326

Advanced CSS for Animations   328

CSS Positioning 328

Overflow 329

Opacity 330

Blur 330

Inserting Content with attr() 331

Exercise 8.05: Animating a Website Menu   331

Transition Duration Sweet Spot   338

Slowing Animations Down   338

Animation Acceleration and Deceleration   341

Keyframe Animations in CSS   344

Using the CSS Animation Property   344

Exercise 8.06: CSS Preloader Using Keyframes   345

More CSS Tips and Tricks   349

Activity 8.01: Animating Our Video Store Home Page   351

Summary   354

9. Accessibility   357

Introduction   358

What Is Accessibility?   359

Accessible Images   360

Exercise 9.01: Accessible Ratings   364

Semantic HTML   369

Accessible Forms   370

Exercise 9.02: Accessible Signup Form   373

Keyboard Accessibility   379

Accessible Motion   381

Accessibility Tools   383

Axe Tool   383

Exercise 9.03: Using Axe   386

Activity 9.01: Making a Page Accessible   390

Summary   390

10. Preprocessors and Tooling   393

Introduction to CSS Preprocessors   394

Getting Started with Node.js, npm, and SASS   394

SCSS Introduction   402

Exercise 10.01: Using SCSS Variables   403

Nesting in SCSS   409

Exercise 10.02: Rewriting Existing CSS with Nested SCSS   413

Import, Control Directives, and Mixins in SCSS   419

Exercise 10.03: Using SCSS Mixins and Control Directives   422

Loops in SCSS   426

Exercise 10.04: Loops in SCSS   429

Activity 10.01: Converting the Video Store Home Page into SCSS   433

Summary   435

11. Maintainable CSS   437

Introduction to Maintainable CSS   438

Block, Element, and Modifier    438

Block   439

Element   439

Modifier   439

Exercise 11.01: Using BEM Markup   442

Using BEM Markup with SCSS   448

Exercise 11.02: Applying SCSS to BEM   451

Structuring Your SCSS into Maintainable Files   455

Exercise 11.03: Using Structured SCSS Files   457

Good Practices for Maintainable CSS    462

Activity 11.01: Making Our Video Store Web Page Maintainable   464

Summary   466

12. Web Components   469

Introduction   470

Custom Elements   471

The define Method   472

Naming Conventions   473

Unique Names   474

Extends HTMLElement   476

Exercise 12.01: Creating a Custom Element   476

Behavior of a Custom Element   479

Exercise 12.02: Adding and Using Custom Elements with Attributes   481

Custom Element Life Cycle   487

Exercise 12.03: Custom Element Life Cycle   488

Extending a Built-in Element   493

Exercise 12.04: Custom Element Extending HTMLAnchorElement   494

Shadow DOM   497

Attaching a Shadow DOM   498

Inspecting the Shadow DOM   500

Exercise 12.05: Shadow DOM with a Custom Element   503

HTML Templates   509

Exercise 12.06: Templates   513

Creating a Web Component   517

Activity 12.01: Creating a Profile   517

Sharing a Web Component   518

Summary   521

13. The Future of HTML and CSS   523

Introduction   524

Keeping up with the Web   524

Chrome Canary   524

Experimental Flags   526

Browser Vendor Status   528

Caniuse   528

Exercise 13.01: Verifying Browser Support for Web Pages Created Using CSS Grid   530

CSS Houdini   541

CSS Paint API   541

Exercise 13.02: Creating a Red Fill Paint Worklet   543

Custom Properties   545

Exercise 13.03: The Fill Color Paint Worklet   547

Input Properties   550

Exercise 13.04: Paint Worklet with Mouse Input   550

CSS Properties and Values API 556

Animating Custom Properties 557

Exercise 13.05: Animating a Paint Worklet   557

Current Browser Support 559

Progressive Enhancement   561

Exercise 13.06: Progressive Enhancement   562

Activity 13.01: Button Library   566

Summary   569

Appendix   571

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset