Responsive Web Design With Html5 And Css

[xodynu]

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

Bitte Anmelden oder Registrieren um Code Inhalt zu sehen!

 

[0dayddl]

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.

NitroFlare
DDownload

Bitte Anmelden oder Registrieren um Code Inhalt zu sehen!

RapidGator

Bitte Anmelden oder Registrieren um Code Inhalt zu sehen!

FileStore
TurboBit

Bitte Anmelden oder Registrieren um Code Inhalt zu sehen!