CSS Examples & Practice
CSS Study Plan
A plan beats motivation. This five-week schedule turns the CSS syllabus into a realistic routine of roughly one focused hour a day. Each week has a theme, daily practice, and a concrete goal you can check off. Adjust the pace to your own time — the order matters more than the speed.
Before you start
- You should know basic HTML — tags, attributes and document structure.
- Keep the live editor open the whole time; type every example yourself.
- End each week by building a small project that uses that week's topics.
The five-week plan
| Week | Topics | Daily practice | Goal |
|---|---|---|---|
| 1 | Foundations & selectors: syntax, adding CSS, cascade, type/class/id, pseudo-classes | Style a plain HTML page: colors, fonts, links and hover states | Confidently target and style any element |
| 2 | Box model & text: padding, border, margin, box-sizing, colors, units, backgrounds | Rebuild a card and a button; experiment with spacing and borders | Build clean, well-spaced components |
| 3 | Flexbox: containers, justify-content, align-items, direction, wrap, gap | Build a navbar, a centered hero, and a row of cards with flexbox | Lay out any one-dimensional design with flexbox |
| 4 | Grid & responsive: grid templates, areas, media queries, mobile-first, clamp() | Build a responsive gallery and a two-column layout that stacks on mobile | Create layouts that adapt to any screen size |
| 5 | Advanced & project: transitions, transforms, animations, variables, intro to SASS | Add hover and loading animations; refactor with custom properties | Ship a complete, polished multi-section page |
Weekly detail
Week 1 — Get comfortable
Learn how CSS attaches to HTML and how selectors work. By the weekend you should be able to change the look of any element on a page without guessing.
Week 2 — Master spacing
The box model is where most beginners struggle. Spend real time on padding versus margin and on box-sizing: border-box. Good spacing is what makes a page look professional.
Week 3 — Learn flexbox properly
Flexbox handles the majority of everyday layouts: navbars, toolbars, centered content and card rows. Practise until justify-content and align-items feel automatic.
Week 4 — Add grid and go responsive
Grid gives you two-dimensional control. Combine it with media queries and relative units so your designs work on phones, tablets and desktops.
Week 5 — Polish and build
Bring it together with transitions and animations, tidy your code with custom properties, and build one complete project you are proud to show. Try the CSS Code Challenges this week.
Consistency beats intensity. Thirty focused minutes every day will teach you more than a single long session once a week.
After the five weeks
- Complete the CSS Exercises and Code Challenges to reinforce everything.
- Take the CSS Quiz to find weak spots, then revisit those syllabus modules.
- Build two or three portfolio pieces and read the CSS Interview Prep page.
- Explore SASS to keep larger stylesheets organised as your projects grow.