Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

Equalizer Landing Page | CSS Grid | Flexbox | Pure HTML && CSS

Arthur Roberts•410
@arfarobs
A solution to the Equalizer landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


If you leave me some feedback, please leave me a request for a project of yours that you want me to have a look at. I'll be more than happy to help.

I learned a lot and found many useful resources whilst doing this project. I will share some of them below.

This is the first landing page challenge that I have done via Frontend Mentor. I spent a lot longer than I initially intended on this project.

This is the first time that I have ever done a mobile first responsive design. If you have any tips on how to improve please let me know.

This is the first time that I have tried so hard to make a website accessible. Any feedback would be great. I will list some of the issues below.

Issues

  1. When I used the <article> element was that use correct? Or, should I have used a <section> element?
  2. Was I right to use the <header> element within the <article> element?
  3. Should I have used the <address> element within the <footer>?
  4. Instead of using a reset CSS stylesheet I just added the styles that I wanted to reset manually. What's your opinions on reset sheets?
  5. I had trouble getting the background image to be displayed properly. I think it doesn't stand out enough and the positioning is wrong. Any tips on how to fix this?
  6. The <article> background color looks different from the design. What do you think? (I'm partially color blind).
  7. I used focus-visible styles. Did I do it correctly?
  8. I used the min and max CSS values. What do you think?
  9. Should I have used the <button> element or the <a> element for the navigation icons within the <footer>?
  10. How does my page fare on a screen reader?
  11. Is my useage of ARIA labels correct?
  12. Is my useage of the role attribute correct?
  13. Was I correct to use the <nav> element for the icons in the <footer>?
  14. Aaaaannnnnnyyyyyy help with accessibility would be awesome!

What I learned

  1. I used the filter property to style the icons in the <footer>. I found a great resource that allows you to enter a hex color and then returns a filter value to match that color. Resource listed below.
  2. I made use of the min and max CSS values which are really good for getting smooth responsive styles. I found a website that will do a lot of the calculations for you. Website listed below.
  3. I used the ALLY checklist for the first time. I found it quite helpful when addressing accessibility issues. Link below.

Useful resources

https://websemantics.uk/tools/responsive-font-calculator/ - Great for semantic fonts and sizing in general. https://codepen.io/sosuke/pen/Pjoqqp - Brilliant for changing the color of images when you want to add hover effects. https://www.a11yproject.com/checklist/ - Great tool for creating an accessible website.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Rio Cantre•9,650
    @RioCantre
    Posted over 3 years ago

    Hello there! Awesome work with this one. Looking at your solution, I would like to suggest the following for you...

    • Both article and section requires one heading hierarchy. Both seems have the same functionality. For HTML structures, refer it with this one Semantics
    • The header tag is used for the header content. Using it within another content would made it look complicated. To simplify things, better to use the common way.. like this one
    from:
    <article>
            <header>
              <h2>Premium EQ</h2>
              <p>...</p>
            </header>
            <p ></p>
            <button ></button>
            <button ></button>
          </article>
    
    into: 
    <article>
           <h2>Premium EQ</h2>
            <p></p>
            <p class="price">$4 <span class="month" role="presentation">/ month</span></p>
            <button ></button>
            <button ></button>
    </article>
    
    • Use address tag when there is the relevant address information
    • Reset CSS stylesheet is a default style. Better to use specific CSS file for the main styling of the project.
    • The background image in the design comparison, it looks fine.
    • In your solution the background color is all white, can be adjust to something off white or similar like background: rgba(246, 242, 234, 1);
    • Its common to use a with icons rather than buttons (can be use if different situation) in this case, the a is good enough.
    • Try wrapping it with unordered list ul and li for the icons in footer

    Above all, design is looking nice. Hope this helps and Keep it up!

    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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub