@PhoenixDev22
Posted
Hello @JemK-307 ,
I have some suggestions regarding your solution:
-
There should be two landmark components as children of the body element - a
main
(which will be the card ) -
Anything with a hover style in a design means it's interactive. you need to add an interactive element
<a>
around the imageEquilibrium #3429, Jules Wyvern
.like this: -
Page should contain a level-one heading, in this challenge , you can use
<h1>
instead of<h4>
it would be like this :<h1> <a href="#"> Equilibrium #3429</a></h1>
-
Images must have alternate text
-
For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images in (icon-clock.svg, /icon-ethereum.svg", icon-view.svg
). -
The
alt
text of theavatar
shouldn't beempty "
, it should beJules Wyvern
.Tips for writing 'good' alt text. -
the
icon-view
doesn't really need to be in the html , you could do it with css. If you want it to stay in html it needs to bearia-hidden:true
orrole presentation
with empty alt. -
the link should be wrapping the original image and either have
Sr-only
text, anaria-label
oralt
text that says where that link takes you. -
You can use an unordered list
<ul>
to wrapclass="card-info-sub"
and in each<li>
, there would be<img >
and<p>
(to wrap the text). -
No need for
<hr>
, you can useborder-top
to theclass="card-creator"
. -
No need for <span> ,
<p>Creation of <a href="#">Jules Wyvern<a></p>
-
It's better to use
min-height: 100vh;
for the body , using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport.- an explicit width is not a good way . Remove the width from the card component and change it to
max width
instead. That will let it shrink a little when it needs to*/
- an explicit width is not a good way . Remove the width from the card component and change it to
-
Never use
px
for font-size. -
You should use
em
andrem
units .Bothem
andrem
are flexible, Usingpx
won't allow the user to control the font size based on their needs.
Overall your solution is good , Hopefully this feedback helps.
Marked as helpful
@JemK-307
Posted
@PhoenixDev22 Hi! Thank you so much for your useful and helpful feedback. These would be a great resource for me to keep practice harder and harder. really appreciate.