├── .gitignore ├── challenges ├── table │ ├── 1.md │ └── 1.png ├── flex │ ├── 1.md │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 2.md │ ├── 4.md │ └── 3.md ├── grid │ ├── 1.png │ ├── 2.png │ ├── 1.md │ └── 2.md ├── position │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 5.md │ ├── 3.md │ ├── 4.md │ ├── 1.md │ └── 2.md └── transform │ ├── 1.png │ └── 1.md ├── solutions ├── flex │ ├── 1 │ │ ├── solution_image.png │ │ ├── style.css │ │ └── index.html │ ├── 2 │ │ ├── solution_image.png │ │ ├── index.html │ │ └── style.css │ ├── 3 │ │ ├── image.png │ │ ├── solution_image.png │ │ ├── style.css │ │ └── index.html │ └── 4 │ │ ├── icons │ │ ├── arrow.png │ │ ├── like.png │ │ ├── plus.png │ │ └── play-button.png │ │ ├── solution_image.png │ │ ├── style.css │ │ └── index.html ├── transform │ └── 1 │ │ ├── screemshot.PNG │ │ ├── index.html │ │ └── style.css └── table │ └── 1 │ ├── Table-1-Solution-img.png │ ├── style.css │ └── index.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /challenges/table/1.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](1.png) 4 | 5 | Implement this table. 6 | -------------------------------------------------------------------------------- /challenges/flex/1.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](1.png) 4 | 5 | Implement the above design using Flexbox. 6 | -------------------------------------------------------------------------------- /challenges/flex/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/flex/1.png -------------------------------------------------------------------------------- /challenges/flex/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/flex/2.png -------------------------------------------------------------------------------- /challenges/flex/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/flex/3.png -------------------------------------------------------------------------------- /challenges/flex/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/flex/4.png -------------------------------------------------------------------------------- /challenges/grid/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/grid/1.png -------------------------------------------------------------------------------- /challenges/grid/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/grid/2.png -------------------------------------------------------------------------------- /challenges/table/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/table/1.png -------------------------------------------------------------------------------- /challenges/position/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/position/1.png -------------------------------------------------------------------------------- /challenges/position/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/position/2.png -------------------------------------------------------------------------------- /challenges/position/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/position/3.png -------------------------------------------------------------------------------- /challenges/position/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/position/4.png -------------------------------------------------------------------------------- /challenges/position/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/position/5.png -------------------------------------------------------------------------------- /challenges/transform/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/challenges/transform/1.png -------------------------------------------------------------------------------- /solutions/flex/3/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/flex/3/image.png -------------------------------------------------------------------------------- /challenges/grid/1.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](1.png) 4 | 5 | Implement the above design using a grid for the 4X2 layout. 6 | -------------------------------------------------------------------------------- /challenges/grid/2.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](2.png) 4 | 5 | Implement the above design using a grid for the 4X2 layout. 6 | -------------------------------------------------------------------------------- /challenges/position/5.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](5.png) 4 | 5 | Implement the given design of two overlapping boxes. 6 | -------------------------------------------------------------------------------- /challenges/position/3.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](3.png) 4 | 5 | Implement this search box with a search logo at the left. 6 | -------------------------------------------------------------------------------- /solutions/flex/4/icons/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/flex/4/icons/arrow.png -------------------------------------------------------------------------------- /solutions/flex/4/icons/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/flex/4/icons/like.png -------------------------------------------------------------------------------- /solutions/flex/4/icons/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/flex/4/icons/plus.png -------------------------------------------------------------------------------- /solutions/flex/1/solution_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/flex/1/solution_image.png -------------------------------------------------------------------------------- /solutions/flex/2/solution_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/flex/2/solution_image.png -------------------------------------------------------------------------------- /solutions/flex/3/solution_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/flex/3/solution_image.png -------------------------------------------------------------------------------- /solutions/flex/4/solution_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/flex/4/solution_image.png -------------------------------------------------------------------------------- /solutions/transform/1/screemshot.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/transform/1/screemshot.PNG -------------------------------------------------------------------------------- /solutions/flex/4/icons/play-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/flex/4/icons/play-button.png -------------------------------------------------------------------------------- /challenges/flex/2.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](2.png) 4 | 5 | Implement the above design using Flexbox. 6 | You can use any image for the logo. 7 | -------------------------------------------------------------------------------- /solutions/table/1/Table-1-Solution-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/The-Code-Dose/html-css-challenges/HEAD/solutions/table/1/Table-1-Solution-img.png -------------------------------------------------------------------------------- /challenges/flex/4.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](4.png) 4 | 5 | Implement the above design using Flexbox. 6 | You can use empty circles instead of the icons. 7 | -------------------------------------------------------------------------------- /challenges/flex/3.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](3.png) 4 | 5 | Implement the above design using Flexbox. 6 | You can use any image for the thumbnail an d logo. 7 | -------------------------------------------------------------------------------- /challenges/position/4.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](4.png) 4 | 5 | Implement the given design and position the elements carefully on top of an image of your choice. 6 | -------------------------------------------------------------------------------- /challenges/transform/1.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](1.png) 4 | 5 | How will you place this "Cool Sites!" text over the "Nominees" text as given in the image above? 6 | -------------------------------------------------------------------------------- /challenges/position/1.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](1.png) 4 | 5 | Create a screen with a pink background. 6 | Create a navbar at the bottom of this screen that always stays at the bottom even during scrolling. 7 | -------------------------------------------------------------------------------- /challenges/position/2.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | ![](2.png) 4 | 5 | Implement this design such that: 6 | * There's food on the top left corner of this image. 7 | * There's a button on the top right corner of this image. 8 | * There are two logo buttons on the bottom right corner of this image. 9 | -------------------------------------------------------------------------------- /solutions/transform/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |

