Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques, 4th Edition

✍ Scribed by Ben Frain

• Publisher: Packt Publishing
• Year: 2022
• Tongue: English
• Leaves: 499
• Edition: 4
• Category: Library

✦ Synopsis

Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly on mobile phones, tablets, and desktops ― plus everything in-between – now with color images!

Key Features

• Understand what responsive web design is and its significance for modern web development
• Explore the latest developments in responsive web design and CSS, including layout with Grid and Subgrid, CSS Cascade Layers, Wide Gamut colors, and CSS Functions
• Get to grips with the uses and benefits of new HTML elements and attributes

Book Description

Responsive Web Design with HTML5 and CSS, Fourth Edition, is a fully revamped and extended version of one of the most comprehensive and bestselling books on the latest HTML5 and CSS techniques for responsive web design. It emphasizes pragmatic application, teaching you the approaches needed to build most real-life websites, with downloadable examples in every chapter.

Written in the author's friendly and easy-to-follow style, this edition covers all the newest developments and improvements in responsive web design, including approaches for better accessibility, variable fonts and font loading, and the latest color manipulation tools making their way to browsers. You can enjoy coverage of bleeding-edge features such as CSS layers, container queries, nesting, and subgrid.

The book concludes by exploring some exclusive tips and approaches for front-end development from the author.

By the end of the book, you will not only have a comprehensive understanding of responsive web design and what is possible with the latest HTML5 and CSS, but also the knowledge of how to best implement each technique. Read through as a complete guide or dip in as a reference for each topic-focused chapter.

What you will learn

• Use media queries, including detection for touch/mouse and color preference
• Learn HTML semantics and author accessible markup
• Facilitate different images depending on screen size or resolution
• Write the latest color functions, mix colors, and choose the most accessible ones
• Use SVGs in designs to provide resolution-independent images
• Create and use CSS custom properties, making use of new CSS functions including 'clamp', 'min', and 'max'
• Add validation and interface elements to HTML forms
• Enhance interface elements with filters, shadows, and animations

Who this book is for

Are you a full-stack or back-end developer who needs to improve their front-end skills? Perhaps you work on the front-end and you need a definitive overview of all modern HTML and CSS has to offer? Maybe you have done a little website building but you need a deep understanding of responsive web designs and how to achieve them? This is the book for you! All you need to take advantage of this book is a working understanding of HTML and CSS. No JavaScript knowledge is needed.

Table of Contents

1. The Essentials of Responsive Web Design
2. Writing HTML Markup
3. Media Queries and Container Queries
4. Fluid Layout and Flexbox
5. Layout with CSS Grid
6. CSS Selectors, Typography, and More
7. CSS Colour
8. Stunning Aesthetics with CSS
9. Responsive Images
10. SVG
11. Transitions, Transformations, and Animations
12. Custom Properties and CSS Functions
13. Forms
14. Cutting-Edge CSS Features
15. Bonus Techniques and Parting Advice

✦ Table of Contents

Cover
Copyright
Contributors
Table of Contents
Preface
Section I: The Fundamentals of Responsive Web Design
Chapter 1: The Essentials of Responsive Web Design
The browser and device landscape
Defining responsive web design
Responsive web design in a nutshell
Browser support
Text editors
Tools for software development
Our first responsive example
Our basic HTML file
Taming images
A brief tangent on width/max-width for images
Enter media queries
Breakpoints
Amending the example for a larger screen
The shortcomings of our example
Summary
Chapter 2: Writing HTML Markup
Getting the start of HTML pages right
The doctype
The HTML tag and lang attribute
Character encoding
The forgiving nature of HTML5 markup
A sensible approach to HTML markup
All hail the mighty element
New semantic elements in HTML5
The

element
The

element
The

element
The

element
The

element
The

element
The

element
The HTML5 outline algorithm
A note on h1-h6 and the hgroup element
The

element
The

element
The

