Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 4 years ago

Progressively enhanced, vanilla everything, Bookmark Landing page

accessibility, gulp, sass/scss
Dave•5,295
@dwhenson
A solution to the Bookmark landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


This one tripped me up in places I didn't expect. Notably, pseudo elements and SVGs. I put some details of the specific issues in the readme.

Key problems are:

  • Horizontal scrolling is still an issue because of the first pseudo element. I am not sure how I can fix this, or why it is only happening on the first pseudo element and not the second. They are essentially the same element with some extra transitions on the second one. Any advice on this would be appreciated.
  • I wanted to inline the SVG images but it caused so many issues that I opted not to in the end, and although not ideal took the performance hit. I had problems with background color, sizing and strange things in Safari - like bits of the SVG missing. Any suggestions on resources, courses or learning materials would be really appreciated.
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Dave's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License