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!

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.

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
has() , where() and is() selectors
CSS Nesting
The dialog element
clamp() , min() and max()
AVIF and WebP image formats

Mailing List

Want updates from the author, Ben Frain? Subscribe to the infrequent newsletter — no spam, unsubscribe any time.

Источник

HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes and viewports.

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

Setting The Viewport

To create a responsive website, add the following tag to all your web pages:

Example

This will set the viewport of your page, which will give the browser instructions on how to control the page’s dimensions and scaling.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Without the viewport meta tag:

With the viewport meta tag:

Tip: If you are browsing this page on a phone or a tablet, you can click on the two links above to see the difference.

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down:

Example

style=»width:100%;»>

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example

max-width:100%;height:auto;»>

Show Different Images Depending on Browser Width

The HTML element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below changes depending on the width:

Example

Flowers

Responsive Text Size

The text size can be set with a «vw» unit, which means the «viewport width».

That way the text size will follow the size of the browser window:

Hello World

Resize the browser window to see how the text size scales.

Example

Hello World

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stack vertically on small screens:

Example

.main float: left;
width: 60%; /* The width is 60%, by default */
>

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) .left, .main, .right width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
>
>

Tip: To learn more about Media Queries and Responsive Web Design, read our RWD Tutorial.

Responsive Web Page — Full Example

A responsive web page should look good on large desktop screens and on small mobile phones.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Responsive Web Design — Frameworks

All popular CSS Frameworks offer responsive design.

They are free, and easy to use.

W3.CSS

W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.

W3.CSS is smaller and faster than similar CSS frameworks.

W3.CSS is designed to be independent of jQuery or any other JavaScript library.

W3.CSS Demo

Resize the page to see the responsiveness!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example

W3Schools Demo

Resize this responsive page!

London

London is the capital city of England.

It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

To learn more about W3.CSS, read our W3.CSS Tutorial.

Bootstrap

Another popular CSS framework is Bootstrap:

Example

My First Bootstrap Page

Resize this responsive page to see the effect!

Column 1

Lorem ipsum.

Column 2

Lorem ipsum.

Column 3

Lorem ipsum.

To learn more about Bootstrap, go to our Bootstrap Tutorial.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Responsive Web Design with HTML5 and CSS, Third Edition, published by Packt

License

PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Responsive Web Design with HTML5 and CSS, Third Edition, published by Packt

For more about this title, visit rwd.education

Queries? Create an issue, contact the author on Twitter or via his website

Building the ‘rwd.education’ site

You can browse the source files used to build the rwd.education website here.

To build the site I used a little Gulp build script to speed development.

Note that a CSS pre-processor step was used so I can nest media queries inside selectors and TypeScript was used for the little bit of JavaScript I needed because I prefer writing ES6 syntax and TypeScript converts it into more widely supported syntax.

I also used the rather lovely https://realfavicongenerator.net/ to make all the favicon images/manifests.

If you are curious and ‘don’t mind getting your hands dirty’, included in the folder should be everything you need to run it up in a local server yourself.

You will need to install a recent version of Node (I used 14 if memory serves)
You will need to install Gulp v4 CLI
Run [sudo] npm install in Terminal from the ‘rwd.education’ folder
Assuming all installs OK (cross all your digits!), after everything is installed, you should now be able to run ‘gulp’ from the Terminal and away you go.

Problems? Open an issue, Tweet at me or send me a mail. Happy building!

If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost.
Simply click on the link to claim your free PDF.

About

Responsive Web Design with HTML5 and CSS, Third Edition, published by Packt

Источник