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
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-column preview card built with html and CSS

Zuliatu 140

@zuliat

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

Solution retrospective


All feedback would be appreciated. Thank you.

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Hi Zuliatu!

I really like your finished project because it has responsive, quite well done, plus transitions. It's pretty good.

Just fix the report problem which is quickly fixed if you change <div class="attribution"> to <footer class="attribution">.

Lastly, I would recommend you not to use too many h1 because it penalizes the positioning of the page. There should only be one per page so it is best to change them all to h2. The problem is that then you should add an h1 for accessibility issues as there should always be one per page so inside the main place one and give it the class sr-only with this it will disappear from the visible flow but it will still be present on the web.

This class has the following attributes:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0,0);
  border: 0;
}

Its main function is not the one we are placing, but it will do for now. If you want to find out more about this search on web accessibility but you can also learn it in freeCodeCamp's responsive HTML and CSS course.

And if you have any questions, feel free to ask me here.

Good Coding!

Marked as helpful

1

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