feat(learn-html): add exercise to styles lesson#873
feat(learn-html): add exercise to styles lesson#873DHaytham wants to merge 3 commits intoronreiter:masterfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Adds an exercise to the Styles lesson to practice applying font-family via inline styles, an embedded stylesheet + selector, and JavaScript.
Changes:
- Replaced the placeholder “no exercise yet” section with a 3-step exercise.
- Updated the Tutorial Code to include three paragraphs (one per step).
- Updated Expected Output and Solution to demonstrate inline CSS, a
.p2CSS rule, and programmatic styling for#p3.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <head> | ||
| <title>Hello, World!</title> | ||
| <style> | ||
| .p2 { | ||
| font-family: monospace; | ||
| } |
There was a problem hiding this comment.
Most lessons keep the standard <title>Hello, World!</title> in the Expected Output template (and this file previously did as well). Consider keeping the <title> alongside the new <style> block for consistency across tutorials.
| <script> | ||
| var seriftext = document.getElementById("p3"); | ||
| seriftext.style.fontFamily = "serif"; |
There was a problem hiding this comment.
Variable name seriftext doesn’t follow the camelCase style used elsewhere in this tutorial (e.g., sansSerifText above). Consider renaming it to something like serifText / serifTextEl for readability.
| <style> | ||
| .p2 { | ||
| font-family: monospace; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
For consistency with other tutorials’ Solution templates, consider keeping the standard <title>Hello, World!</title> in the <head> in addition to the new <style> block.
| <script> | ||
| var seriftext = document.getElementById("p3"); | ||
| seriftext.style.fontFamily = "serif"; |
There was a problem hiding this comment.
Same as above: seriftext would be clearer as camelCase (serifText / serifTextEl) to match naming used elsewhere in the tutorial.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Added a new Excersise for the styles page in learnhtml.org