Responsive Web Design with HTML5 and CSS, 4th Edition
- Length: 498 pages
- Edition: 4
- Language: English
- Publisher: Packt Publishing
- Publication Date: 2022-09-19
- ISBN-10: 180324271X
- ISBN-13: 9781803242712
- Sales Rank: #407609 (See Top 100 Books)
Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly on mobile phones, tablets, and desktops ― plus everything in-between – now with color images!
Key Features
- Understand what responsive web design is and its significance for modern web development
- Explore the latest developments in responsive web design and CSS, including layout with Grid and Subgrid, CSS Cascade Layers, Wide Gamut colors, and CSS Functions
- Get to grips with the uses and benefits of new HTML elements and attributes
Book Description
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.
What you will learn
- Use media queries, including detection for touch/mouse and color preference
- Learn HTML semantics and author accessible markup
- Facilitate different images depending on screen size or resolution
- Write the latest color functions, mix colors, and choose the most accessible ones
- Use SVGs in designs to provide resolution-independent images
- Create and use CSS custom properties, making use of new CSS functions including ‘clamp’, ‘min’, and ‘max’
- Add validation and interface elements to HTML forms
- Enhance interface elements with filters, shadows, and animations
Who this book is for
Are you a full-stack or back-end developer who needs to improve 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 the 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.
Preface Who this book is for What this book covers To get the most out of this book Get in touch Section I: The Fundamentals of Responsive Web Design The Essentials of Responsive Web Design The browser and device landscape Defining responsive web design Responsive web design in a nutshell Browser support Text editors Tools for software development Our first responsive example Our basic HTML file Taming images A brief tangent on width/max-width for images Enter media queries Breakpoints Amending the example for a larger screen The shortcomings of our example Summary Writing HTML Markup Getting the start of HTML pages right The doctype The HTML tag and lang attribute Character encoding The forgiving nature of HTML5 markup A sensible approach to HTML markup All hail the mighty <a> element 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 and the <hgroup> element 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 The <span> element The <b> element The <strong> element The <em> element The <i> element Obsolete HTML features Putting HTML elements to use WCAG accessibility conformance and WAI-ARIA for more accessible web applications Web Content Accessibility Guidelines (WCAG) WAI-ARIA Taking ARIA further Embedding media in HTML5 Adding video and audio in HTML Providing alternate media sources Audio and video tags work almost identically Responsive HTML5 video and iframes The modern way to embed iframes and keep aspect ratio 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 Basic conditional logic in CSS Media query syntax Media queries in link tags Media query on an @import at-rule Media queries in a CSS file Inverting media query logic Combining media queries A number of different media queries Everyday media queries What can media queries test for? Using media queries to alter a design Advanced media query considerations Do media queries affect which files get downloaded or how the page renders? Should you split media queries into their own files? Consolidate media queries or scatter them where it suits? What about file size? Media Queries Level 5 Interaction media features The pointer media feature The hover media feature User preference media features The prefers-color-scheme media feature The prefers-reduced-motion feature Future possibilities Container queries This may change! Using a container query Why name the container? Container relative lengths Possibilities Summary Fluid Layout and Flexbox Converting a fixed pixel design into a fluid proportional layout Why do we need Flexbox? Introducing Flexbox The bumpy path to Flexbox Choosing your autoprefixing solution Getting Flexy Perfect vertically centered text Offset items Reverse the order of items How about if we want them laid out vertically instead? Column reverse Inline-flex Flexbox alignment properties align-items align-self Possible alignment values justify-content The flex property Simple sticky footer Changing the source order Wrapping with flex Wrapping up Flexbox Summary Layout with CSS Grid What CSS Grid is and the problems it solves Basic Grid syntax Grid-specific concepts and terminology Setting up a Grid Layout Explicit and implicit grid-auto-rows and grid-auto-columns grid-auto-flow Placing and sizing Grid Layout items gap repeat fr units Placing items in the grid span dense Named grid lines grid-template-areas auto-fit and auto-fill The minmax() function Shorthand syntax grid-template shorthand grid shorthand grid shorthand value – option one grid shorthand value – option two grid shorthand value – option three Allowing nested elements to take part in the Grid The subgrid value 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 Anatomy of a CSS rule Pseudo-elements and pseudo-classes CSS selectors – beyond the normal! CSS attribute selectors CSS substring matching attribute selectors The “beginning with” substring matching attribute selector The “contains an instance of” substring matching attribute selector The “ends with” substring matching attribute selector Chaining attribute selectors CSS structural pseudo-classes The :last-child selector The nth-child selectors Understanding what nth rules do nth-based selection in responsive web designs Combinator selectors – child, next sibling, and subsequent sibling The child combinator The next sibling The subsequent sibling The negation (:not) selector The empty (:empty) selector Grouping selectors The :is() functional pseudo-class The :where() functional pseudo-class The :has() relational pseudo-class Responsive viewport relative lengths Using @supports to fork CSS Feature queries Combining conditionals Web typography System fonts The @font-face CSS rule Implementing web fonts with @font-face Optimizing font loading with font-display font-display Variable fonts font-face changes How to make use of a variable font Registered axis Custom axis Font features Exercise Summary CSS Color RGB color HSL color Alpha channels Alpha with hex Alpha with functional notation Space-separated functional color notation Color concepts and terminology Color space Gamut The current state of CSS color Introductory note Display-P3 @media (color-gamut) media query LCH with the lch() function OKLab and OKLCH 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 Multiple text shadows Box shadows Inset shadow Multiple shadows Understanding spread Background gradients The linear-gradient notation Specifying gradient direction Color stops Radial background gradients Handy “extent” keywords for responsive sizing Conic gradients Repeating gradients Background gradient patterns Multiple background images Background size Background position Background shorthand High-resolution background images CSS filters Available CSS filters Combining CSS filters A warning on CSS performance CSS clip-path CSS basic shapes clip-path with a circle clip-path with ellipse clip-path with inset clip-path with polygon clip-path with URL (clipping source) Animating clip-path mask-image mix-blend-mode Summary Responsive Images Modern image formats AVIF image format WebP image format Image format comparisons Using the picture element to progressively enhance images The inherent problem of responsive images Simple resolution switching with srcset Advanced switching with srcset and sizes Did you say the browser “might” pick one image over another? Art direction with the picture element A practical note on providing alternate image formats and sizes Summary SVG A brief history of SVG An image that is also a readable web document The root SVG element Namespace The title and desc tags The defs tag The g element SVG shapes SVG paths Creating SVGs with popular image editing packages and services Saving time with SVG icon services Inserting SVGs into your web pages Using an img tag Using an object tag Inserting an SVG as a background image A brief aside on data URIs Generating image sprites Inserting an SVG inline Reusing graphical objects from symbols Inline SVGs allow different colors in different contexts Making dual-tone icons that inherit the color of their parent Re-coloring SVGs with CSS custom properties Reusing graphical objects from external sources What you can do with each SVG insertion method (inline, object, background-image, and img) Extra SVG capabilities and oddities SMIL animation Styling an SVG with an external style sheet Styling an SVG with internal styles SVG properties and values within CSS Animating an SVG with CSS Animating SVG with JavaScript A simple example of animating an SVG with GreenSock Using SVGs as filters A note on media queries inside SVGs Optimizing SVGs SVG implementation tips Summary Further resources Transitions, Transformations, and Animations What CSS transitions are and how we can use them The properties of a transition The transition shorthand property Transitioning different properties over different periods of time Understanding timing functions CSS 2D transforms Scale Translate Using translate to center absolutely positioned elements Rotate Skew Matrix The transform-origin property CSS 3D transformations The translate3d property A progressive enhancement example using translate3d Animating with CSS The animation-fill-mode property Exercises and training Summary Custom Properties and CSS Functions Working with custom properties Simple theming Setting and getting custom property values with JavaScript Custom properties and specificity Setting a fallback value env() environment variables Custom properties and web components CSS functions calc() min() max() clamp() Putting it all together Summary Forms HTML5 forms Understanding the component parts of HTML5 forms The placeholder attribute Styling the placeholder text Styling the input caret with the caret-color CSS property The required attribute The autofocus attribute The autocomplete attribute The list attribute and the associated datalist element HTML5 input types The email input type The number input type Using min and max to create number ranges Changing the step increments The url input type The tel input type The search input type The pattern input attribute The color type input Date and time The date input type The month input type The week input type The time input type The range input type Styling HTML5 forms with CSS Indicating required fields Creating a background fill effect Summary Section III: Latest Platform Features and Parting Advice Cutting-Edge CSS Features Cascade layers Naming cascade layers Where to declare layers Adding rules to layers The priority of rules in and outside of layers Nesting layers inside other layers The importance of !important !important in cascade layers Old browsers CSS nesting Nesting conditionals such as media queries Trying CSS nesting syntax today Giving your feedback on the proposal Asking browser vendors to implement CSS nesting Summary Bonus Techniques and Parting Advice Truncating text Single-line truncation Multi-line truncation Creating horizontal scrolling panels Styling scrollbars CSS Scroll Snap The scroll-snap-type property The scroll-snap-align property The scroll-snap-stop property Smooth scrolling with CSS scroll-behavior Parting advice Getting designs in the browser as soon as possible Testing on real devices Embracing progressive enhancement Defining a browser support matrix Functional parity, not visual parity Choosing the browsers to support Tiering the user experience Avoiding CSS frameworks in production Hiding, showing, and loading content across viewports Validators and linting tools Performance Performance tools The next big things Summary Other Books You May Enjoy Index
Donate to keep this site alive
How to download source code?
1. Go to: https://github.com/PacktPublishing
2. In the Find a repository… box, search the book title: Responsive Web Design with HTML5 and CSS, 4th Edition
, sometime you may not get the results, please search the main title.
3. Click the book title in the search results.
3. Click Code to download.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.