Skip to content
Submitted over 4 years ago

Bookmark Landing Page Solution

Mar•220
@Mar5Planet
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Bookmark landing page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

That was a lot of work. I definitely feel like there is a better and easier way to create this site. Any help in terms of shifting my coding style? Additionally, whats the rule of thumb for margining and padding with parent/child containers?

Thanks.

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    Great work on this challenge, Mar! It's a large page, so it will definitely need more code than some of the other challenges.

    One thing you could try on future projects is using min-width media queries instead of max-width. It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

    I would recommend reviewing your breakpoints and maybe adding another one in. At a large mobile - small/medium tablet the content is a bit off. Making sites look good at as wide a range of screen sizes as possible is a key role of a front-end developer. So it's well worth putting in the time to practice it and refine those skills.

    Keep up the great work! 👍

    1
    Mar•220
    @Mar5PlanetPosted over 4 years ago

    Thank you Matt!

    0

Please log in to post a comment

Log in with GitHub

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