Modern CSS Techniques without JavaScript

Course details

In this course, learn CSS-only techniques for creating accordion panels, modal windows and hamburger menus, and light/dark color schemes. Currently these techniques all involve some level of JavaScript. However, with improved HTML elements, CSS properties, and browser support, these techniques no longer require JavaScript. Join instructor Jen Kramer in this course to get up to date with these latest cutting-edge techniques.

Learning objectives
Complete many techniques that are typically completed with JavaScript.
Create and implement accordion panels.
Create and implement modal windows.
Create and implement hamburger menus.
Create and implement light/dark color schemes using only HTML and CSS.

Concepts

Introduction

The changing world of UI and CSS
Working with CodePen

Creating Accordions without JavaScript

Introducing details and summary
Creating an accordion that's initially open
Creating an integrated series of accordions using the name attribute
Styling the accordions
Changing the arrow with - - marker
Challenge - Changing the - - marker between open and closed states
Solution - Changing the - - marker between open and closed states
Animating the marker
Animating the details panel

Creating Modal Windows without JavaScript

Setting up the initial modal window markup and styling the button
Adding the popover and popovertarget attributes and styling the modal window
Configuring the close button in the popover
Animating the modal window and background

Creating Light Dark Color Schemes without JavaScript

What are light dark color schemes
Setting up a color scheme with color-scheme
Working with the CSS light-dark() function
Switching from one color scheme to another without JavaScript
Switching images to match color schemes with picture
Challenge - Light dark color schemes with SVGs
Solution - Light dark color schemes with SVGs

Capstone - Apply What You've Learned

Create a page with accordions, modal windows, and a light dark color scheme
Jen's solution

Conclusion

Next steps