3-column preview card component

Hi @vcarames Thank you for such helpful and detailed feedback!

1. I forgot to fill in the alt tags, this is one of the habits I need to implement immediately. Even so, Aria label's tip is definitely useful, I didn't know that I can do that.

2. I'm not sure why using the tag <h2> is correct. According to the hierarchy, should the tag <h1> not be used? Since there are no subtitles. I'm not sure I understood the explanation well. I would appreciate it if you could explain more about it.

3. You're right, but because it's a challenge, I used the button. Anyway, I switched to a tag to get used to doing it correctly. And now it changed the visibility of the design for me, lol. So I fixed some elements following this.

4. You're right about mobile first approach, but why not to start with desktop approach? It's really makes such big difference? If my content isn't looks presentable well on mobile website, I'd love to know about it.

@kirawesh

Glad I could help!

Since this a component, it would be part of a larger site with lots of sections and components, so it would be an <h3> or even <h4>.

But for this challenge, by giving one of the headings the <h1> heading you are stating that heading is more important than the others. By instead using the, next level heading, <h2>, all the headings now have the exact same level of importance.

As for mobile-first approach, mobile devices are the now dominant way in which users are now browsing the internet.

Unlike, computer monitors, which only have a few different screen sizes (but most of the time our content will look the same regardless on large screens), the difference in mobile device screen is countless.

Think of the different screen sizes and ratios that mobile devices have,(think Samsung Fold, Samsung Flip, etc, iPhone mini...), so while your content may look good in certain device size, it may look warped, broken or just does not accommodate the screen. By implementing the mobile first approach, you can ensure your content looks perfect in all screen sizes.

Most importantly, it is best practice.

@vcarames I see, thank you for your explanation. I will try now mobile-first approach on the same challenge to see the differences.

Hi @correlucas

Good to hear from you.

1. You are right about the correct use of tags, I still don't really understand how to use them correctly when it comes to a product that is not exactly according to the standards and it is not so clear how to tag it.

2. You are right, I need to rethink the design as a system, instead of a specific element. I remaking this challenge again with mobile-first approach, so I'll figure out how to set up the appropriate classes.

3. How did I miss this, thanks for bringing it to my attention :)

Hi @miranlegin,

Thanks for the helpful and detailed feedback. Really appreciate it. I definitely agree with you that it's a wonderful feeling to code faster and being more confident :)

1.I'm not sure I understand what you mean.

I use this to define the columns structure:

.columns {
  display: grid;
  grid-auto-flow: column;
  grid-template: 1fr repeat(3);
}

I would appreciate it if you could elaborate on that. and how you use with Dev tools?

1. You're right. I used this at first on the main container, but for some reason it didn't work. I've also used his children, and it still doesn't work. And I have no idea how to solve it other than what I did now. This very strange.

2. Agree with you, I need to implement the habit to adjust units as well. I come from design approach, so I need to switch to coding approach :)

3. That's really a better way to go about custom properties. Thanks for enlightening me on this and for useful links. Already implemented them as custom snippets :)

@kirawesh

Hi Kira, i guess i didn't make myself clear enough first time so i will try to be more precise. Right now you have this in your style.css file:

.columns {
    display: grid;
    grid-auto-flow: column;
    **grid-template: 1fr repeat(3);**
}

That bold statement is invalid for a couple of reasons, first you are declaring it in a wrong way. More info about grid-template Second you value is not valid either. Instead of writing:

grid-template: 1fr repeat(3);

it should be

grid-template-columns: repeat(3, 1fr);

Regardless of that typo the grid is working because you have declared these line, which says that grid should create columns for how much children elements there is.

grid-auto-flow: column;

In case you wanted the grid to have only 3 columns these than you would need to include also:

grid-template-columns: repeat(3, 1fr);

Then in the end complete declaration would be:

.columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

The slight difference is that here you are explicitely saying that you want exactly 3 columns, and in your case if you add more items they will just create another columns to the right. Best way is to try yourself and see what you will get.

Hope that makes sense now.

Keep coding!

Cheers, Miran

@miranlegin oh my gosh, you're right! I rely too much on the validity of vscode rather than checking myself whether it is even logical and correct to write this way, lol. Thanks for the important explanation :)