Adding Labels to learning content in tutorials #54891
Labels
scope: curriculum
Lessons, Challenges, Projects and other Curricular Content in curriculum directory.
status: waiting triage
This issue needs help from moderators and users to reproduce and confirm its validity and fix.
type: feature request
Threads classified to be feature requests. Implementation to be considered as a nice to have
Is your feature request related to a problem? Please describe.
I found while doing some of the web development tutorials the information that was being taught through examples blended in to the actual tasks that were assigned for some of the steps. Many times I would see an example and think that that was what I needed to add to the code.
Describe the solution you'd like
I think adding labels within the learning material would help easily differentiate an example from the actual TODO task to complete for each step. For example on the responsive web designs first tutorial step 9 has learning material that looks like the below
All img elements should have an alt attribute. The alt attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load.
Here is an example of an img element with an alt attribute:
< img src="cat.jpg" alt="A cat" >
Inside the img element, add an alt attribute with this text:
A cute orange cat lying on its back
What if instead we seperated the TODO section from the learning material and example. something like below
Learning Material:
All img elements should have an alt attribute. The alt attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load.
Here is an example of an img element with an alt attribute:
< img src="cat.jpg" alt="A cat" >
TODO:
Inside the img element, add an alt attribute with this text:
A cute orange cat lying on its back
Describe alternatives you've considered
We could also differentiate the sections by putting the information and the TODO items in different containers within a parent container. This way you eyes don't tend to wander to the example code which is generally in a larger font then the rest of the text.
Additional context
No response
The text was updated successfully, but these errors were encountered: