Skip to content
Submitted almost 3 years ago

Responsive Landing page built with Vue

typescript, vue
Sebastian Heitmann•150
@DonHeidi
A solution to the Meet landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • Elaine•11,360
    @elaineleung

    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 😊

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