Make Test your skills pages consistent #15579

glmvc · 2022-05-01T10:38:36Z

Summary

made "Test your skills!" pages of the Learn/HTML and Learn/CSS modules more consistent:

add tags where they where missing / incomplete
add missing sidebar in the background and borders skill test
adapt introduction sentences
adapt note box (under the introduction sentences) - the "However" part.
adapt headings to fit the articles title and use numbers instead of written out numbers (i thought this is easier to read and also in the discourse forum easier and clearer to handle)
adapt "Assessment or further help" sections to be uniform
adapt the code example (interactive editor) sentences and "boxes"

Motivation

to keep things consistent - i have done this "consistency changes" now a few times in prs and it was always appreciated.

i made a few decisions based on how most test your skills pages (including the ones for Learn/JavaScript...) were structured and written (e.g. the boxes below the interactive editros were written most of the time in the "shorter way", but not for the Learn/CSS part)

Metadata

Adds a new document
Rewrites (or significantly expands) a document
Fixes a typo, bug, or other error

github-actions · 2022-05-01T10:41:14Z

Preview URLs

Flaws

Note! 21 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
Title: Multiple-column layout
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/CSS/CSS_layout/Grids
Title: Grids
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/CSS/CSS_layout/Media_queries
Title: Beginner's guide to media queries
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/CSS/Building_blocks/Values_and_units
Title: CSS values and units
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions
Title: Handling different text directions
on GitHub
Flaw count: 2

macros:
- /en-US/docs/Web/HTML/Element/h2 redirects to /en-US/docs/Web/HTML/Element/Heading_Elements
broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements
Title: Images, media, and form elements
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/CSS/Building_blocks/The_box_model
Title: The box model
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders
Title: Backgrounds and borders
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
Title: HTML text fundamentals
on GitHub
Flaw count: 8

macros:
- /en-US/docs/Web/HTML/Element/h1 redirects to /en-US/docs/Web/HTML/Element/Heading_Elements
- /en-US/docs/Web/HTML/Element/h2 redirects to /en-US/docs/Web/HTML/Element/Heading_Elements
- /en-US/docs/Web/HTML/Element/h3 redirects to /en-US/docs/Web/HTML/Element/Heading_Elements
- /en-US/docs/Web/HTML/Element/h4 redirects to /en-US/docs/Web/HTML/Element/Heading_Elements
- /en-US/docs/Web/HTML/Element/h5 redirects to /en-US/docs/Web/HTML/Element/Heading_Elements
- and 2 more flaws omitted
broken_links:
- Link points to the page it's already on

External URLs

URL: /en-US/docs/Learn/CSS/CSS_layout/Grid_skills
Title: Test your skills: Grid
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
Title: Multiple-column layout
on GitHub

No new external URLs

URL: /en-US/docs/Learn/CSS/CSS_layout/Floats_skills
Title: Test your skills: Floats
on GitHub

No new external URLs

URL: /en-US/docs/Learn/CSS/CSS_layout/Position_skills
Title: Test your skills: Positioning
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/CSS_layout/rwd_skills
Title: Test your skills: Responsive web design and media queries
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://firefox-source-docs.mozilla.org/devtools-user/index.html (1 time) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/CSS_layout/Grids
Title: Grids
on GitHub

No new external URLs

URL: /en-US/docs/Learn/CSS/CSS_layout/Multicol_skills
Title: Test your skills: Multicol
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills
Title: Test your skills: Flexbox
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/CSS_layout/Media_queries
Title: Beginner's guide to media queries
on GitHub

No new external URLs

URL: /en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks
Title: Test your skills: Writing modes and logical properties
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/Building_blocks/Box_Model_Tasks
Title: Test your skills: The box model
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks
Title: Test your skills: Overflow
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks
Title: Test your skills: The Cascade
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/Building_blocks/Tables_tasks
Title: Test your skills: Tables
on GitHub

https://alistapart.com/article/web-typography-tables/ (1 time) (Note! This may be a new URL 👀)
https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/Building_blocks/Values_and_units
Title: CSS values and units
on GitHub

No new external URLs

URL: /en-US/docs/Learn/CSS/Building_blocks/Values_tasks
Title: Test your skills: Values and units
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://convertingcolors.com/hex-color-86DEFA.html (1 time) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions
Title: Handling different text directions
on GitHub

No new external URLs

URL: /en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements
Title: Images, media, and form elements
on GitHub

No new external URLs

URL: /en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders
Title: Test your skills: Backgrounds and borders
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://discourse.mozilla.org/c/mdn/learn/250 (1 time) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/Building_blocks/The_box_model
Title: The box model
on GitHub

No new external URLs

URL: /en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
Title: Test your skills: Selectors
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/Building_blocks/Sizing_tasks
Title: Test your skills: Sizing
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders
Title: Backgrounds and borders
on GitHub

No new external URLs

URL: /en-US/docs/Learn/CSS/Building_blocks/Images_tasks
Title: Test your skills: Images and form elements
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding
Title: Test your skills: Multimedia and embedding
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images
Title: Test your skills: HTML images
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text
Title: Test your skills: Advanced HTML text
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics
Title: Test your skills: HTML text basics
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
Title: HTML text fundamentals
on GitHub

