Skip to content

Commit e73afcd

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

6 files changed

Lines changed: 157 additions & 17 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ The website is hosted on GitHub Pages. Click [here](https://vandreic.github.io/H
1010
- [x] 3. Hovers, Transitions, Shadows
1111
- [x] 4. Chrome DevTools & CSS Box Model
1212
- [x] 5. Text Styles
13-
- [ ] 6. The HTML Structure
13+
- [x] 6. The HTML Structure
1414
- [ ] 7. Images and Text Boxes
1515
- [ ] 8. CSS Display Property
1616
- [ ] 9. The div Element

‎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: "Montserrat", system-ui;
4+
font-size: 18px;
5+
font-weight: 700;
6+
color: green;
7+
}
8+
/* #endregion: Exercise Done Text */
9+
10+
/* #region: Exercise 6a */
11+
.ex6a-text-01-01 {
12+
font-family: "Montserrat", system-ui;
13+
font-size: 18px;
14+
font-weight: 700;
15+
color: white;
16+
}
17+
18+
.ex6a-text-01-02 {
19+
font-family: "Montserrat", system-ui;
20+
font-size: 18px;
21+
font-weight: 700;
22+
color: gray;
23+
}
24+
/* #endregion: Exercise 6a */
25+
26+
/* #region: Exercise 6b */
27+
.ex6b-text {
28+
font-family: "Montserrat", system-ui;
29+
font-size: 18px;
30+
font-weight: 700;
31+
color: white;
32+
}
33+
/* #endregion: Exercise 6b */
34+
35+
/* #region: Exercise 6c */
36+
.ex6c-text-01-01 {
37+
font-family: "Montserrat", system-ui;
38+
font-size: 18px;
39+
font-weight: 700;
40+
color: white;
41+
}
42+
43+
.ex6c-text-01-02 {
44+
font-family: "Montserrat", system-ui;
45+
font-size: 18px;
46+
font-weight: 700;
47+
color: gray;
48+
}
49+
/* #endregion: Exercise 6c */
50+
51+
/* #region: Exercise 6d */
52+
.ex6d-text-01 {
53+
font-family: "Montserrat", system-ui;
54+
font-size: 32px;
55+
font-weight: 700;
56+
color: black;
57+
text-align: center;
58+
}
59+
60+
.ex6d-text-02-01 {
61+
font-family: "Montserrat", system-ui;
62+
font-size: 18px;
63+
font-weight: 400;
64+
color: black;
65+
text-align: center;
66+
}
67+
68+
.ex6d-text-02-02 {
69+
font-family: "Montserrat", system-ui;
70+
font-size: 18px;
71+
font-weight: 400;
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+
<title>HTML & CSS Course - Lesson 6</title>
6+
<link rel="stylesheet" href="lesson-06.css" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
11+
rel="stylesheet"
12+
/>
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: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1-
/* Example button */
2-
.example-button {
3-
background-color: rgb(46, 164, 79);
1+
/* #region: Exercise 0a */
2+
.ex0a-text {
3+
font-family: Arial;
4+
font-size: 18px;
5+
color: white;
6+
}
7+
8+
.ex0a-button {
9+
background-color: green;
410
color: white;
511
border: none;
6-
cursor: pointer;
12+
border-radius: 40px;
713
padding: 10px 20px;
8-
border-radius: 5px;
9-
font-weight: bold;
10-
transition: background-color 0.15s;
14+
font-size: 16px;
15+
cursor: pointer;
1116
}
12-
.example-button:hover {
13-
background-color: rgb(30, 140, 55);
17+
.ex0a-button:hover {
18+
background-color: darkgreen;
1419
}
20+
/* #endregion: Exercise 0a */

‎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 0a</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 0b</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)