Design comparison
Solution retrospective
I want to ask about the best way to adjust the height of the mobile design (responsive), and be free to add any advice for me. Thanks in advance.
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hi Mirna-Latif, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
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="/">learn more</a>
I noticed that you used 3
h1
, this is not a good practice as there should only be one main title per html page!The rest is great!
I hope it helps... 👍
Marked as helpful1@Mirna-LatifPosted almost 2 years ago@AdrianoEscarabote Thanks alot for your feedback, it is very helpful.
1 - @vanzasetiaPosted almost 2 years ago
Hello, Mirna-Latif!
Congratulations on finishing this challenge! 🎉
For the height of the
body
of all screen sizes, let the page content controls it. There is no need to sethieght
. If you need to set a height on it, usemin-height
instead.Here are some more suggestions for improvements.
- Replace all the
h1
withh2
. There should not be more than oneh1
on a page. Manyh1
mean many titles which can confuse the users, especially the screen reader users. - Alternative text for images is not used to tell the image is not supported. It is used to describe the image when the images fail to load.
- In this case, all the car icons are decorative images. So, leave the alternative text empty (
alt=""
). - For your information, decorative images are images that don't need to exist on the page. They don't add any information and serve only aesthetic purposes.
button
element must always havetype
attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons- Those "Learn More" buttons are links. If it is a real website, I am expecting those buttons are links that will navigate the users to another webpage.
- For your information, anchor tags are for navigation. The
button
elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements. - There should only be two layouts, a one-column layout, and a three-column layout. The two-column layout is awkward because there is one card at the bottom alone.
It is possible to make the site responsive with no media queries. I recommend taking a look at my solution. I wrote the technique that I used on the
README
.Responsive 3 Column Card Component (No Media Queries) coding challenge solution
I hope this helps. Happy coding!
Marked as helpful1@Mirna-LatifPosted almost 2 years ago@vanzasetia Thanks alot for your feedback, it is very helpful.
0@vanzasetiaPosted almost 2 years ago@Mirna-Latif Happy to hear that was helpful! 😊
0 - Replace all the
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