Make test your skills boilerplate more consistent #40447
Conversation
github-actions
bot
added
Content:WebAPI
chrisdavidmills
requested review from
bsmth
and removed request for
a team and
wbamberg
| @@ -24,7 +22,7 @@ To complete the task: | |||
|
|
|||
| > [!CALLOUT] | |||
| > | |||
| > You can also [download the starting point for this task](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/css/css-a11y1-download.html) to work in your own editor or in an online editor. | |||
| > You can also [download the starting point for this task](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/css/css-a11y1-download.html) to work in your own editor or in an online editor (such as [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/)). | |||
There was a problem hiding this comment.
Do we need these callouts if you can copy-paste from the code blocks?
There was a problem hiding this comment.
I did wonder about this. We currently have two styles of callout in play:
- This type, in which the reader is encouraged to download the complete starter file from the learning-area repo.
- The other type, in which the reader is encouraged to copy-paste from the code blocks.
It would be great to just use one style. Using the latter means that we have to maintain fewer files on the external repo. However, it does have two disadvantages:
- We have to show all the hidden blocks of code in the articles; otherwise, those bits can't be copy-pasted.
- This would mean only providing access to the HTML body, rather than the whole starter file. The user would then need to put that into a starter template file before using it.
What are your thoughts? Which one would you prefer?
There was a problem hiding this comment.
Yeah it's a good question. I'm in favor of the second option. Clicking "Play" expands to show everything used to make the live sample, and you have an editor there so this solves a few issues with the other approach. I feel like we might be able to describe this once somewhere in the Learn area ("test your skills" hints) and link to it in the note at the top where we say:
To get help, see hints for solving MDN tests or reach out to us in one of our communication channels.
What do you think? We could have a page about all of these in /Learn_web_development#skills_tests or /Learn_web_development/skills_tests that will make a lot less duplicate hints and info.
There was a problem hiding this comment.
This is a great idea! I've added a section in 6b87ea3.
Is this what you had in mind? I can see us linking to this and then being able to remove loads of boilerplate from the individual articles.
There was a problem hiding this comment.
Yeah this looks really good, I think that will be a lot cleaner on the "test your skills" pages
There was a problem hiding this comment.
OK, I've updated all the articles to link to the new usage guide and removed all the repetitive stuff that we no longer need. Let me know what you think.
files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md
Outdated
Show resolved
Hide resolved
files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md
Outdated
Show resolved
Hide resolved
|
This pull request has merge conflicts that must be resolved before it can be merged. |
github-actions
bot
added
size/xl
Description
As per the following comments:
This PR attempts to make all the "test your skills" boilerplate a bit more consistent.
This is quite a lot to review, so apologies, but it should be a matter of looking at a few to make sure the boilerplate looks OK, and then skimming the live pages to make sure nothing looks broken.
Motivation
Additional details
Related issues and pull requests