Skip to content

Commit 23ef927

Browse files
gitdagraygitdagray
committed
Added lesson 15
1 parent 4a2cf74 commit 23ef927

File tree

5 files changed

+157
-0
lines changed

5 files changed

+157
-0
lines changed

‎15_lesson/css/style.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
font-family: "Roboto", sans-serif;
11+
min-height: 100vh;
12+
13+
display: grid;
14+
grid-template-columns: repeat(9, 1fr);
15+
grid-auto-rows: 50px auto 50px;
16+
grid-template-areas:
17+
"hd hd hd hd hd hd hd hd hd"
18+
"mn mn mn mn mn mn mn sb sb"
19+
"ft ft ft ft ft ft ft ft ft";
20+
column-gap: 0.5rem;
21+
}
22+
23+
.el {
24+
background-color: rebeccapurple;
25+
color: #fff;
26+
display: grid;
27+
place-content: center;
28+
}
29+
30+
.header {
31+
grid-area: hd;
32+
}
33+
34+
.sidebar {
35+
grid-area: sb;
36+
background-color: #00f;
37+
}
38+
39+
.footer {
40+
grid-area: ft;
41+
}
42+
43+
.container {
44+
grid-area: mn;
45+
min-height: 400px;
46+
display: grid;
47+
grid-template-columns: repeat(2, 1fr 2fr);
48+
grid-auto-rows: minmax(150px, auto);
49+
gap: 1rem;
50+
}
51+
52+
.box {
53+
background-color: #000;
54+
color: #fff;
55+
font-size: 2rem;
56+
padding: 0.5rem;
57+
}
58+
59+
.box:first-child {
60+
background-color: #00f;
61+
grid-column: 1 / 4;
62+
grid-row: 1 / 3;
63+
64+
display: grid;
65+
place-content: center;
66+
}
67+
68+
.box:nth-child(2) {
69+
background-color: purple;
70+
grid-column: 1 / 5;
71+
grid-row: 3 / 4;
72+
}
73+
74+
75+
76+
77+

‎15_lesson/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>CSS Grid</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
<header class="header el"><h1>Header</h1></header>
14+
<main class="container">
15+
<div class="box">1</div>
16+
<div class="box">2</div>
17+
<div class="box">3</div>
18+
<div class="box">4</div>
19+
<div class="box">5</div>
20+
<div class="box">6</div>
21+
</main>
22+
<aside class="sidebar el"><h2>Sidebar</h2></aside>
23+
<footer class="footer el"><h2>Footer</h2></footer>
24+
</body>
25+
26+
</html>

‎15_lesson_starter/css/style.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
font-family: "Roboto", sans-serif;
11+
min-height: 100vh;
12+
}
13+
14+
.box {
15+
background-color: #000;
16+
color: #fff;
17+
font-size: 2rem;
18+
padding: 0.5rem;
19+
}
20+
21+
22+
23+
24+

‎15_lesson_starter/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>CSS Grid</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
<main class="container">
14+
<div class="box">1</div>
15+
<div class="box">2</div>
16+
<div class="box">3</div>
17+
<div class="box">4</div>
18+
<div class="box">5</div>
19+
<div class="box">6</div>
20+
</main>
21+
</body>
22+
23+
</html>

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@
4848
- 🔗 [Specificity Calculator](https://specificity.keegan.st/)
4949
- 🔗 [HTML Special Characters](https://unicode-table.com)
5050

51+
### 🕹️ Learning Games
52+
- 🔗 [Flexbox Froggy](https://flexboxfroggy.com/)
53+
- 🔗 [CSS Grid Garden](https://cssgridgarden.com/)
5154

5255
### 📚 References
5356

@@ -63,6 +66,8 @@
6366
- 🔗 [MDN: Margin Collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
6467
- 🔗 [MDN: Position](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning)
6568
- 🔗 [MDN: Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
69+
- 🔗 [MDN: Basic Concepts of Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
70+
- 🔗 [MDN: Grid Template Areas](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
6671

6772
### 📚 Typography Resources:
6873
- 🔗 [MDN: Fundamental Text and Font Styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)
@@ -113,5 +118,7 @@
113118
- 🔗 [Chapter 13 Completed Code](https://github.com/gitdagray/css_course/tree/main/13_lesson)
114119
- 🔗 [Chapter 14 Starter Code](https://github.com/gitdagray/css_course/tree/main/14_lesson_starter)
115120
- 🔗 [Chapter 14 Completed Code](https://github.com/gitdagray/css_course/tree/main/14_lesson)
121+
- 🔗 [Chapter 15 Starter Code](https://github.com/gitdagray/css_course/tree/main/15_lesson_starter)
122+
- 🔗 [Chapter 15 Completed Code](https://github.com/gitdagray/css_course/tree/main/15_lesson)
116123

117124

0 commit comments

Comments
 (0)