Design comparison
Solution retrospective
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
As mentioned above, any feedback at all would be greatly appreciated !
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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