Lessons learnt building a landing page with Frontend Mentor

If you want to grow fast as a developer, the best approach to take is by building projects. Thanks to frontend mentor, they have provided a platform for experienced and newbie developers to build projects that will grow and expand their skillsets and knowledge. In this article, I am sharing what I learnt while building the Easybank landing page on Frontend Mentor which helped me improve my knowledge about React and TypeScript.

To be honest, when I Initially started this project, I taught I won't learn anything in the end because building a landing page is not a hard thing for me to do with my current skill level, but it was not until I had a mindset shift that I shouldn't just be building projects for the sake of building them, but rather aim to learn something from what I am building in other to see results. Taking this approach to build projects has profound benefit and it makes the whole process more fun and encouraging.

Here are the lessons I learnt building this landing page

1. Estimating the time of a project

One thing I learnt when it comes to estimating the duration of a project is that life happens and things will definitely not go as planned, so it's important you learn how to adapt and still show up, no matter what. Anytime a deadline you fixed didn't work, instead of just giving up, try to understand why things didn't go as planned and work towards avoiding that mistake again in the future, that's how to improve.

2. Importing images in a React application

Since I learnt React, I have always struggled with understanding how images are used in a React application, it just seemed like a big deal to me, but while building this project and making some research, I learnt 2 things

• When an image doesn't change frequently e.g a logo, it's best to put that image in the public folder
• When an image is likely to change from time to time e.g an image for a blog article, it makes sense to put that image in the src folder, so it compiles with the code at build time.

This 2 lessons helped me understand where to put the images that came with this project, and how to import them in my code. I put my logo in the public folder and put the images for the blog articles in the src folder because the image for a blog article can always change (let me know if you have a different idea about this).

3. Showing the active state of a link using a linear gradient

This was a nice practice to test my CSS knowledge. Initially looking at it, I taught it will be tough to do as I am not much of a CSS fan, but it was not so difficult in the end as my knowledge of CSS helped me get the result I was looking for. Here is how the code for my HTML and CSS looks

4. Typescript by default doesn't support non-code files

This is why I like building things from scratch because they help you understand what's going on under the hood in most of these frameworks. In React, I didn't realize TypeScript doesn't know how to handle files that are not code related like images, so to solve the problem, you will need a TypeScript Declaration file to tell it how to handle those kind of files. In my application, red lines kept showing where I imported my images and css files

It was until I made research on the problem, thanks to ChatGPT that I was able to come up with a solution. A TypeScript declaration file tells TypeScript how to handle certain types of files when it sees them, so I created 2 TypeScript declaration files to tell TypeScript how to handle my images and css files

Note — If you use vite to create a React project, it comes with a TypeScript declaration file by default called vite-env.d.ts which has all the declaration needed for most file types, but I deleted mine by mistake 😂😂 because I didn't think it was necessary, but good thing I did because I wouldn't have learnt this lesson otherwise.

Conclusion

Learning these concepts have helped me improve my knowledge about React and how to use TypeScript in a React application which has given me confidence to build more complex web applications. Let me know if you found any of these lessons helpful, and what you have learnt recently from React that you didn't know before. If you would like to check the code for this project, here is the github repo and a live preview.

You can find out more about me on X and check out some of my work on Github. The next project I am working on from frontend mentor is the Multistep-form, really looking forward to it!