Skip to content

feat(learn-html): add exercise to styles lesson #873

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

Open
DHaytham wants to merge 1 commit into
base: master
Choose a base branch
from
+49 −8
Open

feat(learn-html): add exercise to styles lesson #873

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 49 additions & 8 deletions tutorials/learn-html.org/en/Styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,10 @@ For example:

Exercise
--------
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).
Comment on lines +127 to +129
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

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

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.

Suggested change
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.

Copilot uses AI. Check for mistakes.

This page does not have an exercise yet. You are welcome to contribute one by sending me a pull request:

[[https://github.com/ronreiter/interactive-tutorials]]


Tutorial Code
Expand All @@ -138,6 +138,15 @@ Tutorial Code
<head>
</head>
<body>
<p>
Paragraph 1.
</p>
<p class="p2">
Paragraph 2.
</p>
<p id="p3">
Paragraph 3.
</p>
Comment on lines +141 to +149
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

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

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.

Suggested change
<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>

Copilot uses AI. Check for mistakes.
</body>
</html>

Expand All @@ -147,11 +156,27 @@ Expected Output
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
.p2 {
font-family: monospace;
}
Comment on lines 158 to +162
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
</style>
</head>
<body>
<p>Hello, World!</p>
<p style="font-family: sans-serif">
Paragraph 1.
</p>
<p class="p2">
Paragraph 2.
</p>
<p id="p3">
Paragraph 3.
</p>
</body>
<script>
var seriftext = document.getElementById("p3");
seriftext.style.fontFamily = "serif";
Comment on lines +176 to +178
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
</script>
</html>

Solution
Expand All @@ -160,9 +185,25 @@ Solution
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
.p2 {
font-family: monospace;
}
</style>
Comment on lines +188 to +192
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
</head>
<body>
<p>Hello, World!</p>
<p style="font-family: sans-serif">
Paragraph 1.
</p>
<p class="p2">
Paragraph 2.
</p>
<p id="p3">
Paragraph 3.
</p>
</body>
</html>
<script>
var seriftext = document.getElementById("p3");
seriftext.style.fontFamily = "serif";
Comment on lines +205 to +207
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

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

Same as above: seriftext would be clearer as camelCase (serifText / serifTextEl) to match naming used elsewhere in the tutorial.

Copilot uses AI. Check for mistakes.
</script>
</html>
Loading