Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Column Preview Card Component Main Challenge

@AliMahmoud21

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Ali Mahmoud, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

Document should have one main landmark, this problem is being caused by the fact that there is no main tag around the main content of the page! Since this challenge is based on only one component, there is no other component more important than it on this page, so to solve this, wrap all the content with the main tag,

It's always good to pay attention to the correct use of semantic html elements, as they are extremely important for people who use screen readers, to know what the main content of the page is in the case of the main tag!

To improve the code structure wrap this div:

<div class="attribution">

with the semantic tag footer

The rest is great!

I hope it helps... 👍

Marked as helpful

1

@AliMahmoud21

Posted

@AdrianoEscarabote Thanks a lot, I will use the semantic elements in the coming challenges...

1
Mahdy 150

@MhMahdi94

Posted

Hi, Great Work ^_^

first for icons you can find it in images folders in starter code

for paragraphs, it better make it inside div and set fixed width, because it is effect on learn more button (you can check my solution)

Feel free if you have any questions

Marked as helpful

1

@AliMahmoud21

Posted

@MhMahdi94 oh thanks, I forgot that there's an image folder, I will edit it later...

0

Please log in to post a comment

Log in with GitHub
Discord logo

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