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.
- Please use your HTML5/CSS skills to replicate this exact same form.
- It's recommended to use the bootstrap framework if you already know it. If you don't, then practice your layout skills using the flex box.
click to open image in a new window
- You have to make sure all inputs are being used properly: Input type date, email, input type number, etc.
- You also have to make sure to prevent and validate the form in all ways that HTML5 allows you (required inputs, formats, etc.).
- Use the input type="date", don't try to code your own date picker calendar.
- If you are
notusing 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 usingdisplay: flex. - 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.
Only if you are using bootstrap: Here is the bootstrap 5 documentation about forms)
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
If you are using bootstrap look for the forms documentation and read the example layouts, don't just copy paste what you see, try understanding the HTML code behind the examples so you can tweak them into your solution.
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.