Updating Mi first newbi Front-End Mentor challenge using HTML & CSS
Design comparison
Community feedback
- @Islandstone89Posted 11 months ago
Hi, here is my feedback, hope it helps!
HTML:
-
You need a
<main>
, this is important for accessibility. Make.container
a<main>
instead of a<div>
. Also, you don't need to wrap anything in divs in this simple component. -
The alt text also needs to say where it leads (frontendmentor.io).
-
Headings should always be in order, so you never start with a
<h3>
. Change it into a<h1>
. -
.attribution
should be a<footer>
. -
Footer text needs to be wrapped in a
<p>
.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>
of the HTML then using@import
. -
It's good practice to include a CSS Reset at the top.
-
Font-size must never be in px. Use rem instead.
-
If you follow my advice, and make
.container
the card, you need to move your.container
properties to thebody
, and the.container-1
properties to.container
. -
body
does not need amin-width: 100vw
- it is a block element, and is 100% wide by default. Also, never set fixed heights. Change it tomin-height: 100vh
. -
The card should not have any percentages.
-
Remove all fixed widths and heights.
-
Remove
margin-top
on the image. Addpadding
on all 4 sides of the card to create the necessary space. -
Add
display: block
andmax-width: 100%
on image. -
Put
font-family
andtext-align
on the body, and remove it elsewhere. -
Remove the media query, there is no need for it in this challenge. When you do need to add media queries, make sure they are in rem.
Marked as helpful0@AndresDev28Posted 11 months ago@Islandstone89 Thank you very much for your advice. I've learned a lot by applying them and watching how you tackled the challenge. It's much simpler and more effective than how I did it. Additionally, I was unaware of certain aspects, such as CSS resetting.
Thanks again!
1 -
- @kaiketorresPosted 11 months ago
It was great, I did it for a short time and I think it was good too
2 - @MohamedkazafyPosted 11 months ago
good job bro 😊
2
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