Tom Price Reviews

Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques, 3rd Edition

by Ben Frain (Author)

4.6 out of 5 stars

181 ratings

Make use of the latest features from HTML5 and CSS in order to build one UI that functions perfectly on mobile phones, desktops, tablets and tablets -as well as everything else in between.

Key Features

• Learn about the concept behind responsive web design and what it means in the current web development

• Learn about the latest developments on responsive design for websites, including different Fonts, CSS Scroll Snaps, as well as much more.

• Explore the benefits and uses of the brand-new CSS Grid layout

Book Description

Responsive Web Design using HTML5 and CSS 3rd Edition of Responsive Web Design with HTML5 and CSS is an updated and expanded revision of one the most complete and popular books about the most current HTML5 as well as CSS tools and methods for the design of responsive sites.

Written in his signature casual and friendly style, this book contains the most recent innovations and advancements of responsive websites. This includes improved user accessibility, different fonts and the loading of fonts, CSS Scroll Snap as well as much and more. With a chapter devoted to CSS Grid, you will be able to understand the differences between it and the Flexbox layout system and why you should choose both.

In addition, you'll acquire the practical skills of SVG and creating accessible HTML markup as well as creating amazing effects and aesthetics using CSS by applying transitions, transformations, animations, as well as integrating media queries, and much more. The book closes by examining some of the most effective strategies and tricks for front-end development offered by the author.

When you finish this book, you'll not only have a thorough knowledge the concept of responsive design for web pages and the possibilities possible using the latest HTML5 and CSS and CSS, but also the ability to implement each method in the best way possible.

What will you discover

• Integrate CSS media queries into your designs; apply different styles to different devices

• You can load various sets of images based on the screen's size or resolution.

• Make use of speeds, meanings and clear markup of the accessible HTML patterns

• Implement SVGs into your designs to provide resolution-independent images

• Use the latest features of CSS such as customized properties, fonts with variable sizes and CSS Grid

• Incorporate the validation element and other interface components such as dates and colors to HTML forms.

• Learn the variety of ways to enhance the look of interface elements using shadows, filters animations, and filters

Who's this book is for

You are a fully-stack programmer who wants to brush up on their front-end abilities? Maybe you are working on the front-end of your website and need to have a complete overview of everything contemporary HTML and CSS can offer? Perhaps you've done an occasional website design, but you require a complete grasp of how to create responsive internet design and the best way to get these? This book is designed to help you!

The only thing you require to be able to use this book is an knowledge of HTML and CSS. It is not necessary to know JavaScript expertise is required.

Table of Contents

1. The Essentials of Responsive Web Design

2. Writing HTML Markup

3. Media Queries - Supporting Differing Viewports

4. Fluid Layout, Flexbox, and Responsive Images

5. Layout using CSS Grid

6. CSS Selectors, Typography, Color Modes, and More

7. Beautiful Aesthetics with CSS

8. Using SVGs for Resolution Independence

9. Transitions, Transformations, and Animations

10. Conquer Forms HTML5 and CSS

11. Bonus Techniques and Parting Advice

-jmg

5.0 out of 5 stars

Well Done

Reviewed in the United States on May 13, 2021

Verified Purchase

Really like this book and the approach to learning HTML5/CSS. To quote the author [beginning of ch6]:

"No one can know every nuance, capability, and syntax in the CSS language. I've been working with CSS for two decades and on a weekly basis I still discovers something new (or just as likely rediscover something I'd forgotten). As such, I don't feel that trying to know every possible CSS property and value permutation is actually a worthwhile pursuit. Instead, I think it's more sensible to develop a good grasp of what's possible and what capabilities exist that solve the most common problems."

This book reflects this attitude. It provides a great introduction/overview of the core concepts with great working examples. Lots of references to resources on the web providing the reader with a great resources in areas you may want to dig in further with.

You can read this book by itself to get a great feel for things at a high level, you can reference it while sitting in front of a computer/browser/text editor to dig in a little deeper... or you can really dig in with the references provided.

This book covers core material and concepts of CSS and HTML for responsive web design without dragging the reader through excessive technical details. It's enough to get you up and running. It provides a good foundation to build on. Well done.

11 people found this helpful

Helpful

Report abuse

coyote

5.0 out of 5 stars

recommended

Reviewed in the United States on May 20, 2021

Verified Purchase

it's excellent, but fyi it's not a beginners' book

5 people found this helpful

Helpful

Report abuse

Yosef from the Galil

5.0 out of 5 stars

Excellent

Reviewed in the United States on June 13, 2021

Verified Purchase

This book has just the right amount of detail without getting bogged down. There are well prepared examples available online to follow along. The author's writing style and humor make for a quick and easy read.

