1. Introduction

This tutorial guides you through building a simple website, translated by Simple Translator. We'll take a look at all of the use-cases Simple Translator can handle and explain how to use the API, along with some best-practices.

Ready? Let's dive in!

Prerequisites

This tutorial assumes that you're already familiar with JavaScript and HTML, ideally also with Node.js.

System requirements

• Node.js v8.x or later
• npm v6.x or later
• A text editor of your choice, like VS Code or Sublime Text

Setup

Before we can get started, we need to create a new project and install Simple Translator. Create a folder and cd into it:

mkdir translator-tutorial
cd translator-tutorial/

Initialize the emtpy folder as a new npm project:

npm init -y

-y just means that all defaults are taken and you don't have to type in anything.

Next, let's install Simple Translator:

npm i @andreasremdt/simple-translator

You should see a new folder node_modules, containing the Simple Translator library. Create an empty index.html and main.js next:

touch index.html
touch main.js

Hint: you don't have to install the library via npm. Instead, you can copy the unpkg link and place it into a script tag in index.html.

Conclusion

With the basic setup out of the way, we are ready to dive into the tutorial. Head on to the next page to learn more about adding HTML attributes to mark content as translatable.