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

Basic HTML and CSS

Aman 10

@heyitsmeaman

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


This is my first try , so the code is a bit messy, would love to hear where and how i can improve.

Community feedback

@rngueco

Posted

Hey Aman!

To be able to center your card element vertically and horizontally, you might want to use CSS Flexbox. This would be a better approach than hardcoding a padding/margin value to make your element appear centered on your screen, but on other screen sizes it might not be centered at all.

Also, I noticed that you are repeating a lot of your CSS. For example, all three of your buttons have three different classes applied to each. You can instead apply one class to all buttons (let's call this class btn) and then just add all common styles to this class. Like so:

.btn {
   /* Put all common properties here. */
}

That way you don't have to repeat all the same properties for three different classes 🙂 This was a good first attempt!

Marked as helpful

1

@benjoquilario

Posted

Hi, heyitsmeaman Congrats on your first frontend challenge, It still good even didn't have flexbox or grid, but I suggest you to understand more about box model and after that go with flexbox layout so that It will make responsive. 😉

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