Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 12 / 12

Mission: an interface that adapts

Your styling choices now need evidence of readability and usability.

Learning paths18 min

Let's discover together

  1. 1

    The kit contains a complete index.html, README and REVIEW.md. Customize the CSS block: palette, card spacing and breakpoint. Preserve headings, navigation and content. HTML edits can be made and tested in the local file.

  2. 2

    Predict and change one variable at a time. If a rule fails, check selector, syntax, condition and cascade. For example, color:red works but colr:red is an ignored unknown property; the workshop is not a complete syntax validator.

  3. 3

    Record narrow, intermediate and wide widths, long text, keyboard, focus, contrast and reduced motion. The preview offers specific measurements; none certifies complete accessibility. Record untested areas, including screen readers.

  4. 4

    Download the edited HTML separately and replace index.html in the kit. The ZIP remains the starter template. GitHub sends one file per operation after review and confirmation; it does not enable Pages. JavaScript and interaction is already available as a next step.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Deliver a responsive page and a review of decisions, tests and limitations.

Now it's your turn

Discovery workshop

Predict, change, compare

You changed gap and concluded it improved. You saw only a wide screenshot, without keyboard or enlarged text.
Build your answers and check when you are ready.
A moment to understand

Which conclusion is more honest?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

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.

Take it with you

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

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.