element
The

and

elements

and

elements
The

element
HTML text-level semantics
The element
The element
The element
The element
The element
Obsolete HTML features
Putting HTML elements to use
WCAG accessibility conformance and WAI-ARIA for more accessible web applications
Web Content Accessibility Guidelines (WCAG)
WAI-ARIA
Taking ARIA further
Embedding media in HTML5
Adding video and audio in HTML
Providing alternate media sources
Audio and video tags work almost identically
Responsive HTML5 video and iframes
The modern way to embed iframes and keep aspect ratio
The loading attribute
The

element
Summary
An exercise
Chapter 3: Media Queries and Container Queries
The meta viewport tag
Why media queries are needed for a responsive web design
Basic conditional logic in CSS
Media query syntax
Media queries in link tags
Media query on an @import at-rule
Media queries in a CSS file
Inverting media query logic
Combining media queries
A number of different media queries
Everyday media queries
What can media queries test for?
Using media queries to alter a design
Advanced media query considerations
Do media queries affect which files get downloaded or how the page renders?
Should you split media queries into their own files?
Consolidate media queries or scatter them where it suits?
What about file size?
Media Queries Level 5
Interaction media features
The pointer media feature
The hover media feature
User preference media features
The prefers-color-scheme media feature
The prefers-reduced-motion feature
Future possibilities
Container queries
This may change!
Using a container query
Why name the container?
Container relative lengths
Possibilities
Summary
Chapter 4: Fluid Layout and Flexbox
Converting a fixed pixel design into a fluid proportional layout
Why do we need Flexbox?
Introducing Flexbox
The bumpy path to Flexbox
Choosing your autoprefixing solution
Getting Flexy
Perfect vertically centered text
Offset items
Reverse the order of items
How about if we want them laid out vertically instead?
Column reverse
Inline-flex
Flexbox alignment properties
align-items
align-self
Possible alignment values
justify-content
The flex property
Simple sticky footer
Changing the source order
Wrapping with flex
Wrapping up Flexbox
Summary
Chapter 5: Layout with CSS Grid
What CSS Grid is and the problems it solves
Basic Grid syntax
Grid-specific concepts and terminology
Setting up a Grid Layout
Explicit and implicit
grid-auto-rows and grid-auto-columns
grid-auto-flow
Placing and sizing Grid Layout items
gap
repeat
fr units
Placing items in the grid
span
dense
Named grid lines
grid-template-areas
auto-fit and auto-fill
The minmax() function
Shorthand syntax
grid-template shorthand
grid shorthand
grid shorthand value – option one
grid shorthand value – option two
grid shorthand value – option three
Allowing nested elements to take part in the Grid
The subgrid value
Applying what you have learned so far
Summary
Section II: Core Skills for Effective Front-End Web Development
Chapter 6: CSS Selectors, Typography, and More
Selectors, units, and capabilities
Anatomy of a CSS rule
Pseudo-elements and pseudo-classes
CSS selectors – beyond the normal!
CSS attribute selectors
CSS substring matching attribute selectors
The “beginning with” substring matching attribute selector
The “contains an instance of” substring matching attribute selector
The “ends with” substring matching attribute selector
Chaining attribute selectors
CSS structural pseudo-classes
The :last-child selector
The nth-child selectors
Understanding what nth rules do
nth-based selection in responsive web designs
Combinator selectors – child, next sibling, and subsequent sibling
The child combinator
The next sibling
The subsequent sibling
The negation (:not) selector
The empty (:empty) selector
Grouping selectors
The :is() functional pseudo-class
The :where() functional pseudo-class
The :has() relational pseudo-class
Responsive viewport relative lengths
Using @supports to fork CSS
Feature queries
Combining conditionals
Web typography
System fonts
The @font-face CSS rule
Implementing web fonts with @font-face
Optimizing font loading with font-display
font-display
Variable fonts
font-face changes
How to make use of a variable font
Registered axis
Custom axis
Font features
Exercise
Summary
Chapter 7: CSS Color
RGB color
HSL color
Alpha channels
Alpha with hex
Alpha with functional notation
Space-separated functional color notation
Color concepts and terminology
Color space
Gamut
The current state of CSS color
Introductory note
Display-P3
@media (color-gamut) media query
LCH with the lch() function
OKLab and OKLCH
Fallbacks for older browsers
The color-mix() function
The color-contrast() function
Relative colors with the relative color syntax
Summary
Resources
Chapter 8: Stunning Aesthetics with CSS
Text shadows
Multiple text shadows
Box shadows
Inset shadow
Multiple shadows
Understanding spread
Background gradients
The linear-gradient notation
Specifying gradient direction
Color stops
Radial background gradients
Handy “extent” keywords for responsive sizing
Conic gradients
Repeating gradients
Background gradient patterns
Multiple background images
Background size
Background position
Background shorthand
High-resolution background images
CSS filters
Available CSS filters
Combining CSS filters
A warning on CSS performance
CSS clip-path
CSS basic shapes
clip-path with a circle
clip-path with ellipse
clip-path with inset
clip-path with polygon
clip-path with URL (clipping source)
Animating clip-path
mask-image
mix-blend-mode
Summary
Chapter 9: Responsive Images
Modern image formats
AVIF image format
WebP image format
Image format comparisons
Using the picture element to progressively enhance images
The inherent problem of responsive images
Simple resolution switching with srcset
Advanced switching with srcset and sizes
Did you say the browser “might” pick one image over another?
Art direction with the picture element
A practical note on providing alternate image formats and sizes
Summary
Chapter 10: SVG
A brief history of SVG
An image that is also a readable web document
The root SVG element
Namespace
The title and desc tags
The defs tag
The g element
SVG shapes
SVG paths
Creating SVGs with popular image editing packages and services
Saving time with SVG icon services
Inserting SVGs into your web pages
Using an img tag
Using an object tag
Inserting an SVG as a background image
A brief aside on data URIs
Generating image sprites
Inserting an SVG inline
Reusing graphical objects from symbols
Inline SVGs allow different colors in different contexts
Making dual-tone icons that inherit the color of their parent
Re-coloring SVGs with CSS custom properties
Reusing graphical objects from external sources
What you can do with each SVG insertion method (inline, object, background-image, and img)
Extra SVG capabilities and oddities
SMIL animation
Styling an SVG with an external style sheet
Styling an SVG with internal styles
SVG properties and values within CSS
Animating an SVG with CSS
Animating SVG with JavaScript
A simple example of animating an SVG with GreenSock
Using SVGs as filters
A note on media queries inside SVGs
Optimizing SVGs
SVG implementation tips
Summary
Further resources
Chapter 11: Transitions, Transformations, and Animations
What CSS transitions are and how we can use them
The properties of a transition
The transition shorthand property
Transitioning different properties over different periods of time
Understanding timing functions
CSS 2D transforms
Scale
Translate
Using translate to center absolutely positioned elements
Rotate
Skew
Matrix
The transform-origin property
CSS 3D transformations
The translate3d property
A progressive enhancement example using translate3d
Animating with CSS
The animation-fill-mode property
Exercises and training
Summary
Chapter 12: Custom Properties and CSS Functions
Working with custom properties
Simple theming
Setting and getting custom property values with JavaScript
Custom properties and specificity
Setting a fallback value
env() environment variables
Custom properties and web components
CSS functions
calc()
min()
max()
clamp()
Putting it all together
Summary
Chapter 13: Forms
HTML5 forms
Understanding the component parts of HTML5 forms
The placeholder attribute
Styling the placeholder text
Styling the input caret with the caret-color CSS property
The required attribute
The autofocus attribute
The autocomplete attribute
The list attribute and the associated datalist element
HTML5 input types
The email input type
The number input type
Using min and max to create number ranges
Changing the step increments
The url input type
The tel input type
The search input type
The pattern input attribute
The color type input
Date and time
The date input type
The month input type
The week input type
The time input type
The range input type
Styling HTML5 forms with CSS
Indicating required fields
Creating a background fill effect
Summary
Section III: Latest Platform Features and Parting Advice
Chapter 14: Cutting-Edge CSS Features
Cascade layers
Naming cascade layers
Where to declare layers
Adding rules to layers
The priority of rules in and outside of layers
Nesting layers inside other layers
The importance of !important
!important in cascade layers
Old browsers
CSS nesting
Nesting conditionals such as media queries
Trying CSS nesting syntax today
Giving your feedback on the proposal
Asking browser vendors to implement CSS nesting
Summary
Chapter 15: Bonus Techniques and Parting Advice
Truncating text
Single-line truncation
Multi-line truncation
Creating horizontal scrolling panels
Styling scrollbars
CSS Scroll Snap
The scroll-snap-type property
The scroll-snap-align property
The scroll-snap-stop property
Smooth scrolling with CSS scroll-behavior
Parting advice
Getting designs in the browser as soon as possible
Testing on real devices
Embracing progressive enhancement
Defining a browser support matrix
Functional parity, not visual parity
Choosing the browsers to support
Tiering the user experience
Avoiding CSS frameworks in production
Hiding, showing, and loading content across viewports
Validators and linting tools
Performance
Performance tools
The next big things
Summary
Packt page
Other Books You May Enjoy
Index

