Responsive Web Design with HTML5 and CSS - Third Edition

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

  1. Preface
    1. Who this book is for
    2. What this book covers
    3. Get the most out of this book
    4. Get in touch
  2. 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
  3. Writing HTML Markup
    1. Getting the start of HTML pages right
      1. The doctype
      2. The html tag and lang attribute
      3. Character encoding
    2. The forgiving nature of HTML5 markup
      1. A sensible approach to HTML markup
      2. All hail the mighty <a> tag
    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 elements
      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
        1. 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
    9. Summary
      1. An exercise
  4. Media Queries – Supporting Differing Viewports
    1. The viewport meta 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. Organizing media queries
      2. The practicalities of separating media queries
      3. Nesting media queries "inline"
    6. Combine media queries or write them where it suits?
    7. Media Queries Level 4
      1. Interaction media features
        1. The pointer media feature
        2. The hover media feature
      2. The prefers-color-scheme media feature
    8. Summary
  5. Fluid Layout, Flexbox, and Responsive Images
    1. Converting a fixed pixel design to a fluid proportional layout
      1. Why do we need Flexbox?
        1. Inline-block and white-space
        2. Floats
        3. Table and table-cell
    2. Introducing Flexbox
      1. The bumpy path to Flexbox
      2. Leave prefixing to someone else
        1. 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
    3. Different Flexbox layouts with media queries
      1. Inline-flex
      2. Flexbox alignment properties
        1. The align-items property
        2. The align-self property
        3. Possible alignment values
        4. The justify-content property
        5. The flex property
      3. Simple sticky footer
      4. Changing the source order
      5. Wrapping with flex
      6. Wrapping up Flexbox
    4. Responsive images
      1. The inherent problem of responsive images
      2. Simple resolution switching with srcset
      3. Advanced switching with srcset and sizes
        1. Did you say the browser "might" pick one image over another?
      4. Art direction with the picture element
        1. Facilitate new image formats
    5. Summary
  6. 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
      1. Explicit and implicit
        1. grid-auto-rows and grid-auto-columns
        2. grid-auto-flow
    3. Placing and sizing grid items
      1. gap
      2. repeat
      3. fr units
      4. Placing items in the grid
      5. span
      6. dense
    4. Named grid lines
      1. grid-template-areas
    5. Applying what you have learned so far
      1. auto-fit and auto-fill
      2. The minmax() function
    6. 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
    7. Summary
  7. CSS Selectors, Typography, Color Modes, and More
    1. Selectors, units, and capabilities
      1. Anatomy of a CSS rule
      2. Pseudo-elements and pseudo-classes
      3. CSS Level 3 selectors and how to use them
        1. CSS attribute selectors
        2. CSS substring matching attribute selectors
        3. Chaining attribute selectors
      4. CSS structural pseudo-classes
        1. The :last-child selector
        2. The nth-child selectors
        3. nth-based selection in responsive web designs
        4. Combinator selectors – child, next sibling, and subsequent sibling
        5. The negation (:not) selector
        6. The empty (:empty) selector
      5. Responsive viewport-percentage lengths (vmax, vmin, vh, and vw)
      6. CSS calc
      7. CSS custom properties
        1. Setting a fallback value
        2. env() environment variables
      8. Using @supports to fork CSS
        1. Feature queries
        2. Combining conditionals
    2. 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
        1. font-display
      5. Variable fonts
        1. font-face changes
        2. Using a variable font
        3. Font features
        4. Exercise
    3. CSS color formats and alpha transparency
      1. RGB color
      2. HSL color
        1. Alpha channels
    4. Summary
  8. Stunning Aesthetics with CSS
    1. Text shadows with CSS
      1. Omit the blur value when it's not needed
        1. Multiple text shadows
    2. Box shadows
      1. Inset shadow
      2. Multiple shadows
      3. Understanding spread
    3. Background gradients
      1. Linear-gradient notation
        1. Specifying gradient direction
        2. Color stops
      2. Radial background gradients
        1. Breakdown of radial gradient syntax
      3. Handy "extent" keywords for responsive sizing
    4. Repeating gradients
    5. Background gradient patterns
    6. Multiple background images
      1. Background size
      2. Background position
      3. Background shorthand
      4. High resolution background images
    7. CSS filters
      1. Available CSS filters
      2. Combining CSS filters
    8. A warning on CSS performance
    9. CSS clip-path
      1. clip-path with url
      2. 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)
      3. Animating clip-path
    10. mask-image
      1. mask-image example
    11. mix-blend-mode
    12. Summary
  9. Using SVGs for Resolution Independence
    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. With an object tag
      3. Inserting an SVG as a background image
      4. A brief aside on data URIs
      5. Generating image sprites
    5. Inserting an SVG inline
    6. Reusing graphical objects from symbols
      1. Inline SVGs allow different colors in different contexts
        1. Making dual-tone icons that inherit the color of their parent
      2. Recoloring SVGs with CSS custom properties
      3. Reusing graphical objects from external sources
    7. What you can do with each SVG insertion method (inline, object, background-image, and img)
      1. Browser schisms
    8. 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
    9. Animating SVG with JavaScript
      1. A simple example of animating an SVG with GreenSock
    10. Optimizing SVGs
    11. Using SVGs as filters
    12. A note on media queries inside SVGs
    13. SVG implementation tips
    14. Summary
    15. Further resources
  10. 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
    2. Understanding timing functions
    3. CSS 2D transforms
      1. Scale
      2. Translate
        1. Using translate to center absolutely positioned elements
      3. Rotate
      4. Skew
      5. Matrix
      6. Transform-origin property
    4. CSS 3D transformations
      1. The translate3d property
      2. A progressive enhancement example using translate3d
    5. Animating with CSS
      1. The animation-fill-mode property
    6. Exercises and training
    7. Summary
  11. Conquer Forms with HTML5 and CSS
    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 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
      9. The time input type
      10. The range input type
    3. Styling HTML5 forms with CSS
      1. Indicating required fields
      2. Creating a background fill effect
    4. Summary
  12. Bonus Techniques and Parting Advice
    1. Breaking up long URLs
    2. Truncating text
    3. Creating horizontal scrolling panels
      1. Horizontal scrolling panels with Grid
    4. CSS Scroll Snap
      1. The scroll-snap-type property
      2. The scroll-snap-align property
      3. The scroll-padding property
      4. Smooth scrolling with CSS scroll-behavior
    5. Linking CSS breakpoints to JavaScript
    6. Get designs in the browser as soon as possible
    7. Test on real devices
    8. Embrace progressive enhancement
      1. Define a browser support matrix
      2. Functional parity, not visual parity
      3. Choosing the browsers to support
      4. Tiering the user experience
    9. Avoid CSS frameworks in production
    10. Hiding, showing, and loading content across viewports
    11. Validators and linting tools
    12. Performance
      1. Performance tools
    13. The next big things
    14. Summary
  13. Other Books You May Enjoy
  14. Index

Product information

  • Title: Responsive Web Design with HTML5 and CSS - Third Edition
  • Author(s): Ben Frain
  • Release date: April 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781839211560