Responsive Web Design with HTML5 and CSS - Fourth Edition

By : Ben Frain

3.5 (4)

Buy this Book

Responsive Web Design with HTML5 and CSS - Fourth Edition

3.5 (4)

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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Free Chapter

Section I: The Fundamentals of Responsive Web Design

The Essentials of Responsive Web Design

The browser and device landscape

Defining responsive web design

Our first responsive example

Summary

Writing HTML Markup

Getting the start of HTML pages right

All hail the mighty <a> element

New semantic elements in HTML5

HTML text-level semantics

Obsolete HTML features

Putting HTML elements to use

WCAG accessibility conformance and WAI-ARIA for more accessible web applications

Embedding media in HTML5

The loading attribute

The <dialog> element

Summary

An exercise

Media Queries and Container Queries

The meta viewport tag

Why media queries are needed for a responsive web design

Media query syntax

Using media queries to alter a design

Advanced media query considerations

Media Queries Level 5

Container queries

Summary

Fluid Layout and Flexbox

Converting a fixed pixel design into a fluid proportional layout

Why do we need Flexbox?

Introducing Flexbox

Inline-flex

Flexbox alignment properties

Changing the source order

Wrapping with flex

Summary

Layout with CSS Grid

What CSS Grid is and the problems it solves

Setting up a Grid Layout

Placing and sizing Grid Layout items

Shorthand syntax

Allowing nested elements to take part in the Grid

Applying what you have learned so far

Summary

Section II: Core Skills for Effective Front-End Web Development

CSS Selectors, Typography, and More

Selectors, units, and capabilities

CSS selectors – beyond the normal!

CSS structural pseudo-classes

Combinator selectors – child, next sibling, and subsequent sibling

Grouping selectors

Responsive viewport relative lengths

Using @supports to fork CSS

Web typography

Variable fonts

Exercise

Summary

CSS Color

RGB color

HSL color

Space-separated functional color notation

Color concepts and terminology

The current state of CSS color

Fallbacks for older browsers

The color-mix() function

The color-contrast() function

Relative colors with the relative color syntax

Summary

Resources

Stunning Aesthetics with CSS

Text shadows

Box shadows

Background gradients

Multiple background images

CSS filters

A warning on CSS performance

CSS clip-path

mask-image

mix-blend-mode

Summary

Responsive Images

Modern image formats

Image format comparisons

The inherent problem of responsive images

Summary

SVG

A brief history of SVG

An image that is also a readable web document

Creating SVGs with popular image editing packages and services

Inserting SVGs into your web pages

Reusing graphical objects from symbols

What you can do with each SVG insertion method (inline, object, background-image, and img)

Extra SVG capabilities and oddities

Optimizing SVGs

SVG implementation tips

Summary

Further resources

Transitions, Transformations, and Animations

What CSS transitions are and how we can use them

CSS 2D transforms

CSS 3D transformations

Animating with CSS

Exercises and training

Summary

Custom Properties and CSS Functions

Working with custom properties

CSS functions

Putting it all together

Summary

Forms

HTML5 forms

HTML5 input types

Styling HTML5 forms with CSS

Summary

Section III: Latest Platform Features and Parting Advice

Cutting-Edge CSS Features

Cascade layers

CSS nesting

Summary

Bonus Techniques and Parting Advice

Truncating text

Creating horizontal scrolling panels

Parting advice

Summary

Other Books You May Enjoy

Index

Customer Reviews

3.5 (4)

5 star

25%

4 star

50%

3 star

2 star

1 star

25%

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected], and mention the book’s title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit http://www.packtpub.com/submit-errata, selecting your book, clicking on the Submit New Errata link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit http://authors.packtpub.com.

Share your thoughts

Once you’ve read Responsive Web Design with HTML5 and CSS, Fourth Edition, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781803242712
Submit your proof of purchase
That’s it! We’ll send your free PDF and other benefits to your email directly

Responsive Web Design with HTML5 and CSS - Fourth Edition

By : Ben Frain

Responsive Web Design with HTML5 and CSS - Fourth Edition

By: Ben Frain

Overview of this book

Related Content you might be interested in

Current Title:

Responsive Web Design with HTML5 and CSS - Fourth Edition

Mastering CSS Grid

Enduring CSS

The HTML and CSS Workshop

Get in touch

Share your thoughts

Download a free PDF copy of this book