Create a basic newsletter sign-up form with HTML, CSS, and JavaScript
Learn how to create a basic newsletter sign-up form from a Figma design using HTML, CSS, and JavaScript.
Register Your Interest
I'm currently working on the final parts of this project , so enter your email below and I'll send you a message when it's been released.
Project overview
In this course, I'll guide you through creating a newsletter sign-up form from a Figma design. We'll start from scratch, using vanilla HTML, CSS, and JavaScript to build the form. This course is perfect for absolute beginners who want to learn the basics of web development without using any build tools...
In this course, I'll guide you through creating a newsletter sign-up form from a Figma design. We'll start from scratch, using vanilla HTML, CSS, and JavaScript to build the form. This course is perfect for absolute beginners who want to learn the basics of web development without using any build tools. By the end of this course, you'll have a fully functional newsletter sign-up form that interacts with a backend server to add, remove, and check email subscriptions.
What you will learn
- Set up a project directory and create a basic HTML template.
- Build the HTML structure for a newsletter sign-up form.
- Style the form using CSS to match the Figma design.
- Add interactivity with JavaScript for form validation and submission.
- Set up a project directory and create a basic HTML template.
- Build the HTML structure for a newsletter sign-up form.
- Style the form using CSS to match the Figma design.
- Add interactivity with JavaScript for form validation and submission.
- Integrate the form with API routes for adding, removing, and checking email subscriptions.
- Review API Swagger documentation and test routes through Swagger UI.
- Set up and test API routes in Postman for effective development and debugging.
Project Epics
Below are the epics for this project, each containing a series of focused tasks designed to achieve specific outcomes. These epics provide a structured pathway, ensuring you gain practical experience in building modern web applications.
Epic Overview
Set up the basic structure for the project to ensure an organised starting point.
Acceptance Criteria
- A project directory is created.
- The basic folder structure includes index.html, css/, and js/.
- The HTML template contains DOCTYPE, head, body tags, and meta tags for character set and viewport settings.
Epic Tasks
Epic Overview
Build the HTML structure for the newsletter sign-up form based on the Figma design.
Acceptance Criteria
- The Figma design is imported into the project directory for reference.
- A form element with input fields for email and a submit button is created.
- The form includes placeholder text and labels.
Epic Tasks
Epic Overview
Apply styles to the newsletter sign-up form to match the Figma design.
Acceptance Criteria
- A styles.css file is created in the css/ directory and linked to the HTML file.
- The form container is styled according to the Figma design.
- The email input field and submit button are styled as per the design.
Epic Tasks
Epic Overview
Review the API Swagger documentation to understand the available endpoints and how to use them. Test each route through Swagger to ensure it works.
Acceptance Criteria
- Swagger documentation URL is accessible, and the UI opens without errors.
- Endpoint URLs, required parameters, and expected responses for POST, DELETE, and GET routes are noted.
- Examples are tested using the Swagger UI, and results match expected responses.
- Discrepancies or issues are documented and communicated to the backend team.
Epic Tasks
Epic Overview
Set up the API routes in Postman as a collection to facilitate testing and development.
Acceptance Criteria
- A new collection is created in Postman named "Newsletter Sign-Up API".
- The POST, DELETE, and GET routes are added to the Postman collection with required parameters configured correctly.
- Sample requests for all routes are saved.
- All routes are tested and return expected responses, and any issues are documented and communicated to the backend team.
Epic Tasks
Epic Overview
Add interactivity to the newsletter sign-up form using JavaScript.
Acceptance Criteria
- A script.js file is created in the js/ directory and linked to the HTML file.
- JavaScript is implemented to validate the email input field.
- Form submission is handled via JavaScript, sending a POST request.
- Success and error messages are displayed appropriately.
Epic Tasks
Epic Overview
Test and debug the newsletter sign-up form to ensure it functions correctly.
Acceptance Criteria
- Form validation works as expected for valid and invalid email addresses.
- Form submission works as expected for adding, removing, and checking subscription status.
- Identified issues are resolved.
Epic Tasks
Project FAQs
-
What is this?
- This is a web development learning project designed to help you practice and improve your frontend development skills. Each project includes real-world tasks and challenges that you can work on to gain practical experience.
-
When can I enrol?
- When the project is ready, the "Register your interest" button will be replaced with an "Enrol Now" button. Be sure to add your email via the "Register your interest" button to be notified when the project is ready.
-
What is Agile?
- Agile is a project management methodology that involves breaking down projects into small, manageable tasks. Using it on a web development learning website such as Pixel Rocket gives you a feel of real-world web development practices and prepares you for your first job in the industry.
-
What is Git?
- Git is a version control system that allows you to track changes in your code. It is widely used in the web development industry to manage codebases and collaborate with other developers. In the real-world, it is what you will use to submit your code for review and feedback.
-
What is Figma?
- Figma is a collaborative interface design tool that allows you to create, prototype, and share designs. It is widely used in the web development industry for designing user interfaces and user experiences. It is what designers will use to create the designs you will be coding one day.
-
I don't know Agile, Figma or Git - can I still enrol?
- Yes absolutely! That's exactly why I built Pixel Rocket - to help you learn by using real-world methods. I've also created free courses on Agile, Figma and Git that you can take to get up to speed. You can view my frontend web development courses by clicking here.
Register Your Interest
I'm currently working on the final parts of this project , so enter your email below and I'll send you a message when it's been released.
Additional resources
-
View Courses
Frontend web development courses
Beginner-friendly courses focusing on HTML, CSS, and JavaScript.
-
View Templates
Free website templates
Collection of free, high-quality website templates for your next project.
-
View Quizzes
Frontend web development quizzes
Test your knowledge on frontend subjects such as HTML, CSS, and JavaScript.