This book is not for beginning programmers, but if you already have a basic understanding, this book will make you productive.

4 people found this helpful

Helpful

Report abuse

David

5.0 out of 5 stars

An Outstanding Book

Reviewed in the United States on December 8, 2020

Verified Purchase

This is one of the best books I read. It bridges the gap between the classic CSS: The Missing Manual book and the latest features of CSS.

5 people found this helpful

Helpful

Report abuse

Dustin

5.0 out of 5 stars

Get up to speed on the modern, professional way to build websites with HTML & CSS

Reviewed in the United States on May 7, 2020

The book was quick and easy to read because it wasn't overly dense or technical. A few things to be aware of: This isn't for total beginners. You should have a decent understanding of HTML & CSS and how they are used to build websites. It doesn't show you how to build a website from A-to-Z and doesn't go into extreme depth on most topics. This book is aimed at people who already know the basics of HTML & CSS but want to get up to speed on the latest features available and the modern, professional way of using them. You should probably also be ok with doing additional research and experimentation on your own.

What I liked the most:

Flexbox and Grid weren't presented as new things you might want to maybe consider using. From the beginning they were treated as the current standard - the tools you should be using to build websites today.

The copious links to sources and additional information - everything from official specifications to 3rd party blogs and posts on the author's website.

There is plenty of opinionated advice & best practices offered throughout the book but especially in the final chapter on Bonus Techniques and Parting Advice. This is really what sets a good technical book apart from just reading the specifications / manual.

Full disclosure: I received a PDF review copy of this book from the author & publisher for free.

14 people found this helpful

Helpful

Report abuse

Lou mauget

5.0 out of 5 stars

A readable state-of-art instructive CSS/HTML styling and layout reference

Reviewed in the United States on June 12, 2020

This third edition is the first edition I’ve read. The copy-editing is good. The material is fresh. The presentation is informal - almost conversational - with light humor. The author warns of confusing terms (e.g. auto-fill vs auto-fit, cover vs contain) in an “I, too, was confused at first” tone.

I’m an aged senior software engineer. I’m re-styling my homely React application to render professionally and aesthetically. I will use this book as a state-of-art responsive layout / style reference. Grid concepts (e.g. explicit, implicit, and tracks) along with FlexBox material are particularly timely, as well as the parts dealing with responsive menus and sidebars.

The public download examples operate easily. A click of an index.html does it. The first example motivated me to seek out a bakery. You can test a given responsive example like it's a sponge -- give it a good squeeze. The animation, clipping, and transformation examples are innovative. The chapter nine “front” “back” animations are creative (I think somebody should produce one of the author's plays).

Want CSS to render slashed zeros … or not? Want to know more about CSS conditionals, typography, feature queries, font fallbacks, and variable fonts? How about colors? Translucent areas? Multiple gradients that repeat? Instances of shadows, spreads and blurs? Clipping to a path? CSS filters? All are covered. They present in easily executable examples. Right-click “Inspect element” in your browser to see the source of magic that you can tweak dynamically to alter the effect.

The author quotes performance: “Architecture is inside the braces, performance is inside. -Ben Frain”. He goes on to discuss path clipping, image masking, animations, and mix-blend-mode. Those are cool inside-the-braces capabilities illustrated in the clickable examples. Wow-factor positively. Cycle-cost negatively.

The final four chapters ice the book:

Chapter eight surveys practical timely SVG material that serves as a useful reference that stands-in for another full book purchase. A sidebar mentions embedding a literal SVG image in CSS via a base 64 data URI, versus using data sprites. SVG background images as well as SVG font-like icons are in vogue. The chapter mentions expected exceptions from Internet Explorer.

Chapter nine covers a need to know about 2-D and 3-D transformations. I may use the presented progressive enhancement of 3-D to make a left menu collapse into an off-canvas menu. Read it to see what I mean.

Chapter ten is a super-practical treatment of HTML forms. The first example is a "before" boring request form that looks like something from a federal government. The chapter migrates it to a better "after" rendition, adding placeholders, auto-complete, dynamic list association, and a plethora of HTML5-specific input types, while making it squish from a web page to an iPhone at-will. The added background fill effect is gravy.

The final chapter, eleven, is a valued compendium of helpful hints, closing a useful and readable book. The author recommends avoiding CSS frameworks, which surprised me. I see that I could live without them, given the rationale and information from this book.

I obtained this book from the publisher in return for a fair and unbiased review. I recommend the book. I intend to click "Purchase" for the print edition.

7 people found this helpful

Helpful

Report abuse

Matthew Emerick

5.0 out of 5 stars

Well Written Intermediate Web Design Bootcamp

Reviewed in the United States on June 12, 2020

