Lesson 0

What we will learn today?


MigraCode

  • Who we are?
  • What we learn?
    • Read this Technology Survey from StackOverflow 2019. Pay particular attention to the technologies we'll be teaching you (JavaScript, React, NodeJS) and the evolution in the last years
  • House Rules
    • How we work?
    • How we treat each other?

Your new working environment

Welcome to MigraCode and to the world of Web Development!

If you are the ones that are using Ubuntu, an open-source operating system, you will see this sreen:

Ubuntu

These are the tools that should be installed (in the computers we gave you everything is already installed):

Development Tools

Visual Studio Code

Visual Studio Code or VS Code is an IDE, IDE stands for "Integrated Development Environment". It is the software that you will be using to write most of your code. It is designed to help you develop your apps quickly, focusing on the problems that you need to solve instead of having to search Google for minor details.

Auto-complete

One of the most important features of an IDE is that it provides "auto-completion". This means that it will give you suggestions of what you can can write next, while you are typing something.

For example, when writing a CSS property, it will tell you what values you can assign it to.

IDE - Auto complete

File tree view

The reason why we call it "Integrated" is that you almost don't need to leave the window to write your app. For example, creating, renaming and moving files can be done directly from the IDE. This functionality can be achieved from something called a "Tree view", which you can usually find on the left side of your IDE.

IDE - File tree

Finding files

When working with big projects, you will often need to find a file quickly, without having to go through the tree view manually.

IDE - Find file

Enable formatting on save

Open your VS project in a Browser with one click

Terminal

During your course journey and onwards, the terminal (also known as command line) will be one of your most valuable tools. It will help you to interact with you computer faster, by helping you to:

  • Create and delete files.
  • Install web development tools.
  • Start a server.
  • Use source control (explained later in this lesson).

All this will make sense as we progress with the lessons. For now, we would like you to get familiar with it by following this tutorial:

How do I use it on my computer?

So now that you know what the terminal can do for you, how do you use it? Please find instructions for your operating system below. After you have followed the instructions, open a terminal and write ls, then press the Enter key. You will see something like this:

Terminal

Commonly used commands

There's a set of commands you should become comfortable with during the course to allow you to effectively move around the filesystem and write software on your laptop.

  • cd - change directory. To move up into the parent directory use: cd ..
  • ls - list the contents of a directory. Can also be used as ls [directory_name] to list the contents of a specific directory without actually moving (with cd) to it
  • pwd - print the full location of your current directory
  • mkdir [name] - create a new directory, with the given name after a space
  • touch [file_name] - create a new file, with the given name (don't forget to add the extension, like .css or .html)
  • rm [file_name] - remove a file
  • rm -r [directory_name] - remove a directory (and all files inside that directory)

Git

We will use Git as our Version Control System (also known as Source Control). It's like Dropbox for developers. But much better!

What is "version control"? Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.

It allows you to revert files back to a previous state, revert the entire project back to a previous state, compare changes over time, see who last modified something that might be causing a problem, who introduced an issue and when, and more. Using a VCS also generally means that if you screw things up or lose files, you can easily recover. In addition, you get all this for very little overhead.

Extract from Git Pro book

This answer on StackOverflow by si618 explains very well why we use Version Control.

So what is Git? Git is one of many Version Control Systems available to use, and by far the most popular.

What is Github? Github is a very popular site where you can publish and share your Git repositories, share and collaborate with other people.

Github

Get Started

If Git is not installed, follow this tutorial from Github to setup Git

Once is installed set your username and email adress in Git

git config --global user.name "Mona Lisa"
git config --global user.email "email@example.com"

A typical workflow

Github

During our course, we will be using Github to store our code. Github is the most popular Git service around, and is used by many large companies, like Facebook, Airbnb and The Guardian.

MigraCode's Github page >

Using Git through the Terminal

  • git init if it is a new project, i.e. a project not cloned from a repo (or a fork of a repo)
  • git add . to add local files to the index
  • git commit -m "Good explanation of your file changes" to commit files to the local repo
  • git remote add origin GitRepoRemoteUrl if it is a new project (to setup the remote url)
  • git remote -v to verify that the remote url is set correctly
  • git push -u origin master to push your commits to the remote url (Github in our case)

You will also typically need to set up your email and name once when you install Git git config --global user.name <name> and `git config --global user.email

`.

Ok ok, let's draw this...

Github

The commands git add . and git commit -m "change explanation" are used to index and save the files in our computer repository, and we will use git push to send the changes to Github

Find a complete Migracode Github Guide

More Resources

Your first Migracode Github project

Now that you have built a website in CodePen and learned the basics of HTML and CSS, it's time to learn about the tools that web developers use in their everyday job. These tools will be used during the course, so it is important that you become familiarised with them.

In order to get started, we would like you to try to complete a task: move your CodePen website to a web address under https://your-username.github.io/your-site-name.

In the process, you will learn how to store your code outside CodePen's website, in a location where other developers can make changes to it and view a history of all the updates that you have made.

If you wish to learn more about the concepts behind the steps we are suggesting below, please read the rest of this document.

And remember: it's ok if you are stuck and don't know how to continue. At any point, please ask for a mentor's help. We will cover these steps again in the lesson, and will explain them in more detail.

How to move your code to Github

  1. Export your website as a zip from CodePen. Help >
  2. Extract the contents of the zip file to a folder in your computer. Keep note of the location of this folder.
  3. Put the contents of the zip folder in a Github repository.
  4. You should now have a page with your code under http://github.com/your-username/your-repository-name. This is a view of your code, and you should see a list of your files, including an index.html.

How to publish your website in Github.io

  1. Now all that remains is to publish your website! Still under http://github.com/your-username/your-repository-name, find the settings icon in the top right corner.
Repo settings
  1. Find the section named "Github Pages" and select "master branch" in source, then hit "Save".
Repo settings - Github pages
  1. Wait a few minutes, then refresh the page and come back to the Github Pages section. You should see a green bar saying "Your site is published at http://github.com/your-username/your-repository-name". Click the link, verify that your website is there, then share it with your CYF class!

Homework

  • If you have not yet moved your website from CodePen to Github, do it now. Please use the information in this section to complete it.
  • When your website is live at https://your-username.github.io/your-site-name, please send a link to the slack channel of your class.
  • Learn how to navigate your computer using a Terminal (view files, copy files).
  • Open your website with VS Code and add something to it: text, images, update CSS. Commit your changes to Github and verify that https://your-username.github.io/your-site-name has been updated!
  • Add, commit and push your changes to Github and check that the changes are applied in the published version

It's alright if you are getting stuck or if something doesn't look right! When it happens, please ask your mentors or classmates for help in Slack.

results matching ""

    No results matching ""