Project 8: html, css, flexbox, meadia query

Community feedback

• 

  Dušan Lukić•1,660

  @dusanlukic404Posted about 3 years ago

  Hi Mainul, nice job! 😄 I have a few suggestions for you:

  • This should be a landing page so you have to avoid vertical scrollbar that you have
  • Add transition on button and svg images
  • Heading should be bigger

  On mobile screen is everything okay but in my opinion button is too large and heading is too small

  Marked as helpful

  1

  ---

  

  Mainul Islam•160

  @Mainul-Islam-NirobPosted about 3 years ago

  @dusanlukic404 Thanks Dusan Lukic...

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Mainul Islam!

  I've some feedback on this solution:

  • For any decorative images, you should leave the alt="" empty and add aria-hidden="true" to make sure all screen readers ignore those images. In this case, the social media icons and the illustration are decorative images.
  • alt value should be informative and human readable, not hyphenated.
  • For the logo, just use the company name for the alt="Huddle". You don't need to say "logo".
  • Don't limit the height of the body element. Use min-height instead.
  • Removed all commented code. Remember, development code is not a production code.

  .social-icon{
    text-align: right;
    padding: 3rem 7rem;
    /* margin-bottom: 0; */
    overflow: hidden;
  }
  

  That's it! Hopefully this is helpful!

  Marked as helpful

  1

  ---

  

  Mainul Islam•160

  @Mainul-Islam-NirobPosted about 3 years ago

  @vanzasetia Hi Vanza Setia. First of all, thanks for your feedback. It will be helpfull for me. I wish if I could get more feedback from you for my previous and future projects.

  I have a question, do you have any suggestions for the social icons hover effect? Is it possible to make the circle for social icons using border not using pseudo-element?

  Thanks again for your feedback💚💚💚.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  @Mainul-Islam-Nirob You're welcome!

  I created the border on the link itself, so that I can change the border color when it's on :hover state.

  You can check my solution on Fylo landing page with two column layout and inspect the social link element on the footer.

  Marked as helpful

  1
• 

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  Hello Mainul! Congrats on your submission. Looking very good. Some things to note:

  • You need to add background-size: cover and background-repeat: no-repeat to the body to prevent background image from repeating on desktop view.
  • Add aria-label to your <a> to resolve the html issues raised in the report.
  • You have a small typo error in your .btn text (Registar)

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  @dewslyse I would recommend to use an actual HTML element, like span with sr-only class, since aria-label is not translatable.

  Marked as helpful

  1

  

  Mainul Islam•160

  @Mainul-Islam-NirobPosted about 3 years ago

  @dewslyse Thank you so much dewslyse. It was helpful. 💚💚💚💚

  0