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

loopstudio-land-page

svo15 230

@svo15

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

Annalisa 170

@Annalisa11

Posted

You definitely are on the right path!

some things I noticed:

  1. no blank lines in your stylesheet. I think it would be good to have a blank line between css selectors so that it is easier to read and understand where a selector begins and where it ends.
  2. you use px for many things. It is best practice to avoid using px as much as possible, since px aren't scalable or dynamic. Especially when it comes to font sizes, spacings or widths. I would recommand that you try using measures like % or rem. That would also really help with the responsiveness!
  3. query selector instead of id. you use the query selector in your js file instead of getting the elements by their ids. It works just fine and it's not really that big of a deal in this project, but I would keep in mind that selecting by query can be dangerous since you can have multiple elements with the same query name. I would always use ids if possible so you can be sure that your code will always grab the element that you want even after you might change or add some new code years later :)
  4. The layout and responsiveness is still a little shaky here and there, but that's probably a matter of practice...

Good job at structuring your html and your project. It's very clean. I especially liked the hover effects and the transitioning hamburger menu... I wish I had something like that, it's really pretty cool :)

Marked as helpful

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