Book Image

Responsive Web Design with HTML5 and CSS - Fourth Edition

By : Ben Frain

3.5 (4)

Book Image

Responsive Web Design with HTML5 and CSS - Fourth Edition

3.5 (4)

By: Ben Frain

Overview of this book

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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Section I: The Fundamentals of Responsive Web Design

Section I: The Fundamentals of Responsive Web Design

The Essentials of Responsive Web Design

The Essentials of Responsive Web Design

The browser and device landscape

Defining responsive web design

Our first responsive example

Writing HTML Markup

Writing HTML Markup

Getting the start of HTML pages right

All hail the mighty <a> element

New semantic elements in HTML5

HTML text-level semantics

Obsolete HTML features

Putting HTML elements to use

WCAG accessibility conformance and WAI-ARIA for more accessible web applications

Embedding media in HTML5

The loading attribute

The <dialog> element

Media Queries and Container Queries

Media Queries and Container Queries

The meta viewport tag

Why media queries are needed for a responsive web design

Media query syntax

Using media queries to alter a design

Advanced media query considerations

Media Queries Level 5

Container queries

Fluid Layout and Flexbox

Fluid Layout and Flexbox

Converting a fixed pixel design into a fluid proportional layout

Why do we need Flexbox?

Introducing Flexbox

Flexbox alignment properties

Changing the source order

Wrapping with flex

Layout with CSS Grid

Layout with CSS Grid

What CSS Grid is and the problems it solves

Setting up a Grid Layout

Placing and sizing Grid Layout items

Shorthand syntax

Allowing nested elements to take part in the Grid

Applying what you have learned so far

Section II: Core Skills for Effective Front-End Web Development

Section II: Core Skills for Effective Front-End Web Development

CSS Selectors, Typography, and More

CSS Selectors, Typography, and More

Selectors, units, and capabilities

CSS selectors – beyond the normal!

CSS structural pseudo-classes

Combinator selectors – child, next sibling, and subsequent sibling

Grouping selectors

Responsive viewport relative lengths

Using @supports to fork CSS

CSS Color

Space-separated functional color notation

Color concepts and terminology

The current state of CSS color

Fallbacks for older browsers

The color-mix() function

The color-contrast() function

Relative colors with the relative color syntax

Stunning Aesthetics with CSS

Stunning Aesthetics with CSS

Background gradients

Multiple background images

A warning on CSS performance

Responsive Images

Responsive Images

Modern image formats

Image format comparisons

The inherent problem of responsive images

SVG

A brief history of SVG

An image that is also a readable web document

Creating SVGs with popular image editing packages and services

Inserting SVGs into your web pages

Reusing graphical objects from symbols

What you can do with each SVG insertion method (inline, object, background-image, and img)

Extra SVG capabilities and oddities

Optimizing SVGs

SVG implementation tips

Further resources

Transitions, Transformations, and Animations

Transitions, Transformations, and Animations

What CSS transitions are and how we can use them

CSS 2D transforms

CSS 3D transformations

Animating with CSS

Exercises and training

Custom Properties and CSS Functions

Custom Properties and CSS Functions

Working with custom properties

Putting it all together

Forms

HTML5 input types

Styling HTML5 forms with CSS

Section III: Latest Platform Features and Parting Advice

Section III: Latest Platform Features and Parting Advice

Cutting-Edge CSS Features

Cutting-Edge CSS Features

Bonus Techniques and Parting Advice

Bonus Techniques and Parting Advice

Truncating text

Creating horizontal scrolling panels

Other Books You May Enjoy

Other Books You May Enjoy

Index

Customer Reviews

3.5 (4)

5 star

25%

4 star

50%

3 star

0

2 star

0

1 star

25%

Media Queries and Container Queries

This chapter will look in detail at CSS media queries, hopefully providing all that’s needed to fully understand their capability, syntax, and future development.

At the end of this chapter, we will also look at container queries. As this chapter is written in mid- 2022, there are only experimental versions available of container queries in some browsers, which I wouldn’t typically cover. However, we shall enjoy an exception here. Container queries are likely to be a very significant addition to the web platform. As such, we will take a whistle-stop tour of the current implementations and consider some of the considerable possibilities they promise. But, to begin with, let’s understand everything we need to know about media queries.

We ended the last chapter with the initial markup for the rwd.education website. It wasn’t necessarily the final markup, but it was solid enough for us to start working with. For...