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

Responsive Landing page built with Vue

@DonHeidi

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


I really enjoyed this challenge but it took me longer than expexted due to Vue. I wanted to try out Vue and it was a nice experience. Vue really encouraged me to structure my code in a cleaner way than with Vanilla HTML/CSS but it took some time to bring up a structure.

I also tried to use counter-increment for the but was not able to get it up :/ Is counter-increment only working on siblings?

I am also not sure about the background on the footer. I used pseudo elements to create the effect but I am not sure if this is the way to go.

Besides, feel free to give me some feedback

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Don, this looks really good! 🙂 I've been looking to get into Vue and Svelte too, so it's nice to see people trying out new frameworks in their projects.

About the footer background, I wonder whether you had tried using the image as a background first, and if you did, what kind of issues did you run into that made you use a pseudo element instead? I would think using it as the footer background would give you more control in positioning, and plus this is on a container element that spans across the page. I had similar issues when working on a recent challenge, and I went back and forth between using the SVGs as a background and as a pseudo element; in the end I had almost all of them as pseudo elements because resizing of the SVGs was needed.

In any case, this was great work, and looking forward to more Vue projects 😊

0

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