Responsive landing page using flexbox, validate email with js

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!