Book Image

Responsive Web Design with HTML5 and CSS - Third Edition

By : Ben Frain
Book Image

Responsive Web Design with HTML5 and CSS - Third Edition

By: Ben Frain

Overview of this book

Responsive Web Design with HTML5 and CSS, Third Edition is a renewed and extended version of one of the most comprehensive and bestselling books on the latest HTML5 and CSS tools and techniques for responsive web design. Written in the author's signature friendly and informal style, this edition covers all the newest developments and improvements in responsive web design including better user accessibility, variable fonts and font loading, CSS Scroll Snap, and much, much more. With a new chapter dedicated to CSS Grid, you will understand how it differs from the Flexbox layout mechanism and when you should use one over the other. Furthermore, you will acquire practical knowledge of SVG, writing accessible HTML markup, creating stunning aesthetics and effects with CSS, applying transitions, transformations, and animations, integrating media queries, and more. The book concludes by exploring some exclusive tips and approaches for front-end development from the author. By the end of this 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.

Related Content you might be interested in

Current Title:

Small book image
Responsive Web Design with HTML5 and CSS - Third Edition
Ben Frain
Apr, 2020 | 408 pages
No titles found
Table of Contents (14 chapters)
Preface
Preface
Who this book is for
What this book covers
Get the most out of this book
Get in touch
1
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
Free Chapter
2
Writing HTML Markup
Writing HTML Markup
Getting the start of HTML pages right
The forgiving nature of HTML5 markup
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
Summary
3
Media Queries – Supporting Differing Viewports
Media Queries – Supporting Differing Viewports
The viewport meta 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
Combine media queries or write them where it suits?
Media Queries Level 4
Summary
4
Fluid Layout, Flexbox, and Responsive Images
Fluid Layout, Flexbox, and Responsive Images
Converting a fixed pixel design to a fluid proportional layout
Introducing Flexbox
Different Flexbox layouts with media queries
Responsive images
Summary
5
Layout with CSS Grid
Layout with CSS Grid
What CSS Grid is and the problems it solves
Setting up a grid
Placing and sizing grid items
Named grid lines
Applying what you have learned so far
Shorthand syntax
Summary
6
CSS Selectors, Typography, Color Modes, and More
CSS Selectors, Typography, Color Modes, and More
Selectors, units, and capabilities
Web typography
CSS color formats and alpha transparency
Summary
7
Stunning Aesthetics with CSS
Stunning Aesthetics with CSS
Text shadows with CSS
Box shadows
Background gradients
Repeating gradients
Background gradient patterns
Multiple background images
CSS filters
A warning on CSS performance
CSS clip-path
mask-image
mix-blend-mode
Summary
8
Using SVGs for Resolution Independence
Using SVGs for Resolution Independence
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
Inserting an SVG inline
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
Animating SVG with JavaScript
Optimizing SVGs
Using SVGs as filters
A note on media queries inside SVGs
SVG implementation tips
Summary
Further resources
9
Transitions, Transformations, and Animations
Transitions, Transformations, and Animations
What CSS transitions are and how we can use them
Understanding timing functions
CSS 2D transforms
CSS 3D transformations
Animating with CSS
Exercises and training
Summary
10
Conquer Forms with HTML5 and CSS
Conquer Forms with HTML5 and CSS
HTML5 forms
HTML5 input types
Styling HTML5 forms with CSS
Summary
11
Bonus Techniques and Parting Advice
Bonus Techniques and Parting Advice
Breaking up long URLs
Truncating text
Creating horizontal scrolling panels
CSS Scroll Snap
Linking CSS breakpoints to JavaScript
Get designs in the browser as soon as possible
Test on real devices
Embrace progressive enhancement
Avoid CSS frameworks in production
Hiding, showing, and loading content across viewports
Validators and linting tools
Performance
The next big things
Summary
12
Other Books You May Enjoy
Other Books You May Enjoy
13
Index
Index

What this book covers

Chapter 1, The Essentials of Responsive Web Design, is a whistle-stop tour of the key ingredients in coding a responsive web design.

Chapter 2, Writing HTML Markup, covers all the semantic elements of HTML5, text-level semantics, and considerations of accessibility. We also cover how to insert media such as video into our pages.

Chapter 3, Media Queries – Supporting Differing Viewports, covers everything you need to know about CSS media queries: their capabilities, the syntax, and the various ways in which you can wield them.

Chapter 4, Fluid Layout, Flexbox, and Responsive Images, shows you how to code proportional layouts and responsive images and provides a thorough exploration of Flexbox layouts.

Chapter 5, Layout with CSS Grid, is a deep dive into the two-dimensional layout system of CSS Grid.

Chapter 6, CSS Selectors, Typography, Color Modes, and More, covers the endless possibilities of CSS selectors, HSLA and RGBA color, web typography including variable fonts, viewport-relative units, and a whole lot more.

Chapter 7, Stunning Aesthetics with CSS, covers CSS filters, box shadows, linear and radial gradients, multiple backgrounds, and how to target background images to high-resolution devices.

Chapter 8, Using SVGs for Resolution Independence, covers everything we need to use SVG graphics inside documents and as background images, as well as how to interact with them using JavaScript.

Chapter 9, Transitions, Transformations, and Animations, gets our CSS moving as we explore how to make interactions and animations using CSS.

Chapter 10, Conquer Forms with HTML5 and CSS, explains how web forms have always been tough but the latest HTML5 and CSS features make them easier to deal with than ever before.

Chapter 11, Bonus Techniques and Parting Advice, explores the essential considerations before embarking on responsive web design and also provides a few last-minute nuggets of wisdom to aid you in your responsive quest.

Previous Section
Next Section