Build future-proof responsive websites using the latest HTML5 and CSS techniques

What you'll learn

Create responsive, adaptive websites using HTML5 and CSS

Implement advanced CSS techniques for layout and design

Enhance web accessibility with WCAG and WAI-ARIA standards

Optimize web performance and handle responsive images effectively

Master cutting-edge CSS features and custom properties

Requirements

Prior experience with basic web development is recommended.

Description

In this course, you'll embark on a journey to master the essentials of responsive web design, beginning with foundational principles and progressing to advanced techniques. You'll start by exploring the fundamentals of responsive design, understanding browser support, and diving into media queries. From there, you'll learn to write effective HTML markup, including new semantic elements in HTML5, and enhance accessibility with WCAG conformance and WAI-ARIA.Next, you'll delve into the intricacies of media queries and container queries, understanding their implementation and testing responsive designs. You'll convert fixed pixel designs into fluid layouts and leverage the power of Flexbox and CSS Grid for sophisticated, flexible designs. Advanced CSS selectors, typography, and color techniques will be covered, along with responsive image handling and the use of SVGs for scalable vector graphics.The final sections will take you through transitions, transformations, and animations, along with cutting-edge CSS features like custom properties and CSS functions. You'll also explore practical techniques for HTML5 forms, advanced CSS capabilities, and performance optimization. This course ensures you have the skills to create stunning, responsive websites that stand out.About the AuthorBen Frain has been a web designer/developer since 1996. He is currently employed as a UI-UX Technical Lead at bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures: books, films and raising a family.

Overview

Section 1: The Fundamentals of Responsive Web Design

Lecture 1 Introduction

Lecture 2 Browser support, tooling and code samples

Lecture 3 Understanding Responsive Web Design

Lecture 4 Enter media queries

Lecture 5 Summary

Section 2: Writing HTML Markup

Lecture 6 Writing HTML Markup

Lecture 7 Starting HTML pages correctly

Lecture 8 New semantic elements in HTML5

Lecture 9 HTML grouping elements

Lecture 10 HTML text-level semantics

Lecture 11 Using HTML5 elements

Lecture 12 WCAG accessibility conformance and WAI-ARIA for more accessible web applications

Lecture 13 Embedding media in HTML5

Lecture 14 The element

Lecture 15 Summary and homework

Section 3: Media Queries and Container Queries

Lecture 16 Media Queries and Container Queries

Lecture 17 The meta tag and Media Queries

Lecture 18 Testing responsive designs on emulators and simulators

Lecture 19 Should you split media queries into their own files?

Lecture 20 Consolidate media queries or scatter them where it suits?

Lecture 21 Media Queries Level 5

Lecture 22 Container queries

Lecture 23 Summary

Section 4: Fluid Layout and Flexbox

Lecture 24 Fluid Layout and Flexbox - Introduction

Lecture 25 Converting a fixed pixel design to a fluid proportional layout

Lecture 26 Why do we need Flexbox?

Lecture 27 Flexbox Implementation

Lecture 28 Sticky Footer

Lecture 29 Visual Reordering

Lecture 30 Summary

Section 5: Layout with CSS Grid

Lecture 31 Layout with CSS Grid - Introduction

Lecture 32 Basic Grid syntax

Lecture 33 Refining our Grid System

Lecture 34 Placing and sizing Grid Layout items

Lecture 35 Named grid lines and grid-template-areas

Lecture 36 auto-fit and auto-fill

Lecture 37 Shorthand syntax

Lecture 38 Allowing nested elements to take part in the Grid

Lecture 39 Summary

Section 6: CSS Selectors, Typography and More

Lecture 40 CSS Selectors, Typography, and More

Lecture 41 Selectors, units, and capabilities

Lecture 42 CSS selectors - beyond the normal!

Lecture 43 CSS structural pseudo-classes

Lecture 44 nth-based selection in responsive web designs

Lecture 45 Combinator selectors – child, next sibling, and subsequent sibling

Lecture 46 Grouping selectors

Lecture 47 Responsive viewport-relative lengths

Lecture 48 Using @supports to fork CSS

Lecture 49 Web typography

Lecture 50 The @font-face CSS rule

Lecture 51 Variable fonts

Lecture 52 Summary

Section 7: CSS Color

Lecture 53 Introduction

Lecture 54 RGB Color Format

Lecture 55 Alpha Channel

Lecture 56 Color concepts and terminology

