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 using CSS Flexbox

arey 350

@arey-dev

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


Any tips on how I can improve this design? Thanks!!

Community feedback

Ahmed Bayoumi 6,740

@Bayoumi-dev

Posted

Hey Arey, It looks good!...

  • Using more than one <h1> is allowed by the HTML specification, but is not considered a best practice. Using only one <h1> is beneficial for screenreader users.

---> Multiple <h1> elements on one page

I hope this is useful to you... Keep coding👍

Marked as helpful

2

arey 350

@arey-dev

Posted

@Bayoumi-dev Thank you!! This is a new knowledge for me. I'll make sure to improve my HTML in this project, and keep learning for future challenges/projects ☺️

0

@shashreesamuel

Posted

I agree with the above comment in terms of deferring from having multiple h1 tags however in this instance I think it describes the card title in terms of visual hierarchy so it seems to be the most appropriate tag.

1

@tesla-ambassador

Posted

Hey Arey, congrats on taking on this challenge! It's really awesome! I think you could just work a little more on the responsiveness at screen widths between 715px - 644px you should change the flex-direction to column and maybe set the width of the container to 80% just so that it's not to far or too close to the borders! Happy Coding!

Marked as helpful

1

arey 350

@arey-dev

Posted

@tesla-ambassador I will do exactly as u said!! Thank you for this advice ☺️

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