├── index1.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html ├── style1.css ├── style2.css ├── style3.css ├── style4.css └── style5.css /index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Tips and Tricks 8 | 9 | 10 | Hello world 11 |

A title

12 | 17 |
One Two Three
18 |
19 |
Test me
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Tips and Tricks 8 | 9 | 10 |
11 |
Section 1
12 |
Section 2
13 |
Section 3
14 |
Section 4
15 |
Section 5
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Tips and Tricks 8 | 9 | 10 |
11 |
Section 1
12 |
Section 2
13 |
Section 3
14 |
Section 4
15 |
Section 5
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Tips and Tricks 8 | 9 | 10 |
11 |

My Course

12 |

HTML Tutorial

13 |

CSS Tutorial

14 |

JavaScript Tutorial

15 |

React Tutorial

16 |

Next.js Tutorial

17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Tips and Tricks 8 | 9 | 10 |
11 |
Red Box
12 |
Blue Box
13 |
Green Box
14 |
Orange Box
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /style1.css: -------------------------------------------------------------------------------- 1 | * { 2 | /* USE PADDING MARGIN AND BOX SIZING */ 3 | 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | 8 | /* DO NOT USE BACKGROUND AND TEXT COLOR */ 9 | 10 | /* background-color: lightgreen; 11 | color: blueviolet; */ 12 | } 13 | 14 | html { 15 | /* BETTER TO USE THE BODY TAG */ 16 | 17 | /* background-color: lightcoral; */ 18 | } 19 | 20 | body { 21 | /* background-color: antiquewhite; */ 22 | color: blueviolet; 23 | } 24 | 25 | /* YOU CAN REMOVE ALL THE MARGIN AND PADDING USING UNIVERSAL SELECTOR */ 26 | 27 | /* body{ 28 | margin: 0; 29 | } */ 30 | 31 | /* h1 { 32 | margin: 0; 33 | } 34 | 35 | ul { 36 | margin: 0; 37 | padding: 0; 38 | } */ 39 | 40 | 41 | .box { 42 | width: 100px; 43 | height: 100px; 44 | background: rebeccapurple; 45 | padding: 10px; 46 | border: 10px solid royalblue; 47 | } 48 | 49 | section{ 50 | background-color: lightblue; 51 | } -------------------------------------------------------------------------------- /style2.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | /* YOU CAN USE THIS TAG AS A SCROLL CONTAINER */ 9 | 10 | /* scroll-snap-type: y mandatory; */ 11 | } 12 | 13 | .container { 14 | height: 100vh; 15 | overflow-y: scroll; 16 | scroll-snap-type: y mandatory; 17 | } 18 | 19 | section { 20 | height: 100vh; 21 | scroll-snap-align: center; 22 | font-size: 72px; 23 | /* font-size: 4.5rem; */ 24 | /* font-size: 1.25rem; */ 25 | /* font-size: 1.875rem; */ 26 | color: lightgrey; 27 | } 28 | 29 | section:nth-child(1) { 30 | background-color: lightcoral; 31 | } 32 | section:nth-child(2) { 33 | background-color: lightblue; 34 | } 35 | section:nth-child(3) { 36 | background-color: lightpink; 37 | } 38 | section:nth-child(4) { 39 | background-color: lightcyan; 40 | } 41 | section:nth-child(5) { 42 | background-color: lightseagreen; 43 | } 44 | -------------------------------------------------------------------------------- /style3.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-size: 62.5%; 9 | } 10 | 11 | body { 12 | font-size: 1.6rem; 13 | } 14 | 15 | .container { 16 | height: 100vh; 17 | overflow-y: scroll; 18 | scroll-snap-type: y mandatory; 19 | } 20 | 21 | section { 22 | height: 100vh; 23 | scroll-snap-align: center; 24 | /* font-size: 4.5rem; */ 25 | /* font-size: 2rem; */ 26 | font-size: 3rem; 27 | color: lightgrey; 28 | } 29 | 30 | section:nth-child(1) { 31 | background-color: lightcoral; 32 | } 33 | section:nth-child(2) { 34 | background-color: lightblue; 35 | } 36 | section:nth-child(3) { 37 | background-color: lightpink; 38 | } 39 | section:nth-child(4) { 40 | background-color: lightcyan; 41 | } 42 | section:nth-child(5) { 43 | background-color: lightseagreen; 44 | } 45 | -------------------------------------------------------------------------------- /style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | counter-reset: my-counter; 3 | } 4 | 5 | 6 | h2::before { 7 | counter-increment: my-counter; 8 | content: "Section " counter(my-counter) "- "; 9 | } 10 | -------------------------------------------------------------------------------- /style5.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | gap: 10px; 4 | } 5 | 6 | .box { 7 | width: 100px; 8 | height: 100px; 9 | color: white; 10 | } 11 | 12 | .redBox { 13 | background-color: red; 14 | order: 2; 15 | } 16 | 17 | .blueBox { 18 | background-color: blue; 19 | order: 1; 20 | } 21 | 22 | .greenBox { 23 | background-color: green; 24 | order: 4; 25 | } 26 | 27 | .orangeBox { 28 | background-color: orange; 29 | order: 3; 30 | } 31 | --------------------------------------------------------------------------------