My First Front-End Challenge: Insights and Lessons Learned
I’m a full-stack web developer with expertise in the MERN stack, Next.js, TypeScript, Tailwind CSS, PostgreSQL, Prisma ORM, and AWS. Passionate about building scalable and efficient web applications, I enjoy working on both frontend and backend technologies to create seamless user experiences.
In addition to my development work, I actively contribute to open-source projects like OpenMRS, collaborating with global teams to improve healthcare solutions through technology.
Context
I am a 3rd-year CS undergrad from India and have been learning web development for some time. I’m proficient in technologies like HTML, CSS, JavaScript, TypeScript (a bit), React, Tailwind CSS, Next.js, and Framer Motion. It was time for me to put everything into a project and test how much I had truly learned.
Project Idea
I watched several YouTube videos on how to come up with web development project ideas. The most common advice was to look around and solve real-world problems. I tried this approach, but it didn’t work for me.
After some struggle, I found an amazing website: Frontend Mentor. It offers a variety of front-end project challenges to practice with. I started with a few basic, newbie-level, and junior-level projects. You can check them out here:
By the time I finished these, I was feeling more confident in my front-end skills. With a decent number of projects under my belt, it was time to build something more challenging. After exploring a few different projects, I finally settled on this one: Manage Landing Page.
The Story
I started off inconsistently with this project. I felt lazy and lacked focus, which led to my biggest mistake: designing solely for desktop screens. I completely ignored mobile responsiveness, which turned into a nightmare. After finishing the desktop version, making the website responsive became so confusing that I couldn’t do it.
I ended up putting the project aside for 2-3 weeks. Eventually, I mustered the courage to fix the responsiveness issues. The responsive navbar was the hardest part. I watched a few tutorials, consulted ChatGPT, and slowly figured it out. After that, I built the other responsive components section by section.
There were times when I doubted my ability to make the project fully responsive. But once I started solving smaller issues, I gained confidence. Each section I completed pushed me forward! Here’s the final result: Manage Landing Page.
I used React, Tailwind CSS and libraries like Embla Carousel and Sonner for this project.
Learnings
Don’t procrastinate when building a project.
Always follow the mobile-first approach when designing websites. This means building for smaller screens first before adjusting for larger screens.
Use existing libraries when you can. There are plenty of great libraries that simplify complex features. In my case, I used the Embla Carousel library to create the testimonial carousel.
Embrace AI tools like ChatGPT or Claude. These tools are here to enhance productivity, not replace developers.
Conclusion
If you only watch tutorials and never build projects, you’re wasting your time. Building projects is crucial—it boosts your confidence and opens up job opportunities. If you’re a beginner, keep these lessons in mind and apply them as you start your own projects.
If you’ve faced similar challenges or have any questions, feel free to leave a comment below!
You can follow me on X (formerly Twitter): @harshthkkr