Responsive Web Design with HTML5 and CSS - Fourth Edition

Responsive Web Design with HTML5 and CSS - Fourth Edition

by Ben Frain
Released September 2022
Publisher(s): Packt Publishing
ISBN: 9781803242712

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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! Purchase of the print or Kindle book includes a free eBook in PDF format.

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.

Table of contents

  1. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Get in touch
  2. Section I: The Fundamentals of Responsive Web Design
  3. The Essentials of Responsive Web Design
    1. The browser and device landscape
    2. Defining responsive web design
      1. Responsive web design in a nutshell
      2. Browser support
      3. Text editors
      4. Tools for software development
    3. Our first responsive example
      1. Our basic HTML file
      2. Taming images
        1. A brief tangent on width/max-width for images
      3. Enter media queries
        1. Breakpoints
        2. Amending the example for a larger screen
      4. The shortcomings of our example
    4. Summary
  4. Writing HTML Markup
    1. Getting the start of HTML pages right
      1. The doctype
      2. The HTML tag and lang attribute
      3. Character encoding
      4. The forgiving nature of HTML5 markup
      5. A sensible approach to HTML markup
    2. All hail the mighty <a> element
    3. New semantic elements in HTML5
      1. The <main> element
      2. The <section> element
      3. The <nav> element
      4. The <article> element
      5. The <aside> element
      6. The <header> element
      7. The <footer> element
      8. The HTML5 outline algorithm
      9. A note on h1-h6 and the <hgroup> element
      10. The <div> element
      11. The <p> element
      12. The <blockquote> element
      13. The <figure> and <figcaption> elements
      14. <details> and <summary> elements
      15. The <address> element
    4. HTML text-level semantics
      1. The <span> element
      2. The <b> element
      3. The <strong> element
      4. The <em> element
      5. The <i> element
    5. Obsolete HTML features
    6. Putting HTML elements to use
    7. WCAG accessibility conformance and WAI-ARIA for more accessible web applications
      1. Web Content Accessibility Guidelines (WCAG)
      2. WAI-ARIA
      3. Taking ARIA further
    8. Embedding media in HTML5
      1. Adding video and audio in HTML
        1. Providing alternate media sources
        2. Audio and video tags work almost identically
      2. Responsive HTML5 video and iframes
        1. The modern way to embed iframes and keep aspect ratio
    9. The loading attribute
    10. The <dialog> element
    11. Summary
    12. An exercise
  5. Media Queries and Container Queries
    1. The meta viewport tag
    2. Why media queries are needed for a responsive web design
      1. Basic conditional logic in CSS
    3. Media query syntax
      1. Media queries in link tags
      2. Media query on an @import at-rule
      3. Media queries in a CSS file
      4. Inverting media query logic
      5. Combining media queries
      6. A number of different media queries
      7. Everyday media queries
      8. What can media queries test for?
    4. Using media queries to alter a design
    5. Advanced media query considerations
      1. Do media queries affect which files get downloaded or how the page renders?
      2. Should you split media queries into their own files?
      3. Consolidate media queries or scatter them where it suits?
        1. What about file size?
    6. Media Queries Level 5
      1. Interaction media features
        1. The pointer media feature
        2. The hover media feature
      2. User preference media features
        1. The prefers-color-scheme media feature
        2. The prefers-reduced-motion feature
        3. Future possibilities
    7. Container queries
      1. This may change!
      2. Using a container query
        1. Why name the container?
        2. Container relative lengths
      3. Possibilities
    8. Summary
  6. Fluid Layout and Flexbox
    1. Converting a fixed pixel design into a fluid proportional layout
    2. Why do we need Flexbox?
    3. Introducing Flexbox
      1. The bumpy path to Flexbox
      2. Choosing your autoprefixing solution
      3. Getting Flexy
        1. Perfect vertically centered text
        2. Offset items
        3. Reverse the order of items
        4. How about if we want them laid out vertically instead?
        5. Column reverse
    4. Inline-flex
    5. Flexbox alignment properties
      1. align-items
      2. align-self
      3. Possible alignment values
        1. justify-content
      4. The flex property
      5. Simple sticky footer
    6. Changing the source order
    7. Wrapping with flex
      1. Wrapping up Flexbox
    8. Summary
  7. Layout with CSS Grid
    1. What CSS Grid is and the problems it solves
      1. Basic Grid syntax
      2. Grid-specific concepts and terminology
    2. Setting up a Grid Layout
      1. Explicit and implicit
        1. grid-auto-rows and grid-auto-columns
        2. grid-auto-flow
    3. Placing and sizing Grid Layout items
      1. gap
      2. repeat
      3. fr units
      4. Placing items in the grid
      5. span
      6. dense
      7. Named grid lines
      8. grid-template-areas
      9. auto-fit and auto-fill
      10. The minmax() function
    4. Shorthand syntax
      1. grid-template shorthand
      2. grid shorthand
        1. grid shorthand value – option one
        2. grid shorthand value – option two
        3. grid shorthand value – option three
    5. Allowing nested elements to take part in the Grid
      1. The subgrid value
    6. Applying what you have learned so far
    7. Summary
  8. Section II: Core Skills for Effective Front-End Web Development
  9. CSS Selectors, Typography, and More
    1. Selectors, units, and capabilities
      1. Anatomy of a CSS rule
      2. Pseudo-elements and pseudo-classes
    2. CSS selectors – beyond the normal!
      1. CSS attribute selectors
      2. CSS substring matching attribute selectors
        1. The “beginning with” substring matching attribute selector
        2. The “contains an instance of” substring matching attribute selector
        3. The “ends with” substring matching attribute selector
        4. Chaining attribute selectors
    3. CSS structural pseudo-classes
      1. The :last-child selector
      2. The nth-child selectors
        1. Understanding what nth rules do
        2. nth-based selection in responsive web designs
    4. Combinator selectors – child, next sibling, and subsequent sibling
      1. The child combinator
      2. The next sibling
      3. The subsequent sibling
      4. The negation (:not) selector
      5. The empty (:empty) selector
    5. Grouping selectors
      1. The :is() functional pseudo-class
      2. The :where() functional pseudo-class
      3. The :has() relational pseudo-class
    6. Responsive viewport relative lengths
    7. Using @supports to fork CSS
      1. Feature queries
      2. Combining conditionals
    8. Web typography
      1. System fonts
      2. The @font-face CSS rule
      3. Implementing web fonts with @font-face
      4. Optimizing font loading with font-display
      5. font-display
    9. Variable fonts
      1. font-face changes
      2. How to make use of a variable font
        1. Registered axis
        2. Custom axis
      3. Font features
    10. Exercise
    11. Summary
  10. CSS Color
    1. RGB color
    2. HSL color
      1. Alpha channels
        1. Alpha with hex
        2. Alpha with functional notation
    3. Space-separated functional color notation
    4. Color concepts and terminology
      1. Color space
      2. Gamut
    5. The current state of CSS color
      1. Introductory note
      2. Display-P3
        1. @media (color-gamut) media query
      3. LCH with the lch() function
      4. OKLab and OKLCH
    6. Fallbacks for older browsers
    7. The color-mix() function
    8. The color-contrast() function
    9. Relative colors with the relative color syntax
    10. Summary
    11. Resources
  11. Stunning Aesthetics with CSS
    1. Text shadows
      1. Multiple text shadows
    2. Box shadows
      1. Inset shadow
      2. Multiple shadows
      3. Understanding spread
    3. Background gradients
      1. The linear-gradient notation
        1. Specifying gradient direction
        2. Color stops
      2. Radial background gradients
      3. Handy “extent” keywords for responsive sizing
      4. Conic gradients
      5. Repeating gradients
      6. Background gradient patterns
    4. Multiple background images
      1. Background size
      2. Background position
      3. Background shorthand
      4. High-resolution background images
    5. CSS filters
      1. Available CSS filters
      2. Combining CSS filters
    6. A warning on CSS performance
    7. CSS clip-path
      1. CSS basic shapes
        1. clip-path with a circle
        2. clip-path with ellipse
        3. clip-path with inset
        4. clip-path with polygon
        5. clip-path with URL (clipping source)
      2. Animating clip-path
    8. mask-image
    9. mix-blend-mode
    10. Summary
  12. Responsive Images
    1. Modern image formats
      1. AVIF image format
      2. WebP image format
    2. Image format comparisons
      1. Using the picture element to progressively enhance images
    3. The inherent problem of responsive images
      1. Simple resolution switching with srcset
      2. Advanced switching with srcset and sizes
        1. Did you say the browser “might” pick one image over another?
      3. Art direction with the picture element
      4. A practical note on providing alternate image formats and sizes
    4. Summary
  13. SVG
    1. A brief history of SVG
    2. An image that is also a readable web document
      1. The root SVG element
      2. Namespace
      3. The title and desc tags
      4. The defs tag
      5. The g element
      6. SVG shapes
      7. SVG paths
    3. Creating SVGs with popular image editing packages and services
      1. Saving time with SVG icon services
    4. Inserting SVGs into your web pages
      1. Using an img tag
      2. Using an object tag
      3. Inserting an SVG as a background image
        1. A brief aside on data URIs
        2. Generating image sprites
      4. Inserting an SVG inline
    5. Reusing graphical objects from symbols
      1. Inline SVGs allow different colors in different contexts
      2. Making dual-tone icons that inherit the color of their parent
      3. Re-coloring SVGs with CSS custom properties
      4. Reusing graphical objects from external sources
    6. What you can do with each SVG insertion method (inline, object, background-image, and img)
    7. Extra SVG capabilities and oddities
      1. SMIL animation
      2. Styling an SVG with an external style sheet
      3. Styling an SVG with internal styles
        1. SVG properties and values within CSS
      4. Animating an SVG with CSS
      5. Animating SVG with JavaScript
        1. A simple example of animating an SVG with GreenSock
      6. Using SVGs as filters
      7. A note on media queries inside SVGs
    8. Optimizing SVGs
    9. SVG implementation tips
    10. Summary
    11. Further resources
  14. Transitions, Transformations, and Animations
    1. What CSS transitions are and how we can use them
      1. The properties of a transition
      2. The transition shorthand property
      3. Transitioning different properties over different periods of time
      4. Understanding timing functions
    2. CSS 2D transforms
      1. Scale
      2. Translate
        1. Using translate to center absolutely positioned elements
      3. Rotate
      4. Skew
      5. Matrix
      6. The transform-origin property
    3. CSS 3D transformations
      1. The translate3d property
      2. A progressive enhancement example using translate3d
    4. Animating with CSS
      1. The animation-fill-mode property
    5. Exercises and training
    6. Summary
  15. Custom Properties and CSS Functions
    1. Working with custom properties
      1. Simple theming
      2. Setting and getting custom property values with JavaScript
      3. Custom properties and specificity
      4. Setting a fallback value
      5. env() environment variables
      6. Custom properties and web components
    2. CSS functions
      1. calc()
      2. min()
      3. max()
      4. clamp()
    3. Putting it all together
    4. Summary
  16. Forms
    1. HTML5 forms
      1. Understanding the component parts of HTML5 forms
      2. The placeholder attribute
        1. Styling the placeholder text
      3. Styling the input caret with the caret-color CSS property
      4. The required attribute
      5. The autofocus attribute
      6. The autocomplete attribute
      7. The list attribute and the associated datalist element
    2. HTML5 input types
      1. The email input type
      2. The number input type
        1. Using min and max to create number ranges
        2. Changing the step increments
      3. The url input type
      4. The tel input type
      5. The search input type
      6. The pattern input attribute
      7. The color type input
      8. Date and time
        1. The date input type
        2. The month input type
        3. The week input type
        4. The time input type
      9. The range input type
    3. Styling HTML5 forms with CSS
      1. Indicating required fields
      2. Creating a background fill effect
    4. Summary
  17. Section III: Latest Platform Features and Parting Advice
  18. Cutting-Edge CSS Features
    1. Cascade layers
      1. Naming cascade layers
      2. Where to declare layers
      3. Adding rules to layers
      4. The priority of rules in and outside of layers
      5. Nesting layers inside other layers
      6. The importance of !important
        1. !important in cascade layers
      7. Old browsers
    2. CSS nesting
      1. Nesting conditionals such as media queries
      2. Trying CSS nesting syntax today
      3. Giving your feedback on the proposal
      4. Asking browser vendors to implement CSS nesting
    3. Summary
  19. Bonus Techniques and Parting Advice
    1. Truncating text
      1. Single-line truncation
      2. Multi-line truncation
    2. Creating horizontal scrolling panels
      1. Styling scrollbars
      2. CSS Scroll Snap
        1. The scroll-snap-type property
        2. The scroll-snap-align property
        3. The scroll-snap-stop property
      3. Smooth scrolling with CSS scroll-behavior
    3. Parting advice
      1. Getting designs in the browser as soon as possible
      2. Testing on real devices
      3. Embracing progressive enhancement
      4. Defining a browser support matrix
        1. Functional parity, not visual parity
        2. Choosing the browsers to support
        3. Tiering the user experience
      5. Avoiding CSS frameworks in production
      6. Hiding, showing, and loading content across viewports
      7. Validators and linting tools
      8. Performance
        1. Performance tools
      9. The next big things
    4. Summary
  20. Other Books You May Enjoy
  21. Index

Product information

  • Title: Responsive Web Design with HTML5 and CSS - Fourth Edition
  • Author(s): Ben Frain
  • Release date: September 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781803242712