https://github.com/andreafan123/frontend-challenge
Frontend UI Challenges
https://github.com/andreafan123/frontend-challenge
frontend-mentor html-css-javascript react scss tailwindcss typescript typescript-react ui vue
Last synced: 2 months ago
JSON representation
Frontend UI Challenges
- Host: GitHub
- URL: https://github.com/andreafan123/frontend-challenge
- Owner: AndreaFan123
- Created: 2021-11-05T16:21:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-11-16T07:57:58.000Z (7 months ago)
- Last Synced: 2025-11-16T09:20:22.639Z (7 months ago)
- Topics: frontend-mentor, html-css-javascript, react, scss, tailwindcss, typescript, typescript-react, ui, vue
- Language: CSS
- Homepage: https://frontend-challenge-eta-five.vercel.app
- Size: 40.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Challenge
Here are the challenges that I participate in from a website called [Frontend Mentor](https://www.frontendmentor.io).
Table of contents:
- [Order Summary](#challenge-1--order-summary)
- [Profile Card](#challenge-2--profile-card)
- [Stats Preview Card](#challenge-3--stats-preview-card)
- [3 Column Preview Card](#challenge-4--3-column-preview-card)
- [Landing Page](#challenge-5--landing-page)
- [Single Price Grid](#challenge-6--single-price-grid)
- [Product Card](#challenge-7--product-card)
- [NTF Preview Card](#challenge-8--nft-preview-card)
- [QR Code](#challenge-9-qr-code)
- [Sunnyside Agency](#challenge-10-sunnyside-agency)
- [Article Preview Component](#challenge-11-article-preview-component)
- [Galleria Slideshow](#challenge-12-galleria-slideshow)
- [W. News Site](#challenge-13-w-news-site)
- [Recipe-page](#challenge-14-receipe-page)
## Challenge 1: Order summary
- [Live Demo](https://order-summary-challenge-1.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_1_Order_summary)
- Tech Stack: `HTML`, `CSS`
## Challenge 2: Profile card
- [Live Demo](https://challenge-profile-card.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_2_profile_card)
- Tech Stack: `HTML`, `CSS`
## Challenge 3: Stats preview card
- [Live Demo](https://stats-preview-card-challenge-3.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_3_Stats_preview_card)
- Tech Stack: `HTML`, `CSS`
## Challenge 4: 3 Column preview card
- [Live Demo](https://preivew-card-challenge-4.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_4_3-column_preview_card)
- Tech Stack: `HTML`, `CSS`
## Challenge 5: Landing page
- [Live Demo](https://simple-price-grid-card.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_6_single-price-grid-component-)
- Tech Stack: `HTML`, `CSS`
## Challenge 6: Single price grid
- [Live Demo](https://simple-price-grid-card.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_6_single-price-grid-component-)
- Tech Stack: `HTML`, `CSS`
## Challenge 7: Product card
- [Live Demo](https://product-card-component-djiw.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_8_product_preview_card)
- Tech Stack: `HTML`, `CSS`
## Challenge 8: NFT preview card
- [Live Demo](https://nft-preview-card-frontend-challenge.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_8_NFT_preview_card)
- Tech Stack: `React`, `TypeScript`, `CSS`
## Challenge 9: QR Code
- [Live Demo](https://qrcode-card-frontend-challenge.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_10_QR_code)
- Tech Stack: `HTML`, `CSS`
## Challenge 10: Sunnyside Agency
- [Live Demo](https://sunnyside-agency-10.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_10_sunnyside_agency)
- Tech Stack: `React`, `TypeScript`, `CSS`
## Challenge 11: Article Preview Component
- [Live Demo](https://article-card-component-328938.netlify.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_11_article_preview_component)
- Tech Stack: `HTML`, `CSS`
## Challenge12: Galleria Slideshow
- [Live Demo](https://galleria-slideshow-site-rho.vercel.app/)
- [GitHub](https://github.com/AndreaFan123/galleria_slideshow_site)
- Tech Stack: `Next.js`, `TypeScript`, `Tailwind CSS`
## Challenge 13: W. News Site
- [Live Demo](https://frontend-challenge-eta-five.vercel.app/)
- [GitHub](https://github.com/AndreaFan123/Frontend-challenge/tree/main/Challenge_13_News_homepage)
- Tech Stack: `React`, `TypeScript`, `CSS`
## Challenge 14: Receipe Page
- [Live Demo]()
- [GitHub]()
- Tech Stack: `HTML`, `CSS`