Disclaimer: The publisher asked me to review this book and gave me a review copy. I promise to be 100% honest in how I feel about this book, both the good and the less so.

Overview

This book recommends that you have some basic HTML and CSS knowledge to get the most out of it. It's not going to hold your hand and give you a tutorial at all. It tells you this expectation in the Preface, but not on the back cover. I think this is a very minor thing that can be improved. Overall, you should really view this book as an intermediate web design bootcamp taught one on one by a favored, friendly, and knowledgeable professor.

What I Like:

Like any good book, this one has a beginning, middle, and end. The very first chapter discusses the terms used throughout the book as well as gives a simple example to get you in the right frame of mind. The rest progresses from the basics of responsive design to more complicated examples. Then the author finishes up with a discussion about a few advanced features that might be worth playing with as well as some practical advice about testing, performance, and when not to use some of the features.

Something else I really like is that the author takes a very informal tone in his writing. It makes a complicated subject easier to learn. He even warns you about 'mediocre jokes and obscure popular film references' in the preface. As with most techies, I enjoy some humor mixed in to lighten the cognitive load.

What I Don't Like:

This is actually one of the shorter technical books I've reviewed, but I don't think that it takes anything away from it. Focusing on the first chapter, it assumes a fair amount of HTML and CSS knowledge, but they at least warn you about that. There really isn't much I can say against this book.

What I Would Like to See:

This book is very well written, and there is very little I would change. What I would love to see form the author is a more introductory book that naturally leads up to this one. While there are a plethora of HTML and CSS tutorials, how many of them build up in a way that aligns the developer with responsive design? As web design isn't my focus (I did use to teach HTML 4 and CSS during graduate school), I don't know what a more advanced book would look like, so I cannot really advocate for that. But I would learn a lot with the more introductory book as it would catch me up.

This book earns a 5 out of 5. It is a very well written and useful book that can introduce lesser known concepts to beginner web developers. Am hoping to see him write more.

2 people found this helpful

Helpful

Report abuse

dbianco

5.0 out of 5 stars

A Fun and Straight Forward Education on HTML5 and CSS3

Reviewed in the United States on May 23, 2020

Disclaimer: I got the free version of this book in electronic format, for reviewing purpose.

In a past life I was a web developer during the boom in cell phones and tablets. Much of my job was focused around turning current websites into responsive formats. I am now getting back into web design and was contacted to review this book. I was thinking it might be one of those massive reference books however I was pleasantly surprised by the fun and witty writing from the author as well as the layering on of new information in a reasonable order. The book does a great job and covering a lot of the basics while pointing out many new features that did not exist 5 years ago when I was designing websites. I appreciate that the books takes a simple approach where examples are straight forward with just enough code to get the point across.

Overall the book was informative and easy to read. I look forward to implementing some of what I have learned.

One person found this helpful

Joy

5.0 out of 5 stars

How to download the code

Reviewed in the United States on January 2, 2022

This book was written for people like me who used to create websites back when they were being displayed only on computers. Now, after so many years, we need to create a website(s) that looks good on very small to very large displays. In other words, we need to create websites that are responsive.

However, the author still introduces the basics, so you don't need to know HTML and CSS before reading the book.

Downloading the code from the first URL isn't straightforward if you bought the book through Amazon; however, it can still be done as follows:

Find the URL given in the book. It's in the preface, section "Get the most out of this book."

Go to the URL and register.

After registering, go to URL + "/support/code-downloads" (at the time of writing this review). Otherwise, look for a link that has to do with "Support" and follow the instructions until you get to the code download page.

Type the name of the book in the search box and hit return.

Select the book version in the drop-down list.

Select the store (Amazon) where you purchased the book.

Click on the download link to download.

You should also be able to download the code from the second URL. You also don't need to first register to do so.

I hope that helps.

Helpful

Report abuse

Constantin Câmpean

5.0 out of 5 stars

Written roadmap for building web application.

Reviewed in the United States on May 8, 2020

Disclaimer: I got the free version of this book in electronic format, for reviewing purpose.

As a web developer I am using mostly documentation available online.

So why reading a book about semantic HTML, accessibility, modern CSS layout, web performance?

All of the topics above and a few more, are described in a practical way in this book, with a piece of code next to it.

What I like the most about this book, are the explanations of the web standards, so that every lay person can understand how to make use of them.

Bonus, you have direct link to every specification described.

Even it is a lenghty book, it keeps you engaged in the reading process and you will have good laughs, because it is sprinkled with british humour.

One person found this helpful

Helpful

Report abuse

Josh Garverick

5.0 out of 5 stars

This book will get you up to speed fast

Reviewed in the United States on May 24, 2020

