huddle landing page using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I'm sorry if it's too much text. They are small details, but I tend to write a lot.

  • I have to emphasize that you have used the landmarks correctly, very good!

  • Social media icons, which are often used to link to a company's social media profiles, should typically be anchor elements because anchor elements allows users to easily click on the icon and be taken directly to the company's social media profile page.

    Additionally, you should improve the alt attribute of those images, having "logo" as the alt attribute repeated several times doesn't make much sense, so people with screen readers can understand where the link will lead.

    <a href="#"><img src="/images/facebook.png" alt="Facebook"></a>
    

  • The "Register" element should be an <a> tag instead of a button, since the goal of the element is to redirect the user to a registration form, the most appropriate element would be an anchor tag.

  Alt text 📷:

  Here are some guidelines to follow when writing alt text:

  • Alt text should provide a clear and accurate description of the image's content or purpose.

  • A logo is of a website's branding and identity, use company name as the alt attribute value for logos. The word "logo" is not necessary.

  • Use empty alt text for decorative images: If an image is used for decorative purposes only and does not convey any important information, the alt text should be left empty.

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:

  • You should remove width: 1440px; from the body element and let it occupy 100% of the screen regardless of the device, so you could use max-width: 1440px to prevent the webpage from growing too much and adapt to the device.

    Additionally, your media breakpoint of 400px is too small, from 1000px to 400px a horizontal scrollbar is generated that should not exist.

  • You should use max-width: 100% and display: block to have control over the image, and to be able to resize it depending on the device.

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Happy coding!

  Marked as helpful

  1

  ---

  

  Mukhiddin Nosirov•190

  @PepeleenoPosted over 1 year ago

  @MelvinAguilar Thank you very much I learnt a lot from your comment. Making a website responsive is my biggest challenge so far. "max-width" property was something missing in my journey, I guess. Now I understand why my images don't scale depending on the size of a screen, thank you😊. By the way, is it okay if mention you in the comments to seek for help if I don't understand something ?😅

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @Pepeleeno No problem, I'm happy to help. 😊

  Marked as helpful

  1