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

3-column-preview-card using HTML and CSS only

accessibility
Hamzat Lawal•560
@EngineerHamziey
A solution to the 3-column preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I just finished this challenge, it took me roughly two days, even though I was busy in my workshop I'M OPEN TO ALL SUGGESTION @vanzasetia, @grace-snow thanks so much for the previous comments on our challenges...you guys are amazing, I'll be happy to see you review this challenge.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grace•32,130
    @grace-snow
    Posted about 3 years ago

    Here are some suggestions for improvements

    • footer does not go inside main. They are separate landmarks
    • alt on the icons can be left blank - these are decorative
    • it's unusual to have 3 h1s on a page. As this is a component that would likely sit on a fuller page, it would be more likely the headings would need to be h2s.
    • I don't think a list is necessary for the markup of these cards. If in a plain document you wouldn't have all this content in a bullets list so there is no need to here. The semantic structure from the headings on each card is fine. If use divs
    • you are setting the font size smaller than the style guide says. 0.8rem is equivalent to 12.8px (very small!) but the style guide says 15px. That means you should be using 0.9375rem
    • Never style on IDs. It is not what they are for and you are increasing specificity for no reason. It can only cause problems
    • margin does not need to be large on the component
    • you can set border radius on the whole component along with overflow hidden. Shorter and means yiu don't need to set it on individual card corners
    • the "Active" states in the design are actually communicating what should happen on hover. If you apply them on :active like that it will create a flash of the color change. You can set active and hover to be the same style if you want though
    • interactive elements are all missing :focus-visible styles. These are extremely important for keyboard users. Choose something bold/obvious - usually a bold outline is what's used
    • I wouldn't position buttons absolutely like that. Instead, consider making each card a flex column. That would allow you to place margin top auto on the buttons and push them to the bottom of each card
    • consider adding a transition property to buttons for smoother color changing
    • rather than changing the colors on each button, there is actually a blend mode you can use that would invert the text and background automatically for all of them. Just an idea
    Marked as helpful
  • Travolgi 🍕•31,300
    @denielden
    Posted about 3 years ago

    Hey Lawal, congratulations on completing the challenge! You did a very great job 😉

    Tip of graphic design: with font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

    Hope this help! Happy coding 😁

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia
    Posted about 3 years ago

    Hi, Hamzat! 👋

    I get the chance to online today, so here is some feedback from me.

    • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
    • Remove the commented code. If another developer (it can be you in the future) wants to improve this solution, he/she might get confused about whether or not the commented code should be used or deleted.
    • I recommend changing the attribution font size to rem instead of px.
    • I suggest adding width and height attributes to each img element. It is used to create a placeholder while the images are not fully loaded. As a result, it prevents the jumping layout (decreasing the Cumulative Layout Shift). If you want to learn more about CLS, I recommend reading the article from web.dev about it.

    Overall, you've done great work on improving your solution based on the previous feedback. Good job with it! 👏

    That's it! Hope you find this useful!

    Marked as helpful
  • Hamzat Lawal•560
    @EngineerHamziey
    Posted about 3 years ago

    Please I forgot to ask What do they mean by "the design sis created in the following widths: -Mobile: 375px -Desktop: 1440px" Are they referring to media queries or max-width ?

  • Hamzat Lawal•560
    @EngineerHamziey
    Posted about 3 years ago

    One of the problem I'm facing is , I'm using latitude 2100 😩 That has a width of 10.1 inches 1024px...I'll get another one soon, hopefully 😊 I'm disappointed to see that my design is so small than the actual design.

    @vanzasetia @grace-snow... I'll love to hear your review.. I always like to hear from you guys.. I've learnt alot from your comments and solution

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.

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

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

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

Oops! 😬

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

Log in with GitHub