Responsive Web Design with HTML5 and CSS

Name: Responsive Web Design with HTML5 and CSS
Rating: 4.8 (19 reviews)

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

Created byPackt Publishing

Last updated 10/2024

English

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

Course content

15 sections • 135 lectures • 16h 38m total length

Introduction1:33
In this video, you will be introduced to the fundamental concepts of responsive web design.
Browser support, tooling and code samples6:21
In this video, we explore browser support for responsive design, the essential tools, and provide practical code samples
Understanding Responsive Web Design9:48
In this video, you will gain a comprehensive understanding of the principles and practices of responsive web design.
Enter media queries5:52
In this video, we delve into the role of media queries in creating responsive web designs.
Summary2:42
In this video, we summarize the key points covered in this section on responsive web design fundamentals.

Writing HTML Markup2:41
In this video, you will learn the basics of writing clean and semantic HTML markup.
Starting HTML pages correctly12:09
In this video, we cover the essential steps to correctly start an HTML page.
New semantic elements in HTML512:17
In this video, you will discover the new semantic elements introduced in HTML5 and their usage.
HTML grouping elements7:58
In this video, we explore various HTML grouping elements and their importance in structuring content.
HTML text-level semantics8:50
In this video, we delve into text-level semantics in HTML and how they enhance accessibility and SEO.
Using HTML5 elements3:45
In this video, you will learn how to effectively use HTML5 elements in your web projects.
WCAG accessibility conformance and WAI-ARIA for more accessible web applications6:23
In this video, we discuss WCAG accessibility guidelines and WAI-ARIA roles to create more accessible web applications.
Embedding media in HTML514:49
In this video, you will learn how to embed various types of media in HTML5.
The element8:29
In this video, we explore the element and its use cases in web development.
Summary and homework2:09
In this video, we summarize the key takeaways from this section and provide some homework to reinforce your learning.

Media Queries and Container Queries3:47
In this video, we introduce media queries and container queries, essential tools for responsive design.
The meta tag and Media Queries19:40
In this video, you will learn about the meta tag and how it works with media queries.
Testing responsive designs on emulators and simulators4:16
In this video, we cover how to test responsive designs using emulators and simulators.
Should you split media queries into their own files?3:09
In this video, we discuss whether splitting media queries into separate files is beneficial.
Consolidate media queries or scatter them where it suits?5:30
In this video, we debate the pros and cons of consolidating media queries versus scattering them within stylesheets.
Media Queries Level 511:34
In this video, we explore the new features and capabilities of Media Queries Level 5.
Container queries13:42
In this video, you will learn about container queries and how they differ from media queries.
Summary1:50
In this video, we summarize the key points covered in this section on media and container queries.

Fluid Layout and Flexbox - Introduction2:01
In this video, you will be introduced to fluid layouts and the Flexbox layout model.
Converting a fixed pixel design to a fluid proportional layout11:44
In this video, we demonstrate how to convert a fixed pixel design into a fluid proportional layout.
Why do we need Flexbox?2:14
In this video, we discuss the importance of Flexbox in modern web design.
Flexbox Implementation14:16
In this video, you will learn how to implement Flexbox in your web projects.
Sticky Footer2:40
In this video, we cover how to create a sticky footer using Flexbox.
Visual Reordering9:20
In this video, you will learn about visual reordering using Flexbox properties.
Summary1:46
In this video, we summarize the key takeaways from this section on fluid layouts and Flexbox.

Layout with CSS Grid - Introduction2:28
In this video, you will be introduced to CSS Grid, a powerful layout system.
Basic Grid syntax11:33
In this video, we cover the basic syntax and structure of CSS Grid.
Refining our Grid System9:22
In this video, you will learn how to refine and optimize your grid system.
Placing and sizing Grid Layout items9:11
In this video, we demonstrate how to place and size items within a CSS Grid layout.
Named grid lines and grid-template-areas11:46
In this video, we explore the use of named grid lines and the grid-template-areas property.
auto-fit and auto-fill6:01
In this video, you will learn about the auto-fit and auto-fill properties in CSS Grid.
Shorthand syntax13:43
In this video, we cover the shorthand syntax for CSS Grid properties.
Allowing nested elements to take part in the Grid8:53
In this video, you will learn how to allow nested elements to participate in the CSS Grid layout.
Summary3:54
In this video, we summarize the key points covered in this section on CSS Grid.

CSS Selectors, Typography, and More2:56
In this video, you will be introduced to advanced CSS selectors and typography techniques.
Selectors, units, and capabilities6:10
In this video, we explore various CSS selectors, units, and their capabilities.
CSS selectors - beyond the normal!11:49
In this video, you will learn about advanced CSS selectors that go beyond the basics.
CSS structural pseudo-classes13:57
In this video, we delve into structural pseudo-classes in CSS and their applications.
nth-based selection in responsive web designs8:14
In this video, you will learn about nth-based selection and its use in responsive web designs.
Combinator selectors – child, next sibling, and subsequent sibling10:27
In this video, we cover combinator selectors and their importance in CSS.
Grouping selectors14:04
In this video, you will learn how to use grouping selectors to streamline your CSS code.
Responsive viewport-relative lengths7:57
In this video, we explore viewport-relative lengths and their role in responsive design.
Using @supports to fork CSS9:20
In this video, you will learn how to use the @supports rule to create conditional CSS.
Web typography5:09
In this video, we discuss web typography and techniques for better text rendering.
The @font-face CSS rule26:04
In this video, you will learn about the @font-face rule and how to use custom fonts in your projects.
Variable fonts13:52
In this video, we explore variable fonts and their advantages in web design.
Summary1:04
In this video, we summarize the key takeaways from this section on CSS selectors and typography.

