Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Meet Landing Page responsive with HTML/CSS !

@luqmanx1998

Desktop design screenshot for the Meet landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

A new week, a new challenge !

This is my third challenge on frontend mentor, and this time, a premium one! That means I was finally able to start working with a figma file, and it was my first time as well. It's a different experience learning to convert a figma file into code, as I had to take some time to get used to it, but it also meant that I didn't have to waste so much time guessing the margins/paddings/font-sizes and all that good stuff !

If I would do something differently next time, it's once again spending less time to make it as identical to the design as possible, as sometimes it's just impractical considering I'm still learning. Also, I didn't plan this challenge very well, as I kept improvising and changing my code as I went, and I tried to keep it as simple as possible. As a result my code ended up being messy , but going forward I will take some time to plan it out more. Nonetheless, I was proud of finishing this piece, and it's beautiful to look at !

What challenges did you encounter, and how did you overcome them?

I encountered a few challenges, first of all with responsive images. This challenge was a bit tricky, as I learned about the limitations of the picture element, so I had to come up with a different way to replicate the desktop version of the hero after finishing the mobile/tablet version. I also had issues replicating certain parts of the layout, specifically the desktop footer ! I couldn't quite get it to match the design, and I ended up having to hard-code certain elements in the footer, but it felt like I had no choice. And the last issue I encountered was trying to position the background image to match the design. I tried using the background-position property, and played around with the values, but it usually meant creating a gap around the entire footer, leaving a white space, so I left it as it is in the end. Nonetheless, I'm really proud of this and if anyone would leave me any feedback, I would really appreciate it ! :D

What specific areas of your project would you like help with?

As mentioned above, any feedback at all would be greatly appreciated !

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord