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.

Related Content you might be interested in

Current Title:

Small book image
Responsive Web Design with HTML5 and CSS - Fourth Edition
Ben Frain
Sep, 2022 | 498 pages
Small book image
Mastering CSS Grid
Pascal Thormeier
Jun, 2023 | 330 pages
Small book image
Enduring CSS
Benjamin Frain
Jan, 2017 | 134 pages
Small book image
The HTML and CSS Workshop
Matt Park | Marian Zburlea | Rob Larsen | Lewis Coulson | Brett Jephson
Nov, 2019 | 700 pages
Table of Contents (21 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Section I: The Fundamentals of Responsive Web Design
Section I: The Fundamentals of Responsive Web Design
2
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
Summary
3
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
Summary
An exercise
4
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
Summary
5
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
Inline-flex
Flexbox alignment properties
Changing the source order
Wrapping with flex
Summary
6
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
Summary
7
Section II: Core Skills for Effective Front-End Web Development
Section II: Core Skills for Effective Front-End Web Development
8
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
Web typography
Variable fonts
Exercise
Summary
9
CSS Color
CSS Color
RGB color
HSL 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
Summary
Resources
10
Stunning Aesthetics with CSS
Stunning Aesthetics with CSS
Text shadows
Box shadows
Background gradients
Multiple background images
CSS filters
A warning on CSS performance
CSS clip-path
mask-image
mix-blend-mode
Summary
11
Responsive Images
Responsive Images
Modern image formats
Image format comparisons
The inherent problem of responsive images
Summary
12
SVG
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
Summary
Further resources
13
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
Summary
14
Custom Properties and CSS Functions
Custom Properties and CSS Functions
Working with custom properties
CSS functions
Putting it all together
Summary
15
Forms
Forms
HTML5 forms
HTML5 input types
Styling HTML5 forms with CSS
Summary
16
Section III: Latest Platform Features and Parting Advice
Section III: Latest Platform Features and Parting Advice
17
Cutting-Edge CSS Features
Cutting-Edge CSS Features
Cascade layers
CSS nesting
Summary
18
Bonus Techniques and Parting Advice
Bonus Techniques and Parting Advice
Truncating text
Creating horizontal scrolling panels
Parting advice
Summary
19
Other Books You May Enjoy
Other Books You May Enjoy
20
Index
Index

Reusing graphical objects from symbols

Earlier in this chapter, I mentioned that I had picked and downloaded some icons from IcoMoon (https://icomoon.io). They were icons depicting touch gestures: swipe, pinch, drag, and more. Suppose, in a website you are building, you need to make use of them multiple times. Remember I mentioned that there was a version of those icons as SVG symbol definitions? That’s what we will make use of now.

In example_10-03, we insert the various symbol definitions inside the defs element of an SVG in the page. You’ll notice that, on the svg element, an inline style is used, display:none, and the height and width attributes have both been set to 0 (those styles could be set in CSS if you prefer). This is so that this SVG takes up no space. We are only using this SVG to house symbols of the graphical objects we want to use elsewhere. So, our markup starts like this:

<body>
    <svg display="none" width="0&quot...
Previous Section
End of Section 6
Next Section