Responsive Web Design with HTML5 and CSS 4th Edition
Since 2012, ’ Responsive Web Design with HTML5 and CSS ’ by Ben Frain has been Packt Publishing’s best-selling book on Responsive Web Design. Now there's a completely updated 4th Edition for 2022 and beyond!What's new in the 4th Edition? Looking for the 3rd Edition?
450+ Info Packed Pages
CSS Cascade Layers, Container Queries, color functions, Media Queries, SVG, animations, transforms, accessibility, Flexbox, Grid + Subgrid, Scroll Snap and much, much more.
Each chapter has associated code examples to follow along with. You also get the source code for this site which utilises many of the techniques you'll master throughout.
The 4th Edition of Packt’s best-selling Responsive Web Design title since 2012. Updated for 2022 and beyond, including all the essential new CSS and HTML features.
Is it for you?
Are you a full-stack developer who needs to boost their front-end skills? Perhaps you work on the front-end and you need a definitive overview of all modern HTML and CSS has to offer?
Maybe you have done a little website building but you need a deep understanding of how responsive web designs work and how to achieve them? This is a book for you!
Still not sure? Download the first chapter, FREE, now and see if it speaks to you.
What will you learn?
Understand the most fundamental parts of building a modern web site or application that will work across all devices. You'll learn the best approaches for having a fast and accessible website that works just as well on the latest iPhone or Android as a desktop computer.
The book covers everything from choosing the right tag to mark up content, to understanding the benefits of modern image formats like AVIF and WebP — and everything essential in-between. It also covers all the latest features of CSS: Custom Properties, variable fonts, CSS Grid and much, much more.
Praise for the 4th Edition
This would not only be an amazing primer for a beginner but serves as a reminder/recap of basic to advanced concepts even for a more seasoned person like me who understands HTML and CSS at a more intermediate level.
I found this book to be a fabulous resource for anyone wanting to dive into the specifics of responsive web design.
Ben's 4th edition is a wonderful continuation of thoughts, experiences, and lessons learned in today's world of web design and development...Whether you're new to design or decades into your career, this book is a must-read.
It's impressive how many aspects are covered: Media queries, fluid layout, CSS grid, aesthetics with CSS, SVG, etc, etc!
Besides being technically valuable, the book is enjoyable to read, with a nice mix of wry humor and a relaxed style that doesn't get in the way of the information.
Do yourself a favor and don't skip the fundamentals. Don't just jump into a front end framework. Well round yourself with this book so that you can catapult yourself into seniority or your next job.
New in the 4th Edition
If you’ve only read an earlier Edition, you may be wondering if it’s worth your while.
Here’s a selection of the new topics covered in the 4th Edition, in no particular order:
- CSS Layers
- CSS Container Queries
- New color functions and formats like P3 and LCH
- CSS Nesting
- The dialog element
- AVIF and WebP image formats
Full Chapter List
The Essentials of Responsive Web Design
By the end of this first chapter, you will have made a fully responsive web page. Along the way you will gain the understanding of where Responsive Web Design came from, the problems it solves, and the core tenets of implementing a Responsive Web Design with HTML and CSS.Download this chapter FREE
Writing HTML markup
Good HTML markup is the basis for any good web site or application. More importantly, HTML provides a bedrock of understanding for assistive technology. In this chapter you'll learn about everything from the opening
<!DOCTYPE html>to the closing
Media Queries and Container Queries
Media queries provide the means to change styles on screen width, screen height, color preference, screen density (DPI) and a whole lot more. In this Chapter, you'll also learn about CSS4 media queries like
pointer. We end the chapter with an overview of the forthcoming Container Queries; before long, we will be able to make container level style changes too.
Fluid Layout and Flexbox
We start with understanding how to convert any web design into a proportional, fluid, layout. Then a deep-dive into Flexbox; the most widely supported modern CSS layout system. You'll learn not just the syntax but also a number of use cases of Flexbox. Then you'll get your hands dirty; using what you have learned to lay out sections of this very site.
Layout with CSS Grid
CSS Grid is the first 2-dimensional layout system for the web. This whole chapter is dedicated to understanding the capabilities and efficiencies of CSS Grid. We'll also get to grips with the new
Understanding CSS Grid might just be the single biggest upgrade you can give your CSS skills!
CSS Selectors, Typography and More
In this dense and varied chapter you'll be learning about the latest CSS selectors, like
has(). Then you'll get to grips with new viewport-related units like
dvw. You'll also learn about typography on the web, covering variable fonts and the different methods of optimising font loading.
You'll learn how to add an alpha channel to hex,
hsland learn how to use the newer, comma-less syntax.
You'll learn about
P3color, and how to add vibrant new colors you just can't express with
hex. Then we move on to look at newer ways of expressing color such as Lab/LCH and new color functions including
Stunning Aesthetics with CSS
Another chapter bursting with CSS goodness. Want to know about text and box shadows? What about multiple backgrounds and linear and radial gradients? Repeating gradients? CSS filters like blur and sepia? Masks and Clipping? Mix-blend modes? It's all in here. And more besides!
The single biggest asset type on the web is images. It therefore stands to reason we should have a chapter dedicated to the most efficient ways of serving images up to users. You'll also learn about the benefits of newer image formats like WebP and AVIF and how to make them available for the browsers that support them while still providing an alternative for those that don't.
SVGs are an essential part of a responsive developer's toolkit. You'll learn about practical use-cases for SVG; how to insert SVGs directly into markup, inside an object element, as a background image and standard image. You'll also learn about how to use an SVG sprite sheet, and how SVGs can be animated and optimised for use on the web.
Transitions, Transformations and Animations
Transitions, transformations and animations, when used judiciously, can really bring a design to life. In this chapter you'll learn about all three. Before the chapter is done you'll be flipping things back and forth in 3d space and using transforms to create a progressively enhanced off-canvas navigation pattern.
Custom Properties and CSS Functions
clamp()and understand how they are a perfect tool to deal with fluid typography in responsive design.
This chapter covers everything you are likely to need to know about forms. Topics include accessible form structure, the various elements of forms, form validation and the most recent CSS that allows better control of form visuals than ever before. Oh, and lots of handy attributes to make the right keyboard appear on iOS and Android devices too!
Cutting-Edge CSS Features
You're going to learn about two recent additions to CSS in this chapter. One, CSS Layers, is already shipping and allows you more 'architectural' control over your stylesheets than ever before. The second is CSS Nesting. If you've ever worked with 'super-set' languages like Sass you will understand the benefits. Nesting hasn't shipped in browsers yet, and the specification is subject to change but it is so important that we take an early look here.
Bonus techniques and parting advice
In the final chapter we will bring together all the knowledge learned so far and consider how best to approach a responsive project. We also consider some best-practice techniques to get your responsive projects off to the best possible start. And just like 'Q' in James Bond, I won't let you leave without a few extra special techniques to help you in the field.