Sparkbox Code Challenge: Newsletter Sign-Up Form

We have a team that likes to continuously learn. Sparkbox Code Challenges encourage us to stretch ourselves, explore, and learn. We invite you to learn along with us in this code challenge in CodePen.

The Challenge

In this Sparkbox Code Challenge, you are tasked with creating a newsletter sign-up form. The form must have the following:

• A form element

• A label attached to an email input field

• A submit button

Challenge yourself in an area you want to grow! This can be making the form accessible, adding animation, trying a new CSS feature or custom properties, or building in a new framework.

Watch a full introduction with Sparkboxer Philip Zastrow.

Does this challenge sound fun? Share your solution on Twitter. Don’t forget to tag us with @hearsparkbox and use #SparkboxCodeChallenge.

Possible Solutions

Here are some solutions Sparkboxers have come up with to build and style a sign-up form.

Using Tailwind CSS

In this solution, Philip Zastrow challenged himself by trying to use Tailwind CSS to complete this challenge.

Check out Philip's solution in CodePen

Using a New CSS Element

Kasey Bonifacio solved this challenge by making a fun CSS gradient effect using :focus-within.

Check out Kasey's solution in CodePen