<!-- hide -->
# HTML5 Exercises Tutorial at 4Geeks Academy
<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>

By [@alesanchezr](https://twitter.com/alesanchezr) and [other contributors](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/graphs/contributors) at [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>

Complete selection of autograded html exercises, anyone interested in learning HTML!
      
Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](https://twitter.com/alesanchezr) if you have any questions.

<!-- endhide -->

## You'll be learning the following concepts:

1. Get familiar with a good deal of the most popular HTML Tags.

2. Using the tags together to create a simple HTML Website.

3. Linking websites together using Anchors with Relative or Absolute paths.

4. The HTML audio and video tag.

<!-- hide -->

#### Before we start... other related tutorials

<ol>
  <li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Learn HTML</a>← 🔥 You are here now</li>
  <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Learn HTML5 Forms</a></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>

## One click installation (recommended):

You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://github.com/codespaces/new/?repo=4GeeksAcademy/html-tutorial-exercises-course) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/html-tutorial-exercises-course.git).

> Once you have VSCode open the LearnPack exercises should start automatically. If exercises don't run automatically you can try typing on your terminal: `$ learnpack start`

## Manual installation

Clone the repository in your local environment and follow the steps below:

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

```sh
$ npm i @learnpack/learnpack -g
```

2. Download this particular exercise and `cd` into the folder:

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

> 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 where your learn.json file is:

```sh
$ learnpack start
```

For more information or questions you can refer to the [LearnPack documentation](https://4geeks.com/docs/learnpack/quickstart-for-learners).

<!-- endhide -->

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

## How are the exercises organized?

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

1. **index.js:** represents the entry file for the entire app.
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
 
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) ✅ (documentation) 📖

2. [David Hay (haydavid23)](https://github.com/haydavid23), contribution: (test) ⚠️

3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribution: (build-tutorial) ✅, Translation 🌍

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