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 3 commits 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
3 commits
Select commit Hold shift + click to select a range
b26bc5b
feat(learn-html): add exercise to styles lesson
DHaytham Apr 11, 2026
0a83c6c
Update tutorials/learn-html.org/en/Styles.md
DHaytham Apr 12, 2026
d992b15
Update tutorials/learn-html.org/en/Styles.md
DHaytham Apr 12, 2026
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 a CSS `<style>` tag and a CSS selector.
3. Change the `font-family` of `Paragraph 3` to `serif` using JavaScript programmatically.

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>
</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.
Copy link
Copy Markdown
Author

@DHaytham DHaytham Apr 12, 2026

Choose a reason for hiding this comment

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

@copilot apply changes based on this feedback

</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.
Copy link
Copy Markdown
Author

@DHaytham DHaytham Apr 12, 2026

Choose a reason for hiding this comment

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

@copilot apply changes based on this feedback

</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.
Copy link
Copy Markdown
Author

@DHaytham DHaytham Apr 12, 2026

Choose a reason for hiding this comment

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

@copilot apply changes based on this feedback

</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.
Copy link
Copy Markdown
Author

@DHaytham DHaytham Apr 12, 2026

Choose a reason for hiding this comment

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

@copilot apply changes based on this feedback

</script>
</html>