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