Skip to content

Add challenge to test media, form, and table styling #41414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Add challenge to test media, form, and table styling #41414

wants to merge 8 commits into from
+392 −4

Conversation

chrisdavidmills
Copy link
Contributor

@chrisdavidmills chrisdavidmills commented Oct 7, 2025 •
edited
Loading

Description

This PR is part of a series in which I update the Learn area "Challenge" articles. In general, they need to be modernized, restructured, and put in better positions in the modules so they are spaced out better and test subjects that have already been covered.

Specifically, this PR adds a new challenge that tests the reader's knowledge of form, table, and media styling.

Note

This PR still needs to be updated to include the correct image URLs, once mdn/shared-assets#71 has been merged.

Motivation

Additional details

Related issues and pull requests
@chrisdavidmills chrisdavidmills requested review from a team as code owners October 7, 2025 08:16
@chrisdavidmills chrisdavidmills requested review from hamishwillee and pepelsbey and removed request for a team October 7, 2025 08:16
@github-actions github-actions bot added Content:Learn Learning area docs size/m [PR only] 51-500 LoC changed labels Oct 7, 2025
@chrisdavidmills chrisdavidmills marked this pull request as draft October 7, 2025 08:20
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 9, 2025 •
edited
Loading

Preview URLs

External URLs (3)

URL: /en-US/docs/Learn_web_development/Core/Styling_basics/Home_color_scheme_search
Title: Challenge: Styling a home color scheme search app

(comment last updated: 2025-10-13 10:39:22)
@chrisdavidmills chrisdavidmills marked this pull request as ready for review October 9, 2025 17:08
hamishwillee
hamishwillee reviewed Oct 10, 2025
View reviewed changes
Copy link
Collaborator

@hamishwillee hamishwillee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The style is different than the others we have reviewed - in that it is all done in the play area rather than downloading the files and creating an example. Is there any particular reason for this/does it matter?

I've had a quick look but I'm finding it hard to get a real final feel without the images rendering. Can you ping me when that's working?
@chrisdavidmills @hamishwillee
Update files/en-us/learn_web_development/core/styling_basics/home_col…
06f50f7 
…or_scheme_search/index.md

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
@chrisdavidmills
Copy link
Contributor Author

The style is different than the others we have reviewed - in that it is all done in the play area rather than downloading the files and creating an example. Is there any particular reason for this/does it matter?

Several challenges do it this way; you've mostly reviewed the ones that do it the other way. This way works for smaller UI features and examples that don't take up much space. The other approach works better for entire pages, where having a full browser to test in matters, such as media query-dependent features, etc.

I don't think this is a problem.

I've had a quick look but I'm finding it hard to get a real final feel without the images rendering. Can you ping me when that's working?

Yup, sure thing.
@chrisdavidmills
Copy link
Contributor Author

@hamishwillee OK, the images are now merged into shared-assets, so you can see what the demo is supposed to look like, before and after.
hamishwillee
hamishwillee reviewed Oct 13, 2025
View reviewed changes
files/en-us/learn_web_development/core/styling_basics/home_color_scheme_search/index.md
}
```

{{embedlivesample("app-start", "100%", 500)}}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chrisdavidmills You might want to make this even taller, exposing more of the example. Ideally full size, though if that looks stupid, I would break it inside one of the cells so that it is clear there is more below the fold.

Ditto for the final version.
hamishwillee
hamishwillee approved these changes Oct 13, 2025
View reviewed changes
Copy link
Collaborator

@hamishwillee hamishwillee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chrisdavidmills Looks good. I'd consider making all your solutions in all learn topics follow a similar "Solution" markup. Something to think about.

This is good. I have a nit in https://github.com/mdn/content/pull/41414/files#r2427550252 but approving in case you wish to ignore that.

Nice one.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Content:Learn Learning area docs size/m [PR only] 51-500 LoC changed

2 participants

@chrisdavidmills @hamishwillee