Introduction2:04
In this video, you will be introduced to the basics of working with color in CSS.
RGB Color Format7:14
In this video, we explore the RGB color format and its applications.
Alpha Channel6:50
In this video, you will learn about the alpha channel and how to implement transparency in CSS.
Color concepts and terminology6:41
In this video, we cover essential color concepts and terminology used in web design.
Advanced Color Spaces6:02
In this video, you will learn about advanced color spaces and their uses.
Exploring Lab and LCH color7:06
In this video, we explore Lab and LCH color spaces and their benefits.
OKLab & OKLCH12:49
In this video, you will learn about OKLab and OKLCH color models and their applications.
Using color-mix() & color-contrast() functions9:45
In this video, we demonstrate how to use the color-mix() and color-contrast() functions in CSS.
Summary1:43
In this video, we summarize the key points covered in this section on CSS color.

Introduction and Objectives1:40
In this video, you will be introduced to techniques for creating stunning aesthetics with CSS.
Text Shadows and Box Shadows10:58
In this video, we explore the use of text shadows and box shadows to enhance visual appeal.
Background Gradients16:12
In this video, you will learn how to create and apply background gradients in CSS.
Conic Gradients, Repeating Gradients and Background Gradient Patterns11:50
In this video, we delve into conic gradients, repeating gradients, and background gradient patterns.
Multiple Background Images11:49
In this video, you will learn how to use multiple background images to create complex designs.
CSS Filters14:17
In this video, we cover CSS filters and their applications for creating visual effects.
CSS clip-path9:43
In this video, you will learn about the CSS clip-path property and how to create custom shapes.
Mask-Image and Mix-Blend-Mode9:32
In this video, we explore the mask-image and mix-blend-mode properties for advanced visual effects.
Summary1:29
In this video, we summarize the key takeaways from this section on creating stunning aesthetics with CSS.

Introduction to Responsive Images4:12
In this video, you will be introduced to the concept of responsive images and their importance.
Modern Image Formats11:25
In this video, we explore modern image formats and their advantages for responsive design.
Syntax for Responsive Images9:59
In this video, you will learn the syntax for implementing responsive images in your projects.
Art direction with the picture element5:57
In this video, we discuss how to use the picture element for art direction in responsive designs.
Summary1:33
In this video, we summarize the key points covered in this section on responsive images.

Introduction to SVG5:10
In this video, you will be introduced to Scalable Vector Graphics (SVG) and their benefits.
Understanding a basic SVG5:32
In this video, we cover the basics of understanding and creating SVG files.
Elements and Attributes of SVG10:51
In this video, you will learn about the various elements and attributes used in SVG.
Creating SVGs6:09
In this video, we demonstrate how to create your own SVG graphics.
Inserting SVGs into Webpages9:07
In this video, you will learn how to insert SVGs into your web pages.
Reusing Graphical Objects from Symbols8:05
In this video, we explore how to reuse graphical objects from SVG symbols.
Re-coloring SVGs with CSS Custom Properties6:06
In this video, you will learn how to re-color SVGs using CSS custom properties.
Reusing Graphical Objects from External Sources4:41
In this video, we discuss how to reuse graphical objects from external SVG sources.
Coloring SVGs with mask-image4:34
In this video, you will learn how to color SVGs using the mask-image property.
Exploring SVG Insertion Methods4:23
In this video, we cover various methods for inserting SVGs into web projects.
SMIL Animation7:07
In this video, you will learn about SMIL animation and how to apply it to SVGs.
Styling SVGs5:25
In this video, we demonstrate how to style SVGs with CSS.
Animating an SVG with CSS3:42
In this video, you will learn how to animate SVGs using CSS.
Animating SVG with JavaScript10:31
In this video, we explore how to animate SVGs with JavaScript.
Using SVGs as Filters3:07
In this video, you will learn how to use SVGs as filters for other graphics.
Understanding Media Queries within SVGs2:51
In this video, we discuss how to apply media queries within SVG files.
Optimizing SVGs4:15
In this video, you will learn techniques for optimizing SVG files for performance.
Summary and Resources2:30
In this video, we summarize the key points covered in this section on SVG and provide additional resources for further learning.

Requirements

Prior experience with basic web development is recommended.

Description

If you’re tired of static websites that just don’t perform, this course is pathway to creating fast, accessible, and visually striking websites that convert visitors into loyal users. The course is led by Ben Frain and is based on his bestselling book Responsive Web Design with HTML5 and CSS, 4th Edition!

In this course, you'll start by exploring the fundamentals of responsive design, understanding browser support. 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.

The final sections will take you through transitions, transformations, and animations, along with cutting-edge CSS features like custom properties and CSS functions along with practical techniques for HTML5 forms, advanced CSS capabilities, and performance optimization.

By the end of the course, you’ll have the skills to build websites that are fast, efficient and adaptive to any device.

About the Author

Ben 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.

Who this course is for:

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.

Responsive Web Design with HTML5 and CSS

What you'll learn

Explore related topics

Course content

The Fundamentals of Responsive Web Design5 lectures • 26min

Writing HTML Markup10 lectures • 1hr 20min

Media Queries and Container Queries8 lectures • 1hr 3min

Fluid Layout and Flexbox7 lectures • 44min

Layout with CSS Grid9 lectures • 1hr 17min

CSS Selectors, Typography and More13 lectures • 2hr 11min

CSS Color9 lectures • 1hr

Stunning Aesthetics with CSS9 lectures • 1hr 28min

Responsive Images5 lectures • 33min

SVG18 lectures • 1hr 44min

Requirements

Description

Who this course is for: