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.
Overview
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