NOMINEES

12 |
13 |
14 |

Cool Sites!

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /solutions/flex/1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #44403c; 5 | } 6 | 7 | .main { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | gap: 20px; 13 | font-size: 40px; 14 | color: white; 15 | } 16 | 17 | .first { 18 | font-weight: 900; 19 | margin-right: 30px; 20 | } 21 | 22 | .box { 23 | border: 2px solid rgba(248, 250, 252, 0.2); 24 | padding: 30px 30px; 25 | border-radius: 20px; 26 | } 27 | 28 | #yellow-box { 29 | border: 2px solid rgb(219, 219, 119); 30 | color: rgb(219, 219, 119); 31 | } 32 | -------------------------------------------------------------------------------- /solutions/flex/3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | background-color: black; 5 | } 6 | .main { 7 | display: flex; 8 | margin-left: 300px; 9 | margin-top: 300px; 10 | gap: 30px; 11 | color: white; 12 | font-family: "Rubik", sans-serif; 13 | } 14 | 15 | .thumnail img { 16 | border-radius: 20px; 17 | } 18 | 19 | .description { 20 | gap: 5px; 21 | margin-top: 10px; 22 | font-size: 20px; 23 | color: #f8fafc; 24 | } 25 | 26 | .channel-details { 27 | margin-top: 40px; 28 | display: flex; 29 | align-items: center; 30 | gap: 15px; 31 | font-size: 20px; 32 | color: #f8fafc; 33 | } 34 | 35 | .channel-details img { 36 | border-radius: 50%; 37 | } 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML & CSS Challenges 2 | 3 | A collection of beginner friendly practice exercises on HTML & CSS topics. 4 | 5 | All the challenges are present in the `challenges` directory. 6 | 7 | The solutions (coming soon) are provided in the ` solutions` directory. 8 | 9 | ## Guide to submitting solutions 10 | 11 | If you want to submit a solution for any challenge, please follow the below guidelines: 12 | 13 | - Place your solution code in the correct directory. 14 | For example, if you are submitting the solution for `challenges/flex/1.md`, the solution files should go inside `solutions/flex/1/`. 15 | - While submitting a pull request, please add screenshots of your results. 16 | - Please do not submit solutions if they already exist. 17 | -------------------------------------------------------------------------------- /solutions/flex/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 |

SOTD

13 |
14 |
15 |

Creator

16 |
17 |
18 |

Font & Color

19 |
20 |
21 |

Details

22 |
23 |
24 |

Score

