Book description
Publisher's note: To make use of the most recent CSS and HTML features, a new, fully revised fourth edition of this book is now available, updated for 2022.
Key Features
- Understand what responsive web design is and its significance for modern web development
- Explore the latest developments in responsive web design including variable fonts, CSS Scroll Snap, and more
- Get to grips with the uses and benefits of the new CSS Grid layout
Book Description
Responsive Web Design with HTML5 and CSS, Third Edition is a renewed and extended version of one of the most comprehensive and bestselling books on the latest HTML5 and CSS tools and techniques for responsive web design.
Written in the author's signature friendly and informal style, this edition covers all the newest developments and improvements in responsive web design including better user accessibility, variable fonts and font loading, CSS Scroll Snap, and much, much more. With a new chapter dedicated to CSS Grid, you will understand how it differs from the Flexbox layout mechanism and when you should use one over the other.
Furthermore, you will acquire practical knowledge of SVG, writing accessible HTML markup, creating stunning aesthetics and effects with CSS, applying transitions, transformations, and animations, integrating media queries, and more. The book concludes by exploring some exclusive tips and approaches for front-end development from the author.
By the end of this 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.
What you will learn
- Integrate CSS media queries into your designs; apply different styles to different devices
- Load different sets of images depending upon screen size or resolution
- Leverage the speed, semantics, and clean markup of accessible HTML patterns
- Implement SVGs into your designs to provide resolution-independent images
- Apply the latest features of CSS like custom properties, variable fonts, and CSS Grid
- Add validation and interface elements like date and color pickers to HTML forms
- Understand the multitude of ways to enhance interface elements with filters, shadows, animations, and more
Who this book is for
Are you a full-stack developer who needs to gem up on 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 responsive web designs and how to achieve them? This is a book for you!
All you need to take advantage of this book is a working understanding of HTML and CSS. No JavaScript knowledge is needed.
Table of contents
- Preface
- The Essentials of Responsive Web Design
-
Writing HTML Markup
- Getting the start of HTML pages right
- The forgiving nature of HTML5 markup
-
New semantic elements in HTML5
- The <main> element
- The <section> element
- The <nav> element
- The <article> element
- The <aside> element
- The <header> element
- The <footer> element
- The HTML5 outline algorithm
- A note on h1-h6 elements
- The div element
- The p element
- The blockquote element
- The <figure> and <figcaption> elements
- <details> and <summary> elements
- The <address> element
- 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
- Summary
- Media Queries – Supporting Differing Viewports
- Fluid Layout, Flexbox, and Responsive Images
- Layout with CSS Grid
-
CSS Selectors, Typography, Color Modes, and More
- Selectors, units, and capabilities
- Web typography
- CSS color formats and alpha transparency
- Summary
- Stunning Aesthetics with CSS
-
Using SVGs for Resolution Independence
- 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
- Inserting an SVG inline
- 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
- Animating SVG with JavaScript
- Optimizing SVGs
- Using SVGs as filters
- A note on media queries inside SVGs
- SVG implementation tips
- Summary
- Further resources
- Transitions, Transformations, and Animations
- Conquer Forms with HTML5 and CSS
-
Bonus Techniques and Parting Advice
- Breaking up long URLs
- Truncating text
- Creating horizontal scrolling panels
- CSS Scroll Snap
- Linking CSS breakpoints to JavaScript
- Get designs in the browser as soon as possible
- Test on real devices
- Embrace progressive enhancement
- Avoid CSS frameworks in production
- Hiding, showing, and loading content across viewports
- Validators and linting tools
- Performance
- The next big things
- Summary
- Other Books You May Enjoy
- Index
Product information
- Title: Responsive Web Design with HTML5 and CSS - Third Edition
- Author(s):
- Release date: April 2020
- Publisher(s): Packt Publishing
- ISBN: 9781839211560
You might also like
book
Responsive Web Design with HTML5 and CSS - Fourth Edition
Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly …
video
CSS Modern Responsive Web Design - Create Five Different Websites
Today, websites come with a variety of designs that are completely different from each other. As …
book
Modern CSS: Master the Key Concepts of CSS for Modern Web Development
Come on a tour of “modern” CSS in 2020. This example-driven book demonstrates the concepts by …
video
HTML CSS and JavaScript for Beginners - A Web Design Course
This course starts from scratch, teaches you how to create websites, and covers everything from the …