Submitted 5 months ago

Responsive Preview Card Component [ HTML + CSS ]

Vijay Kumar Muppirisetti•30

@Vijaykumar-Muppirisetti

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

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

Clean, semantic HTML structure using appropriate elements for accessibility.

Responsive design implementation that works across different screen sizes.

Consistent visual styling matching the design requirements.

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

Getting the equal-height columns to work properly across different content lengths.

Maintaining button positioning at the bottom of each card.

Ensuring the responsive layout breaks appropriately on mobile.

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

I’m happy to receive any feedback and suggestions for optimizing and improving the code! Always looking to learn and grow. 💡

Code

Please log in to post a comment

Community feedback

Rebecca Padgett•2,100
@bccpadge
Posted 5 months ago
Hi 👋🏼

Your project looks great! I have few tips to improve your solution.

Use Proper HTML Semantic Tags
- Every website must be have at least one landmark like <main> tag.
  
  The reason behind using the <main> tag because it identifies the primary content of the page.
- Attribution information can be wrapped in a <footer> tag
  
  <Footer> tag holds content like the copyright information, authorship information, and contact information just to name few examples.
CSS 🎨:
- You can add the star selector and remove margin and padding as a default CSS Reset
```
*{
 margin: 0;
 padding: 0

}
```
- To remove the scrollbar on desktop, you can adjust your CSS styles.
- On the <body> I used flexbox to center the content the page. and used position: fixed on the attribution so content stays in one place.
```
body{
display: flex;
align-items: center;
min-block-size: 100vh;
flex-direction: column;
justify-content: center;
}

.container{
 max-width: 960px;
 margin: 0 auto;
}
```
- Inset is shorthand CSS property for top, right, bottom, and left
- Mobile devices you can hide the content and display it on desktop using a media query
```
.attribution{
 position: fixed;
 inset: auto auto 1rem 1rem; 
}
```
Here is my solution to this challenge: 3-column preview component

I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

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