https://github.com/4GeeksAcademy/html-forms-tutorial-exercises
https://github.com/4GeeksAcademy/html-forms-tutorial-exercises
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/4GeeksAcademy/html-forms-tutorial-exercises
- Owner: 4GeeksAcademy
- License: other
- Created: 2019-10-14T20:12:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-11-14T21:43:01.000Z (5 months ago)
- Last Synced: 2024-11-14T22:20:35.429Z (5 months ago)
- Language: HTML
- Size: 2.37 MB
- Stars: 17
- Watchers: 3
- Forks: 172
- Open Issues: 4
-
Metadata Files:
- Readme: README.es.md
- License: LICENSE.md
Awesome Lists containing this project
- jimsghstars - 4GeeksAcademy/html-forms-tutorial-exercises - (HTML)
README
# Tutorial & Ejercicios de Formularios HTML5
> Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/graphs/contributors) de [4Geeks Academy](https://4geeksacademy.co/)
[](https://breatheco.de)
[](https://twitter.com/4geeksacademy)
Los formularios son tan importantes en el mundo de HTML, CSS y JavaScript que decidí dedicarles un tutorial especial para enfocarme en todas las entradas/inputs, botones y elementos que HTML trae por defecto para centrarme en la interacción. En estos ejercicios aprenderás:
1. Uso de entradas/inputs de texto, text areas, entradas/inputs de fecha y entradas/inputs numéricas.
2. Uso de dropdowns.
3. Validaciones de formulario.
4. Dar estilos a un formulario.
#### Antes de empezar... hay otros tutoriales
- Aprende HTML
-
Aprende Formularios HTML5← 🔥 Estás aquí
- Aprende CSS
- Aprende CSS Layouts
- Aprende Bootstrap
## Instalación en un clic (recomendado)
Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/html-forms-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/html-forms-tutorial-exercises.git).
> Una vez ya tengas abierto VSCode, los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: `$ learnpack start`
## Instalación local:
Clona el repositorio en tu ambiente local y sigue los siguientes pasos:
1. Instala LearnPack, el package manager para tutoriales de aprendizaje y el HTML compiler plugin para LearnPack, asegúrate también de tener node.js 14+:
```bash
$ npm i @learnpack/learnpack -g
```
2. Descarga estos ejercicios en particular usando LearnPack y luego `cd` para entrar en la carpeta:
```bash
$ git clone https://github.com/4GeeksAcademy/html-forms-tutorial-exercises
$ cd html-forms-tutorial-exercises
```
> Nota: Una vez que termines de descargar, encontrarás una carpeta "exercises" que contiene todos los ejercicios.
3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json:
```bash
$ learnpack start
```
## ¿Cómo están organizados los ejercicios?
Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos:
1. **index.js:** representa el archivo de entrada para toda la aplicación.
2. **README.md:** contiene las instrucciones de los ejercicios.
3. **test.js:** no tienes que abrir este archivo, contiene el script del test para el ejercicio.
> Nota: Los ejercicios son autograduados, pero los tests son muy rígidos y estrictos, mi recomendación es que no prestes demasiada atención a los tests y los uses solo como una sugerencia o podrías frustrarte.
## Colaboradores
Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖
Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!
Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).