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

SCSS, BEM, JS

Patrick 800

@PPechmann

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Learned a lot in this project, it was a bit of a struggle, but I think I managed fine :)

Lesssons learned:

1. Always plan the full project up to the smallest detail, before starting to code. I had an overall plan, but then I had to rewrite a lot of code as I kept going.

2. Learned how to use Figma. I never used it before and I highly recommend getting the Pro subscription and using the Figma file, it is a game changer!

3. Don't show the finished project to your non-coder friends and family enthusiastically, as they don't understand the complexity. They will mostly just see a basic website and not be very impressed :)

Question: I noticed that all of my solutions are always a bit off in the sizing of the entire page, although I usually apply a height of 100vh to the entire page and work on the same size (1440px). The solution looks identical in the browsers dev tools, but once uploaded, there is always an extra space on frontendmentors solution bottom. Any ideas?

And finally, all your feedback is much appreciated, as always!

Happy Coding and happy weekend to all of you :)

Patrick

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