breatheco-de / exercise-html5-form

Practice doing validations with HTML5 inputs with a practical project, everything you need to know about HTML5 forms.

HTML5 Form

🌱 How to start this project

Do not clone this repository because we are going to be using a different template.

We recommend opening the html template repository using a provisioning tool like Codespaces (recommended) or Gitpod. Alternatively, you can clone it on your local computer using the git clone command.

This is the repository you need to open or clone:

https://github.com/4GeeksAcademy/html-hello

Please follow these steps on how to start a coding project.

💡 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (git remote set-url origin <your new url>), and uploading the code to your new repository using the add, commit and push commands from the git terminal.

📝 Instructions

1. Please use your HTML5/CSS and Bootstrap skills to replicate this exact same form.
2. It's recommended to use the Bootstrap framework if you already know it. If you don't, then practice your layout skills using flexbox.

   

   Click to open image in a new window

3. You have to make sure all inputs are being used properly: Input type date, email, input type number, etc.
4. You also have to make sure to prevent and validate the form in all ways that HTML5 allows you (required inputs, formats, etc.).
5. Use the <input type="date">, don't try to code your own date picker calendar.
6. If you are not using Bootstrap: build a layout strategy by drawing all the <div> boxes you can identify, focus particularly on the divs that are laid out horizontally in the same line because those will require using display: flex.
7. If you are using Bootstrap: In order to practice all the classes that Bootstrap gives you to style your forms, you need almost no CSS of your own.

📒 Resources

Only if you are using Bootstrap: Here is the Bootstrap 5 documentation about forms. Try understanding the HTML code behind the examples so you can tweak them into your solution.

Strategy

If you are not using Bootstrap

The layout for this exercise requires a lot of <div> and boxes, here is a proposal that could work.

Click to open image in a new window

What to do if you are stuck?

Don't get frustrated, ask for help! After you try on you own for 30 minutes, it is time to stop trying and ask for help.

This and many other projects are built by students as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.