To improve my CSS skills, but especially to become more comfortable coding sites with basic language skills and no frameworks. All HTML, CSS and Javascript is 'vanilla', with no libraries or pre-processors.
I spent time learning CSS grid and found that using the grid system, plus flexbox where needed gave me some very powerful positioning tools, especially without using frameworks as a crutch. Combining this with media queries lead me to develop with a 'mobile first' approach. I coded the 375px view first and then developed the desktop site from that.
The design spec called for an error message to show if the input was either blank, or didn't contain a valid email string. To improve feedback, I used the same Javascript function to also add a message to the user via the placeholder, suggesting that they input a valid email and also added a function to 'reset' the input when clicked. That way the error clears and the user does not feel like something has gone wrong.
I also added a few extra media queries to scale the heading on the 'desktop' view, enabling the site to be slightly better at lower resolutions, yet still not low enough to trigger the 'mobile' view. Given more time and assets I feel that the site could use a few distint breakpoints, as the final product is not impressive, particularly on iPad's and XL-size phones. I intend to learn more about designing for these devices.
It would be interesting to incorporate a database to store emails. The back-end could also send an automated email or text via a third party service to confirm the subscription.