4Geeks logo
About us

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Search from all Lessons

Social & live learning

The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.

← Back to Projects

Create an 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

🌱 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:

1https://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

  1. You have to make sure all inputs are being used properly: Input type date, email, input type number, etc.
  2. You also have to make sure to prevent and validate the form in all ways that HTML5 allows you (required inputs, formats, etc.).
  3. Use the <input type="date">, don't try to code your own date picker calendar.
  4. 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.
  5. 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.

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