Huddle landing page with single introductory section
Design comparison
Solution retrospective
Any suggestion and advices are accepted!π₯²
Community feedback
- @MelvinAguilarPosted almost 2 years ago
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 helpful1 -
- @WebDevMirzaPosted almost 2 years ago
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 helpful0 - @VCaramesPosted almost 2 years ago
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:π
- 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: π
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! πππͺ
0 - 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
Please log in to post a comment
Log in with GitHubJoin 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