feat(learn-html): add exercise to styles lesson#873
feat(learn-html): add exercise to styles lesson#873DHaytham wants to merge 1 commit 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.
| 1. change the `font-family` of `Paragraph 1` to `sans-serif` using the Inline Method. | ||
| 2. change the `font-family` of `Paragraph 2` to `monospace` using the CSS Stylesheets and CSS selectors. | ||
| 3. change the `font-family` of `Paragraph 3` to `serif` using JavaScript (programmatically). |
There was a problem hiding this comment.
Exercise instructions should match the terminology used earlier in the page and be consistently capitalized. Consider capitalizing the sentence starts ("Change...") and referring to the methods using the section names (e.g., "Inline" / "Using a CSS tag" or "embedded stylesheet") instead of "CSS Stylesheets" to avoid ambiguity.
| 1. change the `font-family` of `Paragraph 1` to `sans-serif` using the Inline Method. | |
| 2. change the `font-family` of `Paragraph 2` to `monospace` using the CSS Stylesheets and CSS selectors. | |
| 3. change the `font-family` of `Paragraph 3` to `serif` using JavaScript (programmatically). | |
| 1. Change the `font-family` of `Paragraph 1` to `sans-serif` using the Inline method. | |
| 2. Change the `font-family` of `Paragraph 2` to `monospace` using a CSS `<style>` tag and a CSS selector. | |
| 3. Change the `font-family` of `Paragraph 3` to `serif` using JavaScript programmatically. |
| <p> | ||
| Paragraph 1. | ||
| </p> | ||
| <p class="p2"> | ||
| Paragraph 2. | ||
| </p> | ||
| <p id="p3"> | ||
| Paragraph 3. | ||
| </p> |
There was a problem hiding this comment.
The HTML indentation in the "Tutorial Code" snippet is inconsistent (e.g., the <p> block isn’t aligned/indented under <body> and the closing </p> is out of alignment). Please re-indent this snippet to match the formatting used elsewhere in the tutorials (e.g., tutorials/learn-html.org/en/Fonts.md:19-25) and the indentation shown below in Expected Output/Solution.
| <p> | |
| Paragraph 1. | |
| </p> | |
| <p class="p2"> | |
| Paragraph 2. | |
| </p> | |
| <p id="p3"> | |
| Paragraph 3. | |
| </p> | |
| <p> | |
| Paragraph 1. | |
| </p> | |
| <p class="p2"> | |
| Paragraph 2. | |
| </p> | |
| <p id="p3"> | |
| Paragraph 3. | |
| </p> |
| <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.
Added a new Excersise for the styles page in learnhtml.org