← Back to Projects

Create a HTML5 form

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

3 hrs

Technologies

alt text HTML5 Form

Forms are boring, they are difficult to style, and we have to start dealing with the many user-related issues here (Like usability, security, validations, etc.).

On the other hand, forms are responsible for the Web 2.0, they enable interactive websites and all the fun!

In this project you will learn to style forms like a Pro! Using bootstrap components, HTML5 elements and your first small validations!

🌱 How to start this project

Do not clone this repository.

  1. The first step to start coding is cloning the html boilerplate on your local computer or opening it using gitpod.

a) If using Gitpod you can clone the boilerplate by clicking here. b) If working locally type the following command from your command line: $ git clone https://github.com/4GeeksAcademy/html-hello.

💡 Important: Remember to create a new repository, update the remote (git remote set-url origin <your new url>), and upload the code to your new repository using add, commit and push.

Instructions

  1. Please use your bootstrap/css and HTML5 skills to replicate this exact same form.

  1. In order to practice all the classes that bootstrap gives you to style your forms, you need almost no CSS of your own.
  2. You have to make sure all inputs are being used properly: Input type date, email, input type number, etc.
  3. You also have to make sure to prevent and validate the form in all ways that HTML5 allows you (required inputs, formats, etc.).
  4. Use the input type="date", don't try to code your own date picker calendar.

Resources

Here is the bootstrap 4 documentation about forms: https://getbootstrap.com/docs/4.0/components/forms/

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.

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

3 hrs

Technologies

All rights reserved, 4Geeks LLC 2021. Read more about 4Geeks and what we are going here.