Submitted about 1 year ago
3-column preview card component using only html css !!!
@ahmed9143
Design comparison
SolutionDesign
Solution retrospective
give me your feedback about this simple project and notice that it's implemented without css framworks
Community feedback
- @hitmorecodePosted about 1 year ago
When going to small screen size the cards are pushed to the left side. Make it a good habit of using css reset. Below you can see a simple css reset.
Change the
width
andheight
of the container toauto
to fix the issue with the cards being pushed to the left side.* { box-sizing: border-box; margin: 0; padding: 0; } .container { width: auto; height: auto; display: flex; }
Marked as helpful0 - @mayankdrvrPosted about 1 year ago
Congratulations Ahmad for completing this challenge. I have a few observations that might be helpful-
- Change background color of the page from white to Very Light Gray as given in style-guide.md starter files.
- Corners of card borders have to be rounded using
border-radius
css property. - "Learn More" button has to change color to respective card color on hovering the cursor. Also, check the button font style.
- Recheck the font color of the text inside the card. Heading and paragraph text should be aligned with the same vertical margin in the card. Heading text of card does not have to change color on hovering over it.
- Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.
- Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
- html file should have a <h1> tag for better web accessibility and better Search Engine Optimization(SEO) and page ranking.
Awesome solution and keep it up.
Marked as helpful0@ahmed9143Posted about 1 year agothanks for these great tips , I'll apply it ,have a nice bro@mayankdrvr
1
Please log in to post a comment
Log in with GitHubJoin 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