Skip to content

fixed text README #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jul 19, 2023
Merged

fixed text README #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6df1df8
Update README.md
josemoracard Jun 6, 2023
78fa294
Update README.es.md
josemoracard Jun 6, 2023
33eec25
Update README.md
josemoracard Jun 6, 2023
8e9866c
Update README.md
josemoracard Jun 7, 2023
5ac5301
Merge branch '4GeeksAcademy:master' into jose1-README
josemoracard Jul 19, 2023
fdb85f8
Update README.md
josemoracard Jul 19, 2023
c3ac731
Update README.es.md
josemoracard Jul 19, 2023
d1d4c05
Update README.es.md
josemoracard Jul 19, 2023
678b534
Update README.es.md
josemoracard Jul 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 16 additions & 17 deletions README.es.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,28 @@
<a href="https://gitpod.io#https://github.com/4GeeksAcademy/html-forms-tutorial-exercises.git"><img src="https://gitpod.io/button/open-in-gitpod.svg" /></a>
<!-- endhide -->

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:
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. Formar validaciones preventivas.
3. Validaciones de formulario.

4. GET vs POST.

5. Diseñar un formulario.
5. Dar estilos a un formulario.

<!-- hide -->
#### Antes de empezar... hay otros tutoriales

<ol>
<li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Aprende HTML</a></li>
<li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Aprende Formularios HTML5 </a>← estás aquí</li>
<li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Aprende CSS</a>
<li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Aprende Formularios HTML5</a>← 🔥 Estás aquí</li>
<li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Aprende CSS</a></li>
<li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Aprende CSS Layouts</a></li>
<li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Aprende Bootstrap</a></li>
</ol>
<p align="center">
<img src="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/.learn/assets/animation.gif?raw=true">
</p>

## Instalación en un clic (recomendado)

Expand All @@ -45,39 +44,39 @@ Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Co

## Instalación local:

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+:
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 -g
$ learnpack plugins:install learnpack-html
```

2. Descarga estos ejercicios en particular usando learnpack y luego `cd` para entrar en la carpeta:
2. Descarga estos ejercicios en particular usando LearnPack y luego `cd` para entrar en la carpeta:

```
```bash
$ learnpack download 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 bc.json:
3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json:

```sh
```bash
$ npm i [email protected] -g
$ learnpack start
```
<!-- endhide -->

## ¿Cómo están organizados los ejercicios?

Cada ejercicio es una pequeña aplicación de react que contiene los siguientes archivos:
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: Estos ejercicios son autograduados. Los tests son muy rígidos y estrictos, mi recomendación es que ignores los tests y usarlos solo como una recomendación o puedes frustrarte.
> 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

Expand All @@ -87,4 +86,4 @@ Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds

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 [Curso 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).
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).
35 changes: 17 additions & 18 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@

<h3>Start now: </h3>
<a href="https://gitpod.io#https://github.com/4GeeksAcademy/html-forms-tutorial-exercises.git"><img src="https://gitpod.io/button/open-in-gitpod.svg" /></a>
<!-- endhide -->

*Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/README.es.md) :es:*
<!-- endhide -->

Forms are so important in the world of HTML, CSS and Javascript that I decided to give 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:
Forms are so important in the world of HTML, CSS and JavaScript that I decided to give 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.

Expand All @@ -24,19 +24,18 @@ Forms are so important in the world of HTML, CSS and Javascript that I decided t

4. GET vs POST.

5. Styling a form
5. Styling a form.

<!-- hide -->
#### Before we start... other related tutorials

<ol>
<li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Learn HTML</a></li>
<li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Learn HTML5 Forms</a>← your are here now</li>
<li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Learn HTML5 Forms</a>← 🔥 You are here now</li>
<li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Learn CSS</a></li>
<li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Learn CSS Layouts</a></li>
<li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Learn Bootstrap</a></li>
</ol>
<p align="center">
<img src="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/.learn/assets/animation.gif?raw=true">
</p>

## One click installation (recommended):

Expand All @@ -46,39 +45,39 @@ You can open these exercises in just a few seconds by clicking: [Open in Codespa

## Local installation

1. Install learnpack, the package manager for learning tutorials and the html compiler plugin for learnpack, make sure you also have node.js 14+:
1. Install LearnPack, the package manager for learning tutorials and the HTML compiler plugin for LearnPack, make sure you also have node.js 14+:

```
```bash
$ npm i learnpack -g
$ learnpack plugins:install learnpack-html
```

2. Download this particular exercises using learnpack and `cd` into the folder:
2. Download these particular exercises using LearnPack and `cd` into the folder:

```
```bash
$ 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.
> Note: Once you finish downloading, you will find an "exercises" folder that contains all the exercises within.

3. Start the tutorial/exercises by running the following command at the same level were your bc.json file is:
3. Start the tutorial/exercises by running the following command at the same level where your learn.json file is:

```sh
```bash
$ npm i [email protected] -g
$ learnpack start
```
<!-- endhide -->

## How are the React Tutorial Exercises organized?
## How are the exercises organized?

Each exercise is a small react application containing the following files:
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.

> Note: The exercises have automatic grading, but it's very rigid and string, my recommendation is to ignore the tests and use them only as a recommendation, or you can get frustrated :(
> Note: The exercises have automatic grading, but it's very rigid and strict, my recommendation is to not take the tests too serious and use them only as a suggestion, or you may get frustrated.

## Contributors

Expand All @@ -89,4 +88,4 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!

This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).
This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).