https://github.com/ranitmanik/frontendmentor-challenges
Welcome to my Frontend Mentor Challenges repository! This is where I showcase my solutions to a range of Frontend Mentor projects. Each project is neatly organized within its own directory, which includes separate HTML, CSS, and JavaScript files for easy navigation and exploration. Feel free to browse through and check out my work!
https://github.com/ranitmanik/frontendmentor-challenges
forntend-projects front-end-development front-end-mentor front-end-web-development frontend frontend-mentor frontend-mentor-challenge frontend-webdevelopment frontendmentor frontendmentor-challenge frontendmentor-challenges frontendmentor-solution frontendmentorchallenge frontendmentors html html-css-javascript react webdevelopment website
Last synced: 3 months ago
JSON representation
Welcome to my Frontend Mentor Challenges repository! This is where I showcase my solutions to a range of Frontend Mentor projects. Each project is neatly organized within its own directory, which includes separate HTML, CSS, and JavaScript files for easy navigation and exploration. Feel free to browse through and check out my work!
- Host: GitHub
- URL: https://github.com/ranitmanik/frontendmentor-challenges
- Owner: RanitManik
- License: mit
- Created: 2023-12-15T12:00:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-04T18:07:30.000Z (11 months ago)
- Last Synced: 2025-03-19T19:46:56.822Z (3 months ago)
- Topics: forntend-projects, front-end-development, front-end-mentor, front-end-web-development, frontend, frontend-mentor, frontend-mentor-challenge, frontend-webdevelopment, frontendmentor, frontendmentor-challenge, frontendmentor-challenges, frontendmentor-solution, frontendmentorchallenge, frontendmentors, html, html-css-javascript, react, webdevelopment, website
- Language: CSS
- Homepage: https://ranitmanik.github.io/frontendmentor-challenges/
- Size: 16 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
Frontend Mentor Challenges
Welcome to my Frontend Mentor Challenges repository! This is where I showcase my solutions to a range of Frontend Mentor
projects. Each project is neatly organized within its own directory, which includes separate HTML, CSS, and JavaScript
files for easy navigation and exploration. [**visit my Frontendmentor Profile Page**](https://www.frontendmentor.io/profile/RanitManik)
## Challenges
| # | Challenges | Live Demo |
|:--:|-------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 01 | [Blog Preview card](FrontendMentor01—Blog-preview-card) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor01%E2%80%94Blog-preview-card/index.html) |
| 02 | [Results Summary component](FrontendMentor02—Results-summary-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor02%E2%80%94Results-summary-component/index.html) |
| 03 | [Product preview card component](FrontendMentor03—Product-preview-card-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor03%E2%80%94Product-preview-card-component/index.html) |
| 04 | [NFT preview card component](FrontendMentor04—nft-preview-card-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor04%E2%80%94nft-preview-card-component/index.html) |
| 05 | [QR code component](FrontendMentor05—QR%20code%20component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor05%E2%80%94QR%20code%20component/index.html) |
| 06 | [Order summary component](FrontendMentor06—Order-summary-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor06%E2%80%94Order-summary-component/index.html) |
| 07 | [Stats preview card component](FrontendMentor07—stats-preview-card-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor07%E2%80%94stats-preview-card-component/index.html) |
| 08 | [testimonials grid section](FrontendMentor08—testimonials-grid-section) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor08%E2%80%94testimonials-grid-section/index.html) |
| 09 | [3-column preview card component](FrontendMentor09—3-column-preview-card-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor09%E2%80%943-column-preview-card-component/index.html) |
| 10 | [Chat app CSS illustration](FrontendMentor10—chat-app-css-illustration) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor10%E2%80%94chat-app-css-illustration/index.html) |
| 11 | [fylo data storage component](FrontendMentor11—fylo-data-storage-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor11%E2%80%94fylo-data-storage-component/index.html) |
| 12 | [Profile card component](FrontendMentor12—profile-card-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor12%E2%80%94profile-card-component/index.html) |
| 13 | [Social links profile](FrontendMentor13—social-links-profile) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor13%E2%80%94social-links-profile/index.html) |
| 14 | [Social proof section](FrontendMentor14—social-proof-section) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor14%E2%80%94social-proof-section/index.html) |
| 15 | [Single price grid component](FrontendMentor15—single-price-grid-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor15%E2%80%94single-price-grid-component/index.html) |
| 16 | [recipe page](FrontendMentor16—recipe-page) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor16%E2%80%94recipe-page/index.html) |
| 17 | [huddle landing page with single introductory section](FrontendMentor17—huddle-landing-page-with-single-introductory-section) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor17%E2%80%94huddle-landing-page-with-single-introductory-section/index.html) |
| 18 | [four card feature section](FrontendMentor18—four-card-feature-section) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor18%E2%80%94four-card-feature-section/index.html) |
| 19 | [huddle landing page with alternating feature blocks](FrontendMentor19—huddle-landing-page-with-alternating-feature-blocks) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor19%E2%80%94huddle-landing-page-with-alternating-feature-blocks/index.html) |
| 20 | [fylo landing page with two column layout](FrontendMentor20—fylo-landing-page-with-two-column-layout) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor20—fylo-landing-page-with-two-column-layout/index.html) |
| 21 | [huddle landing page with curved sections](FrontendMentor21—huddle-landing-page-with-curved-sections) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor21—huddle-landing-page-with-curved-sections/index.html) |
| 22 | [clipboard landing page](FrontendMentor22—clipboard-landing-page) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor22—clipboard-landing-page/index.html) |
| 23 | [advice generator app](FrontendMentor23—advice-generator-app) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor23—advice-generator-app/index.html) |
| 24 | [faq accordion](FrontendMentor24—faq-accordion) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor24—faq-accordion/index.html) |
| 25 | [interactive rating component](FrontendMentor25—interactive-rating-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor25—interactive-rating-component/index.html) |
| 26 | [ping coming soon page](FrontendMentor26—ping-coming-soon-page) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor26—ping-coming-soon-page/index.html) |
| 27 | [article preview component](FrontendMentor27—article-preview-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor27—article-preview-component/index.html) |
| 28 | [base apparel coming soon](FrontendMentor28—base-apparel-coming-soon) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor28—base-apparel-coming-soon/index.html) |
| 29 | [intro component with signup form](FrontendMentor29—intro-component-with-signup-form) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor29—intro-component-with-signup-form/index.html) |
| 30 | [tip calculator app](FrontendMentor30—tip-calculator-app) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor30—tip-calculator-app/index.html) |
| 31 | [newsletter sign up with success message](FrontendMentor31—newsletter-sign-up-with-success-message) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor31—newsletter-sign-up-with-success-message/index.html) |
| 32 | [project tracking intro component](FrontendMentor32—project-tracking-intro-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor32—project-tracking-intro-component/index.html) |
| 33 | [age calculator app](FrontendMentor33—age-calculator-app) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor33—age-calculator-app/index.html) |
| 34 | [contact form](FrontendMentor34—contact-form) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor34—contact-form/index.html) |
| 35 | [expenses chart component](FrontendMentor35—expenses-chart-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor35—expenses-chart-component/index.html) |
## How to Use
1. Clone the repository to your local machine.
```bash
git clone https://github.com/RanitManik/frontendmentor-challenges.git
```
2. Navigate to the specific challenge directory.
```bash
cd frontendmentor-challenges/challengeX
```
3. Open the `index.html` file in your preferred web browser to view the solution.
## Contributions
_Feel free to contribute by:_
- Providing feedback on existing solutions.
- Adding solutions to challenges that I haven't completed.
- Optimizing existing code.
Please create a new branch for each set of changes and submit a pull request.
## Contact
Social Media
Username
Link
Email
[email protected]
Email
LinkedIn
Ranit Manik
LinkedIn
Instagram
ranit_manik_
Instagram
Facebook
RanitKumarManik
Facebook
Twitter
RANIT_MANIK
Twitter
## License
This project is licensed under the [MIT License](LICENSE).
## Acknowledgments
I would like to express my gratitude to:
- Frontend Mentor for providing these engaging challenges that help me enhance my skills and build real-world projects.
- The supportive and inspiring community members at Frontend Mentor. Your feedback and discussions have been invaluable
in my learning journey.