/html-tutorial-exercises-course

Learn HTML with an interactive and auto-graded tutorial with dozens of exercises.

Primary LanguageJavaScriptOtherNOASSERTION

HTML5 Exercises Tutorial at 4Geeks Academy

By @alesanchezr and other contributors at 4Geeks Academy

last commit build by developers build by developers

Complete selection of autograded html exercises, anyone interested in learning HTML!

Hi! I'm Alejandro Sanchez @alesanchezr, really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! DM me on twitter if you have any question. You'll be learning the following concepts:

  1. Get familiar with most 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.

Before we start... other related tutorials

  1. Learn HTML← your are here now
  2. Learn CSS
  3. Learn Bootstrap

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-tutorial-exercises-course
$ cd html-tutorial-exercises-course

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 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):

  1. Alejandro Sanchez (alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀 (build-tutorial) ✅ (documentation) 📖
  2. David Hay (haydavid23), contribution: (test) ⚠️
  3. Daniel Machota (@d4rkm0nst3r), contribution: (build-tutorial) ✅, Translation 🌍

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