25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /solutions/table/1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: rgb(35, 35, 35); 9 | position: absolute; 10 | top: 50%; 11 | left: 50%; 12 | transform: translate(-50%, -50%); 13 | } 14 | 15 | table { 16 | font-family: 'Comic Sans MS', cursive; 17 | } 18 | 19 | table, 20 | td { 21 | background-color: black; 22 | color: #fff; 23 | border: 2px solid #dddddd; 24 | border-collapse: collapse; 25 | } 26 | 27 | td{ 28 | padding: 18px 120px 18px 18px; 29 | } 30 | 31 | input[type="checkbox"]{ 32 | margin-right: 12px; 33 | accent-color: #22a094; 34 | cursor: pointer; 35 | } 36 | 37 | input[type="checkbox"]:not(:checked) + label{ 38 | text-decoration: underline; 39 | } 40 | 41 | input[type="checkbox"]:checked + label{ 42 | text-decoration: line-through; 43 | } -------------------------------------------------------------------------------- /solutions/table/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Table 1 Solution 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /solutions/flex/4/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | background-color: black; 5 | } 6 | .main { 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | margin-left: 500px; 11 | height: 100vh; 12 | color: white; 13 | font-family: "Rubik", sans-serif; 14 | gap: 15px; 15 | } 16 | 17 | .icons { 18 | display: flex; 19 | gap: 150px; 20 | } 21 | 22 | .details { 23 | margin-left: 10px; 24 | display: flex; 25 | gap: 20px; 26 | font-size: 25px; 27 | justify-content: flex-start; 28 | align-items: center; 29 | color: hsl(0, 0%, 50%); 30 | } 31 | 32 | .box { 33 | border: 1px solid white; 34 | padding: 5px 10px; 35 | } 36 | 37 | .small-box { 38 | border: 1px solid white; 39 | padding: 2px 10px; 40 | border-radius: 10px; 41 | font-size: 20px; 42 | } 43 | 44 | .genre { 45 | margin-left: 10px; 46 | display: flex; 47 | gap: 15px; 48 | font-size: 25px; 49 | justify-content: flex-start; 50 | align-items: center; 51 | } 52 | span { 53 | font-size: 50px; 54 | color: hsl(0, 0%, 50%); 55 | margin-bottom: 20px; 56 | } 57 | 58 | img { 59 | height: 60px; 60 | margin: 5px; 61 | } 62 | -------------------------------------------------------------------------------- /solutions/flex/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 14 | 15 | 16 |
17 |
18 |
19 | 25 |
26 |

The Code Dose

27 |

@thecodedose

28 |
29 |
30 | 31 |
32 |

...

33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /solutions/flex/2/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .main { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | height: 100vh; 11 | background-color: #0c0a09; 12 | } 13 | 14 | .outer { 15 | display: flex; 16 | flex-direction: row; 17 | justify-content: center; 18 | align-items: center; 19 | background-color: #292524; 20 | padding: 20px; 21 | border-radius: 80px; 22 | gap: 120px; 23 | color: white; 24 | font-family: "Rubik", sans-serif; 25 | padding: 25px; 26 | } 27 | 28 | .inner-1 { 29 | display: flex; 30 | justify-content: space-around; 31 | align-items: center; 32 | gap: 20px; 33 | } 34 | .inner-2 { 35 | font-size: 50px; 36 | margin: 0; 37 | margin-right: 10px; 38 | padding-bottom: 25px; 39 | } 40 | 41 | .content { 42 | align-items: center; 43 | } 44 | 45 | .title { 46 | font-size: 35px; 47 | font-weight: 900; 48 | margin: 7px; 49 | } 50 | 51 | .tag { 52 | font-size: 33px; 53 | font-weight: 100; 54 | color: #a3a3a3; 55 | } 56 | 57 | .logo { 58 | background-color: #8b5cf6; 59 | border-radius: 50%; 60 | padding: 3px; 61 | } 62 | 63 | img { 64 | height: 60px; 65 | width: 60px; 66 | padding: 15px; 67 | } 68 | -------------------------------------------------------------------------------- /solutions/flex/3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 14 | 15 | 16 |
17 |
18 | 19 |
20 |
21 |
22 |

Host your Websites FREE on Github Pages

23 |
24 |
25 |

233 views - 2 weeks ago

26 |
27 |
28 | 33 |

The Code Dose

34 |
35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /solutions/flex/4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 | 25 |
26 |
27 |
28 |

U/A 16+

29 |

12 Seasons

30 |

HD

31 |
32 |
33 |

Quirky

34 | . 35 |

Sitcom

36 | . 37 |

Ensemble

38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /solutions/transform/1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 9 | overflow: hidden; /* Prevent vertical scrollbar */ 10 | } 11 | 12 | .main { 13 | text-align: center; 14 | padding: 2vh 20px; /* Adjusted padding for better spacing */ 15 | max-width: 80%; 16 | font-size: 5vw; /* Adjusted font size based on viewport width */ 17 | color: #212222; 18 | z-index: 1; 19 | position: relative; 20 | } 21 | 22 | @media (max-width: 768px) { 23 | .main { 24 | max-width: 95%; 25 | } 26 | } 27 | 28 | .mini { 29 | background-color: #FFD117; 30 | color: #222221; 31 | font-size: 1.8vw; /* Adjusted font size based on viewport width */ 32 | width: 11vw; /* Adjusted width based on viewport width */ 33 | padding: 0.1vh 2vw; /* Adjusted padding for better spacing */ 34 | border-radius: 5%; 35 | margin-top: -10vh; /* Adjusted margin to center vertically */ 36 | text-align: center; 37 | position: absolute; 38 | top: 65%; 39 | left: 74%; 40 | transform: translate(-50%, -50%) rotate(340deg); 41 | z-index: 2; 42 | } 43 | --------------------------------------------------------------------------------