Responsive Web Design With Html5 And Css
Published 10/2024
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 12.96 GB | Duration: 16h 37m
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 JavaScript
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 JavaScript
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.
Screenshot
Code:
Bitte
Anmelden
oder
Registrieren
um Code Inhalt zu sehen!