---

📜 SIMILAR VOLUMES

---

Responsive Web Design with HTML5 and CSS

📁 Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques, 4th Edition

✍ Ben Frain 📂 Library 📅 2022 🏛 Packt Publishing 🌐 English

<p><span>Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly on mobile phones, tablets, and desktops ― plus everything in-between – now with color images!</span></p><h4><span>Key Features</span></h4><ul><li><span><span>Understand what responsive web design is

Responsive Web Design with HTML5 and CSS

📁 Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques, 4th Edition

✍ Ben Frain 📂 Library 📅 2022 🏛 Packt Publishing 🌐 English

<p><span>Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly on mobile phones, tablets, and desktops ― plus everything in-between – now with color images!</span></p><h4><span>Key Features</span></h4><ul><li><span><span>Understand what responsive web design is

Responsive Web Design with HTML5 and CSS

📁 Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques, 4th Edition

✍ Ben Frain 📂 Library 📅 2022 🏛 Packt Publishing 🌐 English

<p><span>Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly on mobile phones, tablets, and desktops ― plus everything in-between – now with color images!</span></p><h4><span>Key Features</span></h4><ul><li><span><span>Understand what responsive web design is

Responsive Web Design with HTML5 and CSS

📁 Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques, 4th Edition

✍ Ben Frain 📂 Library 📅 2022 🏛 Packt Publishing 🌐 English

<p><span>Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly on mobile phones, tablets, and desktops ― plus everything in-between – now with color images!</span></p><h4><span>Key Features</span></h4><ul><li><span><span>Understand what responsive web design is

Responsive Web Design with HTML5 and CSS

📁 Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques

✍ Ben Frain 📂 Library 📅 2020 🏛 Packt Publishing Ltd 🌐 English

Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly on mobile phones, tablets, and desktops — plus everything in-between Key Features Understand what responsive web design is and its significance for modern web development Explore the latest developments in r

Responsive Web Design with HTML5 and CSS

📁 Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques

✍ Ben Frain 📂 Library 📅 2020 🏛 Packt Publishing Ltd 🌐 English

Publisher's note: To make use of the most recent CSS and HTML features, a new, fully revised fourth edition of this book is now available, updated for 2022. Key FeaturesUnderstand what responsive web design is and its significance for modern web developmentExplore the latest developments in responsi