Responsive Web Design Certification Table of Contents


Table of Contents
 


The Fundamentals of Responsive Web Design

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

Writing HTML Markup

  • 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

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

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

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

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

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

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

Responsive Images

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

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

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

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

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

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

Advanced Techniques

  • 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

Apply for Certification

https://www.vskills.in/certification/responsive-web-design-certification-course

 For Support