YoVDO

Modern CSS Solutions

Offered By: Independent

Tags

HTML & CSS Courses Computer Science Courses User Experience Courses Web Design Courses Accessibility Courses Responsive Design Courses CSS Grid Courses

Course Description

Overview

Explore a comprehensive series of modern CSS solutions covering a wide range of topics, from intrinsic web design and accessibility improvements to advanced selectors and pure CSS techniques. Learn practical applications of CSS math functions, future-proofing styles, and creating custom form elements. Discover how to implement responsive layouts using CSS Grid and Flexbox, style buttons and icons effectively, and create fluid typography. Gain insights into centering techniques, dropdown navigation menus, image galleries, and list styling. Master the art of keeping footers at the bottom and creating equal-height elements using both Flexbox and Grid approaches.

Syllabus

  • Contextual Spacing For Intrinsic Web Design
  • Practical Uses of CSS Math Functions: calc, clamp, min, max
  • Modern CSS Upgrades To Improve Accessibility
  • Developing For Imperfect: Future Proofing CSS Styles
  • Guide to Advanced CSS Selectors - Part Two
  • Guide to Advanced CSS Selectors - Part One
  • The 3 CSS Methods for Adding Element Borders
  • Pure CSS Shapes 3 Ways
  • Custom CSS Styles for Form Inputs and Textareas
  • Custom Select Styles with Pure CSS
  • Pure CSS Custom Checkbox Style
  • Pure CSS Custom Styled Radio Buttons
  • Announcing Style Stage: A Community CSS Showcase
  • 3 Popular Website Heroes Created With CSS Grid Layout
  • 3 CSS Grid Techniques to Make You a Grid Convert
  • Expanded Use of `box-shadow` and `border-radius`
  • Container Query Solutions with CSS Grid and Flexbox
  • Generating `font-size` CSS Rules and Creating a Fluid Type Scale
  • Resource: The Complete Guide to Centering in CSS
  • Icon Button CSS Styling Guide
  • CSS Button Styling Guide
  • Solutions to Replace the 12-Column Grid
  • CSS-Only Accessible Dropdown Navigation Menu
  • Responsive Image Gallery With Animated Captions
  • Totally Custom List Styles
  • Pure CSS Smooth-Scroll "Back to Top "
  • CSS-Only Full-Width Responsive Images 2 Ways
  • Equal Height Elements: Flexbox vs. Grid
  • Keep the Footer at the Bottom: Flexbox vs. Grid

 


Taught by

Stephanie Eckles

Related Courses

User Experience for the Web
Open2Study
Writing for the Web
Open2Study
Web-Engineering I: Grundlagen der Web-Entwicklung
iversity
Human-Computer Interaction Design
University of California, San Diego via Coursera
Ruby مدخل إلى برمجة مواقع الإنترنت باستخدام لغة
Rwaq (رواق)