Here's how I did in my first week of Frontend Mentor challenges.

Helitha Rupasinghe - Oct 24 '22 - - Dev Community

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

💡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

💡 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

💡 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

💡 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 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

💡 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

💡 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

💡 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! 💬 👇

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .