Submitted 11 months ago
Pricing Card Frontend Mentor Challenge (My Solution)
@m-ysabelb
Design comparison
SolutionDesign
Community feedback
- @BlackpachamamePosted 11 months ago
Greetings! you have done a great job 😎
📌 Some accessibility and semantics recommendations for your HTML
- To improve the semantics of your HTML, you can change your
<div class="card">
to a<main class="card">
- You need to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to yourhead
- You need to add
<meta charset="UTF-8">
📌 Some suggestions
- If you use
reset CSS
make sure it is above everything, otherwise you will be rewriting properties unnecessarily - Do not use
%
forwidth
orheight
. Better userem
,em
orpx
font-weight
do not accept values inpx
- It is not recommended to use
id
unless it is very necessary, instead you can useclass
- Use
min-height
andmax-width
, this will help the content stretch or shrink if you need to. Unlikeheight
andwidth
which can cause your content to be cut off on certain screens - Instead of using
margin
to center your content in the center of the screen, you can use theflexbox
properties in thebody
:
body { padding: 20px; min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Marked as helpful0@m-ysabelbPosted 8 months agoThanks for your valuable feedback! It only makes sense to me after a few months of learning coding 😅 @Blackpachamame
1 - To improve the semantics of your HTML, you can change your
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