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

Skilled E-Learning Landing Page

Paul Jin 290

@paulhjin

Desktop design screenshot for the Skilled e-learning landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi Everyone! 👋🏻 This was a fun challenge but I had some difficulties with the hero image in this challenge. If you have any suggestions on how make the image responsive while limiting the number of media queries, I would love to hear your thoughts.

Thank you and happy coding! 👾

Community feedback

J Z 290

@half-cto

Posted

Hi Paul, congrats on finishing this project! 🥳 I also found positioning of hero image to be toughest challenge for this project!

You are almost correct with current implementation of image:

<picture>
          <source media="(min-width: 1096px)" srcset="./images/image-hero-desktop.png">
          <source media="(min-width: 768px)"  srcset="./images/image-hero-tablet.png">   
          <source media="(max-width: 768px)"  srcset="./images/image-hero-mobile.png">
          <img src="./images/image-hero-mobile.png" alt="">
</picture>

however you could lose line: <source media="(max-width: 768px)" srcset="./images/image-hero-mobile.png"> since image in <img> tag will be displayed by default. Alternatives are displayed only if matching media queries. Hope this helps!

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