Skip to content


Fabacademy Global Class

Fabacademy Presentation

Introduction to web design / git-gitlab

Introduction to the terminal

Everything is a FILE

Everything is a file.

Each file in your computer resides somewhere (in a directory), and each program in your computer is a file, hence, they live somewhere. You can know where they live, and make some programs yourself. But don’t be afraid, the only thing you need is a file.

Each program has an specific input and an specific output. These are know as std_in and std_out. For instance, a text editor can have a text input from your keyboard and an output to a file.

Every program on your computer has the ability to do a vast amount of different things. Read files, start other programs, do math, control devices. The main difference between bash and most other programs is that unlike them, bash was not programmed to perform a certain task. Bash was programmed to take commands from you, the user. To do so efficiently, a “language” was created which allows users to “speak” to the bash program and tell it what to do. This language is the bash shell language and you are about to become intimately familiar with it.

In essence, a shell program is one that provides users with an interface to interact with other programs. There is a large variety of shell programs, each with their own language. Some popular ones are the C shell (csh), Z shell (zsh), Korn shell (ksh), Bourne shell, Debian’s Almquist shell (dash), etc. Bash (also called the Bourne Again shell) is currently the most popular and ubiquitously available shell. Even though all of these shells use seemingly similar syntax, it is important to be fully aware of what shell you’re actually writing code for. Often, you’ll hear people refer to their code as “shell code”, which is about as specific as “source code” is when referring to your Java code. This guide will teach you how to write bash shell code: you should use it only with the bash shell, not any other.


Probably the best guide to learn what this all means.


Bash is a simple tool in a vast toolbox of programs that lets me interact with my system using a text-based interface.

Useful commands

Getting to know eachother:

Unix history-simple.svg
By Eraserhead1, Infinity0, Sav_vas - Levenez Unix History Diagram, Information on the history of IBM's AIX on, CC BY-SA 3.0, Link

WINDOWS specific

  • dir - To view the contents of a directory, type “dir”
  • del - Subsequently, you might want to clean up useless files
  • clip - copy the output

UNIX specific

  • ls - list files in a folder
  • rm <filename> - delete files. Be careful, it won’t ask for confirmation and they won’t be in the Trash!!
  • pbcopy - copy the output


  • cd <dir> - It is frequently useful to know in which directory you are currently working To move between directories, use the cd command with the name of a directory example go to desktop is “cd Desktop”
  • cd .. go up a directory
  • open <file> open a file with the default
  • mkdir <filename> - To create a new directory
  • pwd - print name of current/working directory
  • ls --help - show help of ls command.
  • ls -a - list files in a folder (including hidden).
  • ls -l - show long listing format.
  • man ls - Format and display the on-line manual pages.
  • mv [-f | -i | -n] [-v] source target - change name or move file (basically the same)
  • cat <file> - outputs file into std_out

Redirection and pipelines

We can redirect the std_out of a command to a specific target. Most commonly, this will be a file.

Basic redirection and appending

  • echo "Hello" > file.txt: Says hello, but redirects the output to a file (file.txt). Creates a new file
  • echo "Hello" >> file.txt: Says hello, but redirects the output to a file (file.txt). Appends it to the file


Pipelines are meant for command to command communication.

  • pwd|pbcopy: send the output of pwd command to the input of another command, in
  • ps -ax|grep 'python': send the output of ps -ax (list of open processes) and only grab the ones that contain python in them

In terminal applications

VI(M) Screen-oriented text editor originally created for the Unix operating system.

Basic commands

  • Edit a file: type i - > INSERT MODE
  • Exit INSERT MODE: press Esc
  • Quit. Out of any mode: type :q
  • Write and quit. . Out of any mode: type :wq
  • Dont’ write and quit. Out of any mode: type :q!

Intro to GIT

Our problem

How many times have you done this?


Our solution - Version Control Systems


Version Control is the management of changes to documents, computer programs, large websites and other collection of information. There are two types of VCS:

  • Centralized Version Control System (CVCS)
  • Distributed Version Control System (DVCS)

Centralized VCS

Centralized version control system (CVCS) uses a central server to store all files and enables team collaboration. It works on a single repository to which users can directly access a central server.


  • It is not locally available; meaning you always need to be connected to a network to perform any action
  • Since everything is centralized, in any case of the central server getting crashed or corrupted will result in losing the entire data of the project

Distributed VCS

