Frontend Mentor - Frontend Coding Challenges

This repository contain projects I am making on www.frontendmentor.io.

You can see my frontend mentor profile here.

As I am not a PRO member in Frontend Mentor, I don't have access to any design files. So dimensions and sizes can be different. Be nice to me on that.

Table of contents

• Overview
  • Snapshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Improve your front-end coding skills by building real projects

This is the tagline of Frontend Mentor. And rightly so. To learn, nothing is as good as making projects.

You will see all the projects I am making on this platform.

Snapshots

Snapshots of some of the projects-

B7. Time Tracking Dashboard :

• Solution URL: Source Code

• Live Site URL: Live Link

---

B5. Tip Calculator App :

• Solution URL: Source Code

• Live Site URL: Live Link

---

B0. Testimonial Grid Section :

• Solution URL: Source Code

• Live Site URL: Live Link

---

A3. Manage Landing Page :

• Solution URL: Source Code

• Live Site URL: Live Link

---

B4. Advice Generator App :

• Solution URL: Source Code

• Live Site URL: Live Link

Links

No.	Project Name	Source Code	Live Link
A0.	QR Code	Code	Live
A1.	Product Preview Card	Code	Live
A2.	Result Summary Component	Code	Live
A3.	Manage Landing Page	Code	Live
A4.	3 Column Preview Card Component	Code	Live
A5.	Single Price Grid Component	Code	Live
A6.	Order Summary Component	Code	Live
A7.	Stats Preview Card Component	Code	Live
A8.	Four Card Feature Section	Code	Live
A9.	Social Proof Section	Code	Live
B0.	Testimonials Grid Section	Code	Live
B1.	Ping Coming Soon Page	Code	Live
B2.	Interactive Rating Component	Code	Live
B3.	Intro Component with Signup Form	Code	Live
B4.	Advice Generator App	Code	Live
B5.	Tip Calculator App	Code	Live
B6.	Pricing Component with Toggle	Code	Live
B7.	Time Tracking Dashboard	Code	Live

My process

Built with

• Vanilla JavaScript

• Semantic HTML5 markup

• CSS custom properties / Tailwind

• Flexbox

• Some Desktop-first workflow, some Mobile-first workflow

What I learned

• Responsive Design

• Semantic Elements

• DOM manipuation

• Event listener

• Array methods

• Arrow function

And many more...

Continued development

Need to work on background designs, UI/UX, add more functionality.

Your suggestions are welcome. 🙌

Useful resources

• Udemy - Udemy course on DOM 📚

• freecodecamp - All the problems I solved. Helped me a lot. 🙌

• w3schools - This helped me throughout my journey. Still doing. 🙂

• Google API - For fonts 🆎

• cdnjs - For icons

Author

Basant Soni 👨‍💻

• GitHub - @SoniBasant

• Frontend Mentor - @SoniBasant

• CodePen - @SoniBasant

• Hashnode - @SoniBasant

Acknowledgments

Ecem Gokdogan

I am learning a lot from Ecem's projects. Like improving projects by adding more styles and functionalities. I got to know about "author" and "keywords" tag which I am adding in all of my projects. Her consistency is inspiring.

• GitHub

• Frontend Mentor