@Kein-Internet
Posted
Good job on getting your solution close to the design plus the active state!
Here are a few suggestions for your HTML:
-
Replace your
<section>tag with a<main>tag. This is because every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. -
Make sure your class naming is consistent throughout your code, to make it easier to maintain and for others to follow, as I noticed inconsitencies with your classes (e.g,
img-cardand the div card below iscard-text). Also, it would suffice to writebtninstead ofbtn-mainas replacing the<section>tag with the<main>tag will make it more obvious for other looking at your code. -
It's vital to be descriptive in the
altpart of your image<img class="user-img" src="./assets/images/image-avatar.webp" alt="user">. A good alt might be the name of the user. -
I would use
<h2>, you can get away with not using<h1>as the card would most likely be part of a larger site where there would already be a<h1>title in use but I would not use<h3>as screen readers use these heading tags to help navigate users of limited visibility. On that note, using the<h6>is not necessary and can be replaced with a regular<div>tag.
For your CSS:
-
Use the
remunit instead ofpxwhen determining font sizes,remwill automatically adjust to the user's deafult browser settings and so it will size according to what it comfertable for them and mitigate the issue of user having to manually adjust the screen to be comfertable. -
I would add a
padding: 1remto the<body>so the card isn't touching the sides of the screen.
Keep up the good work.
Marked as helpful
@LarisaKampe
Posted
@Kein-Internet Wow! Thank you so much for your feedback! This is the first comment ever for my coding so I'll remember it forever. It really is a fun journey! Cheers╰(°▽°)╯
@Kein-Internet
Posted
No worries, glad to be of help!
