What we will learn today?
- Who we are?
- What we learn?
- 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:
These are the tools that should be installed (in the computers we gave you everything is already installed):
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.
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.
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.
When working with big projects, you will often need to find a file quickly, without having to go through the tree view manually.
Enable formatting on save
- In Visual Studio open the settings file (see https://code.visualstudio.com/docs/getstarted/settings#_creating-user-and-workspace-settings)
- Search for
Open your VS project in a Browser with one click
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:
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:
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
nameafter a space
touch [file_name]- create a new file, with the given name (don't forget to add the extension, like
rm [file_name]- remove a file
rm -r [directory_name]- remove a directory (and all files inside that directory)
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
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.
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
If you're basing your work from another project, the first step is typically to fork their repo. Read this guide for instructions (https://help.github.com/articles/fork-a-repo/)
If you're starting a new project then you should follow these steps https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
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.
Using Git through the Terminal
git initif 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 GitRepoRemoteUrlif it is a new project (to setup the remote url)
git remote -vto verify that the remote url is set correctly
git push -u origin masterto 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 config --global user.name <name> and `git config --global user.email
Ok ok, let's draw this...
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
- Git Cheat Sheet
- How does Github work? (30min) >
- Follow this tutorial to learn the basic Git commands https://www.codeschool.com/courses/try-git
- Another good resource: Git - the simple guide http://rogerdudler.github.io/git-guide/
- A more detailed tutorial that goes into advanced topics of Git - https://www.atlassian.com/git/tutorials/what-is-version-control
- You can also check this visual explanation of different commands and what they do: http://ndpsoftware.com/git-cheatsheet.html#loc=workspace
- There are GUI software - Gitkraken is one of them https://www.gitkraken.com/
- This Glossary has definitions of the terms normally used with Git: https://help.github.com/articles/github-glossary/
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
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
- Export your website as a zip from CodePen. Help >
- Extract the contents of the zip file to a folder in your computer. Keep note of the location of this folder.
- Put the contents of the zip folder in a Github repository.
- 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
How to publish your website in Github.io
- 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.
- Find the section named "Github Pages" and select "master branch" in source, then hit "Save".
- 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!
- 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-namehas 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.