Skip to content
Submitted about 3 years ago

Equalizer landing page using CSS and HTML

Matt•90
@emldevv
A solution to the Equalizer landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This project took me a very long time to complete because I was using what I knew of inserting images only from the markup. I had to write and re-write a lot of CSS as it's methods for inserting and positioning images are many and they all have trade-offs.

I reviewed a lot of info sites and other's code from completed projects and finally settled on what I submitted. So really I'm looking for comments on my HTML and CSS layout as they look pretty untidy in my attempt to just get the responsive and looking good.

Thanks.

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Matt! 👋

    Congratulations on completing this challenge! 🎉

    This challenge is really tricky, especially in positioning the card and the background images. I did rewrite my styling once because I ended up writing messy CSS. 😆

    Anyway, some suggestions from me.

    • Alternative text for images should not contain any words that are related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
    • I would recommend trying to use pseudo-element for the illustration and the background image (if they are not possible to style as background-image). This way, you can clean up the HTML from the decorative images.
    • I notice in the footer, that the logo is wrapped by an anchor tag. So, I would recommend making the alternative text as the text content for the link. Usually, the logo link would navigate the user to the home page. So, I recommend changing the alternative text to "equalizer - home". This will be useful to the screenreader users that it is a link that navigates the users to the home page. (It's just like the social media links)
    • I would recommend having a .container that limits the width of the page content. If the user has a large screen (such as 2000px) then the content would become really separated.
    • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.👍

    Overall, great work. The site looks great on my desktop view and on my mobile device. 🙌

    That's it! I hope this helps. Happy coding! 😁

    Marked as helpful

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