Skip to content

Commit cfb4143

Browse files
VandreicVandreic
committed
Add Lesson 6 and update lesson template
Added lesson 6. Updated lesson-template files.
1 parent 7ef612b commit cfb4143

File tree

5 files changed

+151
-10
lines changed

5 files changed

+151
-10
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h2>Lessons</h2>
1515
<li><a href="lessons/lesson-03/lesson-03.html">Lesson 3: Hovers, Transitions, Shadows</a></li>
1616
<li><a href="lessons/lesson-04/lesson-04.html">Lesson 4: Chrome DevTools & CSS Box Model</a></li>
1717
<li><a href="lessons/lesson-05/lesson-05.html">Lesson 5: Text Styles</a></li>
18-
<li>Lesson 6: The HTML Structure</li>
18+
<li><a href="lessons/lesson-06/lesson-06.html">Lesson 6: The HTML Structure</a></li>
1919
<li>Lesson 7: Images and Text Boxes</li>
2020
<li>Lesson 8: CSS Display Property</li>
2121
<li>Lesson 9: The div Element</li>

‎lessons/lesson-06/lesson-06.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/* #region Exercise Done Text */
2+
.exercise-done {
3+
font-family: Arial;
4+
font-weight: 700;
5+
font-size: 18px;
6+
color: green
7+
}
8+
/* #endregion Exercise Done Text */
9+
10+
/* #region Exercise 6a */
11+
.ex6a-text-01-01 {
12+
font-family: Arial;
13+
font-size: 18px;
14+
font-weight: bold;
15+
color: white;
16+
}
17+
18+
.ex6a-text-01-02 {
19+
font-family: Arial;
20+
font-size: 18px;
21+
font-weight: bold;
22+
color: grey;
23+
}
24+
/* #endregion Exercise 6a */
25+
26+
/* #region Exercise 6b */
27+
.ex6b-text {
28+
font-family: Arial;
29+
font-size: 18px;
30+
font-weight: bold;
31+
color: white;
32+
}
33+
/* #endregion Exercise 6b */
34+
35+
/* #region Exercise 6c */
36+
.ex6c-text-01-01 {
37+
font-family: Arial;
38+
font-size: 18px;
39+
font-weight: bold;
40+
color: white;
41+
}
42+
43+
.ex6c-text-01-02 {
44+
font-family: Arial;
45+
font-size: 18px;
46+
font-weight: bold;
47+
color: grey;
48+
}
49+
/* #endregion Exercise 6c */
50+
51+
/* #region Exercise 6d */
52+
.ex6d-text-01 {
53+
font-family: 'Montserrat', system-ui;
54+
font-weight: 700;
55+
font-size: 32px;
56+
color: black;
57+
text-align: center;
58+
}
59+
60+
.ex6d-text-02-01 {
61+
font-family: 'Montserrat', system-ui;
62+
font-weight: 400;
63+
font-size: 18px;
64+
color: black;
65+
text-align: center;
66+
}
67+
68+
.ex6d-text-02-02 {
69+
font-family: 'Montserrat', system-ui;
70+
font-weight: 400;
71+
font-size: 18px;
72+
color: black;
73+
text-align: center;
74+
text-decoration: underline;
75+
}
76+
/* #endregion Exercise 6d */

‎lessons/lesson-06/lesson-06.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="preconnect" href="https://fonts.googleapis.com" />
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<link rel="stylesheet" href="lesson-06.css" />
12+
<title>HTML & CSS Course - Lesson 6</title>
13+
</head>
14+
<body>
15+
<h1>Lesson 6 - The HTML Structure</h1>
16+
<a href="../../index.html"><button>Go back to Home</button></a>
17+
18+
<br />
19+
<br />
20+
21+
<h2>Exercise 6a</h2>
22+
<p class="ex6a-text-01-01">
23+
Add the HTML structure
24+
<span class="ex6a-text-01-02"
25+
>(&lt;!DOCTYPE html&gt;,&lt;html&gt;,&lt;head&gt;,&lt;body&gt;)</span
26+
>
27+
</p>
28+
<p class="exercise-done">Done &#10003;</p>
29+
30+
<hr />
31+
<br />
32+
33+
<h2>Exercise 6b</h2>
34+
<p class="ex6b-text">Add an appropriate &lt;title&gt; for each exercise</p>
35+
<p class="exercise-done">Done &#10003;</p>
36+
37+
<hr />
38+
<br />
39+
40+
<h2>Exercise 6c</h2>
41+
<p class="ex6c-text-01-01">
42+
Move the CSS into a seperate file
43+
<span class="ex6c-text-01-02">(using the &lt;link&gt; element)</span>
44+
</p>
45+
<p class="exercise-done">Done &#10003;</p>
46+
47+
<hr />
48+
<br />
49+
50+
<h2>Exercise 6d</h2>
51+
<p class="ex6d-text-01">Model 3</p>
52+
<p class="ex6d-text-02-01">
53+
Order Online for <span class="ex6d-text-02-02">Touchless Delivery</span>
54+
</p>
55+
</body>
56+
</html>

‎template/lesson-template.css‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
/* Example button */
2-
.example-button {
1+
/* #region: Exercise Xa */
2+
.ex0a-text {
3+
font-family: Arial;
4+
font-size: 18px;
5+
font-weight: bold;
6+
color: black;
7+
}
8+
.ex0a-button {
39
background-color: rgb(46, 164, 79);
410
color: white;
511
border: none;
@@ -9,6 +15,7 @@
915
font-weight: bold;
1016
transition: background-color 0.15s;
1117
}
12-
.example-button:hover {
18+
.ex0a-button:hover {
1319
background-color: rgb(30, 140, 55);
1420
}
21+
/* #endregion: Exercise Xa */

‎template/lesson-template.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,25 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>HTML & CSS Course - Lesson Template</title>
5+
<title>HTML & CSS Course - Lesson X</title>
66
<link rel="stylesheet" href="lesson-template.css" />
77
</head>
88
<body>
9-
<h1>Lesson Template - Exercises</h1>
9+
<h1>Lesson X - Exercises</h1>
1010
<a href="../../index.html"><button>Go back to Home</button></a>
1111

1212
<br />
1313
<br />
1414

15-
<h2>Exercise 1</h2>
16-
<button class="example-button">Example Button</button>
15+
<h2>Exercise Xa</h2>
16+
<p class="ex0a-text">Example text</p>
17+
<button class="ex0a-button">Example Button</button>
1718

1819
<hr />
1920
<br />
2021

21-
<h2>Exercise 2</h2>
22-
<button class="example-button">Another Button</button>
22+
<h2>Exercise Xb</h2>
23+
<p class="ex0b-text">Example text</p>
24+
<button class="ex0b-button">Example Button</button>
2325
</body>
2426
</html>

0 commit comments

Comments
 (0)