reorder CSS layout test your skills for consistency

[chrisdavidmills]

Description

I got some feedback that the ordering of the "Test your skills" articles has become confusing since the last update. Specifically, in some of the tests, the "solution" live sample appears before the "starting state" live sample, so it is unclear which one to click on to start the test.

To remedy this, I have decided to go through all the "Test your skills" articles and make the structure as consistent as possible throughout, fixing the above issue in the process.

This PR in particular updates the structure of the CSS layout "Test your skills" articles.

Note: Not all of the tests show the finished state of the example. I have elected not to show it in cases where the before and after rendering look no different, where the final rendering gives away the answer, and where the question is freeform so there is no single answer.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs (4 pages)

• /en-US/docs/Learn_web_development/Core/CSS_layout/Test_your_skills/Flexbox
• /en-US/docs/Learn_web_development/Core/CSS_layout/Test_your_skills/Floats
• /en-US/docs/Learn_web_development/Core/CSS_layout/Test_your_skills/Grid
• /en-US/docs/Learn_web_development/Core/CSS_layout/Test_your_skills/Position

Flaws (4)

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Learn_web_development/Core/CSS_layout/Test_your_skills/Flexbox
Title: Test your skills: Flexbox
Flaw count: 1

• macros:
  • Macro ? produces link /en-US/curriculum/ which doesn't resolve

---

URL: /en-US/docs/Learn_web_development/Core/CSS_layout/Test_your_skills/Floats
Title: Test your skills: Floats
Flaw count: 1

• macros:
  • Macro ? produces link /en-US/curriculum/ which doesn't resolve

---

URL: /en-US/docs/Learn_web_development/Core/CSS_layout/Test_your_skills/Grid
Title: Test your skills: CSS grids
Flaw count: 1

• macros:
  • Macro ? produces link /en-US/curriculum/ which doesn't resolve

---

URL: /en-US/docs/Learn_web_development/Core/CSS_layout/Test_your_skills/Position
Title: Test your skills: Positioning
Flaw count: 1

• macros:
  • Macro ? produces link /en-US/curriculum/ which doesn't resolve

(comment last updated: 2026-01-30 14:09:48)

[dipikabh]

Thanks @chrisdavidmills.
That's a good strategy to avoid confusion and makes better sense - adding the starting point rendering before the expected output. I have a small suggestion to reorder the frames within the starting blocks: show the rendered iframe first and then the corresponding code snippets.
I've also left a few small edits in nearby text.

Leaving a +1