mobile-first solution using CSS flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Yakubu! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Good effort on this challenge! It's great that now your solution has no issues! Great job with the update! 👍

  Some suggestions from me.

  • Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
  • There should not be text in span and div alone whenever possible; instead wrap the text with a meaningful element like a paragraph element.
  • The Equilibrium image*, Equilibrium #3429, and Jules Wyvern should be wrapped link elements. They have interactivity so they should be wrapped with interactive elements.
  • I recommend making the body element a flex container to center the card both vertically and horizontally.

  That's it! Hope this helps. 😊

  P.S. I notice that your score is still 0 even though you've submitted a solution. I recommend contacting the Frontend Mentor by using email or DM Matt Studdert (founder of this platform) through Slack to fix this issue. Don't forget to give the link of your profile, I'm sure Frontend Mentor team will need it.

  Marked as helpful

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hey Yakubu, congratulations on completing the challenge! You did a great job 😉

  Let me give you some little tips for optimizing your code:

  • to make it look as close to the design as possible add width: 20rem to container class
  • to make transparent the cyan background on hover set background-color: hsl(178, 100%, 50%, .5) to .image-overlay class
  • remove all margin and padding from .container class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😁

  Marked as helpful

  0
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="main"> instead of <div class="main">.
  • You should also add alt text to your image tags to aid screen readers

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  Marked as helpful

  0

  ---

  

  Yakubu Precious Fanya•0

  @preciousyaks17Posted over 2 years ago

  @Samadeen thank I definitely going to correct it now!

  0
• 

  steevencode•120

  @steeven509Posted over 2 years ago

  Hi, I have not checked your source code yet but the report indicates that you have a lot of accessibility problem, if this feedback has helped you mark it as util thanks you

  0

  ---

  

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  @steeven509 Better you advice him on how to solve his accessibility issues rather than stating the obvious.

  0

  

  steevencode•120

  @steeven509Posted over 2 years ago

  @Samadeen thanks, man for the advice i will improve my suggestions now

  0