Skip to content

Commit abc31f3

Browse files
gitdagraygitdagray
committed
Added lesson 17
1 parent 2176277 commit abc31f3

File tree

7 files changed

+230
-1
lines changed

7 files changed

+230
-1
lines changed

‎17_lesson/css/style.css

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
2+
3+
/* || RESET */
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
/* || GENERAL STYLES */
11+
body {
12+
font: 1.5rem "Nunito", sans-serif;
13+
min-height: 100vh;
14+
15+
background-color: #475569;
16+
background-image: radial-gradient(whitesmoke, #475569);
17+
display: flex;
18+
flex-direction: column;
19+
}
20+
21+
header, nav, main, footer {
22+
display: grid;
23+
place-content: center;
24+
grid-template-columns: 100%;
25+
text-align: center;
26+
}
27+
28+
header, footer {
29+
position: sticky;
30+
background-color: #1E293B;
31+
color: whitesmoke;
32+
}
33+
34+
header {
35+
top: 0;
36+
}
37+
38+
nav {
39+
background-color: #fff;
40+
color: #000;
41+
padding: 0.5rem;
42+
border-bottom: 2px solid #000;
43+
}
44+
45+
main {
46+
flex-grow: 1;
47+
}
48+
49+
footer {
50+
bottom: 0;
51+
}
52+
53+
/* || SMALL */
54+
@media screen and (min-width: 576px) {
55+
body {
56+
background-color: green;
57+
background-image: radial-gradient(whitesmoke, green)
58+
}
59+
nav {
60+
display: none;
61+
}
62+
}
63+
64+
/* || MEDIUM */
65+
@media screen and (min-width: 768px) {
66+
body {
67+
background-color: gold;
68+
background-image: radial-gradient(whitesmoke, gold)
69+
}
70+
}
71+
72+
/* || LARGE */
73+
@media screen and (min-width: 992px) {
74+
body {
75+
background-color: firebrick;
76+
background-image: radial-gradient(whitesmoke, firebrick)
77+
}
78+
}
79+
80+
/* || XL */
81+
@media screen and (min-width: 1200px) {
82+
body {
83+
background-color: rebeccapurple;
84+
background-image: radial-gradient(whitesmoke, rebeccapurple)
85+
}
86+
}
87+
88+
/* || MOBILE DEVICE LANDSCAPE */
89+
@media screen and (max-height: 425px) and (min-aspect-ratio: 7/4) {
90+
body {
91+
background-color: dodgerblue;
92+
background-image: radial-gradient(whitesmoke, dodgerblue)
93+
}
94+
95+
h1, h2 {
96+
font-size: 1.5rem;
97+
}
98+
99+
nav { display: none }
100+
}
101+
102+

‎17_lesson/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 Media Queries</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h1>Header</h1>
15+
<nav><h2>Nav</h2></nav>
16+
</header>
17+
18+
<main>
19+
<h2>Main</h2>
20+
</main>
21+
22+
<footer>
23+
<h2>Footer</h2>
24+
</footer>
25+
</body>
26+
27+
</html>

‎17_lesson/notes.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
### Common Media Query breakpoints:
2+
| Breakpoint | Description |
3+
| -------- | ---------- |
4+
| < 481px | Mobile devices |
5+
| 481px — 768px | iPads, Tablets |
6+
| 769px — 1024px | Small screens, laptops |
7+
| 1025px — 1200px | Desktops, large screens |
8+
| 1201px and greater | Extra large screens, TV |
9+
10+
### Bootstrap breakpoints:
11+
| Breakpoint | Description |
12+
| -------- | ---------- |
13+
| < 576px | xs |
14+
| >=576px | small |
15+
| >=768px | medium |
16+
| >=992px | large |
17+
| >=1200px | xl |
18+
| >=1400px | 2xl |
19+
20+
### Tailwind breakpoints:
21+
| Breakpoint | Description |
22+
| -------- | ---------- |
23+
| < 640px | xs |
24+
| >=640px | small |
25+
| >=768px | medium |
26+
| >=1024px | large |
27+
| >=1280px | xl |
28+
| >=1536px | 2xl |

‎17_lesson_starter/css/style.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
2+
3+
/* || RESET */
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
/* || GENERAL STYLES */
11+
body {
12+
font: 1.5rem "Nunito", sans-serif;
13+
min-height: 100vh;
14+
}

‎17_lesson_starter/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 Media Queries</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h1>Header</h1>
15+
<nav><h2>Nav</h2></nav>
16+
</header>
17+
18+
<main>
19+
<h2>Main</h2>
20+
</main>
21+
22+
<footer>
23+
<h2>Footer</h2>
24+
</footer>
25+
</body>
26+
27+
</html>

‎17_lesson_starter/notes.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
### Common Media Query breakpoints:
2+
| Breakpoint | Description |
3+
| -------- | ---------- |
4+
| < 481px | Mobile devices |
5+
| 481px — 768px | iPads, Tablets |
6+
| 769px — 1024px | Small screens, laptops |
7+
| 1025px — 1200px | Desktops, large screens |
8+
| 1201px and greater | Extra large screens, TV |
9+
10+
### Bootstrap breakpoints:
11+
| Breakpoint | Description |
12+
| -------- | ---------- |
13+
| < 576px | xs |
14+
| >=576px | small |
15+
| >=768px | medium |
16+
| >=992px | large |
17+
| >=1200px | xl |
18+
| >=1400px | 2xl |
19+
20+
### Tailwind breakpoints:
21+
| Breakpoint | Description |
22+
| -------- | ---------- |
23+
| < 640px | xs |
24+
| >=640px | small |
25+
| >=768px | medium |
26+
| >=1024px | large |
27+
| >=1280px | xl |
28+
| >=1536px | 2xl |

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
- 🔗 [MDN: CSS Images](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images)
7373
- 🔗 [MDN: CSS Background Images](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images)
7474
- 🔗 [Chip Cullen: Content Layout Shift](https://chipcullen.com/what-width-and-height-attributes-to-use-with-responsive-images/)
75+
- 🔗 [MDN: CSS Media Queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries)
7576

7677
### 📚 Typography Resources:
7778
- 🔗 [MDN: Fundamental Text and Font Styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)
@@ -83,9 +84,9 @@
8384
- 🔗 [Coolors Contrast Checker](https://coolors.co/contrast-checker/112a46-acc8e5)
8485
- 🔗 [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
8586
- 🔗 [Coolors Palette Generator](https://coolors.co/)
87+
- 🔗 [ColorHub.app Palette Generator](https://colorhub.app/)
8688
- 🔗 [HTML Color Codes](https://htmlcolorcodes.com/)
8789

88-
8990
### 🖼️ Image Resources:
9091
- Placeholder Image Generators:
9192
- 🔗 [21 of the Best](https://loremipsum.io/21-of-the-best-placeholder-image-generators/)
@@ -126,5 +127,7 @@
126127
- 🔗 [Chapter 15 Completed Code](https://github.com/gitdagray/css_course/tree/main/15_lesson)
127128
- 🔗 [Chapter 16 Starter Code](https://github.com/gitdagray/css_course/tree/main/16_lesson_starter)
128129
- 🔗 [Chapter 16 Completed Code](https://github.com/gitdagray/css_course/tree/main/16_lesson)
130+
- 🔗 [Chapter 17 Starter Code](https://github.com/gitdagray/css_course/tree/main/17_lesson_starter)
131+
- 🔗 [Chapter 17 Completed Code](https://github.com/gitdagray/css_course/tree/main/17_lesson)
129132

130133

0 commit comments

Comments
 (0)