Packt+ | Advance your knowledge in tech

You're reading from Responsive Web Design with HTML5 and CSS Build future-proof responsive websites using the latest HTML5 and CSS techniques

Product type Video

Published in Jul 2024

Publisher Packt

ISBN-13 9781835887028

Length 16hrs 53mins

Edition 1st Edition

Languages

CSS

Concepts

Design

Author (1):

Ben Frain

View More author details

Table of Contents (15) Chapters

1. The Fundamentals of Responsive Web Design

Introduction
Browser support, tooling and code samples
Understanding Responsive Web Design
Enter media queries
Summary

2. Writing HTML Markup FREE CHAPTER

Writing HTML Markup
Starting HTML pages correctly
New semantic elements in HTML5
HTML grouping elements
HTML text-level semantics
Using HTML5 elements
WCAG accessibility conformance and WAI-ARIA for more accessible web applications
Embedding media in HTML5
The element
Summary and homework

3. Media Queries and Container Queries

Media Queries and Container Queries
The meta tag and Media Queries
Testing responsive designs on emulators and simulators
Should you split media queries into their own files?
Consolidate media queries or scatter them where it suits?
Media Queries Level 5
Container queries
Summary

4. Fluid Layout and Flexbox

Fluid Layout and Flexbox - Introduction
Converting a fixed pixel design to a fluid proportional layout
Why do we need Flexbox?
Flexbox Implementation
Sticky Footer
Visual Reordering
Summary

5. Layout with CSS Grid

Layout with CSS Grid - Introduction
Basic Grid syntax
Refining our Grid System
Placing and sizing Grid Layout items
Named grid lines and grid-template-areas
auto-fit and auto-fill
Shorthand syntax
Allowing nested elements to take part in the Grid
Summary

6. CSS Selectors, Typography and More

CSS Selectors, Typography, and More
Selectors, units, and capabilities
CSS selectors - beyond the normal!
CSS structural pseudo-classes
nth-based selection in responsive web designs
Combinator selectors – child, next sibling, and subsequent sibling
Grouping selectors
Responsive viewport-relative lengths
Using @supports to fork CSS
Web typography
The @font-face CSS rule
Variable fonts
Summary

7. CSS Color

Introduction
RGB Color Format
Alpha Channel
Color concepts and terminology
Advanced Color Spaces
Exploring Lab and LCH color
OKLab & OKLCH
Using color-mix() & color-contrast() functions
Summary

8. Stunning Aesthetics with CSS

Introduction and Objectives
Text Shadows and Box Shadows
Background Gradients
Conic Gradients, Repeating Gradients and Background Gradient Patterns
Multiple Background Images
CSS Filters
CSS clip-path
Mask-Image and Mix-Blend-Mode
Summary

9. Responsive Images

Introduction to Responsive Images
Modern Image Formats
Syntax for Responsive Images
Art direction with the picture element
Summary

10. SVG

Introduction to SVG
Understanding a basic SVG
Elements and Attributes of SVG
Creating SVGs
Inserting SVGs into Webpages
Reusing Graphical Objects from Symbols
Re-coloring SVGs with CSS Custom Properties
Reusing Graphical Objects from External Sources
Coloring SVGs with mask-image
Exploring SVG Insertion Methods
SMIL Animation
Styling SVGs
Animating an SVG with CSS
Animating SVG with JavaScript
Using SVGs as Filters
Understanding Media Queries within SVGs
Optimizing SVGs
Summary and Resources

11. Transitions, Transformations and Animations

Introduction to Transitions, Transformations, and Animations
CSS Transitions and Their Properties
Understanding Timing Functions for CSS Transitions
CSS 2D Transforms
Understanding the Transform-origin Property
CSS 3D Transformations
Learning about the Translate3D Property
CSS Animations, Exercises, Training and Summary

12. Custom Properties and CSS Functions

Introduction to CSS Functions and Custom Properties
Starting with CSS Custom Properties
Switching Custom Properties with JavaScript
Specificities of Custom Properties
Exploring CSS Functions in Detail
Looking at the min, max and clamp Functions of CSS
Integrating Our Knowledge So Far
Summary

13. Forms

Introduction to HTML5 Forms
Understanding the Components of HTML5 Forms
Exploring attributes like 'required' and 'autofocus'
Learning about the autocomplete and list attribute
HTML5 Input Types
Understanding the Date and Time Inputs
Styling HTML5 Forms with CSS
Indicating Required Fields
Styling Input Carets and Background Fills with CSS
Summary

14. Cutting Edge CSS Features

Introduction to CSS Features and Cascade Layers
Mastering Cascade Layers for Improved Style Management
Learning about CSS Nesting
Simplifying CSS with Nested Selectors and Media Queries
Summary

15. Bonus Techniques and Parting Advice

Tips and Techniques - Introduction
Truncating Text in CSS
Scrolling Panels and Custom Scrollbars
CSS Scroll Snap
Smooth Scrolling with CSS scroll-behavior
Important Parting Advice
Setting Browser Support Levels
CSS Frameworks and Linting
Exploring Performance and Performance Tools
What's the Next Big Thing?
Summary

You're reading from Responsive Web Design with HTML5 and CSS Build future-proof responsive websites using the latest HTML5 and CSS techniques

Table of Contents (15) Chapters

Authors (1)

Personalised recommendations for you

You're reading from Responsive Web Design with HTML5 and CSS Build future-proof responsive websites using the latest HTML5 and CSS techniques

Table of Contents (15) Chapters Close

Unlock this book and the full library FREE for 7 days

Authors (1)

Personalised recommendations for you

Table of Contents (15) Chapters