Responsive Landing Page, Flex Box, Vanilla CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  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 and aria-hidden="true". Without that information, a screen reader user or a search engine will not know what your site/project is called.
  • The footer should live outside the main landmark.
  • The social media icons are social media links. So, wrap each icon with an anchor tag. Then, use aria-label to give each link an accessible name.
  • I recommend putting the required attribute to the input element 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

  1

  ---

  

  Faris Thibani•220

  @Faris-ThibaniPosted about 2 years ago

  @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.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @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

  1