chore(css): Move CSS examples - Learn area tasks / assessments #36688

bsmth · 2024-11-07T09:45:00Z

Description

This PR moves tasks (Test your skills) in the Learn area from external examples into the content.

Removals:

Pages do not link to download starting point

Additions:

Marking hints are moved under the examples at <details> elements to show/hide solutions
See also section, (currently links to CSS building blocks)
Admonition mentions that you can click "Play" to break example out into an editor

Changes:

Converts the following macros to live samples:

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascadelayer.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/images/form.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1200)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/tables/table.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/values/color.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 900)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 900)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 2000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1300)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascadelayer.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/images/form.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1200)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/tables/table.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/values/color.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 900)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 900)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 2000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1300)}}

Motivation

Motivation is described in the project issue.

Related issues and pull requests

[PROJECT] Move embedded css-examples into content mdn#597

…ments

…ders

…ogical properties

github-actions · 2024-11-07T09:47:08Z

Preview URLs (16 pages)

External URLs (48)

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

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

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

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

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

https://codepen.io/ (1 time) (Note! This may be a new URL 👀)
https://glitch.com/ (1 time) (Note! This may be a new URL 👀)
https://jsfiddle.net/ (1 time) (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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(comment last updated: 2024-11-07 15:35:10)

chrisdavidmills

Nice work, @bsmth. I've left you a few comments here too, but nothing much.

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

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/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/grid_skills/index.md

Co-authored-by: Chris Mills <[email protected]>

… of scrollbar in live sample

…nts for bonus question

bsmth · 2024-11-07T15:34:02Z

Thank you! Should be ready for another once-over 🔬

chrisdavidmills

LGTM! Merging!

bsmth · 2024-11-08T14:56:55Z

Thank you!

bsmth added 16 commits November 6, 2024 11:26

chore(css): Move CSS examples - Test your skills: The box model

73f628d

chore(css): Move CSS examples - Test your skills: The Cascade

c661823

chore(css): Move CSS examples - Test your skills: Images and form ele…

2ee3252

…ments

chore(css): Move CSS examples - Test your skills: Selectors

493c338

chore(css): Move CSS examples - Test your skills: Sizing

2e247c4

chore(css): Move CSS examples - Test your skills: Sizing

469dc79

chore(css): Move CSS examples - Test your skills: Backgrounds and bor…

ba7e5c0

…ders

chore(css): Move CSS examples - Test your skills: Values and units

2f07e5b

chore(css): Move CSS examples - Test your skills: Writing modes and l…

b32991e

…ogical properties

chore(css): Move CSS examples - Test your skills: Flexbox

88b28fb

chore(css): Move CSS examples - Test your skills: Floats

154d6f8

chore(css): Move CSS examples - Test your skills: Grid

8960a3a

chore(css): Move CSS examples - Test your skills: Multicol

0429ad7

chore(css): Move CSS examples - Test your skills: Positioning

ea65944

chore(css): Move CSS examples - Test your skills: Overflow

c7c36e1

chore(css): Move CSS examples - Test your skills: Grid

8db1334

bsmth requested a review from a team as a code owner November 7, 2024 09:45

bsmth requested review from estelle and removed request for a team November 7, 2024 09:45

github-actions bot added Content:Learn:CSS Learning area CSS docs size/xl [PR only] >1000 LoC changed labels Nov 7, 2024

bsmth requested a review from chrisdavidmills November 7, 2024 09:45

Merge branch 'main' into css-examples-learn-tasks

1f87545

chore(css): Move CSS examples - fix typos reverted in previous PR

9aad0db

chrisdavidmills requested changes Nov 7, 2024

View reviewed changes

bsmth and others added 4 commits November 7, 2024 16:09

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

ab3cb12

Co-authored-by: Chris Mills <[email protected]>

chore(css): Move CSS examples - Test your skills: Selectors - get rid…

b20ef68

… of scrollbar in live sample

chore(css): Move CSS examples - Test your skills: Tables -> improveme…

620042c

…nts for bonus question

chore(css): Move CSS examples - Writing modes, Values and units fixes

cd87092

bsmth added 2 commits November 7, 2024 16:32

chore(css): Move CSS examples - Grid scrollbar in example

31d4d80

Merge branch 'main' into css-examples-learn-tasks

f8b800d

bsmth requested a review from chrisdavidmills November 7, 2024 15:34

chrisdavidmills approved these changes Nov 8, 2024

View reviewed changes

chrisdavidmills merged commit c507c55 into mdn:main Nov 8, 2024
8 checks passed

bsmth deleted the css-examples-learn-tasks branch November 8, 2024 14:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(css): Move CSS examples - Learn area tasks / assessments #36688

chore(css): Move CSS examples - Learn area tasks / assessments #36688

bsmth commented Nov 7, 2024

github-actions bot commented Nov 7, 2024 •

edited

Loading

chrisdavidmills left a comment

bsmth commented Nov 7, 2024

chrisdavidmills left a comment

bsmth commented Nov 8, 2024

chore(css): Move CSS examples - Learn area tasks / assessments #36688

chore(css): Move CSS examples - Learn area tasks / assessments #36688

Conversation

bsmth commented Nov 7, 2024

Description

Motivation

Related issues and pull requests

github-actions bot commented Nov 7, 2024 • edited Loading

chrisdavidmills left a comment

Choose a reason for hiding this comment

bsmth commented Nov 7, 2024

chrisdavidmills left a comment

Choose a reason for hiding this comment

bsmth commented Nov 8, 2024

github-actions bot commented Nov 7, 2024 •

edited

Loading