i have made the challenge with the help of html and css flex

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋 Hi Aditya!

  I have some feedback on this solution:

  • Accessibility
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technology such as screen readers or screen magnifiers ignore those images. In this case, all images are decorative only, except the logo image.
    • Alternative text on img should be informative and human-readable or meaningful. For example, logoimg is not human-readable and doesn't give any information at all.
    • Use the company name as the alternative text for the logo image. You don't need to put "image" or "logo", since assistive technology such as screen reader will pronounce it as image. So just write Huddle as the alt value, alt="Huddle".
    • Use button element for any interactive elements, like in this case the Try it free, Get Started For Free buttons should use button tag (not only styled like a button). This is important since assistive technology can't know that it is a button or a link, unless you use the correct HTML element.
    • Also, the About Us, FAQ, and anything like that should be links instead of paragraph. If you inspect the footer on the Frontend Mentor site, there are two sections, EXPLORE and COMMUNITY. As you can the Unlock PRO, and etc all of those are link elements, the same logic applies in this case.
    • The email and the phone number should be a link too. But, for email you should write the link like this: href="mailto:[email protected]" and for the phone number, href="tel:+1234567890"
    • Add custom :focus-visible style for all interactive elements, in this case, the buttons and links. This will make everyone can navigate this website comfortably using keyboard (Tab and Enter).
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Non Accessibility
    • The huddle logos are stretching on mobile view (360px * 640px).
    • On desktop view (1260px * 800px), the first-block section doesn't horizontally in the center.
    • Still on the desktop view, the contentinfo is too narrow when it should have equal width with the mockup image.
    • In my opinion, the way you name your classes are strange. I would recommend using BEM class naming convention. It's popular and can help you write better CSS.
    • Write your code with consistent style, meaning things like indentation, white space should be consistent across your code.

  The next thing that you want to do, whether learning JavaScript or sharpening your CSS skill is 100% up to you. There's no absolute path to follow if you're self-taught. But, my recommendation is to learn or sharpen your CSS skill and if you get bored with HTML and CSS then you may want to take a break or learn a little bit about JavaScript.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  1

  ---

  

  aditya uchiha•80

  @adityaauchihaPosted about 3 years ago

  @vanzasetia Thank you for feedback, i have written everything down and will start working on it. Thanks for suggesting bem, sometimes i forget basics html, and how much time i should take for completing one challenge ?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  @adityaauchiha It depends on the difficulty of the challenge and how much time you can spend in a day to finish the challenge. There are no absolute hours to complete any challenges.

  As far as I could remember, I think I finished this challenge in 6 - 7 days 😅.

  I would recommend focusing on writing good quality code and speed will come naturally.

  Marked as helpful

  0

  

  aditya uchiha•80

  @adityaauchihaPosted about 3 years ago

  @vanzasetia thanks, i am starting javascript today will try to take js newbie challange after completing it.

  0