Build a CSS-only accordion without JavaScript
Create a native HTML accordion with single-open or independent panels, keyboard controls and progressive CSS transitions.
Build something useful.
Three practical tutorials connect semantic HTML, CSS classes and the decisions behind each component.
Build a responsive CSS header with a native menu
Create a logo, navigation links and call-to-action header that becomes a keyboard-operated native menu in a narrow container.
Build a responsive CSS card grid with design tokens
Combine CSS grid utilities, semantic cards and theme tokens to build a responsive service section without component JavaScript.
Before you start
Download and load StyloftCSS, then open a tutorial and copy the working HTML. The examples use native controls and CSS; the editable documentation playground is a separate website feature.