Frontend Mentor | 3-column-preview-card coding challenge solution

@PhoenixDev22

Posted about 2 years ago

Greeting @boluwatifeee ,

you are welcome ,

About your question:

Screen reader users rely on the H1 to signal the start of the main content. If you have multiple H1s, it is disorienting. SEO experts often state that a web page must only have a single heading on level 1 (<h1>). According to them, like the <title> tag in the <head> of a page, this single heading on level one must describe the main content of the page. Because if there were more than one of them (SEO experts claim), search engines wouldn't be capable of deciding which one is the most important.

Read more about sr-only class.

Hopefully it’s clear .

Marked as helpful

PhoenixDev22• 16,990

@PhoenixDev22

Posted about 2 years ago

Hello @boluwatifeee,

Congratulation on completing this challenge,

I have some suggestions regarding your solution:

HTML

Using <section> tag for each card is not really a good choice . Section is not meant to be used anytime you feel tempted to use a div . section is for a bigger chunk of content often titled by <h2> Read more about usage notes.
About <h1> it is recommended not to have more than one h1 on the page .You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). Then you can use <h2> instead of those <h1>.
For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images . In this challenge , all the images are decorative.
The element a must not appear as a descendant of the button element.
Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button, so it's a good idea to make a habit of specifying the type. So use only the <a> .
Usingmin-height: 100vhinstead ofheight: 100vh; allows the body to to grow taller if the content outgrows the visible page.
border-radius and overflow hidden to the container that wraps the three cards, that way you don't need to set the corners individually.
In line-height: 25px;use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.
If you make each column into a flex column. and set everything inside the cards to have some margin in one directionmarin-bottom: ;.only the link would't need it and use margin top auto on the learn more link that will push it to the bottom of the cards.
It's recommended to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.
I recommend not to style on ID'S . The best way to do that is single class selectors

hopefully this feedback helps.

Marked as helpful

Boluwatife• 50

@boluwatifeee

Posted about 2 years ago

@PhoenixDev22 Thank you very much for taking the time to explain your points. Can you please explain the h1and class= "sr-only" a little better. Thank you.

Miguel Silva• 510

@migsilva89

Posted about 2 years ago

Good job @boluwatifeee .

I see that the font size from the titles should be a bit bigger. Also you have hover effect on the buttons and also on the text inside the button, I will advise you to apply only to the buttons. Doing this way, text will also be white when you hover on the button.

For the responsive you can use mobile first, so you will make first the mobile design, then apply changes from x resolution, example:

//From 992px this will happen.

@media (min-width: 992px) {

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    margin: auto;
    padding-top: 100px;
}

Hope it helps, and keep going!

Regards, Miguel Silva

Marked as helpful

3-column-preview-card

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community