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

SASS (scss) & Vanilla JS

#sass/scss
Eray 1,410

@ErayBarslan

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 challenge took me longer than I expected with little tweaks it has in design and slide functionality for different screen sizes. Nevertheless had fun building it :) Looks like font-family used in design is no longer supported and changed to another version so font may be a little off.

Community feedback

@MahdiSohaily

Posted

WOW, really accurate. How do you manage it?

0

Eray 1,410

@ErayBarslan

Posted

@MahdiSohaily thanks :) I design each part separate starting from top and move to bottom when I'm happy with result. For example I'd design navigation to what I think would be close to the provided. From there I take the detailed approach. I compare my design to provided by taking screenshots on responsive design mode with the same resolution. At first It's been taking more tries but as for everything goes, practice makes it natural.

1

@MahdiSohaily

Posted

@ErayBarslan How do you adjust the resolution of your design with solution?

0
Eray 1,410

@ErayBarslan

Posted

@MahdiSohaily You can view the web page in responsive mode by right-click > inspect > responsive design mode. Depending on your browser it's either on bottom-left or bottom-right. Then you can change the resolution of the page in view mode.

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