Skip to content

Commit 5e885e9

Browse files
nextlevelshitnextlevelshit
committed
feat: add extended CSS examples and update lesson imports
1 parent c549d5c commit 5e885e9

File tree

2 files changed

+285
-13
lines changed

2 files changed

+285
-13
lines changed

‎docs/css.md‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
# CSS: Extended Examples
2+
3+
## Selectors
4+
5+
### HTML Tag Type
6+
```css
7+
p {
8+
color: blue;
9+
}
10+
11+
h1 {
12+
font-size: 24px;
13+
}
14+
```
15+
16+
### Class
17+
```css
18+
.btn {
19+
background: red;
20+
padding: 10px;
21+
}
22+
23+
.text {
24+
color: green;
25+
}
26+
```
27+
28+
### ID
29+
```css
30+
#header {
31+
width: 100%;
32+
height: 60px;
33+
}
34+
35+
#main {
36+
margin: 20px;
37+
}
38+
```
39+
40+
### Attribute
41+
```css
42+
[type="text"] {
43+
border: 1px solid gray;
44+
}
45+
46+
[href^="https"] {
47+
color: blue;
48+
}
49+
50+
[alt*="icon"] {
51+
width: 16px;
52+
}
53+
```
54+
55+
## Combinators
56+
57+
### Child (>)
58+
```css
59+
div > p {
60+
margin: 0;
61+
}
62+
63+
ul > li {
64+
list-style: none;
65+
}
66+
```
67+
68+
### Descendant (space)
69+
```css
70+
nav a {
71+
text-decoration: none;
72+
}
73+
74+
div p {
75+
font-size: 14px;
76+
}
77+
```
78+
79+
### Next-Sibling (+)
80+
```css
81+
h1 + p {
82+
margin-top: 0;
83+
}
84+
85+
img + span {
86+
margin-left: 10px;
87+
}
88+
```
89+
90+
### Subsequent-Sibling (~)
91+
```css
92+
h2 ~ p {
93+
color: gray;
94+
}
95+
96+
input ~ label {
97+
font-weight: bold;
98+
}
99+
```
100+
101+
### Selector List (,)
102+
```css
103+
h1, h2, h3 {
104+
font-family: Arial;
105+
}
106+
107+
.btn, .link {
108+
cursor: pointer;
109+
}
110+
```
111+
112+
## Pseudo Classes
113+
114+
### :hover
115+
```css
116+
a:hover {
117+
color: red;
118+
}
119+
120+
button:hover {
121+
background: blue;
122+
}
123+
```
124+
125+
### :active
126+
```css
127+
button:active {
128+
transform: scale(0.95);
129+
}
130+
131+
a:active {
132+
color: purple;
133+
}
134+
```
135+
136+
### :before
137+
```css
138+
h1:before {
139+
content: "→ ";
140+
color: red;
141+
}
142+
143+
.icon:before {
144+
content: "★";
145+
}
146+
```
147+
148+
### :after
149+
```css
150+
a:after {
151+
content: " ↗";
152+
font-size: 12px;
153+
}
154+
155+
p:after {
156+
content: ".";
157+
}
158+
```
159+
160+
### :first-child
161+
```css
162+
li:first-child {
163+
font-weight: bold;
164+
}
165+
166+
p:first-child {
167+
margin-top: 0;
168+
}
169+
```
170+
171+
### :last-child
172+
```css
173+
li:last-child {
174+
border-bottom: none;
175+
}
176+
177+
div:last-child {
178+
margin-bottom: 0;
179+
}
180+
```
181+
182+
### :nth-child()
183+
```css
184+
tr:nth-child(odd) {
185+
background: #f0f0f0;
186+
}
187+
188+
li:nth-child(3n) {
189+
color: blue;
190+
}
191+
```
192+
193+
## Shorthand Properties
194+
195+
### margin
196+
```css
197+
/* Shorthand */
198+
.box {
199+
margin: 20px;
200+
}
201+
202+
/* Longhand */
203+
.box {
204+
margin-top: 20px;
205+
margin-right: 20px;
206+
margin-bottom: 20px;
207+
margin-left: 20px;
208+
}
209+
```
210+
211+
### padding
212+
```css
213+
/* Shorthand */
214+
.container {
215+
padding: 8px 12px;
216+
}
217+
218+
/* Longhand */
219+
.container {
220+
padding-top: 8px;
221+
padding-right: 12px;
222+
padding-bottom: 8px;
223+
padding-left: 12px;
224+
}
225+
```
226+
227+
### border
228+
```css
229+
/* Shorthand */
230+
.box {
231+
border: 2px solid black;
232+
}
233+
234+
/* Longhand */
235+
.box {
236+
border-width: 2px;
237+
border-style: solid;
238+
border-color: black;
239+
}
240+
```
241+
242+
### background
243+
```css
244+
/* Shorthand */
245+
.hero {
246+
background: url(bg.jpg) center/cover no-repeat;
247+
}
248+
249+
/* Longhand */
250+
.hero {
251+
background-image: url(bg.jpg);
252+
background-position: center;
253+
background-size: cover;
254+
background-repeat: no-repeat;
255+
}
256+
```
257+
258+
### font
259+
```css
260+
/* Shorthand */
261+
.title {
262+
font: bold 24px/1.2 Arial, sans-serif;
263+
}
264+
265+
/* Longhand */
266+
.title {
267+
font-weight: bold;
268+
font-size: 24px;
269+
line-height: 1.2;
270+
font-family: Arial, sans-serif;
271+
}
272+
```

‎src/config/lessons.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
*/
44

55
// Import lesson configs
6-
import basicsConfig from "../../lessons/00-basics.json";
76
import basicSelectorsConfig from "../../lessons/00-basic-selectors.json";
8-
import boxModelConfig from "../../lessons/01-box-model.json";
9-
import selectorsConfig from "../../lessons/02-selectors.json";
10-
import colorsConfig from "../../lessons/03-colors.json";
11-
import typographyConfig from "../../lessons/04-typography.json";
12-
import unitVariablesConfig from "../../lessons/05-units-variables.json";
13-
import transitionsAnimationsConfig from "../../lessons/06-transitions-animations.json";
14-
import layoutConfig from "../../lessons/07-layouts.json";
15-
import responsiveConfig from "../../lessons/08-responsive.json";
7+
// import basicsConfig from "../../lessons/00-basics.json";
8+
// import boxModelConfig from "../../lessons/01-box-model.json";
9+
// import selectorsConfig from "../../lessons/02-selectors.json";
10+
// import colorsConfig from "../../lessons/03-colors.json";
11+
// import typographyConfig from "../../lessons/04-typography.json";
12+
// import unitVariablesConfig from "../../lessons/05-units-variables.json";
13+
// import transitionsAnimationsConfig from "../../lessons/06-transitions-animations.json";
14+
// import layoutConfig from "../../lessons/07-layouts.json";
15+
// import responsiveConfig from "../../lessons/08-responsive.json";
1616

1717
// Module store
1818
const moduleStore = [
1919
// basicsConfig,
20-
basicSelectorsConfig,
21-
boxModelConfig,
22-
selectorsConfig,
23-
colorsConfig
20+
basicSelectorsConfig
21+
// boxModelConfig,
22+
// selectorsConfig,
23+
// colorsConfig
2424
// typographyConfig,
2525
// unitVariablesConfig,
2626
// transitionsAnimationsConfig,

0 commit comments

Comments
 (0)