No new external URLs

URL: /en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links
Title: Test your skills: Links
on GitHub

https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

(this comment was updated 2022-06-03 17:31:27.128754)

files/en-us/learn/css/building_blocks/overflow_tasks/index.md

space

files/en-us/learn/css/building_blocks/overflow_tasks/index.md

files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md

files/en-us/learn/css/building_blocks/sizing_tasks/index.md

files/en-us/learn/css/building_blocks/tables_tasks/index.md

files/en-us/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md

files/en-us/learn/css/building_blocks/values_tasks/index.md

files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md

files/en-us/learn/css/css_layout/flexbox_skills/index.md

files/en-us/learn/css/css_layout/floats_skills/index.md

files/en-us/learn/css/css_layout/multicol_skills/index.md

files/en-us/learn/css/css_layout/position_skills/index.md

estelle

Lots of comments, but they are all minor edits that you may or may not agree with. Thank you!!!

dipikabh

Thank you @glmvc for your efforts to keep the content consistent! Just like @estelle, I have added multiple comments, all involving minor edits.

For simplicity, consistency, and maintainability, I've suggested renaming all headings in "Test your skills" to "Task 1", "Task 2", and so on. The title of the page tells us what the task is about.

files/en-us/learn/css/building_blocks/tables_tasks/index.md

files/en-us/learn/css/building_blocks/values_tasks/index.md

files/en-us/learn/css/css_layout/flexbox_skills/index.md

files/en-us/learn/css/css_layout/floats_skills/index.md

files/en-us/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md

files/en-us/learn/css/css_layout/position_skills/index.md

files/en-us/learn/css/css_layout/rwd_skills/index.md

...rn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md

..._embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md

Co-authored-by: Estelle Weyl <[email protected]>

…s/index.md Co-authored-by: Estelle Weyl <[email protected]>

Co-authored-by: Estelle Weyl <[email protected]>

…unds_and_borders/index.md Co-authored-by: Estelle Weyl <[email protected]>

Co-authored-by: Dipika Bhattacharya <[email protected]>

…/test_your_skills_colon__html_images/index.md Co-authored-by: Dipika Bhattacharya <[email protected]>

…o_content/test_your_skills_colon__multimedia_and_embedding/index.md Co-authored-by: Dipika Bhattacharya <[email protected]>

Co-authored-by: Dipika Bhattacharya <[email protected]>

glmvc · 2022-05-04T20:39:44Z

@estelle, @dipikabh,
Thank you for reviewing and helping me out - I am glad that someone helps me and makes the changes even better :)
I left a few comments on the suggestions where I wasn't quite sure.

I made a few more "consistent changes" based on the suggestions and because I went back through all the "test your skills" pages (to be exact in Learn/HTML and Learn/CSS, where the CSS layout modul is still missing, which I will make soon), and I have did the tests too to see if they are working as intended.
I hope these additional adjustments/changes fit for you.

ps: I'm sorry for the numerous commits, since I am quite new to git and github, I found out a bit later that you can add the suggestions to the batch. 🤯

files/en-us/learn/css/building_blocks/box_model_tasks/index.md

files/en-us/learn/css/building_blocks/cascade_tasks/index.md

files/en-us/learn/css/css_layout/grid_skills/index.md

Co-authored-by: Dipika Bhattacharya <[email protected]>

glmvc · 2022-05-07T15:21:06Z

Hi @dipikabh, I also improved the contrast in some interactive examples like it's mentioned in issue #2054
Here I've changed the images to fit the improved contrast values in mdn/css-examples.

I hope the images fit like this. I tried to make them the same as they were. But I did not know exactly how to make these screenshots, because I cannot get (even with compress) the same file size If the new screenshots don't suit, I will of course update them, but then someone would have to tell me how exactly to do it please...

important: note that pr #74 and pr #75 have to be ideally merged at the same time I think?

dipikabh · 2022-05-31T14:28:44Z

Hi @glmvc, not sure what's pending on this PR. Is this waiting on the other PRs you mentioned to land?
Also, I see that some checks are failing.

glmvc · 2022-06-03T17:50:00Z

Hey @dipikabh,

I've resolved the failed checks. (1 image was not compressed)

This pr should ideally be merged at the same time with the following prs from mdn/css-examples:

because here in the pr there are changes for them...

Sorry for the "crossover" with mdn/css-examples - afterwards this would have been something for a seperate pr 🤦‍♂️
Are you able to merge in mdn/css-examples? Or do we need to tell someone who can do it?

I made also a seperate pr (#16032) for the discussed "Assessment or further help" sections (to make them also consistent). But the prs are independent from each other.

Note pr Make mailto anchor work inside iframe which is also pending, but there is no change here in this pr yet (because I'm waiting for suggestions there).
But it should not hold up this pr any longer, unless you say it is requested because it is only a very small change.

dipikabh

Thank you so much @glmvc for your work on this!

glmvc · 2022-06-08T17:59:46Z

@dipikabh you're welcome :) thank you for helping out! 🎉

Make Test your skills pages consistent

54dd89b

glmvc requested review from a team as code owners May 1, 2022 10:38

glmvc requested review from dipikabh and removed request for a team May 1, 2022 10:38

github-actions bot added the Content:Learn Learning area docs label May 1, 2022