Learning Tools

Let's get to know what the end product will look like and the tool we'll use.

We'll cover the following

What’s our goal?

By the end of this course, we want to be able to create a running website and portfolio and, then, deploy it to the internet. We’ll see that the process is very simple and intuitive. Let’s take a look at what the final product may look like by executing the code below. Click the “Run” button to view the output.

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&family=Roboto:wght@300&display=swap');

* {
  @include ltr {
    font-family: 'PingFang SC';
    font-size: 1.6rem;
  }

  @include rtl {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.5rem;
  }
}
The final website

We’ll be working with the following tools and software during this course:

GitHub

GitHub is a cloud-based repository manager that allows developers to store, manage and track changes in their code. In this course, we’ll need GitHub to push our project files to a repository to deploy our website to the internet.

Netlify

Netlify is a web development platform that offers serverless backend and hosting services for web applications. We’ll use Netlify to deploy our website to the internet during this course.

Google Analytics

Google Analytics is a powerful tool to help us analyze website data. We’ll use Google Analytics to study user traffic on our live website.

Formspree

Formspree is a back-end service for HTML forms. In this course, we’ll use Formspree to embed custom forms on our website.

Note: Let’s sign up for these free services so that we can use them to help us build and deploy our website.