Submitted 5 months ago

3 Column Card By KSD (Responsive HTML, CSS only)

Kaustubhya Shukla•50

@kaustubhya

Preview site View code

This is a solution for...3-column preview card component

HTML
CSS

1newbie

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

Julianna Messineo•180
@mathematiCodePosted 5 months ago
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

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