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.
  • Book Overview & Buying Responsive Web Design with HTML5 and CSS
  • Table Of Contents Toc
  • Feedback & Rating feedback
Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS - Fourth Edition

By : Ben Frain
4.5 (56)
Buy this Book
close
close
Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

4.5 (56)
By: Ben Frain
Buy this Book

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 (22 chapters)
close
close
close
Preface
Icon
Preface
Icon
Who this book is for
Icon
What this book covers
Icon
To get the most out of this book
Icon
Get in touch
Lock Free Chapter
1
Section 1: The Fundamentals of Responsive Web Design
Icon
Section 1: The Fundamentals of Responsive Web Design
2
The Essentials of Responsive Web Design
Icon
The Essentials of Responsive Web Design
Icon
Getting the most out of this book – get to know your free benefits
Icon
The browser and device landscape
Icon
Defining responsive web design
Icon
Our first responsive example
Icon
Summary
Icon
Join our book’s Discord space
3
Writing HTML Markup
Icon
Writing HTML Markup
Icon
Getting the start of HTML pages right
Icon
All hail the mighty element
Icon
New semantic elements in HTML5
Icon
HTML text-level semantics
Icon
Obsolete HTML features
Icon
Putting HTML elements to use
Icon
WCAG accessibility conformance and WAI-ARIA for more accessible web applications
Icon
Embedding media in HTML5
Icon
The loading attribute
Icon
The element
Icon
Summary
Icon
An exercise
4
Media Queries and Container Queries
Icon
Media Queries and Container Queries
Icon
The meta viewport tag
Icon
Why media queries are needed for a responsive web design
Icon
Media query syntax
Icon
Using media queries to alter a design
Icon
Advanced media query considerations
Icon
Media Queries Level 5
Icon
Container queries
Icon
Summary
Icon
Join our book’s Discord space
5
Fluid Layout and Flexbox
Icon
Fluid Layout and Flexbox
Icon
Converting a fixed pixel design into a fluid proportional layout
Icon
Why do we need Flexbox?
Icon
Introducing Flexbox
Icon
Inline-flex
Icon
Flexbox alignment properties
Icon
Changing the source order
Icon
Wrapping with flex
Icon
Summary
6
Layout with CSS Grid
Icon
Layout with CSS Grid
Icon
What CSS Grid is and the problems it solves
Icon
Setting up a Grid Layout
Icon
Placing and sizing Grid Layout items
Icon
Shorthand syntax
Icon
Allowing nested elements to take part in the Grid
Icon
Applying what you have learned so far
Icon
Summary
7
Section 2: Core Skills for Effective Front-End Web Development
Icon
Section 2: Core Skills for Effective Front-End Web Development
8
CSS Selectors, Typography, and More
Icon
CSS Selectors, Typography, and More
Icon
Selectors, units, and capabilities
Icon
CSS selectors – beyond the normal!
Icon
CSS structural pseudo-classes
Icon
Combinator selectors – child, next sibling, and subsequent sibling
Icon
Grouping selectors
Icon
Responsive viewport relative lengths
Icon
Using @supports to fork CSS
Icon
Web typography
Icon
Variable fonts
Icon
Exercise
Icon
Summary
Icon
Join our book’s Discord space
9
CSS Color
Icon
CSS Color
Icon
RGB color
Icon
HSL color
Icon
Space-separated functional color notation
Icon
Color concepts and terminology
Icon
The current state of CSS color
Icon
Fallbacks for older browsers
Icon
The color-mix() function
Icon
The color-contrast() function
Icon
Relative colors with the relative color syntax
Icon
Summary
Icon
Resources
10
Stunning Aesthetics with CSS
Icon
Stunning Aesthetics with CSS
Icon
Text shadows
Icon
Box shadows
Icon
Background gradients
Icon
Multiple background images
Icon
CSS filters
Icon
A warning on CSS performance
Icon
CSS clip-path
Icon
mask-image
Icon
mix-blend-mode
Icon
Summary
11
Responsive Images
Icon
Responsive Images
Icon
Modern image formats
Icon
Image format comparisons
Icon
The inherent problem of responsive images
Icon
Summary
Icon
Join our book’s Discord space
12
SVG
Icon
SVG
Icon
A brief history of SVG
Icon
An image that is also a readable web document
Icon
Creating SVGs with popular image editing packages and services
Icon
Inserting SVGs into your web pages
Icon
Reusing graphical objects from symbols
Icon
What you can do with each SVG insertion method (inline, object, background-image, and img)
Icon
Extra SVG capabilities and oddities
Icon
Optimizing SVGs
Icon
SVG implementation tips
Icon
Summary
Icon
Further resources
13
Transitions, Transformations, and Animations
Icon
Transitions, Transformations, and Animations
Icon
What CSS transitions are and how we can use them
Icon
CSS 2D transforms
Icon
CSS 3D transformations
Icon
Animating with CSS
Icon
Exercises and training
Icon
Summary
14
Custom Properties and CSS Functions
Icon
Custom Properties and CSS Functions
Icon
Working with custom properties
Icon
CSS functions
Icon
Putting it all together
Icon
Summary
Icon
Join our book’s Discord space
15
Forms
chevron up
Icon
Forms
Icon
HTML5 forms
Icon
HTML5 input types
Icon
Styling HTML5 forms with CSS
Icon
Summary
16
Section 3: Latest Platform Features and Parting Advice
Icon
Section 3: Latest Platform Features and Parting Advice
17
Cutting-Edge CSS Features
Icon
Cutting-Edge CSS Features
Icon
Cascade layers
Icon
CSS nesting
Icon
Summary
18
Bonus Techniques and Parting Advice
Icon
Bonus Techniques and Parting Advice
Icon
Truncating text
Icon
Creating horizontal scrolling panels
Icon
Parting advice
Icon
Summary
Icon
Join our book’s Discord space
19
Unlock Your Book’s Exclusive Benefits
Icon
Unlock Your Book’s Exclusive Benefits
Icon
How to unlock these benefits in three easy steps
Icon
Need help?
20
Other Books You May Enjoy
Icon
Other Books You May Enjoy
21
Index
Icon
Index

CSS functions

When it comes to solving the challenges of responsive web design, CSS functions are starting to replace and better media queries in some instances.

Want to have text that is no smaller than 16px, but then scales with the size of the viewport, yet never gets bigger than 30px?

With media queries you would have to try and solve that problem something like this:

.headline {
    font-size: 16px;
}
@media (min-width: 400px) {
    font-size: 6vw;
}
@media (min-width: 1000px) {
    font-size: 30px;
}

But the reality is, that’s quite brittle. You’ll find yourself adding lots of little ‘tweak points' where you need to add another media query. For example, when the viewport is 950px wide, that 6vw is looking a little comically big.

Now we have a better tool for the job. You can do this instead:

.headline {
    font-size: clamp(16px, 4vw, 30px);
}

That’s pretty powerful, right? The clamp() function is just one of many CSS functions we now have at...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Responsive Web Design with HTML5 and CSS
End of Section 15
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon