Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Responsive Web Design with HTML5 and CSS
  • Toc
  • feedback
Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

By : Ben Frain
4.5 (57)
close
Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

4.5 (57)
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.
Table of Contents (21 chapters)
close
Preface
chevron up
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

To get the most out of this book

  • You need a text editor such as Sublime Text, Neovim, or VS Code.
  • You’ll need a modern browser such as Firefox, Edge, Safari, or Chrome.
  • You’ll need an appreciation of mediocre jokes and obscure references to popular culture.

Download the example code files

The code bundle for the book is hosted at the book’s dedicated website at https://rwd.education/, as well as on GitHub at https://github.com/benfrain/rwd4. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. For example: “We can fix that prior problem easily by adding this snippet in the <head>.”

A block of code is set as follows:

img { 
    max-width: 100%; 
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

img { 
    max-width: 100%;
    display: inline-flex;
}

Bold: Indicates a new term, an important word, or words that you see on the screen, for example, in menus or dialog boxes. For example: “When writing HTML, you will typically be marking up or writing content inside a series of tags or elements.”

Warnings or important notes appear like this.

Tips and tricks appear like this.

Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete