Table of Contents

1. Challenge

   Introduction

   Welcome back to Code Labs for part two of our web development lab series! After successfully building an interactive webpage for a pie shop in our last session, we're ready to enhance it further with more advanced features using HTML, CSS, and JavaScript. Today's focus will be on building a contact form.

   Steps:

   1. Contact Form: We'll begin with constructing the HTML structure of the form.

   2. Enhancing User Interface with CSS: Next, we'll design our form using CSS. This will involve learning how to create form elements like text inputs, checkboxes, radio buttons, and dropdowns in a user-friendly and visually pleasing manner.

   3. Using JavaScript for Form Validation: We'll then make use of JavaScript to ensure that all the fields in our form are filled out correctly before a user can submit the form. We'll learn about form validation, error handling, and how to give feedback to users when they have missing or incorrect information.

   By the end of this lab, you will have gained further practical experience in advanced web development techniques, enhancing the interactive webpage you built in the previous lab. You'll be able to create a contact form and validate user input with JavaScript.

   If you're ready, click on to the first task.

2. Challenge

   Create the Form HTML Structure

   For this step, all of your coding will be done inside the contact.html file. Once you have completed the tasks above, refresh the Web Browser tab and use the button in the top-right corner to open it into a new tab. Navigate to the /contact.html page to see the changes.

   If you're ready, click the next step > to move on.

3. Challenge

   Style the Form with CSS

   For this step, all of your coding will be done inside the styles.css file. Once you have completed the tasks above, refresh the Web Browser tab and use the button in the top-right corner to open it into a new tab. Navigate to the /contact.html page to see the changes.

   If you're ready, click the next step > to move on.

4. Challenge

   Validate the Form with JavaScript

   For this step, all of your coding will be done inside the script.js file. Nice! Now once you refresh the Web Browser tab and use the button in the top-right corner to open it into a new tab. Navigate to the /contact.html page and it should be fully functional with alerts and a success message.