Design comparison
Community feedback
- @grace-snowPosted 22 days ago
That's all great feedback above!
I only want to add:
- Add some padding to the body on this so the card can never hit screen edges. This only needs to be small and can be in px. e.g. 20px
- The image should have an explicit size in this (width and height). This can be in html or CSS. You can optionally give it an
aspect-ratio: 1
if not adding width and height in html to help performance marginally as the browser then knows what space to save while loading the image in on slow connections. - The image should either be described properly in the
alt
attribute or be treated as decorative by giving it empty alt. The current description brings no value. - The container div (the component) should be wrapped in a
main
landmark, and the attribution should be either changed to be afooter
OR be wrapped in afooter
. - Make sure you update the footer link to point to your frontend mentor profile page or github profile.
Marked as helpful4 - @kaamiikPosted 22 days ago
Hi. I saw some problems in your code that I wanna mention:
-
One of the important things in front end is to have a good html with a solid structure. I hardly can read your code. There are some extra spaces that there is no need to have. If you using Vs code add prettier to make your code more clean.
-
This should be a basic structure in most of the page inside the body:
<body> <header></header> <main> -- Main content </main> <footer></footer> </body>
You always need
main
but footer and header can be or not.-
headings should increase one by one. Here I think you only need
h1
and you can simply use ap
for your country with proper css. -
For your links why using div? you can not put text inside a div. there are semantic tags and here you can simply put your text inside the
a
tag. -
Your links here is a list of items so you can use
ul
withli
for these links. -
On your CSS, try to use a proper CSS reset. Andy Bell's is good.
-
Your font-size should always be in
rem
. Never usepx
for font size. You can read this article: https://fedmentor.dev/posts/font-size-px/ -
Also never restrict your width and height specially for containers that have text insides. here instead of
height: 100vh;
usemin-heigh: 100vh
that works better.
At the end, try to ask more questions on help channel on discord and get more feedback. Good Luck!
Marked as helpful0@FavourkelvinPosted 22 days agoThank you so much for taking the time to give me such a detailed feedback. I will work on all that.@kaamiik
0 -
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