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 Landing Page - HTML/CSS only!

Jo Blaszak 110

@jblaszak

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Some parts felt a bit hacky and inconsistent across the page when creating the gutter on the sides of the page. Things would have been solved easier with an extra div but was trying to solve things using only meaningful, semantic tags. Any suggestions/tips for doing this?

I'm not entirely happy with how the creations grid changes when you get down to just 2 columns when resizing. This could likely be optimized with more media query breakpoints however. Any other way to make the layout of these more seamless?

How's the accessibility? I tried to wrap everything into semantic components for the creations grid but feel like it might be a bit overboard. Is there a more optimal solution?

Community feedback

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