In Distributed VCS, every contributor has a local copy or ‘clone’ of the main repository i.e. everyone maintains a local repository of their own which contains all the files and metadata present in the main repository.

Welcome to Git


What is git?

Git is a distributed version control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. Its goals include speed, data integrity, and support for distributed, non-linear workflows.

Why Git?

  • Free and Open Source
  • Speed
  • Scalable
  • Reliable
  • Distributed Development

Git Local/Remote Structure

As a reference, this is a basic structure of the local/remote structure using git.

Time to follow a guide

Follow this guide to set it all up


Here there are some basic interactions you will normally do with your git repositories.


Cloning takes a remote repository and literally clones it into a local one:

git clone;flu/supermegasuperguay.git


Shows what is the status of your local/remote repository - if there are local or remote changes, or things to be pushed:

git status


Shows the history of the local and remote repositories as a list of commits with more info:

git log

Basic changes workflow

You will most likely be using this workflow for git

  • Download the last copy from the online repository and merge it with your local working directory:

    git pull
  • Add the new files you added to git

    git add index.html

    or to review each sloc:

    git add -p
  • Now name your update, so you know what you changed with this push.

    git commit -m "COMMIT MESSAGE"

About the commit message

This is a general point of failure for many many students (and instructors) that do not make a relevant commit message.

Write a meaningful commit message. This should answer the question:

“If I apply this commit, I will… “.

For example:

“uploading final project idea”

This is not OK at all and will not help anyone to trace problems (and they will happen):

  • Upload to the Repository

    git push

This is 1% of what git does

Git is much more than this. Do not hesitate to visit the docs to get more info or to follow a tutorial on more advanced features.



Students can login on gitlab using their email address (the one they use for registration) and entering their Student ID as a temporary password (they need to change it asap)



There’s a soft limit on 300mb. Sites reaching 300mb will be listed on a dedicated page in the archive for public shame. Site over 300mb for two weeks in a row will get special consideration.

The size of the repository is very important for faster deploys and image loads. Images in a website don’t need to weight more than 1Mb.

Pro tip

Image optimization and why to do it: Automating Image Optimization

Tips and tricks

New with the terminal?

Visit this guide to get started!

Check the file-size of your folder!

You should commit 1-2MB per week. Not more!

Run the following command (Terminal or GitBash) in your folder to see folder and file-sizes:

du -sk * | sort -n

Each time you want to update your website, you should go through the following commands:

cd ~/Desktop/fablabbcn
git pull
<change files - modify the files in your folder> 
git status
git add .
git commit -m "<commit message>"
git push


If you end up in Vim-Editor, quit without saving by typing: :q!


Your website might not update in your Browser until you clear the cache (Hard Refresh!)

If you still get error messages, study git or write an email to your instructor.

Setting up git


All information provided in this page comes from here

  • Windows: Gitbash for windows users. This will install git and git bash, a terminal for using the command line in Windows other than the Power Shell.

  • Mac: command line and install from here. You can use homebrew as a package manager. We recommend to install Xcode first (from the app store, for example) and then homebrew.

  • Linux: Use the command sudo apt-get git in the Linux Terminal.

Make an account

  • Make an account in using the email you used in the program registration form

Format for the username

Make a username as such: name_surname

For example if my name is…

Andrés López Lee Peters: andres_lopez


Wongsathon Choonhavan: wongsathon_choonhavan

Do not use dots in your username as you will have problems afterwords.

Go local

  • In your terminal, add your Git username and set your email
git config --global "your_username"
  • Configure you email address for uploading
git config --global ""

Generate SSH Keys

  • Check if you have an SSH KEY already (If you see a long string starting with ssh-rsa, you can skip the ssh-keygen step):
cat ~/.ssh/
  • Generate your SSH key:
ssh-keygen -t rsa -C ""
  • Now let´s see your keygen
cat ~/.ssh/
  • Copy your key:


clip < ~/.ssh/


pbcopy < ~/.ssh/


xclip -sel clip < ~/.ssh/

Go global Github

Add the copied key to by following this guide

Go global Gitlab

Add the copied key to by following this guide

git +


How to make your web page in 10 steps

HTML exercise

In order to go through the basics of a webpage, let’s go thought some examples:

First of all, let’s try to understand the basic structure of a website:

The second example is about some of the different items that we can use in HTML.

Let’s give it some style!

What is CSS?

And what about JavaScript?

Static Site Generators

Here is a guide for using SSG

Git Resources

HTML Resources

HTML Tools