Rullst AcademyRullst Academy/Learning paths
← Back to the catalog
Foundations · COMPLETE PATH AVAILABLE

CSS and interface design

Turn a page into a readable interface: selectors, boxes, colors, Flexbox, Grid and evidence-based adaptation.

12 lessons~162 min600 XP
Start this track

Try the first lesson without an account. Sign in to save your achievements.

What you will discover

  • Explain selectors, cascade, units and the box model.
  • Build flexible layouts with Flexbox, Grid and media queries.
  • Review contrast, focus and motion with tests and clear limits.

Is this track for you?

For learners familiar with basic HTML structure. Semantic HTML and accessibility is recommended preparation, not a mandatory gate. Use the preview on phones and test the local file on a computer.

The time is an estimate, not a deadline. Take breaks, use hints and try again whenever you need.

How can I tell what I learned?

Use the objectives and challenge below for reflection or a conversation with someone who can help. This is guided self-assessment: it sends no answers, awards no XP and does not automatically verify independence.

In Foundations, change an example, predict results, check a normal case and an error case, and explain your choices. If you need help, identify what to practice again.

Your transfer challenge

Deliver three justified changes and a before/after test detecting a real issue. Fill REVIEW.md with evidence and pending work.

Keep evidence: prediction, attempt, result, an original change and what you still cannot explain. Seek feedback when possible; if studying alone, return later without copying and compare attempts.

Try again another time

After a break, explain the idea without opening the solution and try a different example. Compare with your first attempt: what can you do independently, and where do you need a hint? You may write, speak or draw; choose a way to check the same idea. Record help received, including AI, and revisit the part you need. There is no universal deadline or extra XP for this record.

Completions and XP record Rullst Academy assessments. An introductory track can help everyday life and prepare further study; alone it does not prove complete mastery or professional readiness. Level indicates depth, not age.

At your own pace

Your path, step by step

One idea at a time: understand, experiment and check your prediction.

0 / 12
  1. 01Shape without losing meaning10 min · 50 XPYour next discovery
  2. 02Select without changing everything12 min · 50 XPUp ahead
  3. 03When two rules disagree14 min · 50 XPUp ahead
  4. 04Every element occupies a box14 min · 50 XPUp ahead
  5. 05Measurements that support reading14 min · 50 XPUp ahead
  6. 06Color that communicates and stays readable14 min · 50 XPUp ahead
  7. 07Flexbox: distribute in one direction14 min · 50 XPUp ahead
  8. 08Grid: relationships in two dimensions14 min · 50 XPUp ahead
  9. 09Responsive design led by content14 min · 50 XPUp ahead
  10. 10Show where interaction is12 min · 50 XPUp ahead
  11. 11Motion with choice12 min · 50 XPUp ahead
  12. 12Mission: an interface that adapts18 min · 50 XPUp ahead

Rullstpetbot

AI can make mistakes. Check the lesson material.