Design comparison
Solution retrospective
This site is fully responsive font size is smaller as you switch to mobile but it is designed according to what it was instructed in design read me file. Any feedback to improve something in this site is highly appreciated thanks :)
Community feedback
- @darryncodesPosted about 3 years ago
Hi Malik,
You've smashed it - well done!
- you could consider using transform: translate x/y to achieve the staggered card affect instead of margin. I think it might be a little more eloquent and simpler from a responsive design perspective.
- also it's worth learning about semantic html it's really important for SEO and accessibility
- your
<div class="container">
should be<main class="container">
and your<div class="attribution">
should be<footer class="attribution">
. And your design should include one<h1>
. This should clear your accessibility report!
Happy coding!
Marked as helpful1@maliksulemanaslamPosted about 3 years ago@darryncodes Thank you so much I am very happy to learn these concepts from you which as a newbie I did'nt knew about, next time I will try to implement these concepts to avoid some issues and these are best concepts thanks again mate! :)
0 - @vanzasetiaPosted about 3 years ago
👋Hi Malik!
I noticed that you removed the
meta
viewport. You should never remove it, since it is important for responsive website.More feedback:
- Try to use your own CSS, in my opinion this is too overkill to use Bootstrap.
- For the person photo, just use their name as the value of the
alt
attribute. You don't to put dash between each word. It's should human readable. - You don't need to use
br
tag, just make thespan
as a block element. Also, this should not be a heading. I recommend to usep
tag instead.
<h5 class="card-title smaller-h5">Colton Smith<br><span>Verified Buyer</span></h5>
- Also, heading order is important. You need to use
h1
,h2
,h3
, etc. Don't use heading tag to make the text smaller or bold. This is important for accessibility and SEO. - Don't use
%
formargin
in this case, since on large screen the space become too big. Userem
instead. - If you set the width of the elements using
%
unit, consider addingmax-width
to prevent them getting so large on bigger screen. For themax-width
, I recommend to userem
unit too. - It's best practice to use
rem
or sometimesem
for everything that's usually can be used withpx
. Usingpx
will prevent the user from controlling the size of your page.
That's it! Hopefully this is helpful!
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