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 Card By KSD (Responsive HTML, CSS only)

@kaustubhya

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


What are you most proud of, and what would you do differently next time?

Tried making it responsive. For the first time implemented flexbox properly.

What challenges did you encounter, and how did you overcome them?

Alignment. Difficulty with responsiveness, positioning using flexbox

What specific areas of your project would you like help with?

Comments on how to improve my code writing and feedbacks for this project and my future projects.

Community feedback

@mathematiCode

Posted

Hello Kaustubhya, your project looks very close to the design, nice job!

I noticed you have multiple h1 tags which can be considered an accessibility issue. https://www.a11yproject.com/posts/how-to-accessible-heading-structure/#one-h1

I did this project using grid and subgrid, I like how you did it using flexbox and it seems like it was smooth that way too!

Another thing I did differently is I did my button:hover all in one by changing the background color to be transparent. I had to use !important to get it to override the rule for the id though.

I saw that you used 15 pixels for the paragraph font size. I just learned from Kevin Powell on youtube that you shouldn't use pixels for font sizes because if someone has their browser set to make text larger due to vision difficulties, it won't change if it's set in pixels.

Overall, great job! The layout looks great at all screen sizes and the cards are centered nicely!

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