@MelvinAguilar
Posted
Hello there π. Good job on completing the challenge !
I have a few suggestions in addition to the ones already given.
HTML π:
- Use the
<main>
tag to wrap all the main content of the page instead of the<div>
tag. With this semantic element you can improve the accessibility of your page.
- For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here π.
CSS π¨:
- Setting a defined
height
for the card component is not recommended (height: 400px;
). The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can usemin-height
.
- Centering an element with
position: absolute
would make your element behave strangely on some screen sizes, "there's a chance the content will grow to overflow the parent". You can use Flexbox or Grid to center your element. You can read more about centering in CSS here π.
-
You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.
Popular CSS resets:
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
@christinepallon
Posted
@MelvinAguilar This is all so great, thank you! I'll definitely read up a bit more on CSS resets. Cheers!