About the Challenge
In this frontend challenge, you'll build a Newsletter Card Component. This challenge is perfect for you if you've been learning HTML and CSS and are looking to practice what you've learned by building something new and beginner-friendly.
You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this might be a great way to push yourself.
- The Newsletter Card Component should have an email input field for the user to enter their email address and a subscribe button.
- An email input field should be validated before the user can submit the form.
- If the email address is not valid, an error alert message should be displayed to the user.
- When the user clicks on the subscribe button, a success message should be displayed to the user.
- Show the hover state of all the elements.
- The component should be responsive and display correctly on different screen sizes.
- Make this landing page look as close to the design as possible.
Taking your Project to the Next Level
What you'll Learn?
In this frontend challenge, you'll learn how to build a real-world UI component using HTML & CSS. You'll also learn how to use CSS Flexbox to lay out the component and make it responsive. This frontend challenge is a great opportunity to improve your HTML & CSS skills by building a beginner-friendly frontend project. So what are you waiting for?
- To get started, download the starter code(zip file).
- Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.
- Open the project's README.md file. It has additional information about the challenge.
- Set up version control (we recommend Git) and create a GitHub repository for this challenge.
- Customize your project/file architecture to your liking.
- Happy coding! 👍
Get Involved with the Community
Join our Discord community and share your solutions with others. Ask questions and get answers from the fellow developers, help others and get involved with the community.
It's an amazing place to learn and grow as a developer, and we'd love for you to be a part of it!
So, what are you waiting for? Click on the download button to get started.