Design comparison
SolutionDesign
Solution retrospective
- I'm not sure about my responsive design, how correct it is.
- not sure about naming css selector.
In general, I'm not sure that I used the best practices when creating the site, and I don't know what could have been done better. I will be grateful for the feedback
Community feedback
- @TH3RIVPosted almost 2 years ago
Hi, @Nunamniroi!
Your card is nearly done, it could use a few adjustments:
- You should be using landmarks. This case your card is your main content, so it should be wrapped between
main
tags. Makes it easier to understand the code and helps screen-readers to figure out your main content. - There is no need to use
header
element as it is part of your card. Just wrap your whole card in a container element:
<div class="card"> <div class="first-section"> Section code... </div> <div class="second-section"> Section code... </div> <div class="third-section"> Section code... </div> </div>
- Your button does not need a
<p>
element, just use text of whatever you want it to say. - You should not limit the width of your
body
, you can always limit the size of your elements within thebody
. - You can limit the width of your card using
max-width
property and you can center your card within the page using flexbox on your body element. - To round the card corners you use
border-radius
property. And if it's not showing, you useoverflow: hidden
. - Try to avoid using
px
values and userem
values instead. - Try using custom CSS properties for your projects, it is great habit to develop.
Hope this helps! You got this!
Marked as helpful1 - You should be using landmarks. This case your card is your main content, so it should be wrapped between
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