Modern CSS Techniques without JavaScript
1h 41mAdvanced2025-04-29
Authors
Jen Kramer
Teaches web design and development
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.
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.
Skills covered
Web StandardsWeb DesignAdvancedFront-End Web DevelopmentWeb DevelopmentProgramming LanguagesSoftware Development
Concepts
0. Introduction
- 01 - The changing world of UI and CSS
- 02 - Working with CodePen
1. Creating Accordions without JavaScript
- 03 - Introducing details and summary
- 04 - Creating an accordion that's initially open
- 05 - Creating an integrated series of accordions using the name attribute
- 06 - Styling the accordions
- 07 - Changing the arrow with - - marker
- 08 - Challenge - Changing the - - marker between open and closed states
- 09 - Solution - Changing the - - marker between open and closed states
- 10 - Animating the marker
- 11 - Animating the details panel
2. Creating Modal Windows without JavaScript
- 12 - Setting up the initial modal window markup and styling the button
- 13 - Adding the popover and popovertarget attributes and styling the modal window
- 14 - Configuring the close button in the popover
- 15 - Animating the modal window and background
3. Creating Light Dark Color Schemes without JavaScript
- 16 - What are light dark color schemes
- 17 - Setting up a color scheme with color-scheme
- 18 - Working with the CSS light-dark() function
- 19 - Switching from one color scheme to another without JavaScript
- 20 - Switching images to match color schemes with picture
- 21 - Challenge - Light dark color schemes with SVGs
- 22 - Solution - Light dark color schemes with SVGs
4. Capstone - Apply What You've Learned
- 23 - Create a page with accordions, modal windows, and a light dark color scheme
- 24 - Jen's solution
Conclusion
- 25 - Next steps