These are the front-end design projects I completed on FrontendMentor 🏋️. FrontendMentor is a "platform that provides front-end challenges that include professional web designs".
This section represents where it all started, my first challenges ordered by completion. My learning process through the realization of these challenges was indescriptable!
| # | Challenge | Solution page | Tech | Code | Live Demo |
|---|---|---|---|---|---|
| 1 | QR Card Component | Solution | HTML - CSS | Code | Demo |
| 2 | NFT Preview | Solution | HTML - CSS | Code | Demo |
| 3 | Order Summary | Solution | HTML - CSS | Code | Demo |
| 4 | Chanel Essence Card | Solution | HTML - CSS | Code | Demo |
| 5 | Stats Preview Card | Solution | HTML - CSS | Code | Demo |
| 6 | Interactive Rating | Solution | HTML - CSS - JS | Code | Demo |
| 7 | FAQ Accordion Card | Solution | HTML - CSS - JS | Code | Demo |
| 8 | Three Columns Preview Card | Solution | HTML - CSS | Code | Demo |
| 9 | Profile Card | Solution | HTML - CSS | Code | Demo |
| 10 | Four Card Feature Section | Solution | HTML - CSS | Code | Demo |
| 11 | Social Proof Section | Solution | HTML - CSS | Code | Demo |
| 12 | Article Preview Component | Solution | HTML - CSS - JS | Code | Demo |
| 13 | Base Apparel Coming Soon | Solution | HTML - CSS - JS | Code | Demo |
| 14 | Single Price Grid | Solution | HTML - CSS | Code | Demo |
| 15 | Intro Component With Signup Form | Solution | HTML - CSS - JS | Code | Demo |
| 16 | Huddle Landing Page | Solution | HTML - CSS | Code | Demo |
| 17 | Ping Coming Soon Page | Solution | HTML - CSS - JS | Code | Demo |
These challenges have more complex layouts including responsive web design, also API consumptions.
| # | Challenge | Solution page | Tech | Code | Live Demo |
|---|---|---|---|---|---|
| 1 | News Homepage | Solution | HTML - CSS - JS | Code | Demo |
| 2 | Sunnyside agency | Solution | HTML - SCSS - JS - PARCEL | Code | Demo |
| 3 | Advice Generator | Solution | HTML - SCSS - JS - VITE | Code | Demo |
| 4 | Age calculator | Solution | HTML - SCSS - TYPESCRIPT - VITE | Code | Demo |
Challenges with more complex logic and design, API comsuption and more reasons to try modern technologies
| # | Challenge | Solution page | Tech | Code | Live Demo |
|---|---|---|---|---|---|
| 1 | IP Tracker | Solution | HTML - SCSS - JS - VITE | Code | Demo |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent