Course Highlights
  • Government certification
  • Certification valid for life
  • Lifelong e-learning access
  • Learning Hours: 15+ hrs
  • Life Time Job Support
  • Job Profile Tagging
Skills you will learn!
Curriculum

4 Topics
Introduction
Browser support tooling and code samples
Understanding Responsive Web Design
Enter media queries

9 Topics
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

7 Topics
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
Container queries

6 Topics
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

8 Topics
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

12 Topics
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

8 Topics
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

8 Topics
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

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

17 Topics
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

8 Topics
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

7 Topics
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

9 Topics
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

4 Topics
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

8 Topics
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

  Write a Review

Certificate in Responsive Web Design

Go to Paid Course