# Tutorial de Ejercicios de HTML5 de 4Geeks Academy
<!-- hide -->
<a href="https://www.4geeksacademy.co"><img height="280" align="right" src="https://github.com/learnpack/html-tutorial-exercises-course/blob/master/HTML-badge.png"></a>

      
      
Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcadem/html-tutorial-exercises-course/graphs/contributors) de [4Geeks Academy](https://4geeksacademy.co/)

<p>
<img alt="last commit" src="https://img.shields.io/github/last-commit/4geeksacademy/javascript-arrays-exercises-tutorial" class="text-center" />
<img alt="last commit" src="https://img.shields.io/badge/build_by-Developers-blue" class="text-center" />
<img alt="last commit" src="https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter" class="text-center" />
</p>

¡Selección completa de ejercicios html autograduados para cualquier persona interesada en aprender HTML!

¡Hola! Soy [Alejandro Sanchez (Github: @alesanchezr)](https://github.com/alesanchezr), ¡muy emocionado de tenerte aquí! 🎉 😂 Aprender a programar es difícil, ¡necesitas entrenamiento! [Envíame un mensaje privado en Twitter](https://twitter.com/alesanchezr) si tienes alguna pregunta. 

<!-- endhide -->

## Aprenderás los siguientes conceptos:
 
1. Familiarizarte con la mayoría de las etiquetas HTML más populares.

2. Usar varias etiquetas juntas para crear un sitio web HTML simple.

3. Vinculación de sitios web mediante enlaces (anchors) con rutas relativas o absolutas.

4. La etiqueta HTML de audio y video.

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

<ol>
  <li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Aprende HTML</a>← 🔥 Estás aquí</li>
  <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Aprende Formularios HTML5</a></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>

## 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-tutorial-exercises-course) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/html-tutorial-exercises-course.git).

> Una vez ya tengas abirto 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 manual

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 y luego `cd` para entrar en la carpeta:

```bash
$ git clone https://github.com/4GeeksAcademy/html-tutorial-exercises-course
$ cd html-tutorial-exercises-course
```

> 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
```

Para más detalles sobre instalación o cualquier otra cosa puedes referirte a la [documentacion de LearnPack](https://4geeks.com/es/docs/learnpack/quickstart-para-estudiantes).

<!-- endhide -->

> Nota: Estos ejercicios tienen calificación automática. 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.

## ¿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.

## 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) 📖

2. [David Hay (haydavid23)](https://github.com/haydavid23), contribución: (tests) ⚠️

3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribución: (build-tutorial) ✅, Traducción 🌍

Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!
