Frontend Mentor | Skilled e-learning landing page coding challenge solution

Solution retrospective

Hello everyone,

I'd appreciate it if you could share your feedback on my solution.

One of the things I've learnt from this was how to display different images for different device pixel density with <picture> and <source>. Also learnt how to test this with the browser's responsive design mode (use the DPR setting).

P.S. I use newer CSS properties such as padding-inline and margin-block which may not work on all browsers. Thank you @Deevyn9 for testing and informing. 🙇‍♂️🙏

Community feedback

Divine Obeten• 2,435

@Deevyn9

Posted almost 2 years ago

Hi Dave, everything Looks great, you need to add padding/margin to the hero section and footer on the mobile view

Happy coding 😃

Marked as helpful

Dave Quah• 670

@Milleus

Posted almost 2 years ago

Hi @Deevyn9 👋

I've intentionally removed the padding on the image in the hero section as the image already comes with a huge spacing. Are you suggesting that there should be more padding/margin?

Also, the footer does not have a padding but the div within it does. Do you mean that the padding/margin should be adjusted as well?

I'd appreciate it if you could share a screenshot of the issue with me on Slack if possible. Thank you!!

Divine Obeten• 2,435

@Deevyn9

Posted almost 2 years ago

@Milleus that would be great, send i link i can contact you with

Marked as helpful

Dave Quah• 670

@Milleus

Posted almost 2 years ago

@Deevyn9 I'm @Milleus on frontend mentor slack. Thank you!

Divine Obeten• 2,435

@Deevyn9

Posted almost 2 years ago

@Milleus I’m not on the slack, I’ll try joining the server now

Marked as helpful

Skilled e-learning landing page

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community