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

Vanilla CSS (Grid & Flexbox)

#accessibility
Eray 1,410

@ErayBarslan

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'd like to know if there are better approaches or suggestions regarding accessibility. Any other feedback is welcome :)

Community feedback

promise 520

@ugochukwuuu

Posted

Wow, this is awesome. How did you make it so accurate? I'm a newbie and I'd like to learn.

0

Eray 1,410

@ErayBarslan

Posted

@practitionerofsorts Thank you :) Firstly I design the page in blocks starting from top (e.g. navigation) then move to bottom when I'm happy with result. That makes it easier to align rest of the page depending on the section above. When it comes to the detailed approach, I take screenshot of page (from inspect page > responsive design mode (ctrl+shift+m) ) with the resolution matches provided design and check the differences. It may take plenty of tries to align correctly at first but it gets easier to predict. Don't forget to delete screenshots if you take this approach though :)

0
promise 520

@ugochukwuuu

Posted

@ErayBarslan Thanks for the reply, I assume the resolution you are talking about is 1400x900. And how do you compare the screenshot and the preview, is there a software you use or do you just use your eyes? Thanks again for the reply

0
Eray 1,410

@ErayBarslan

Posted

@practitionerofsorts Sure thing, would be glad if it helps you :) Yep that one. For this challenge desktop is 1440x3619. No software needed. Although there are software, like the one used here to compare our submits; I found this approach more accurate and faster to work with. I keep the provided design open. Then when I take the ss, open that one directly and hover over photos preview from taskbar. Hovering will show apps on full screen mode without closing the previews so you can go back and forth by just moving the mouse. From there it's about predicting what's needed to get closer to the design before next ss :)

0
promise 520

@ugochukwuuu

Posted

@ErayBarslan Thanks, I will try your method. I don't want to rely on softwares as I want to have the ability to naturally compare. It was nice get info from you.

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