Responsive landing page using flexbox, validate email with js

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Marcin! 👋

  To validate the email address, I recommend using a RegEx (Regular Expression). It allows you to validate the email address with the correct format. You can use a tool like RegExr to help you create your own RegEx. I prefer trying to find an existing RegEx on the internet. Then, improve it (it's rare to find the RegEx that you want).

  Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.

  More suggestions:

  • Wrap the input and the submit button with a form element. Otherwise, it prevents the users keyboard to use Enter key to submit the form.
  • Not every image needs alt text. If the image does not provide any meaningful content, such as the illustration-dashboard.png, consider using empty alt text (alt=””). This saves your screen reader users time as they navigate the page.
  • Each of the social media icons should be wrapped by an anchor tag. Those are the social media links of the company.
  • I recommend adding rel="noopener" to any anchor tags that have target="_blank". It helps protect users of legacy browsers. I suggest reading "Links to cross-origin destinations are unsafe" article to learn more about this.
  • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.

  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

  ---

  

  Marcin•270

  @marcinsuskiPosted about 2 years ago

  Hi @vanzasetia,

  Thanks a lot for the trouble of making all of these comments. It's very appreciated and I will take to heart all of what You said. Everything is to the point I tried the RegEx validation in JS but I wasn't able to make it work so this time I simply moved forward but I have it in mind to come back to this issue and make it work.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @marcinsuski No problem! 👍

  0