Disclaimer: I was provided a free copy of the ebook in exchange for an honest review. I’m a fan of the author’s methodical approach to describing and demonstrating various front end techniques. From the basics of an HTML page to more advanced topics, it is all covered in the same cadence, with the same attention to the details you need to know. Having been away from the front end work for a while, I found it interesting to see what has changed in the past couple of years along with what hasn’t. If you need or want to get up to speed quickly with responsive web design, this book is a good pick.

Helpful

Report abuse

Kyle S

5.0 out of 5 stars

A wonderful book with insightful information for both novices and experienced developers.

Reviewed in the United States on September 1, 2020

A great and easy to read book. Not over complicating topics like many development books tend to do.

Back to HTML and CSS!

When I first started on the book, I expected just the basics but it quickly takes a dive into many great topics & chapters. The forms, flexbox, and CSS Grid chapters alone were worth it! Top that off with loads of info on animations, selectors, semantics, and more. Accompanied by a multitude of examples and links to help solidify the teachings. A+ work!

I think this book would make a great addition to any developer's library and will be an incredibly informative read for those learning and/or looking to get a refresh on topics you have a brief knowledge of. Keep it close by for reference!

Helpful

Report abuse

Amazon Customer

5.0 out of 5 stars

Great book to get up to speed with modern web design

Reviewed in the United States on May 21, 2020

I found this book very useful as someone who took a couple years off from front-end development. A lot has changed since I last developed and this book was helpful in introducing new ideas, such as CSS Grid, modern typographic techniques with CSS, as well as a very good chapter on SVGs. This book is highly useful as a quick reference guide for front-end developers.

One person found this helpful

Helpful

Report abuse

E. S.

5.0 out of 5 stars

Excellent resource for web design & development!

Reviewed in the United States on May 21, 2020

- Quick disclaimer - I received a digital review copy of this book for free in exchange for an honest, unbiased review.

That said, the book is written with clear and concise explanations, the code example files are really helpful, and the code snippets in the book are clearly explained for readers to follow. By introducing the importance of responsive web design in the first chapter, you already know what your focus will be on learning how to code in a modern, semantic way. This is important, since there is a lot of focus on responsive design, accessibility, and optimized web performance as a good foundation for developers. I really appreciate Chapter 5, where we are introduced to Layouts with CSS Grid. There is a good balance of text & images/diagrams to help better explain what is going on. I've actually been trying to improve my knowledge and use of CSS Grid, so this chapter is going to be my reference point for this as I continue. Overall, a very good resource that will prove valuable to anyone looking to learn or improve their web design & development skills.

Helpful

Report abuse

From other countries

Ben

5.0 out of 5 stars

An excellent update on HTML and CSS

Reviewed in the United Kingdom on September 30, 2020

Verified Purchase

I learnt the basics of HTML and CSS years ago now, but this book really does help you understand the most fundamental part of web design today. That is responsive web design and coding examples for different screen sizes. There are so many devices these days that simple HTML just doesn’t work anymore.

I love the short paragraphs that don’t over complicate the subject and code examples with illustrations.

I find it easier and less distracting to learn without being online and accessing content, so the code snippets along with illustrations really do help you compare the result without having to download content and rummage through course files.

A great read to catch up on the latest developments and also to pick up a surprise trick or two you weren’t aware of!

9 people found this helpful

Report abuse

Mike

5.0 out of 5 stars

I joined the phone age

Reviewed in the United Kingdom on October 15, 2020

Verified Purchase

This book gives me the same feeling I had reading Zeldman's Designing With Web Standards back in 2003. It's easy to read with light humour, helpful pictures and code samples. But most importantly it's inspiring.

I was the nuts at front-end development about 15 years ago. The way my work at a startup panned out I did a big front-end project about 10 years ago and that held up until the company was acquired. Having not kept up with things in the meantime I needed a way to bring my skills into the phone age. Now I'm confident I know what's what as I search for my next project.

6 people found this helpful

Report abuse

Philip Osztromok

5.0 out of 5 stars

Already learned something useful

Reviewed in the United Kingdom on May 12, 2021

Verified Purchase

I bought this book to help me improve my own website and within the first few pages, I learned something that hugely improved the responsiveness of my site. It is still too early to tell if the book as a whole is going to measure up to its good start but I already feel that it is worth the money for that one thing. Based on that, I would say that this is a very practical and useful book although, as some other revierwers have mentioned, it would have been nice to provide unfinished code to give you something to follow along with. Nevertheless, its definetely a book I would recommend!

One person found this helpful

Report abuse

Prof Rex Last

5.0 out of 5 stars

The only one you need to buy in this field

Reviewed in the United Kingdom on November 3, 2020

Verified Purchase

A brilliant introduction to the new world of interactive and reactive web pages. Five stars are not enough.

2 people found this helpful