A collection of 37 hands-on exercises built with HTML and CSS to practice real-world layouts and styling techniques.
🔗 Live Preview: [https://sdvp-3.github.io/HTML-CSS/]
- HTML — Structure and content of every page
- CSS — Styling and visual design
- Flexbox — Flexible, responsive layouts made easy
- CSS Grid — Perfect for structuring layouts into rows and columns
- Position — Mastering
absolute,relative, andfixedplacement - Fonts — Practicing Arial, Tahoma, Verdana and more
| # | Exercise | Topic |
|---|---|---|
| 1 | Flex Box Exercise | Flexbox |
| 2 | Arial Font | Fonts |
| 3 | Div Exercise | HTML Structure |
| 4 | Flex Box | Flexbox |
| 5 | Messages Exercise | Layout |
| 6 | Text Box No Border | CSS Styling |
| 7-9 | Flex Box (variations) | Flexbox |
| 10 | Amazon Clone | Layout & Flexbox |
| 11 | Arial Font Exercise | Fonts |
| 12 | Back To Amazon | Layout |
| 13 | Button | CSS Buttons |
| 14 | Discord Clone | Layout & Flexbox |
| 15 | Display Block | CSS Display |
| 16 | Div Exercise | HTML Structure |
| 17 | Fonts Exercise | Fonts |
| 18 | FreeCodeCamp Clone | Layout |
| 19 | GitHub Clone | Layout |
| 20 | Google Clone | Layout |
| 21 | Horizontal Layout | CSS Layout |
| 22 | Layout Exercise | CSS Layout |
| 23 | LinkedIn Clone | Layout & Flexbox |
| 24 | LinkedIn Sign Up | Forms |
| 25 | Market Exercise | Layout |
| 26 | Messengers Clone | Layout |
| 27 | YouTube Position | Position |
| 28 | Price Exercise | CSS Styling |
| 29 | Search Board | Forms & Layout |
| 30 | Sign Up Form | Forms |
| 31 | Tahoma Font | Fonts |
| 32 | Text Same Line | CSS Inline |
| 33 | Text Box | CSS Inputs |
| 34 | Twitter Clone | Layout |
| 35 | Uber Clone | Layout & Flexbox |
| 36 | Uber Button | CSS Buttons |
| 37 | Verdana Font | Fonts |
Saidjon — learning front-end development one exercise at a time.
⭐ If you found this helpful, feel free to star the repo!