Lecture 57 Advanced Color Spaces

Lecture 58 Exploring Lab and LCH color

Lecture 59 OKLab & OKLCH

Lecture 60 Using color-mix() & color-contrast() functions

Lecture 61 Summary

Section 8: Stunning Aesthetics with CSS

Lecture 62 Introduction and Objectives

Lecture 63 Text Shadows and Box Shadows

Lecture 64 Background Gradients

Lecture 65 Conic Gradients, Repeating Gradients and Background Gradient Patterns

Lecture 66 Multiple Background Images

Lecture 67 CSS Filters

Lecture 68 CSS clip-path

Lecture 69 Mask-Image and Mix-Blend-Mode

Lecture 70 Summary

Section 9: Responsive Images

Lecture 71 Introduction to Responsive Images

Lecture 72 Modern Image Formats

Lecture 73 Syntax for Responsive Images

Lecture 74 Art direction with the picture element

Lecture 75 Summary

Section 10: SVG

Lecture 76 Introduction to SVG

Lecture 77 Understanding a basic SVG

Lecture 78 Elements and Attributes of SVG

Lecture 79 Creating SVGs

Lecture 80 Inserting SVGs into Webpages

Lecture 81 Reusing Graphical Objects from Symbols

Lecture 82 Re-coloring SVGs with CSS Custom Properties

Lecture 83 Reusing Graphical Objects from External Sources

Lecture 84 Coloring SVGs with mask-image

Lecture 85 Exploring SVG Insertion Methods

Lecture 86 SMIL Animation

Lecture 87 Styling SVGs

Lecture 88 Animating an SVG with CSS

Lecture 89 Animating SVG with jаvascript

Lecture 90 Using SVGs as Filters

Lecture 91 Understanding Media Queries within SVGs

Lecture 92 Optimizing SVGs

Lecture 93 Summary and Resources

Section 11: Transitions, Transformations and Animations

Lecture 94 Introduction to Transitions, Transformations, and Animations

Lecture 95 CSS Transitions and Their Properties

Lecture 96 Understanding Timing Functions for CSS Transitions

Lecture 97 CSS 2D Transforms

Lecture 98 Understanding the Transform-origin Property

Lecture 99 CSS 3D Transformations

Lecture 100 Learning about the Translate3D Property

Lecture 101 CSS Animations, Exercises, Training and Summary

Section 12: Custom Properties and CSS Functions

Lecture 102 Introduction to CSS Functions and Custom Properties

Lecture 103 Starting with CSS Custom Properties

Lecture 104 Switching Custom Properties with jаvascript

Lecture 105 Specificities of Custom Properties

Lecture 106 Exploring CSS Functions in Detail

Lecture 107 Looking at the min, max and clamp Functions of CSS

Lecture 108 Integrating Our Knowledge So Far

Lecture 109 Summary

Section 13: Forms

Lecture 110 Introduction to HTML5 Forms

Lecture 111 Understanding the Components of HTML5 Forms

Lecture 112 Exploring attributes like 'required' and 'autofocus'

Lecture 113 Learning about the autocomplete and list attribute

Lecture 114 HTML5 Input Types

Lecture 115 Understanding the Date and Time Inputs

Lecture 116 Styling HTML5 Forms with CSS

Lecture 117 Indicating Required Fields

Lecture 118 Styling Input Carets and Background Fills with CSS

Lecture 119 Summary

Section 14: Cutting Edge CSS Features

Lecture 120 Introduction to CSS Features and Cascade Layers

Lecture 121 Mastering Cascade Layers for Improved Style Management

Lecture 122 Learning about CSS Nesting

Lecture 123 Simplifying CSS with Nested Selectors and Media Queries

Lecture 124 Summary

Section 15: More learning Techniques and Parting Advice

Lecture 125 Tips and Techniques - Introduction

Lecture 126 Truncating Text in CSS

Lecture 127 Scrolling Panels and Custom Scrollbars

Lecture 128 CSS Scroll Snap

Lecture 129 Smooth Scrolling with CSS scroll-behavior

Lecture 130 Important Parting Advice

Lecture 131 Setting Browser Support Levels

Lecture 132 CSS Frameworks and Linting

Lecture 133 Exploring Performance and Performance Tools

Lecture 134 What's the Next Big Thing?

Lecture 135 Summary

This course is designed for web developers and designers with a basic understanding of HTML and CSS who want to deepen their knowledge of responsive web design.