Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simonapiz/frontend-mentor-projects
My challenges solutions from Frontend mentor site
https://github.com/simonapiz/frontend-mentor-projects
front-end-development frontend-mentor-solutions html-css-javascript
Last synced: 5 days ago
JSON representation
My challenges solutions from Frontend mentor site
- Host: GitHub
- URL: https://github.com/simonapiz/frontend-mentor-projects
- Owner: SimonaPiz
- Created: 2023-06-13T09:00:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-15T11:22:37.000Z (6 months ago)
- Last Synced: 2024-06-15T12:25:27.786Z (6 months ago)
- Topics: front-end-development, frontend-mentor-solutions, html-css-javascript
- Language: CSS
- Homepage:
- Size: 2.24 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simona Pizio's Frontend-Mentor Projects
My challenges solutions from [Frontend mentor](https://www.frontendmentor.io/) site
#### Level legend:
1. 🔵 Newbie
2. 🟢 Junior
3. 🟠 Intermediate
4. 🔴 Advanced
5. ⚫ Guru
---
## 🔵 6 - Interactive rating component | ✅
> HTML CSS JS
➡ view challange: [frontendmentor.io/challenges/interactive-rating-component](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI)
➡ view my solution: [repository](https://github.com/SimonaPiz/Frontend-Mentor-Projects/tree/main/interactive-rating-component) - [live demo](https://fm-interactive-component-simonapiz.netlify.app/)
- 📝Your challenge is to build out this interactive rating component and get it looking as close to the design as possible.
> To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.
---
## 🟠 5 - Room Homepage | ✅
> HTML CSS JS
➡ view challange: [frontendmentor.io/challenges/room-homepage](https://www.frontendmentor.io/challenges/room-homepage-BtdBY_ENq)
➡ view my solution: [repository](https://github.com/SimonaPiz/Frontend-Mentor-Projects/tree/main/room-homepage) - [live demo](https://simonapiz-room-homepage.netlify.app/)
- 📝Your challenge is to build out this e-commerce homepage and get it looking as close to the design as possible.
> To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.
---
## 🔵 4 - 3-column preview card component | ✅
> HTML CSS
➡ view challange: [frontendmentor.io/challenges/3column-preview-card-component](https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-)
➡ view my solution: [repository](https://github.com/SimonaPiz/Frontend-Mentor-Projects/tree/main/3-column-preview-card) - [live demo](https://simonapiz-3-column-preview-card.netlify.app/)
- 📝Your challenge is to build out this 3-column preview card component and get it looking as close to the design as possible.
> To do this challenge, you need a basic understanding of HTML and CSS and responsive design.
---
## 🟠 3 - E-commerce product page | ✅
> HTML CSS JS
➡ view challange: [frontendmentor.io/challenges/ecommerce-product-page](https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6)
➡ view my solution: [repository](https://github.com/SimonaPiz/Frontend-Mentor-Projects/tree/main/ecommerce-product-page) - [live demo](https://simonapiz-fmentor-ecom-product-page.netlify.app/)
- 📝Your challenge is to build out this e-commerce product page and get it looking as close to the design as possible.
> To do this challenge, you need a good understanding of HTML, CSS and JavaScript.
---
## 🟢 2 - Newsletter sign-up form with success message | ✅
> HTML CSS JS
➡ view challange: [frontendmentor.io/challenges/newsletter-signup-form-with-success-message](https://www.frontendmentor.io/challenges/newsletter-signup-form-with-success-message-3FC1AZbNrv)
➡ view my solution: [repository](https://github.com/SimonaPiz/Frontend-Mentor-Projects/tree/main/newsletter-sign-up-with-success-message) - [live demo](https://newsletter-sign-up_simonapiz.surge.sh/index.html)
- 📝Your challenge is to build out this newsletter form and get it looking as close to the design as possible.
> This will test your skills with basic form structure, validation, and submission. The success state will also be an excellent opportunity to work with DOM manipulation.
---
## 🔵 1 - QR code component | ✅
> HTML CSS
➡ view challange: [frontendmentor.io/challenges/qr-code-component](https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H)
➡ view my solution: [repository](https://github.com/SimonaPiz/Frontend-Mentor-Projects/tree/main/qr-code-component-main)
- 📝Your challenge is to build out this QR code component and get it looking as close to the design as possible.
> A perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.