Huddle Landing Page With Alternating Feature Blocks

Please log in to post a comment
Log in with GitHubCommunity feedback
- @PhoenixDev22
Hello Ahmed-El-Bald ,
Great work on this one . I have some suggestions regarding your solution if you don't mind:
-
It’s best practice that the
<header >
lives outside the<main>
landmark. The main landmark represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.. I would suggest to refactor this and use the right landmark for the right content as there is some<main>
content in the<footer>
and<header>
content in the<main>
-
The alternate text of the logo may be
alt="Huddle logo"
. Use the website's name as an alternate text. -
Consider specifying the type of the button to avoid any bugs.
-
What do you expect to happen when you press that
try it free
? In my opinion, it’s likely going to navigate the user to another page to sign in (form).So I would use<a>
instead of<button>
-
Instead of using a generic
div
with the class.links
to wrap the links of the<footer>
, you may use semantic<nav>
landmark around unordered lists<ul>
after you put your links within unordered lists structure so that a screen reader will read out how many things are in the list to give visually impaired users the most information possible about the contents of the navigation. It might look like this:
<ul class=””> <li><a href=”#” target="_blank" rel="noopener noreferrer"> about us</a></li> <li><a href=”#” target="_blank" rel="noopener noreferrer"> what we do</a></li> <li><a href=”#” target="_blank" rel="noopener noreferrer"> FAQ</a></li> </ul>
The same for the socials links, yo may use
<ul>
.-
For this
class="logo-in-footer"
, you may use the svg inline that you get access to change the colors and make it look like the footer’s logo(no need for the<span>
) -
look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content like
icon-phone , icon-email
are decorative. For decorative images, you set an emptyalt
to it with anaria-hidden=”true”
to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images. For informative images (add content to the body ), you should add a descriptive alternate text and omit the word image. -
The links wrapping the social images must have aria-label or sr-only text indicate where the link will take the user.( then add
aria-hidden=”true” that make them be ignored by screen readers
). -
Never use
<div>
and<span>
alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. For example , inclass=” contact-box"
, you may use like<address> ...
tag to wrap the contact information for the author/owner of a document or an article (email and phone number). By adding semantic tags to your document, you provide additional information about the document, which aids in communication.
Overall , your solution is good.Hopefully this feedback helps.
Marked as helpful -
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