Skip to content

JA-003/html-forms-tutorial-exercises

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML5 Forms Tutorial & Exercises

By @alesanchezr and other contributors at 4Geeks Academy

last commit build by developers build by developers

Start now:

Forms are so important in the world of HTML, CSS and Javascript that I decided to git them a special course to focus in all the inputs, buttons and elements that HTML brings by default to focus on interaction. During these exercises you will learn:

  1. Using text inputs, text areas, date inputs and numeric inputs.
  2. Using dropdowns.
  3. Form preventive validations
  4. GET vs POST
  5. styling a form

One click installation:

Open in Gitpod

Manual installation

  1. Install learnpack, the package manager for learning tutorials and the html compiler plugin for learnpack, make sure you also have node.js 12+:
$ npm i learnpack -g
$ learnpack plugins:install learnpack-html
  1. Download this particular exercises using learnpack and cd into the folder:
$ learnpack download html-forms-tutorial-exercises
$ cd html-forms-tutorial-exercises

Note: Once you finish downloading, you will find a "exercises" folder that contains all the exercises within.

  1. Start the tutorial/exercises by running the following command at the same level were your bc.json file is:
$ npm i jest@24.8.0 -g
$ learnpack start

Node: The xercises have automatic grading but its very rigid and string, my recomendation is to ignore the tests and use them only as a recomendation or you can get frustrated.

How are the React Tutorial Exercises organized?

Each exercise is a small react application containing the following files:

  1. index.js: represents the entry file for the entire exercise.
  2. README.md: contains exercise instructions.
  3. test.js: you don't have to open this file, it contains the testing script for the exercise.

Contributors for this React Exercises

Thanks goes to these wonderful people (emoji key):

  1. Alejandro Sanchez (alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀 (build-tutorial) ✅ (documentation) 📖

This project follows the all-contributors specification. Contributions of any kind are welcome!

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • HTML 46.5%
  • CSS 31.9%
  • JavaScript 19.9%
  • Dockerfile 1.7%