Book cover of Responsive Web Design with HTML5 and CSS by Ben Frain

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.

Sample Code

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.

Latest Edition

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.

Buy from Packt Buy from Amazon circle-up

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.

    – Erik Sagen

  • I found this book to be a fabulous resource for anyone wanting to dive into the specifics of responsive web design.

    – Lisa Friedrichsen

  • 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.

    – Søren Fife

  • It's impressive how many aspects are covered: Media queries, fluid layout, CSS grid, aesthetics with CSS, SVG, etc, etc!

    – Keith Atherton

  • 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.

    – Douglas K. Farrel

  • 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.

    – Andre Thomas

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:

Example page from inside the book Responsive Web Design with HTML5 and CSS Example page from inside the book Responsive Web Design with HTML5 and CSS Example page from inside the book Responsive Web Design with HTML5 and CSS Example page from inside the book Responsive Web Design with HTML5 and CSS Example page from inside the book Responsive Web Design with HTML5 and CSS

Mailing List

Full Chapter List

  1. 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

  2. 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 </html> tag.

  3. 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 hover and 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.

  4. 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.

  5. 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 subgrid property.

    Understanding CSS Grid might just be the single biggest upgrade you can give your CSS skills!

  6. CSS Selectors, Typography and More

    In this dense and varied chapter you'll be learning about the latest CSS selectors, like is() , where( ), and has() . Then you'll get to grips with new viewport-related units like dvh , and dvw . You'll also learn about typography on the web, covering variable fonts and the different methods of optimising font loading.

  7. CSS Color

    You'll learn how to add an alpha channel to hex, rgb and hsl and learn how to use the newer, comma-less syntax.

    You'll learn about P3 color, and how to add vibrant new colors you just can't express with rgb , hsl or hex . Then we move on to look at newer ways of expressing color such as Lab/LCH and new color functions including color-mix() and color-contrast() .

  8. 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!

  9. Responsive Images

    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.

  10. SVG

    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.

  11. 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.

  12. Custom Properties and CSS Functions

    In this chapter you'll learn about the super-powers of Custom Properties. You'll learn how to set and read them in CSS and JavaScript, applicable use cases, and how to make use of them inside values and functions. You'll also learn how to make use of newer CSS functions like min() , max() , and clamp() and understand how they are a perfect tool to deal with fluid typography in responsive design.

  13. Forms

    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!

  14. 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.

  15. 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.