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

Insure Landing Page - HTML CSS JS

Eman Sasu 90

@emansasu7

Desktop design screenshot for the Insure landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P
Grace 27,950

@grace-snow

Posted

Hi,

This looks nice overall and is well structured html, so well done. There are a few opportunities to improve it...

The header content is spilling off screen on my mobile, so take a look at that.

I think a lot of your report issues would be solved if you remove the hash from your links - it's looking for anchor links - so swap for a / and I think they'll disappear.

Definitely have another look at alt text. If the only content in a link, it should meaningfully describe where the link goes. Otherwise it should meaningfully describe the image, OR if the image is not important alt attribute should be left intentionally empty so assistive technology knows to skip it.

Other thing I notice is you're getting really bad layout shift on initial page load. To address that, add a width and height attribute to your header/hero image. You may find you need to offer 2+ versions of the image in a srcset, each with different widths/heights. This is a good skill to develop now, as it will affect your site performance results, which have an impact on Google search rankings as well.

Hope all that's helpful, keep going!

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