Skip to content
Submitted 4 months ago

Responsive landing page using Sass

#accessibility#cube-css#sass/scss
P
Eli Silk•850
@elisilk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Loopstudios landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This was my first time using Sass, and I really only scratched the most basic surface level of it so far. But it was good to get it up and running, and I definitely have ideas for areas of Sass I can utilize in future projects. I also continued to try on CUBE CSS, but probably implemented some aspects of that methodology more faithfully than others. But progress, not perfection. Will be great to keep getting more experience with both CUBE CSS and Sass in future challenges.

Community feedback

  • P
    Nikita Vologdin•660
    @NikitaVologdinPosted 3 months ago
    • Job includes semantic HTML
    • 100 accessible on the lighthouse
    • Layout looks great on all screen sizes
    • When I completed the mockup I received an error about the second nav element on the page.
    • Also, lighthouse metrics (chrome dev tools) can be improved by using static fonts in modern formats .wof2 and images can be converted to the .webp.

    ImageMagick CLI for converting images

    Convert fonts

    Great job, as always! I would be happy to collaborate on any project.

    Best, Nikita.

    Marked as helpful
    1
    P
    Eli Silk•850
    @elisilkPosted 3 months ago

    Hi @NikitaVologdin,

    Thanks so much for another close look at my solution. And for all the great suggestions for improvement. 🙏

    I spent a little more time on revising my solution than I was originally hoping to. But in the end, it feels worth it, since I learned a good amount about the Lighthouse metrics and how to address the issues they surface. I think the solution scores much better and loads significantly faster as a result. 🚀 And while I was at it, I fixed some of the block spacing so now my solution looks much closer to the design too. A bonus! 😄

    Anyway, thanks again for taking the time and pushing me to do better. It's much appreciated.

    Eli

    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