Lessons Learnt Building a Frontend Mentor Project

One of the best ways I’ve found to sharpen my frontend development skills is by building real projects, and no better way to do that than with Frontend Mentor. A while back, I built a Newsletter form project where users can sign up for a newsletter (like on a landing page). At first glance, it looked simple, but I ended up learning quite a lot along the way.

In this article, I am going to share the challenges I faced and the lessons I learnt while working on this project. Here's the live link and GitHub repo to check it out.

1. Discovering the <picture> Element

One of my favorite discoveries was the <picture> element. The UI of the form had 2 images, one for desktop and one for mobile, so I needed to display the right image depending on the users screen. One solution might have been to use 2 <img /> tags and render the appropriate image using media queries, but I decided to look for a better solution, and that's when I came across the <picture> element.

The <picture> element allowed me specify different image sources using a <source> element, based on the users screen width. For example, I could show a wide desktop image for larger screens and a smaller, optimized one for mobile.

<picture>
  <source srcset="desktop-image.png" media="(min-width: 80em)"></source>

  <img src="mobile-image.svg" alt="" />
</picture>

This did not only save me time, but also made my code cleaner and more responsive. It was a reminder that sometimes, the best solutions are already built into HTML, you don't have to use CSS or JavaScript to implement certain features, you just need to discover the appropriate HTML tag.

2. Practicing the BEM Naming Convention

Another big win was putting the BEM (Block, Element, Modifier) naming convention into practice for my CSS.

Usually, I write class names based on what comes to mind in the moment, which eventually made my CSS look messy and hard to maintain. With BEM, my class names became more structured and predictable. For example, instead of writing something vague like .error, I had a class called .newsletter__input--error. This made it clear where the class belonged, what it targeted, and how it was different from other elements.

BEM might feel a little verbose, and is definitely not compulsory for every project, but the clarity and scalability it brings are worth it, especially in bigger projects.

3. Leveling Up with TypeScript

This was my first real attempt building a project with TypeScript. I decided to code the logic part of the project in TypeScript, and it was a real eye-opener. At first, it felt strict and annoying honestly as the compiler kept throwing errors, but I quickly realized it was helping me avoid mistakes I wouldn’t have easily caught.

Here are a few TypeScript lessons I learnt:

• Type Assertion – I came across an issue where TypeScript couldn’t figure out an element was an input element, and because of this, I couldn't access some of the properties it had. To solve this problem, I used type assertion to specify the element was of the type HTMLInputElement so TypeScript would know what type the element is. This is due to the fact that TypeScript doesn't look at your HTML, only JS code, that's why you need to explicitly define what type an element is. This gave me more confidence in how I was using that element.
  

  const element = document.querySelector(".newsletter__input") as HTMLInputElement;
  

• Optional Chaining (?.) – This was a lifesaver. Instead of worrying if an element existed or not, I used optional chaining to safely check before running operations. If the element didn’t exist, the code wouldn’t execute, and more importantly, the app wouldn’t break. Note that optional chaining is not a TypeScript specific feature, it can also be used in JavaScript, but I discovered it with TypeScript.
  

const newsletterForm = document.querySelector(".newsletter__form");

newsletterForm?.addEventListener("submit", e => {
  // Content here
})

These small lessons added up and made me feel much more comfortable working with TypeScript, reinforcing the fact that it’s a powerful tool for writing safer and more maintainable code.

Final Thoughts

What looked like a simple Frontend Mentor challenge turned out to be a great learning experience. I walked away with new knowledge of the <picture> element, more discipline in how I write CSS thanks to BEM, and stronger TypeScript skills.

The best part?, each lesson I learnt is something I can apply in future projects, whether it’s building responsive layouts, organizing my styles better, or writing more reliable JavaScript.

If you’re also working through Frontend Mentor projects or any project really, I encourage you to treat it as an opportunity to experiment with new tools and best practices. You’ll be surprised how much you can learn, even from the simple challenges.

If you are reading my content for the first time, I am oyinkansola, a frontend developer helping small businesses build clean and responsive websites that help them grow online. You can also find me on LinkedIn and X, and also check out my portfolio