Workit Landing Page

Frontend Mentor

This is my second challenge from this site.

The more I do this challenges, the more I learn and relearn about other things, that I don't have the opportunity to use on my daily job.

Description

This project is a landing page for a fictional company called Workit. The challenge is to build out this landing page and get it looking as close to the design as possible.

You can check the challenge here.

It was built with Vite, React, Typescript, Material 3, and pure CSS. Some sections, as I always used to said for each part of the landing page, are split on React components.

All the website is responsive, and the design is fully responsive.

What I learned

I learnt 3 things on this project:

• Clip-path: Sometimes, you don't have the opportunity to use it, and also, check how does it works, it's kind of weird, but as always, there are some guides, that can help you to understand it.
• Visibility: This property helps a lot, I reminded just because I wanted to use clip-path, but it's a good property to use. It helps me, to show the image over the curve at the bottom of the first section.
• Media Queries: I haven't have the opportunity to build a dark mode website yet on my daily job, so I used this opportunity to do it. I have to admit that I used Material 3 Builder to make an idea about what do I want to do, and then try to replicate some rules that they follow for each color variable.

I think on my next challenge, I'm going to look for something that helps to use container queries. I used once, but I want something more challenging, meanwhile I grow my portfolio, personal projects, and improve my Frontend skills.