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

Loop Studios built with HTML, SASS/SCSS, JS

@nyrellcl

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


FYI: For some reason github only partially rendered my live-site page, so I had to host it on netlify.

Anyways! I enjoyed completing this project, I wanted more completed projects to showcase on my website portfolio and more practice! I appreciate any feedback and suggestions.

Thanks for viewing my project!

Community feedback

@VCarames

Posted

Hey @nyrellcl

This is NOT how to create a responsive landing page.

You need to use the correct properties and elements to make your content respond to different screen sizes.

For example, this challenges requires the use of two images for different breakpoints. The Picture Element will facilitate this.

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

Source:

https://www.w3schools.com/html/html_images_picture.asp

https://web.dev/learn/design/picture-element/

You need research and learn how to properly create responsive content.

Here are few links to get you started:

Google Developers

https://web.dev/learn/design/

Mozilla

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

Marked as helpful

1

@nyrellcl

Posted

Hello @vcarames, Thank you so much for the feedback. Im reviewing your links and restarting my project! I haven’t used the <picture> as much as I should. Now that you’ve brought it up, i will use it alongside the <img> tag. This’ll certainly help me in improving the whole project. Thanks again for the honest reply, this was very much needed! Time to get back at it! Haha

0

@nyrellcl

Posted

@vcarames Update: <picture> is actually the best thing ever loolll. Cheers for that!

0

@VCarames

Posted

@nyrellcl

I feel the same way about the picture element. Once I found out about it, it made my projects easier to do.

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