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

[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

[dipikabh]

how about:

Suggested change

	The finished task should look like this:
	When the task is complete, the items should look like this:

[dipikabh]

As an exception to the order we usually follow on other content pages, in the test your skills sections, should we have the resultant frame of the starting point first with "The starting point of this task looks like this:" followed by the HTML and CSS snippets with something like "Here's the underlying code for this starting point:"

[dipikabh]

Suggested change

	The starting point of the task looks like this:
	The starting point of this task looks like this:

[dipikabh]

Similar edits and ordering suggestion for this one

[dipikabh]

Suggested change

	In this task, the list items are all different sizes, but we want them to be displayed as three equal-sized columns, no matter what content is in each item.
	In this task, the list items are all different sizes, but we want them to be displayed as three equal-sized columns, no matter the content in each item.

[dipikabh]

Suggested change

	In this task, you will need to use both grid layout and flexbox to recreate the finished layout. The gap between the column and row tracks should be 10px. You do not need to make any changes to the HTML in order to achieve this.
	In this task, you will need to use both grid layout and flexbox to recreate the finished layout. The gap between the column and row tracks should be `10px`. You do not need to make any changes to the HTML in order to achieve this.

[dipikabh]

Suggested change

	**Bonus question:** Can you change the target to display underneath the text?
	**Bonus question:** Can you change the target so it displays underneath the text?

[dipikabh]

Suggested change

	To complete this task, position the item with a class of `target` to the top and right of the container, which has the 5px grey border.
	To complete this task, position the element with the `target` class at the top-right corner of the container that has a `5px` gray border.

[dipikabh]

Suggested change

	The finished task should look like this:
	When you complete this task, the placement of the target should look like this:

[dipikabh]

Suggested change

	The finished task should look like this:
	The finished layout should look like this: