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 with single introductory section

Srikanthβ€’ 110

@AgeOfUltra


Design comparison


SolutionDesign

Solution retrospective


Any suggestion and advices are accepted!πŸ₯²

Community feedback

@MelvinAguilar

Posted

Hello there πŸ‘‹. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • 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. This makes it easy for users to connect with the company on social media

    Additionally, you should use the aria-label attribute to describe the links if they don't have visible text, this will help screen reader users to understand the purpose of the link.

e.g. <a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>

  • A logo may not be considered as a decoration in HTML because it is often a crucial part of a website's branding and identity, and it may contain important information for the user. you should use the company name as the alt attribute value. The word "logo" is not necessary.
  • The logo is too big for mobile devices. :(
  • You should use the cursor: pointer property to indicate that the element like a button or a link is clickable.

I hope you find it useful! πŸ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

1

Srikanthβ€’ 110

@AgeOfUltra

Posted

@MelvinAguilar Thank you!

0

@WebDevMirza

Posted

Hey,

Good work on that. On desktop version, it looks great. But in mobile version, the design is not the same as it should be.

  • Reduce spacing on both side (left and right) for the mobile version.
  • Add cursor: pointer; on button and icons.

Rest of the part is fantastic. Keep the good work on. Hopes this might help you.

Thank you.

Marked as helpful

0

Srikanthβ€’ 110

@AgeOfUltra

Posted

@WebDevMirza Thank you !

0

@VCarames

Posted

Hey there! πŸ‘‹ Here are some suggestions to help improve your code:

  • The button was created with the incorrect element ❌. When users click on the button they should directed to a different part of your site; the anchor element will allow this to happen.

More Info:πŸ“š

MDN The Anchor element

  • Your CSS Reset is being underutilized. 😒 To fully maximize πŸ’― it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
  • Implement a "Mobile First" approach πŸ“± > πŸ–₯

Mobile devices are now the dominant πŸ‘‘ way in which people browse the web, it is critical that your website/content looks perfect πŸ’― on all mobile devices.

More Info: πŸ“š

Mobile First

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! πŸŽ†πŸŽŠπŸͺ…

0

Srikanthβ€’ 110

@AgeOfUltra

Posted

@vcarames yeah thank you ! i got it

1

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