CSS flexbox and CSS position property

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @Shubham-503, Your solution looks nice. I have some suggestions , To tackle the accessibility issues :

  • Document should have one main landmark. Wrap the body content in< main>tag read more about main landmark.

  • Page should contain a level-one heading. You can replace the <p> tag by <h1> in <p class="mt-20 heading">Equilibrium #3429</p> then wrap a heading element in an anchor tag.

  --Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and <span class="author"> Jules Wyvern</span>

  • 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 alt="icon-ethereum" , alt="icon-clock" .

  -The eye image 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 be aria-hidden or role presentation with empty alt.

  • Don't overuse the <span>( also on the inappropriate place), and use other semantic tags like <figure> <figcaption> for the avatar part.

  • Don't use span for meaningful content.( <span> 0.041 ETH</span> and 3 days left), you should have used <p> .

  • You should have used <h1> instead of <h3>Equilibrium #3429</h3>

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

  • You can replace the <div class="attribution">by a <footer > tag and it would be out the < main>.

  • The srcset attribute specifies the URL of the image to use in different situations. This attribute is required when <source> is used in <picture>. I really this feedback helps , happy coding

  Marked as helpful

  0

  ---

  

  Kumar Shubham•30

  @Shubham-503Posted almost 3 years ago

  @PhoenixDev22 Thanks for the feedback

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @Shubham-503 ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it. Especially I like the image overlay effect on your project.

  Here are some of the tips I like to provide.

  • I suggest you to try transition on hoverable elements like heading and creator name.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  0

  ---

  

  Kumar Shubham•30

  @Shubham-503Posted almost 3 years ago

  @tymren608 Thanks I will make changes

  0