@PhoenixDev22
Posted
Hello @skippysworld,
I have some suggestions regarding your solution:
-First of all, you are mis using <section> tag , section is for a bigger chunk of content often titled by <h2>.
-
Anything with a hover style in a design means it's interactive. you need to add an interactive element
<a>around the image(image-equilibrium.jpg) . -
the
icon-viewdoesn'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:trueorrole presentationwith empty alt -
For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in(
icon-view,icon-ethereum, icon-clock) -
it's invalid html to wrap a heading element in an anchor tag. Swap those around so the anchor is inside the heading
<h1><a href="#">Equilibrium #3429</a></h1> -
the link should be wrapping the original image and either have
Sr-onlytext, anaria-labeloralttext that says where that link takes you. -
Never start with “Image of …” or “Picture of …” It’s going to be obvious to either a person or a machine when something they're accessing is alt text. it should be only
Jules Wyvern. -
You can use an unordered list
<ul>to wrap ` class="description__details" and in each<li>, there would be<img >and<p>(to wrap the text). -
never use
<span>'s for meaningful content , -
an explicit width is not a good way . Remove the width from the card component and change it to
max widthinstead. That will let it shrink a little when it needs to. -
To center the card on the middle of the page , you can use the flexbox properties and
min-height: 100vhfor the<body>(remove position absolute )like this:
body{
display:flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
- an explicit width is not a good way . Remove the width from the card component and change it to
max widthinstead. That will let it shrink a little when it needs to.
A general point - try to put classes directly on anything you want to style.
Overall your solution is good , Hopefully this feedback helps.
Marked as helpful
@skippysworld
Posted
@PhoenixDev22 O M G.. Honestly, did not expect such reply, thanks! I’ll need to get a good sleep to read your comment again with a fresh head though :)
But one thing is on my mind right now - I did apply the flex property on <body> at first, but changed my mind later when I got to footer that I wanted to put at the end of the page. I know the positioning using percents isn’t the best solution, but… I was not able to find out how to keep the card in the middle of everything and let the footer rest at the bottom of the page. Since “flex- direction” is column “align-items” doesn’t work and “justify-content: flex-end” is ignored (Information from MDN).
