Vanilla CSS (Grid & Flexbox)

@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 :)

@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

@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 :)

@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.