Submitted almost 3 years ago
Semantic HTML5 markup CSS custom properties Flexbox
@SAAJEVES
Design comparison
SolutionDesign
Solution retrospective
Give it a through scrutiny and also check it responsiveness to different secreen sizes
Community feedback
- @vanzasetiaPosted almost 3 years ago
š Hi Ajagun!
š Congratulations on finishing this challenge! I notice that your solution is 2 times bigger than the design. It looks really big on my desktop view. I would recommend fixing this issue.
More feedback:
- Accessibility
- In this case, use interactive elements (
button
,a
) for any elements that have:hover
or:active
states. - Keep in mind that anchor tags are for navigation - moving to different pages or content on the same screen, while the
button
elements are for actions like opening a modal, submitting a form, toggling element, etc. - Use
rem
or sometimesem
unit instead ofpx
. Usingpx
will not allow the users to control the size of the page based on their needs.
- In this case, use interactive elements (
- Styling
- I would recommend using
min-height
instead ofmax-height
to set the height for thebody
element. By usingmin-height
, thebody
element is allowed to grow if needed. Now, on mobile landscape (640px * 360px) the card gets cut off (looks really big). - I would recommend adding
padding
(withrem
unit) to thebody
element to prevent the card from having full width and full height rather than keep settingwidth
andheight
for every viewport. - In addition to the previous point, I would recommend letting the element inside it dictate the
height
of themain
element.
- I would recommend using
- Best Practice (Recommended)
- Always use classes to reference all the elements that you want to style. Using
id
is going to make your stylesheet have high specificity (hard to maintain).
- Always use classes to reference all the elements that you want to style. Using
That's it! Hopefully, this is helpful!
Marked as helpful0 - Accessibility
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