Here's how I did in my first week of Frontend Mentor challenges.
Tags: html, css, javascript, beginners
Published: 2022-10-24 13:12:27

Let me introduce you to Frontend Mentor if this is your first time hearing about it.

Frontend Mentor is a platform for developers who wish to improve their frontend skills by creating professionally designed projects that provide the most realistic development experience possible. 

The challenges they provide have five difficulty levels:

1. Newbie
2. Junior
3. Intermediate
4. Advanced
5. Guru

The majority of these challenges are free and open to anyone. All of the beginning code, including images and designs in JPG format, is available for free download. These challenges provide Sketch and Figma design files, but they must be purchased using design credits. I have not yet taken the advantage of the FREE+ Premium and PRO subscription, so everything I've done so far has been free challenges.  

As such, I began at the beginning with the newbie challenges. This is what I discovered:

## Day 1: QR code component

**Title:** QR code component
**Duration:** 1 Day
**Technologies Used:** HTML and CSS. 
**Live Site:** https://front-end-qrcomponent.netlify.app/
**Github:** https://github.com/JavascriptDon/Frontend-Mentor-Challenges


![QR Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2tlgebixdijdshzkn72.png)

> 💡Note - This HTML and CSS challenge will put your responsive layout skills to the test.


## Day 2: Advice generator app

**Title:** Advice generator app
**Duration:** 1 Day
**Technologies Used:** HTML, CSS and Javascript. 
**Live Site:** https://javascriptdon.github.io/Frontend-Mentor-Challenges/
**Github:** https://github.com/JavascriptDon/Frontend-Mentor-Challenges/tree/advice-generator-app

![Advice Generator App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4i3b5693aypgcekra47.png)

> 💡 Note - If you've never fetched data from an API before, then this HTML, CSS, and Javascript challenge will put your responsive layout and research skills to the test.

## Day 3: Interactive E-commerce product page

**Title:** E-commerce product page
**Duration:** 1 Day
**Technologies Used:** HTML, CSS and Javascript. 
**Live Site:** https://ecommerce-page-c583ac.netlify.app/
**Github:** https://github.com/JavascriptDon/Frontend-Mentor-Challenges/tree/product-page

![E-commerce-Product-Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia7626yvaw4dmvmhxoci.png)

> 💡 Note - This HTML, CSS and Javascript challenge will put your Javascript skills to the test with a lightbox product gallery and cart functionality. 

## Day 4: Classic Todo app

**Title:** Todo app
**Duration:** 1 Day
**Technologies Used:** HTML, CSS and Javascript. 
**Live Site:** https://scintillating-semifreddo-8396fc.netlify.app/
**Github:** https://github.com/JavascriptDon/Frontend-Mentor-Challenges/tree/todo-app


![Todo App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ajarw1ep024b5pqxoni.png)

> 💡 Note - This HTML, CSS and Javascript challenge will put your responsive layout skills and javascript skills to the test. If you want to take the extra test, I would personally advise looking at [SortableJS](https://github.com/SortableJS/Sortable) for reorderable drag-and-drop lists.

## Day 5: Product preview card component

**Title:** Product preview card component
**Duration:** 1 Day
**Technologies Used:** HTML and CSS. 
**Live Site:** https://product-card-componenti-ed9c54.netlify.app/
**Github:** https://github.com/JavascriptDon/Frontend-Mentor-Challenges/tree/product-card-component

![Product-Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i35jy0xzzmrz7mx9q5a9.png)

> 💡 Note - This HTML and CSS challenge will put your knowledge of flexbox and responsive layout to the test.

## Day 6: Interactive card details form

**Title:** Interactive card details form
**Duration:** 1 Day
**Technologies Used:** HTML, CSS and Javascript. 
**Live Site:** https://effervescent-forms-856795.netlify.app/
**Github:** https://github.com/JavascriptDon/Frontend-Mentor-Challenges/tree/interactive-forms

![Card-forms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1siitl8mncsv71tczyw2.png)

> 💡 Note - This HTML, CSS, and Javascript challenge will test your knowledge of responsive layout, DOM manipulation, and form validation skills.

## Day 7: Responsive Intro section with dropdown navigation

**Title:** Intro section with dropdown navigation
**Duration:** 1 Day
**Technologies Used:** HTML, CSS and Javascript. 
**Live Site:** https://transcendent-dropdown-b48f68.netlify.app/
**Github:** https://github.com/JavascriptDon/Frontend-Mentor-Challenges/tree/dropdown-navigation


![Dropdown-navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cab98vqcplxku3cpi8c1.png)

> 💡 Note - This HTML, CSS, and Javascript challenge will test your knowledge of navigation menus, which is a popular pattern on larger websites. It will also present some interesting responsive layout challenges. 



## Conclusion 

If you have any suggestions and ideas to enhance my design and code quality. 

Please comment them down below! 💬 👇