Skip to content
Submitted over 2 years ago

3 column preview cards - html and css only

Joanna Skrzypczak•510
@joaskr
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi community, another challenge done :) I had a lot of fun coding it using just HTML and CSS. I didn't ecounter any problems while working on it and I finished it quite fast.

What did you find difficult while building the project?

Since there wasn't any main header on the website I wonder what to do to avoid accessibility issue due to lack of <h1>. I stumbled upon this Stack Overflow discussion and decided to include <h1> in my code but hide it visually.

Code

Please log in to post a comment

Log in

Community feedback

  • Adriano•42,890
    @AdrianoEscarabote

    Hello Joanna Skrzypczak, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!

    to solve this problem do this:

    <a href="/" class="suv-btn">Learn More</a>

    I noticed that in higher resolutions the content is stretching a lot, to solve this we can do the following:

    @media only screen and (min-width: 1350px)
main {
    max-width: 910px;
}

    The remainder is excellent.

    I hope it's useful. 👍

    Marked as helpful
  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline

    Sometimes what I do is I add h1, refresh the report and then remove it from my code once it's all good. Some projects do have a such design that you don't need some things but for the sake of the report, you can change it temporarily. I would also add some hover transitions for the buttons, looks much more pleasing. 😊

    Marked as helpful
  • Sinisa Vukmirovic•1,680
    @SinisaVukmirovic

    Hello!

    About your dilema when some of these challenges don't have a header. I think you are right, I do the same. Have a header with a "hidden" <h1> tag in it. I remember watching some tutorial where it was explained to always have an H1, so that the screen readers can see it, and then hide it if it is not needed to be visible on the page.

  • khalid sabbah•110
    @khalid-sabbah

    great job

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