Design comparison
Solution retrospective
Second challenge using HTML and CSS. I tried my best but I CAN'T seem to show the svg file in the design comparison, but it works on the site preview and I can't understand why. If someone would please help me make it work. Where can I improve? thank you!
Community feedback
- @TH3RIVPosted almost 2 years ago
Hi, @katuramu27!
Looks wise it looks good, but I would suggest centering the whole card in the middle of the page, you can easily do it by using flexbox on your body element.
Now onto things you could improve on:
- Look at accessibility report after you submit your solution for any issues and sort them out if you can.
- Try using semantic HTML so you can clearly read what content is what. Use landmarks to wrap your content. In this case your whole card should be between
<main></main>
tags. - You are using
h2
elements without having ah1
element. It should follow a progression:h1, h2, h3 etc...
. You can style the text using CSS to achieve the desired look. - Try using custom CSS properties so you can declare certain things like colors once and use them throughout and it makes it a lot easier to change when needed. Removes the need to change every single line of code and instead change line of code to change all uses of that particular property.
- Try to avoid using
px
units as much as you can and useem
orrem
instead.
Hope this helps! Good luck!
Marked as helpful1@katuramu27Posted almost 2 years ago@TH3RIV Thanks for your suggestions! I thought it was fine using the h2 because the three columns all have the same title importance. Do you think I should use h1,h2 and h3(one for each column)??
I am still very confused about :root in css, so I wrote the code in every line, but I will try to study hard to implement in the next few challenges!
I am slowly changing from px to em and rem! I will be using it more often in the future.
Thanks for every suggestion!
0@TH3RIVPosted almost 2 years ago@katuramu27 I used
h1
tags for all of the titles, I understand that common practice is having oneh1
tag followed by as many lower tier tags as you want. Using lower tier headings without ah1
is considered bad practice though.Googling it finds inconsistent results at best and indicates that multiple use of
h1
does not affect SEO that much.1 - @AdrianoEscarabotePosted almost 2 years ago
Hi Agustin, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
To align some content in the center of the screen, always prefer to use
display: flex;
it will make the layout more responsive!body { margin: 0; padding: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 100vh; }
I noticed that you used a
button
in which case the best option would be ana
, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!To resolve do this:
<a href="/" id="button3">Learn More</a>
The rest is great!
I hope it helps... 👍
Marked as helpful0 - @amalkarimPosted almost 2 years ago
Hi Agustin,
If you have edited the code after you submit your solution, you could try to press the GENERATE NEW SCREENSHOT button above the Design Comparison section. It would regenerate the new screenshot based on the latest update of your solution. If there's still problem, let me know in the comment.
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