SCSS, Grid/Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @Tagvi,

  I have some suggestions regarding your solution:

  • 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 class="name" href="#">Equilibrium #3429 </a></h1>

  • Anything with a hover style in design means it's interactive. you need to add an interactive element<a> around the image , and Jules Wyvern .

  • 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-ethereum, icon-clock ).

  • The avatar's alt" An avatar of the creator" is meaningless , you can use Jules Wyvern for it.

  • Read more how to write an alt text

  • the link should be wrapping the main image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • you can use <ul> to wrap theclass="info "and in each <li> there would be <img > and <p> .

  • using min-height: 100vh instead of height: 100vh allows the body to to grow taller if the content outgrows the visible page.

  • It's not recommended to use px for font size . Using px won't allow the user to control the font size based on their needs.

  General point : Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.

  You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

  Overall, your solution is good, Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Oto•400

  @TagviPosted over 2 years ago

  @PhoenixDev22 Hi, Thanks for the suggestions. MDN states that: "The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.". The hoverables have no current functionality, so I decided not to use an anchor tag, but I guess the fact that there are hover states implies that there should be some kind of event associated with it. Also, sometimes events might not point to a different URL, for example if the image was to enlarge on click, I don't think there might have been a need for rerouting, thus conflicting with the description provided. Accessibility is something that I haven't looked deeply into yet, so I wonder why does the description provided for the element conflict with what you recommend, at least it looks like that for me. The items inside the info don't represent a list, so I don't think that ul is needed, again, I have no idea about the accessibility, so please correct me if I am wrong. I used height because there is no way that the element overflows, thus no need for min-height, but if I introduce rem units that scale according to the user's preferences (should have, but I forgot) it can indeed overflow at some point. Anything else that I haven't mentioned is understandable, and I will definitely implement in the future projects. I am also planning to learn more about accessibility. Thanks for the feedback again. <3

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @Tagvi ,

  You are welcome.

  for anything on the page that is clickable or Anythnig with a hover style in a design means it needs an interactive element (button, links, details, iframe, input, textarea.. ) . think about whether interactive element should be if it was a real website : Anchor tags would trigger navigation, buttons would trigger an action (like toggling content or submitting a form) in this challenge ,Very likely When we click on the main image, it might navigate to a full page with a large image, in which it should be an anchor or we might expect a bigger version of the image to open in a lightbox overlay , in which it would be a button apparently , when we click on the title we would go to a detailed page of NFT. And when we click on a username then we would go to the user's profile.

  The <ul> element is used to define an unordered list of elements that do not need to be presented in numerical order and can be rearranged without changing the meaning of the list and it is semantic, so there is nothing prevents using it in this challenge.

  hopefully it's clear

  Marked as helpful

  1