Skip to content
Submitted about 2 years ago

equalizer-landing-page

Alberto•190
@Alberto-12
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Equalizer landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Nikki Bright•20
    @nikkistormePosted about 2 years ago

    Hi Alberto! Nikki here.

    This project is so cool! Great job translating the design to the webpage. Keeping such a close eye on the details isn't easy! I have a few pieces of feedback, if you're interested.

    #Accessibility

    1. As I'm sure you saw in the accessibility report, the page does not use semantic HTML. For this page, I'd probably make the top container with the company name a <header>, then the bulk of the page in a <main>, then just keep the <footer> as it is! Inside the <main> container I would split into two <section>s. One <section> for the title and description up top, and one <section> for the remaining content.
    2. The <img> tags currently have empty alt attributes. This is a pretty easy accessibility win for screen readers. Here's an article I like about alt text.

    Responsiveness

    (I can't see the designs, so some of the following feedback could very well be irrelevant.)

    1. The abstract graphic in the top right corner is added via a background-image property on .content. It looks like the graphic needs to be more flush with the top right corner, so putting the background-image on the <body> with a background-position: top right; could do the trick!
    2. I feel similarly about the other background-image on .content. When the .content container does not use the page's full width, it appears cut off. It looks like that image isn't supposed to be constrained by the .content container, so putting it on the <body> would probably work better in this case.
    3. It looks like the desktop and tablet versions of the page still use the mobile asset instead of the desktop and tablet ones, respectively.
    4. Looking at the design comparison above, there are differences in font size, element size, and spacing between elements. It's super hard to get that stuff exactly right, but there's something I started doing that really helped me out with this. (1) Start by using the browser's responsive design mode to make the viewport the EXACT same width as the design. (2) Then make the page look as close as possible to the design on that specific width (I use a Firefox extension, Dimensions, that helps with this). It often helps to have the design and the page open directly next to each other on the same monitor. (3) Once that looks pixel-perfect, change the browser width to EXACTLY the width of the design's next screen size up (tablet if it's available, or desktop). (4) Do the same thing as before, making the page look as close as possible to the design. (5) Finally, look at your page on screen sizes not covered by the design. (5a) Smaller than mobile (320px is usually as small as I go), (5b) between mobile and tablet, (5c) between tablet and desktop, and lastly, (5d) larger than desktop (giving the main content a max-width mitigates having to go too big, but it helps to look).

    #CSS

    1. Some of the class names include the type of element it targets (.first-p, .pattern2-div, etc). I personally don't recommend this naming convention, because if you end up changing the tag for that element (like changing a div to a section) the name becomes confusing. If you need help choosing a CSS naming convention, I really like SMACSS, but there are plenty of alternatives out there.

    I know that's a lot to take in! Like I said up top, your project looks awesome and you did a fantastic job. These are just some things that could take it to the next level!

    Let me know if you have any questions about anything. Keep up the great work!

    Marked as helpful
    0
    Alberto•190
    @Alberto-12Posted about 2 years ago

    @nikkistorme Thank you so much for the feedback! It really made me more aware of HTML semantics, working with background images and css which definitely need to be improved. Thank you again!

    0

Please log in to post a comment

Log in with GitHub

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