A friendly, fork-it-and-play starter project for people learning HTML and CSS.
No frameworks, no build tools, no setup. Just an index.html and a style.css you can open in a browser and start breaking immediately.
A single page with a small gallery of components (buttons, cards, a nav bar, that kind of thing). Each one is a self-contained example: some HTML, some CSS, done. The idea is you fork it, add a component you built or learned, and open a pull request. Over time this turns into a gallery of stuff beginners actually made, not stuff a tutorial made for them.
Nobody's PR gets rejected for being "too simple." A nicely centered box counts. A button with a hover effect counts. If you learned something making it, it belongs here.
You don't need to install anything.
- Fork this repo.
- Clone your fork:
git clone https://github.com/YOUR-USERNAME/css-playground.git
- Open
index.htmlin your browser (just double-click it, or use a tool like VS Code's Live Server extension if you want auto-reload). - Open
css/style.cssandindex.htmlside by side in your editor. Change something. Save. Refresh the browser. See what happened.
That loop, change, save, refresh, is most of what learning CSS actually is.
See CONTRIBUTING.md for the full walkthrough. Short version: copy the pattern of an existing component, make your own version, add it to the gallery, open a PR.
Most starter templates are built to be used, not touched. This one is built to be edited by people who are still figuring out what a CSS selector even is. If you're past that point, contributing here is still useful, explaining something well to a beginner is one of the fastest ways to actually understand it yourself.
MIT. Do whatever you want with it.