@vanzasetia
Posted
Hi, Faris! 👋
Some suggestions from me.
- Logo is an important content of the page. It's not decorative. It's also not the one with blank
alt=""text andaria-hidden="true". Without that information, a screen reader user or a search engine will not know what your site/project is called. - The
footershould live outside themainlandmark. - The social media icons are social media links. So, wrap each icon with an anchor tag. Then, use
aria-labelto give each link an accessible name. - I recommend putting the
requiredattribute to theinputelement so that the users can't submit an empty form. - I suggest trying to validate the user's email with Regular Expression. You can use RegExr to help you learn about Regular Expression.
I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.
- Manuel Matuzović - Lost in Translation - YouTube
- Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
- Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube
I hope this helps! Happy coding!
Marked as helpful
@Faris-Thibani
Posted
@vanzasetia Hi Vanza,
Thank you, Sir.
How would you suggest creating the logo element?
Great feedback. Appreciate it.
BTW we just added the required attribute and removed the footer from the main tag, the latter being the expected bug.
@vanzasetia
Posted
@Faris-Thibani
I wrapped the img element with an anchor tag. (Usually, websites like to make the logo the link to the home page.)
Then, have an alternative text of "Ping - home".
Finally, I added width and height attribute to the img element to prevent the jumping layout (or to optimize CLS (Cumulative Layout Shift).)
You can see my solution to see how I implemented it.
Marked as helpful
