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

Flex and grid solution with Swiper.js

P

@emestabillo

Desktop design screenshot for the Manage landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was a true test in writing responsive code. Would appreciate your thoughts. Many thanks to my mentor @shahsilo for helping me get really close to the design!

Community feedback

@rohith-23-creator

Posted

OMG. That's an incredible work. I learnt a lot 👍

1

P

@emestabillo

Posted

@rohith-23-creator Thanks so much Rohith! 🙏🏼

1
Alex Kim 1,325

@alex-kim-dev

Posted

Hey Emmilie! That's a really fantastic work! Your solution is pretty accurate compared to the design. Also I like how you structured your SASS - very convenient and simple. I honestly don't know what can be improved, but here is a little hint on using media queries in sass. I noticed you often write @media screen and (min-width: 992px) {}. We can cut a little code here by defining mixins:

// mdUp means for medium screens (992px) and higher
@mixin mdUp {
  @media screen and (min-width: 992px) {
    @content;
  }
}

then we can use it like so:

.class {
  padding: 1rem;
  @include mdUp {
    padding: 1.5rem;
  }
}

And that's it. Good luck and I'll see your next project!

3

P

@emestabillo

Posted

@Alex-K1m Hi Alex, I agree about the media queries, it’s quite repetitive. I’ll refactor the project. Thanks for the feedback! 🙂

0

@sagspot

Posted

@Alex-K1m I learnt something as well. Thanks Alex

0
Alex Kim 1,325

@alex-kim-dev

Posted

@sagspot You're welcome!

0

@kfairris

Posted

Wow that’s identical. Great job!

2

@sagspot

Posted

Goodness!! This is really identical.

You find it easier to use CSS to toggle the mobile nav, I thought js makes it easier and cleaner.

Otherwise, this is really cool stuff

1

P

@emestabillo

Posted

@sagspot Thank you! You can use either methods, just make sure to check for accessibility :-)

1

@SukJinKim

Posted

Wonderful🥳

1

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