Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

huddle landing page using flexbox

Mukhiddin Nosirovโ€ข 190

@Pepeleeno


Design comparison


SolutionDesign

Solution retrospective


@MelvinAguilar I want to know your feedback about this solution :) Give some suggestion to improve the code :)

Community feedback

@MelvinAguilar

Posted

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

@Pepeleeno

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord