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

Loopstudios responsive landing page

P

@Deeperr0

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Konrad 370

@konradbaczyk

Posted

Hi, I can give you some feedback :)

Design:

  • you have to better focus on design details, for example: header image should be shadowed
  • menu links are too little on desktop view
  • menu links in mobile version have different layout
  • images should be changed on mobile and desktop view - in your project you used only desktop images
  • images in "Our creations" section have too much height
  • try to use some type of "wrapper" to avoid too much stretch your content - When I zoomed out your site layout was totally stretched, also users with large screens will see bad layout

Code:

  • try to split parts of code into smaller files - it'll make your code more readable
  • avoid use "!important" - this property will provide only issues
  • try do not use "px" units. Read about "rem" and "em" responsive units
  • don't use values like this padding-right: 5.5555555556%;. If u have to use values like this it probably (I think 99% times) means you did something wrong in other parts of code
  • I advice sort out the CSS properties, for example: dimensions are always on the beginning styles of the element or sort properties alphabetical

I hope it will help you in future projects, good luck :)

0

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