# Welcome to MigraCode Barcelona
In this GitBook, you can find all the useful information for our MigraCode Barcelona students, including the coding course content of our different courses, but also other details of our program.
%20\(1\).png?alt=media\&token=1d4e5e1a-b9e2-4de1-a69a-2968d18f449a)
**Jump to the information about your course including the content:**
{% content-ref url="/pages/-MX7kZGViUXZwNBzvFKc" %}
[IT Support & Security Course](/courses/untitled)
{% endcontent-ref %}
{% content-ref url="/pages/-MX7lRz6uumJY41PTSSA" %}
[Web Development Course](/courses/introduction-3)
{% endcontent-ref %}
{% hint style="info" %}
Nosotros te recomendamos usar el currículum en Inglés para mejorar tu nivel de Inglés. Sin embargo, si hay una parte que no entiendes nada, puedes usar Google Traductor. Como? Sencillo! Usa [Google Chrome](https://www.google.com/chrome/), haga clic derecho en esta página y haga clic en 'Traducir a espanol'.
{% endhint %}
If you are familiar with MigraCode yet and you're interested in joining the program, please [refer to the main MigraCode Barcelona website](https://migracode.openculturalcenter.org/).
# Code of conduct
## **Safeguarding**
**Whilst working together we’re dedicated to providing a harassment-free community for everyone, regardless of gender or anything to do with it (‘including but not limited to gender identity, history, and expression, non-binary gender, etc), sexual orientation, disability, physical appearance, body size, race, religion, and programming background. We do not tolerate harassment of community participants in any form, and sexual language and imagery is not appropriate for any community activity.**
Our full safeguarding policies AND the methods to report any issues you may face or have observed, can be found in the handbook of the parent organisation of Open Cultural Center.
{% embed url="" %}
{% embed url="" %}
* **As you can see, there are various ways to report any issues. However, if you directly want to talk to someone from MigraCode, you can always reach out to Ali Ashraf or Hugo Martínez by Slack or email - , .**
* **If you prefer to talk to a female contact person, you can reach out to Ly-Ly by Slack or email - @Ly-Ly Janusz (Slack) or .**
## **Rules**
### **General rules**
* The student will be on time for each class;
* The student will do anything in her/his power to attend each class ([schedules can be found here](https://migracode.openculturalcenter.org/migracode-class-schedules/))
* The student will leave the work spaces clean and tidy after use;
* The student will do everything in her or his power to complete the ten months course;
* The student will do the weekly sprint work and ask for help if needed;
* The students will always communicate any difficulties that prevent her or him from following the course;
* The student will be cautious with any materials that Open Cultural Center provides to her or him;
* The student will always actively participates in classes;
* The student will not use her or his phone during classes, except if there is a specific emergency or personal situation;
* The student will use English as the main language of communication;
* The student will reply within 2 days to messages from MigraCode staff or volunteers;
* The student will have her or his camera on during online classes.
### **Your role as a student**
**We believe that everyone can be a developer. Becoming a successful developer is all about practice, dedication, and willingness to learn. We believe that you can graduate from Migracode with new skills to help you start your career in IT, but it will take hard work and dedication. We know you can do it!**
#### Practice
This means being a student is now your part-time job. You will need to attend classes and do homework for about 25-30 hours a week to achieve the learning goals of your Migracode course. This is about the same as a part-time job. Please think carefully about whether this is a realistic time commitment, and what your priorities are right now. Talk to one of the Migracode teams if you have any concerns.
#### Dedication
You show dedication to becoming a developer by attending every class. We invite you to bring your homework to discuss it with your peers. If you do not come prepared, you risk being unable to follow the class. It is important to try to attend all the classes, and complete the homework, so that you can discuss it with the other learners during class. If something happens that means you cannot do your homework or come to class, please let us know. Completing the course successfully will be difficult if you miss classes, but we want to work with you to help you succeed!
#### Willingness to Learn
MigraCode is not just an average school. Our passionate developers dedicate their free time to support your career. We would like you to see taking advantage of it and try together. You are encouraged to study hard, ask lots of questions, and always show up on time. Finally, respect is at the core of the MigraCode community. As a student, you show respect and willingness to learn from both your teachers and peers. We see our diversity as an asset and invite you to do the same. Migracode is a non-profit project, and your teachers are unpaid volunteers. We are really pleased that you want to join this learning community! Your teachers are passionate about your learning, and we want you to benefit as much as possible from their knowledge.
### Missing a class or being late
If for some reason you need to miss a class, please always inform Hugo, Ly Ly and Ali with a valid reason (if it is a personal reason, just say that, we do not need to know the details, except if you want to share it with us of course). Make sure to always arrange a one-two-one to replace the class you missed - this is obligated, and needed for you to stay up to date with the course.
# Experiences
Please find some previous experiences at MigraCode below, from students, volunteers and other involved people.
### **Rahaf Bayazi**
#### **MIGRACODE GRADUATE FROM SYRIA**
Thanks to Migracode I have made the professional change I have been looking for a long time ago, It is a great school and the people (Monitors, Managers and other staff) are really the soul of why that is. The people here care, they work hard, they work smart, they genuinely want the students to be successful even beyond the classes.
### **Alexander Ludwick**
#### **EMPLOYABILITY VOLUNTEER & RECRUITMENT SPECIALIST**
I was completely humbled to hear these guys talk about their experiences and their sheer determination to upskill and become valuable, contributing members of society and never have I felt so privileged and lazy! I’m genuinely not sure who learned more.
### **Cristal Bukler**
#### **EMPLOYABILITY VOLUNTEER & HOSPITALITY SPECIALIST**
Working at Migracode means that you not only have the opportunity to teach them how to stand out in the jobs market, but also how to stand out as people. Nothing more rewarding for me than knowing their life stories and providing them valuable resources to train their soft skills in order to conquer their own confidence.
### **Henriette Hettinga**
#### **MIGRACODE INSTRUCTOR & BOOTCAMP GRADUATE**
Many students of Migracode have escaped very difficult circumstances in their home country. They work tremendously hard to improve their knowledge and skills because they know their future depends on their studies. I am impressed with their dedication and hard work. Migracode is literally a life-changing experience for them.
### **Shaheen Akond**
#### **MIGRACODE GRADUATE FROM BANGLADESH**
When I stepped foot on Migracode, I did not imagine that the decision will shape my future. Today, I am proud to say, Migracode has played a leading role in my life and made my dream came true. Thank you for teaching me so much - both about the hard skills and soft skills. To me, our Migracode is a precious thing, a great gift to our community, a great opportunity for immigrant students who came to Spain with a great hope. It is a place of optimism, and transformation.
### **Thiago Luiz Pereira**
#### **MIGRACODE GRADUATE FROM BRAZIL**
After 8 months of course, training about development of skills, employability sessions and differents meet ups. I am feeling glad for I could use all those knowledges learned in Migracode at Webhelp, but it doesn't finish at all, was just one step for a long journey about self and professional development, always having focus to provide the best experience for the costumer and a good environment between my co-workers. Thanks Migracode and Webhelp to work together to make it real.
### **José Arriaga**
#### **MIGRACODE GRADUATE FROM MEXICO**
The start of my collaboration with migracode and the idea of learning code and sharing my thoughts and ideas with my colleagues was exciting, however, after the lockdown it was hard and challenging during the covid. But with the help of the mentors and working with people from different places and backgrounds helped us to strengthen our communication and teamwork. In addition, it was fruitful in many aspects. Rather than learning code, it was a preparation for new challenges in our new normal.
### **Anandamaya Arno**
#### **MIGRACODE GRADUATE FROM VENEZUELA**
Being a part of Migracode has been a life-changing experience in many ways. It's an amazing opportunity to start over and look for opportunities for a better future while it allows you to be a part of an incredible community, and as a migrant, I believe this is an incredible support. The amazing team is there to support you in absolutely anything you need, even if not related to the course itself. I totally thank them for that!
### **Ricardo Delgado**
#### **MIGRACODE GRADUATE FROM VENEZUELA**
My 8 months long learning experience at Migracode tells that it helped me gain my confidence on being a web developer with the knowledge of the latest stacks and tools, which was made possible by the presence of talented and helpful volunteers. The soft skills trainings and the consulting services regarding for any kind of problem is also something that Migracode is and will be special for, just like the way MigraCode is committed to help the students even after the bootcamp.
### **Oleksander Ortsev**
#### **MIGRACODE GRADUATE FROM UKRAINE**
With a fast changing world I decided to focus on the things that should help me in the future. That was one of the main reasons why I applied to the Migracode Programming school, when I came to Barcelona. Within the 8 months programming course, the the whole new tech-world opened for me. I realize that I am still at the very beginning of my journey in this area, but the future has become much more promising.
### **Lavinia Sirbulescu**
#### **MIGRACODE GRADUATE FROM ROMANIA**
There is philosophy in everything MirgraCode is doing for the under-represented community of refugees, migrants, women in tech. This gives them unthinkable power to build bridges and alter the circumstances of those of us in need. They might be young but wise enough to know that with power comes responsibility and they don’t fall short on it. They listen and connect with people. They don’t perform for them. They are genuine community builders. All of it is lived experience that brings meaning to my words.
# Copyright
**All the content of this Guide, including the various curriculums with course content, are created through an open-source community of developers from all over the world, and with mixed content from nonprofit coding schools around Europe, including Hack Your Future and Social Hackers Academy.**
In case you want to use, share or duplicate any of the content in this guide, you are able to without costs, as long you adhere to the **Creative Commons License** that is assigned to all work in this guide, which is:
[**Attribution-NonCommercial-ShareAlike 4.0 International**](http://creativecommons.org/licenses/by-nc-sa/4.0/)
In more detail, this license means that you:
* Can copy/use any of the content here as long as you reference us as co-creator (MigraCode Barcelona/Open Cultural Center) and with a link to
* Can NOT use any of the content for any form of commercial use or profit in any other financial way from this content
If you have any doubts about this, please reach out to .
[](http://creativecommons.org/licenses/by-nc-sa/4.0/)\
This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).
# Student Services
**We have various forms of additional support on top of the educational support to offer:**
{% content-ref url="/pages/-MSlXR9i5KXKEF9cNijb" %}
[Psychological Support](/student-support/additional-support/psychological-support)
{% endcontent-ref %}
Always feel free to contact our internal social worker - Vincent -, with whom you can talk to about any personal issues you may have or encounter during the duration of your MigraCode course. You can make an appointment through Slack. He can also get you in touch with our internal therapists. There may be a waiting list.
{% content-ref url="/pages/-MSlXY0q3CsCMWZoT1O1" %}
[Legal Support](/student-support/additional-support/legal-support)
{% endcontent-ref %}
If you are still in the process of arranging your visa, work permit, NIE or other documentation, contact Vincent to get you in touch with our external lawyers. There may be a waiting list.
{% content-ref url="/pages/-MSlW\_hiBSz0G2uym\_3e" %}
[CodeWomen](/student-support/additional-support/codewomen)
{% endcontent-ref %}
We have a specific program for our female students. You will be automatically added to the CodeWomen channel on Slack where we will share all the information you need. You can contact Henriette on Slack for more information.
{% content-ref url="/pages/-MSlWdKUokfs2B7OIok7" %}
[CodeBuddies](/student-support/additional-support/codebuddies)
{% endcontent-ref %}
If you struggle a lot with the materials, we can assign a specific ‘CodeBuddy’ to you - a volunteer that will help you on a regular and personal basis. If you need this, just send a message to Vincent or Henriette on Slack.
{% content-ref url="/pages/-MSlXL85WwomicCG4z3h" %}
[Language Support](/student-support/additional-support/english-classes)
{% endcontent-ref %}
You can access free online language lessons in English, Spanish, Arabic, and Catalan at the Language Lab. The Language Lab also organises regular language exchange events, and you can find a Language Buddy too! To join, just send a message to Charlotte Lloyd via Slack.
{% content-ref url="/pages/6iCBCciwsIuYOndCM6Tc" %}
[Study space](/student-support/additional-support/study-space)
{% endcontent-ref %}
We have two options if you cannot study well at home. Both options are free and can be used based on availability. All you need to do is sign-up accordingly beforehand and be there.
# Volunteer Support
It is important to know that we have a huge volunteering-community ready to support you in becoming a software developer. Therefore, do not hesitate to request a one-two-one session if you feel lost with the materials, you are behind or you just need some extra explanations about the materials. You can also ask someone to help you with the job search (later on the course).
* **Homework support**\
If you are stuck with homework, do not hesitate to ask your questions in the #support-coding channel (for the Web Development Course) or #support-it (for the IT Support & Security Course) on Slack. There are many volunteers to help you and please note: there are no weird or stupid questions!
* **CV/LinkedIn support/Job Preparation**\
If you need help with creating or further developing your CV or LinkedIn or get help with preparing your job interview, please make use of the #support-employability channel on Slack to ask help from our volunteers to check your CV or LinkedIn or even make an appointment with them to improve it.
migracode-bcn.jpg?alt=media\&token=e84699b3-198c-4d1a-a3b3-cf2b7002b418)
# CodeBuddies
Only applicable to Web Development students.
**The Migracode CodeBuddies project aims to support and encourage students during their Migracode bootcamp, to work towards their successful graduation as Junior Web Developer. We link students who are in need of extra support with developers who have volunteered for the CodeBuddies project. The personal relationship between the student and the instructor is key, and Migracode is in favour of as much flexibility as possible in how this relationship takes shape.**
## **How to start?**
How to request a CodeBuddy? Simple! Just fill [this form](https://airtable.com/shrytK91bWylnI6WZ). Once you have filled it, we will contact you as soon as we have found someone, which is usually between 1-2 weeks.
## **Guidelines**
1. The student will be paired with an instructor, who will provide personal technical support, encouragement and guidance to the student during (part of) their studies. The instructor will be the first contact person for tech questions.
2. On average, the instructor will make two hours per week available for the student. The student can discuss with the instructor what amount of support is needed.
3. In case the instructor is not available, the student can find help through the #support-technical channel of the Migracode Slack.
4. The instructor and student can decide together when and where they meet: in person or remote, at Open Cultural Center, in the open space of Elevador (elevador-bcn.es) that is available to Migracode (to be coordinated with Henriette), or in a public space over a cup of coffee, for example. Covid regulations must be respected at all times.
5. If you as the CodeBuddy team feel much more support is needed than the Codebuddy can offer, you can discuss this with Henriette.
6. If a different kind of support is needed, we can contact the Mental Health Team of Migracode through Vincent. Depending on their availability, you could receive additional support through them.
7. We are very happy that volunteer instructors invest their time in supporting our students. From our students, we expect commitment and responsible behaviour: be on time, let the instructor know if you cannot be on time for a meeting, and be open and honest about your doubts and problems so that you can benefit the most from the CodeBuddy support.
8. This project is a new initiative and we welcome any feedback you can give us. It is important for Migracode to offer the best possible support, so please feel free to contact us about anything you feel would help to improve the project.
9. Henriette will organise an initial meeting to introduce the student and the instructor to each other, explain the project, and answer questions. For each buddy team, a private Slack channel will be created. You can contact your buddy through this channel. Vincent and Henriette will be added to the channel as well.
10. The Migracode team will support each CodeBuddy team in every way possible. Henriette is the Project Manager of CodeBuddies and your primary contact. You can contact her via Slack @Henriette, or email . Vincent and Carlos can be contacted in case Henriette is not available.
# CodeWomen
The CodeWomen project of MigraCode supports and encourages women students during their MigraCode bootcamp or IT Support & Security course, to work towards their successful graduation and landing a job. The project was started to address the often difficult position of women in the mostly male tech world. By building a community of women developers with a migration background, MigraCode works towards better career perspectives for women students and more diversity in the tech sector. Building a network with women in the tech sector in Barcelona will also benefit women students in many ways.
## Introduction
Much of what women hear about working in tech is about the problems and difficulties they will face, working in all-male teams, and this can easily lead to insecurities and a feeling that “tech is not really for me”. The CodeWomen initiative wants to offer the women students a very flexible context for personal (tech) support and encouragement. In addition, it offers the students a safe environment to share experiences, plans, ambitions, questions and problems with each other, and enjoy each other’s company.
About the CodeWomen project
The CodeWomen project consists of two meetings per month, plus a dedicated Slack channel and a WhatsApp group for organising, sharing materials, asking questions, etc. The format of the meets is flexible and the women who participate set the agenda. They can come with questions or topics they would like to hear more about, present something themselves, or work on a coding project together. CodeWomen is an initiative under the umbrella of MigraCode and is not an obligation or part of the bootcamp or IT Support course curriculum.
There are two CW meetings every month. The first is a programme event on Sunday afternoon, with a speaker, panel discussion or workshop on various topics: tech/coding topics but also career and job search (LinkedIn, CVs). The volunteers are invited to join these meets as well. These events offer the women a space to relax and hang out together, to talk, and to share how they experience their journey and the plans and doubts they have.
The second meet is a coding session on Monday evening. This session offers an informal setting where students can practice their coding skills, working with coaches. They can work on their own project, on a specific coding problem, on their homework, get advice about their learning path and how to get into a tech career, etc. Volunteer women developers are available to help the students. With these practical coding sessions, the students can build on what they learn during their bootcamp.
By building a supporting community, we believe the CodeWomen project can make a real difference for women students and help them to succeed in their studies. The students can remain in the CodeWomen group after graduation, for support and encouragement in their career. We want to show the women that, in spite of the challenges they sometimes face with their studies or working environment, coding is great and a career in tech is possible for them:
> “... it is creative, it challenges you to solve problems, and the feeling of victory you get when you solve something after hours or days of frustration … that feeling is the best!”
## Practical Information
* All women students of MigraCode, both from the Web Development and from the IT Support & Security course, are members of the CodeWomen Slack channel. This channel also includes the organising team and Vincent, and the volunteers who are active in CodeWomen sessions. The CW WhatsApp group only includes the students.
* Women students and graduates from coding schools that collaborate with MigraCode can be invited to CW meetings as guests. The CodeWomen community is open to other tech women in Barcelona as well: self-learners as well as professional software developers.
* CodeWomen aims to be an inclusive community **for women, by women**, and all women+ are welcome.
* The CodeWomen organising team are Henriette Hettinga, Capucine Rosset, Kimberly Krieg (admin CW WhatsApp group), Marta Mateu, and Farhana Bipasha (admin CW WhatsApp group).
* The CodeWomen meetings rotate: once a month we organise a programme event with a talk or workshop, a panel discussion, a video tutorial, etc. An important part of this event is networking and socialising. The second monthly CW meet is a coding session with volunteers who are women developers and can coach and support students.
* The CodeWomen programme events are on Sundays from 12.00 to 15.30 hrs, and are hosted by CW partners such as coding academies CodeOp, AllWomen and Le Wagon. The CW coding sessions are on Mondays from 19.00 to 21.30 hrs, and are hosted by companies who support the CodeWomen initiative. For both meets the students have to register because places are limited.
* If there are no objections, pictures are taken during the CodeWomen sessions, to be used for the MigraCode website and social media.
* Any questions about the CodeWomen project, please contact **@Henriette on Slack or .**
# Language Support
**English is a global language and is a requirement for many tech jobs in Spain – even if the job is in Spanish. For this reason, students at MigraCode need a minimum level of English to get them through the course. Luckily, you can access free English lessons at the Language Lab and Oxford House!**
**Spanish or Catalan are also often a requirement in tech jobs in Barcelona. The Language Lab also offers lessons for local languages, so you can get the support you need!**
## **Where and how?**
**Open Cultural Center**, our host organization, offers free language lessons at the [**Language Lab**](https://openculturalcenter.org/language-lab/). You can join **Spanish, English, Arabic and Catalan classes** taught by dedicated native-speaking volunteers, and be part of an amazingly diverse community. There are 2 levels for each language: beginner (A1 - A2) and intermediate (B1 - B2). The Language Lab also organises **language exchange events**, and runs **Language Buddies**, so you can practice in many different ways according to your preference!
Additionally, we have a collaboration with **Oxford House**, a language school in Barcelona that offers free **English classes** to MigraCode students via their [English Eco](https://oxfordhousebcn.com/en/english-courses/economic-english/) course. These courses are run by teachers in training from their [Cambridge CELTA](https://www.oxfordtefl.com/oxford-tefl-courses/cambridge-celta/cambridge-celta-100-online/) course. They last 3 months and are a great way to practise different skills while listening to different accents, and meeting people from all over the world.
## How to join?
Have a look at the options below to see which one suits you best:
### Free English, Spanish, Catalan & Arabic classes at the Language Lab by Open Cultural Center
{% content-ref url="/pages/-MX7jTH6YHeb\_GMJk5EP" %}
[Language Lab](/student-support/additional-support/english-classes/open-cultural-center)
{% endcontent-ref %}
### Free English classes at Oxford House Barcelona
{% content-ref url="/pages/-MX7jPNEWfSO5iLRONqO" %}
[Oxford House](/student-support/additional-support/english-classes/oxford-house)
{% endcontent-ref %}
# Language Lab
The Language Lab, Open Cultural Center's language school, offers free Spanish, Arabic, English and Catalan classes to all MigraCode students.
What they offer:
* Free of charge
* Arabic, Spanish, English and Catalan classes
* A1 to B2 (beginners and intermediate, no advanced)
* Fully online
* 2 classes of 1H every week
* Bi-monthly language exchange events
* Language Buddies
## How to apply?
### Step 1
Fill in [this form](https://airtable.com/shrS87pj0pUu7eI4I). The Language Lab team at Open Cultural Center will contact you.
### Step 2
You will be invited to the **Language Lab Slack** workspace, which is where all communication between students, teachers, and the Language Lab team takes place. Don't forget to upload a picture, make sure your name is spelt correctly, and join the first class where you will receive information about the course.
## Language exchange events
Follow [Open Cultural Center on Meetup](https://www.meetup.com/open-cultural-center-barcelona/) to hear about the events organised by the Language Lab. In general, there are 2 language exchanges every month, and these events are open to everyone.
For reminders and practical information about language exchanges, join the [Language Lab WhatsApp group](https://chat.whatsapp.com/CvwADRZ0mGEGWq4hqxh3ml).
If you are in the Language Lab Slack, you can also check the #exchange channel.
## Language Buddies
Through the Language Lab, you can also [register as a Language Buddy](https://airtable.com/shrFaH2cfPBJ22AKA)!
If you would like to practice a language with a native speaker**,** improve your language skills through one-on-one conversations, or help someone else with the language they are learning, this is a great option.
You will be matched with someone else from the Language Lab's multicultural language community, and you can start immediately.
# Oxford House
Oxford House offers free English classes to MigraCode students via their Eco course. The course lasts 3 months.
## What they offer:
* Free of charge
* English classes
* A2 to B2 (no beginners, no advanced)
* Fully online (2021)
* 2 classes of 1H30mins OR 1 class of 3H every week
## How to apply?
### Step 1
Take the[ level test here](https://oxfordhousebcn.com/en/levels/level-tests/english/) and **convert it to the "Oxford House levels"** using this chart:
### Step 2
Choose the time table that suits you best on this chart:
### Step 3
**Register** on [this link](https://oxfordhousebcn.com/en/registration/online-registration-english-eco-1-free-course/).
Here is **all the information you need** in order to register:
* The "Oxford House level" that **corresponds to your level test result**
* The **timings** that suit you best **exactly** as you see on the chart in Step 2 (not others)
* The promotional code: **MIGRACODE**
* As the start of your course, choose **the closest ideal date for you**
### **Step 4**
Wait for your **confirmation letter**, you will receive it by email.
### **Step 5**
Using the information that you have in the confirmation letter, fill in [this confirmation form](https://airtable.com/shr29aF9pVVIZlDgG). **You will NOT be considered as registered by MigraCode** until you complete this step, and we will not be able to support you with your language learning.
# Psychological Support
**Migrating to another country can have a big impact on your life. While it may bring you good things (like MigraCode), it can also give you stress and make you feel negative or sad. At the same time, you may have experienced things in your home country that still have an impact on how you feel now. MigraCode and their partner can help you dealing with these feelings.**
## Why psychological support?
It is extremely important to always share any personal issues you have - talking helps! This can be with friends or fellow students, but maybe you need someone to talk to who is specialised in helping people that deal with challenges in their lives.
This is why MigraCode works closely with Iguality, an NGO that offers free mental health support to (among others) migrant and refugee communities through dedicated voluntary professional therapists, ready to talk to you when you need it. The service is - like everything connected to MigraCode - cost-free, and you can always request to start with the service. A psychologist can help you when:
* You feel sad or negative
* You feel a lot of stress
* You have negative thoughts
* You miss family/friends
* You feel lonely or without sufficient support
* You struggle with your identity
* You face any other personal issues
## How to start?
If you want to make use of this service, you can [fill in this form](https://airtable.com/shrv242Q7vLEzsTw6) directly. If you have some doubts, feel free to first send a message to @Vincent van Grondelle on Slack, who can assess your needs and see where you need help with, to find the best match! You can also find more information about the program through [this link](https://www.notion.so/iguality/Mental-Health-Program-Guide-3e3565eecd4f4114a5dc205c76180544).
{% hint style="info" %}
We get quite a lot of requests for this service. Please keep in mind there may be a waiting list which may take a few weeks.
{% endhint %}
## What to expect?
It is possible to just have a few sessions of approximate 1 hour, or to receive support for a longer period of time. This depends on what you need help with and if you feel comfortable! Depending on availability, you can receive in Spanish, English, Catalan and Portuguese.
**A MigraCode psychologist can:**
* listen to your story, how you feel and/or what you struggle with
* talk with you and - if you want - try to address the root cause of any personal issues
* give you advice on how to deal with negative or sad feelings
* support you through hard times and offer tools to handle difficult situations
**It also important to know that a MigraCode psychologist cannot:**
* become your close friend - rather see her or him as a personal guide
* solve every issue/problem/challenge you face - it depends a lot on your situation and the specific things you struggle with
* always be available for you - he or she will support you on a long- or short-term basis, but the support you receive will happen through the planned sessions *(for emergencies you can contact Vincent van Grondelle)*
* receive gifts or financial compensations - the psychologists offer their support on a voluntary basis and are not expecting anything in return :)
# Legal Support
**Being a migrant in Europe/Spain/Catalunya/Barcelona can be challenging, especially considering it may put you in a complicated situation regarding your legal status. You may need to apply for asylum, or for other potential procedures to receive a work permit and/or a residency status.**
## **What do we offer?**
In order to point you in the right direction, MigraCode has some volunteers who have basic to advanced legal knowledge, and they can give you useful information that you may not be able to find yourself on the internet or through public institutions. Some examples of what our volunteers can try to help you with:
* Obtaining Arraigo Social
* Support with the process of Pareja de Hecho
* Support with asylum request procedures
* Writing legal requests and/or appeals
* Other support related to legal processes
Please note that offering legal support is very difficult since the migration systems in Europe are very complicated. Our volunteers will try to point you in the right direction, but keep in mind no-one knows all the answers.
{% hint style="info" %}
**Sometimes we can get in touch with pro-bono lawyers who are maybe able to help, but they cannot take you as a case - they can only give advice.**
{% endhint %}
## How to start?
To request help, simply [fill this form](https://airtable.com/shr4smDKLty5G7yqd). Depending on the waiting list, we will try to put you in touch with a volunteer through Slack, email or phone.
{% hint style="info" %}
We get quite a lot of requests for this service. Please keep in mind there may be a waiting list which may take a few weeks, as for each request we are manually trying to link you up to a legal volunteer. If in the meantime your question is answered, please let us know by messaging Vincent on Slack!
{% endhint %}
## More advanced help
If you need more help after receiving advice from our volunteers, you probably need to get in touch with a private lawyer (if you didn't one assigned by the Spanish state). This can be hard and expensive, so we have collected some good options for you based on the experience of other students with these lawyers:
* **Laura Sainz Rodriguez -**
* **Eliselmo Altoe Weber** (**Lito)** -
* **Jordi Zorrilla** -
.jpg?alt=media\&token=9820164e-c3b4-4fc8-bb61-b3eb230a0d23)
# Study space
**We have two options if you cannot study well at home. Both options are free and can be used based on availability. All you need to do is sign-up accordingly beforehand and be there.**
## Study at the office of Porsche Digital
You can study for free at the fancy and nice office of PORSCHE DIGITAL in the center of Barcelona, between Monday and Friday from 10:00 to 18:00. Exact location [here](https://goo.gl/maps/Gah7BuanPTpiURRF6).
Every week, you need to sign-up before Thursday evening through [this form](< https://airtable.com/shr0IFmWNe1EpF8Bk>) to reserve your spot(s) for the next week. You will receive your QR code on Friday which you will need to bring when you come to the allocated day/time.
{% hint style="info" %}
**IMPORTANT: If you reserve a spot, they expect you to come (as you may take someone else's spot, it's a small office), so make sure to inform me at least one day in advance in case you cannot make it after all.**
{% endhint %}
## **Study at our Open Cultural Center space**
You can also come to study at our own center in El Born, over [here](https://g.page/OpenCulturalCenter?share). We are open Tuesday to Friday, from 10:00 to 16:00. It may be a bit noisy from the street but we have a nice room where you can study with steady internet.
To sign up, just write Vincent + Diana on Slack to let us know when you want to come.
# Finding a job
**MigraCode offers you many things (see the Student Services section), but obviously the main things are free education and supporting you with finding your first job in technology. While we will give you much help, there are also MANY things you can do on your own to find that first job, and you can start with this on DAY 1 of your MigraCode course.**
{% hint style="info" %}
**IMPORTANT:** Also with all the tips and do's on the following pages, **you are not alone!** Feel free to ask for help in the #support-employability channel in our Slack workspace to get help setting up profiles or learning more about the information shared here.
{% endhint %}
## Putting yourself out there: self-branding
To start: being visible online is a MUST, for recruiters to find you while at the same time being able to apply for jobs directly. If you're shy to promote yourself, *you need to let it go*, at least while you are searching for jobs and building a professional network online! We consider three types of profiles a must: LinkedIn, GitHub and a self-developed one (a webpage). Find more information below for each profile type.
{% content-ref url="/pages/3iu7aKzIMUc36Hvq3wiG" %}
[Self-branding](/student-support/finding-a-job/self-branding)
{% endcontent-ref %}
## Making use of online platforms: start networking!
Once you have created your online profiles and you have them fully setup as described in the previous sections, you can't just leave them there. You will need to be actively engaging with these networks, ideally on a daily or weekly basis. Don't worry: this is quite easy, as these networks are made exactly for that!
{% content-ref url="/pages/CpcNc6rVoFU2mp6XRkDm" %}
[Online networking](/student-support/finding-a-job/online-networking)
{% endcontent-ref %}
## Don't make them come for you: join events and job fairs
You can do all the things perfectly online and have your profiles ready and active - nothing works as good as just meeting people in-person and just talking directly to recruiters and other company representatives. You can always add them on LinkedIn and GitHub later!
{% content-ref url="/pages/6w1FY3xpLa9qFSVUVOoN" %}
[Events & job fairs](/student-support/finding-a-job/events-and-job-fairs)
{% endcontent-ref %}
# Self-branding
## **Introduction**
**To start: being visible online is a MUST, for recruiters to find you while at the same time being able to apply for jobs directly. If you're shy to promote yourself, *****you need to let it go*****, at least while you are searching for jobs and building a professional network online! We consider three types of profiles a must: LinkedIn, GitHub and a self-developed one (a webpage). Find more information below for each profile type.**
## LinkedIn: Connect to the professional world
{% content-ref url="/pages/YzAZMhBE9XB6LtTMfOtz" %}
[LinkedIn profile](/student-support/finding-a-job/self-branding/linkedin-profile)
{% endcontent-ref %}
## GitHub: Join the world's developer's community
{% content-ref url="/pages/s6HOJjMU2VOTfsnnUka7" %}
[GitHub profile](/student-support/finding-a-job/self-branding/github-profile)
{% endcontent-ref %}
## Self-developed profile: start being creative!
{% content-ref url="/pages/dSThcCBY6JPaNnxbt3Zx" %}
[Self-developed profile](/student-support/finding-a-job/self-branding/self-developed-profile)
{% endcontent-ref %}
# LinkedIn profile
## **Introduction**
**LinkedIn is an online platform that is primarily used for professional networking and career development, and allows job seekers to post their CVs and employers to post jobs. In other words, LinkedIn is THE place to be to connect to basically anyone that could help you, either directly or indirectly, to your first job.**
## Creating a LinkedIn profile
Starting with LinkedIn is easy: just go [over here](https://www.linkedin.com/signup) and follow the steps to create your personal profile. There are some important things to keep in mind:
* Use your full name, correctly written, and with proper capitalisation (like *John Lewis Scott*, and not *jon lewy scot* for instance)
* Be honest from the start: a lack of experience or education is not so bad as people think it is (more information about this later on)
* Add a good profile picture from the start, you can also ask someone to make it for you
{% hint style="info" %}
**Profile picture:** please use a proper profile picture; it's the first thing recruiters will see! So no holiday or bar pictures, but one taken in a professional setting. Moreover, make sure that:
* The picture shows mainly your face
* Is taken from the front with proper lighting
* That you either smile or look neutral (but definitely not angry)
* You were appropriate clothing (so no beach pictures)
It's always best to ask someone to just take a picture of you in front of a white wall, that also makes it easier later on to change the background, if needed. This person can also give you feedback on the picture.
{% endhint %}
## Filling your profile
**Now that you have setup the base of your LinkedIn profile, you can start filling all the different sections that LinkedIn allows you to fill, such as your Education, Work Experience and more. From MigraCode, we recommend you to at least fill the following sections:**
### Current position
**This is super important!** Your current position, or the title that shows under your name, is the thing that many people will see when you popup in search results. Apart from a title, you can also add some of your main coding skills or from your previous experience. We recommend you something like:
* Web Development student @ MigraCode Barcelona | HTML/CSS/JS/React/NodeJS/Databases
* Junior Web Developer | Student @ MigraCode | Front-End focus
* Senior Student @ MigraCode Barcelona | Available to work in Software Development
* Marketing & Software Development | Agile/React/JavaScript | Student @ MigraCode
* Tech Support Specialist | Skilled, social & and ready to work
### About section
This is the first thing people will see once they visit your profile, so make sure the English and/or Spanish is correct and that you have a good description of yourself here, shortly including:
* Your current work situation (student, working, etc.)
* What you are looking for (what kind of job etc.)
* What makes you great (awesome skills in JavaScript for example)
* Quick overview of previous experience (worked in Marketing before learning how to code for example)
**An example from one of our MigraCode graduates,** [**Joana Smerea**](https://www.linkedin.com/in/joannasmerea/)**:**
### 'Featured' section
The featured section is where you can highlight projects or other website where you or your teams have been mentioned, like interviews or accomplishments. We definitely recommend you to at least put the following links there:
* Your GitHub Profile
* Other relevant portfolio pages such as Codepen
* The MigraCode website
* Links to LinkedIn posts where you are mentioned
* Articles you wrote
### Work experience
Obviously, previous and current work experiences are an important part as well of your LinkedIn profile. This is where you show where you have worked in the past, and what you have done there, including any responsibilities you had there. Some general tips:
* Keep it short, write either a short paragraph per position or put 2-3 bullet points
* Make sure to tag the company you worked for (if they are on LinkedIn), so their logo pops up as well
* Feel free to add links here as well with either more information or any public accomplishments of what you did in this position
* Make sure the dates are correct: time periods that don't match are a huge problem for recruiters
* Avoid gaps in your CV: if you didn't have a job for a while, add volunteering or other experience that you kept yourself busy with (you can for instance put 'self-employed')
{% hint style="info" %}
**IMPORTANT:** Do **NOT** worry if you don't have a lot of work experience, either in tech or in general. For instance, if you weren't able to work for a long time because you were moving between countries, try to either explain this in the 'About' section or just put any activities you did in that time period. For instance, some of our students added 'Activity Manager' or 'Translation Advisor' for volunteering work they did when they were stuck in refugee camps.
Also, keep in mind that non-tech work experience can STILL be relevant to the tech sector: if you worked in a restaurant for example, you learned how to multitask and work in teams, which is EXACTLY what you need working in tech! So mention these 'soft' skills for these specific jobs.
{% endhint %}
### Education section
As the title says it already, in this section, you need to put any previous or current education you have. Like the work experience section, don't worry too much if you don't have a lot of education, or if you have not completed high school etc. You are learning Software Development, so let's start with putting that there! In other words, examples you can put here:
* A MUST: 'Web Development student', at [MigraCode Barcelona](https://www.linkedin.com/school/19126193/admin/)! Make sure to describe what you are learning, how many hours you spend with the course, the duration, that you are also learning soft skills such as project management, and that you will be a Junior Web Developer at graduation.
* Other university education (if any): if you completed previous university degrees, make sure to add them. Also, if you only have unfinished degrees, feel free to add them, with a note that you stopped earlier (with the reason if you feel comfortable to share it).
* If you don't have university education, don't worry: add your high school education here with some details of the courses you followed - volunteers can help you to still make this educational experience relevant to your current technical education at MigraCode!
* Last but not least: if you don't have education apart from MigraCode, also don't worry. In this case, focus on MigraCode and ask your contacts at MigraCode to see if they can offer you more free courses!
{% hint style="info" %}
**In this section, you can also add online courses** you have done or may still be doing, like from FreeCodeCamp or KhanAcademy. Especially if you lack other education, it's highly recommended to these courses so you can add them to your profile. Khanacademy for instance also offers mathematical courses and other kind of courses!
* [www.khanacademy.org](https://www.khanacademy.org/)
* [www.freecodecamp.org](https://freecodecamp.org/)
* [www.coursera.org](https://es.coursera.org/)
{% endhint %}
### Skills section
Many people underestimate this section: why add specific skills if you have already described all your work experience and education? Well, it's simple: apart from the fact to let recruiters see an overview of your main hard and soft skills, this summary of skills is also used by recruiters in the LinkedIn Job Search platform to find you!
For example, a recruiter may search ONLY for profiles that have added JavaScript & React as skills to their profile - so even if you are the best JavaScript developer in the world, you won't show up in the search results! Below you can find some skills examples.
#### Tech/hard skills:
* HTML
* CSS
* JavaScript
* React
* NodeJS
* Spanish/English or any other language you speak
* Git
* Web Development
* Software Engineering
* Office
* Excel
#### Soft/personal skills:
* Teamwork
* Communication
* Leadership
* Public speaking
* People management
{% hint style="info" %}
**IMPORTANT:** You can fill up to 50 skills - make sure to reach 50 indeed! The more skills somehow relevant to you, the more chance recruiters will end up on your profile. If you think you don't have 50 skills, you are wrong :) Already after working as a ticket sales person on the streets of Barcelona, you will have already gained at least 30 skills, such as Sales, Communication, Teamwork, Convincing, Public speaking, etc.
{% endhint %}
### Languages
**A must as well:** add the languages that you speak, either just a little bit or fluently! LinkedIn will allow you to add your level, so if you just speak A2 Spanish, add it, and select '*Elementary proficiency*'.
### Recommendations
So what's this last important thing? In this section, you are able to let others confirm you are indeed the best person to hire! In other words, here you can ask people to recommend you by writing how happy they were with you in other job or educational experiences you have had in the past.
So, for example, you can ask your old manager to write a few lines about how good you were at managing orders, or how amazing you were with handling conflict. **Don't be shy**: reach out to those old bosses and ask them to write something! If they suddenly write something negative, you can always just hide the recommendation from your profile.
{% hint style="info" %}
**TIP 1:** Ask your colleagues, fellow-students and the volunteers you work with at MigraCode to write something! You can for example ask your CodeBuddy to write about your coding skills, or your final project team to write about your teamworking skills.
**TIP 2:** Also make sure to write 1 or 2 recommendation to other people; this will show you are engaged with others and you also care about others. Recruiters like this!
{% endhint %}
Check out the awesome recommendations our previous student [Rahaf](https://www.linkedin.com/in/rahafbayazi/) has received from MigraCode volunteers (and the great one she has written about her fellow MigraCode student):
## What's next?
If you followed all the above steps, there's still much to improve! There are more sections available (like Volunteering or Certificates) that we recommend you to fill if they apply to you, to make your profile as complete as possible. More information can be found [over here](https://www.linkedin.com/help/linkedin/answer/15493/your-linkedin-profile-overview?lang=en).
**After that, you can start building an online professional network!**
{% content-ref url="/pages/CpcNc6rVoFU2mp6XRkDm" %}
[Online networking](/student-support/finding-a-job/online-networking)
{% endcontent-ref %}
# GitHub profile
## **Introduction**
**GitHub is often seen as the LinkedIn for software developers. But it does more than just connecting the tech community; it also provides access control and several collaboration features such as bug tracking, feature requests, task management, continuous integration and wikis for every project. And just as important: (good) recruiters use it as well to see how well you can code and how active you are!**
## Creating a GitHub profile
Starting with LinkedIn is easy: just go [over here](https://github.com/signup?ref_cta=Sign+up\&ref_loc=header+logged+out\&ref_page=%2F\&source=header-home) and follow the steps to create your personal profile. There are some important things to keep in mind:
* Choose a username that can be tracked to your name so recruiters can easily find you (so not *codinglover1993*, but rather *VincentvanG1993*)
* Keep in mind that your profile will be public, so just like with LinkedIn, fill the data correctly with correct spelling and capitalisation
* A profile picture is a little less super important as with LinkedIn, as on GitHub, it's mainly about your coding skills and experience. You can also choose to make an avatar, through [this website](https://personas.draftbit.com/) for example
## Creating an (awesome) profile page
As GitHub is a tech platform, you need to use your tech skills to make your profile really complete. The best way to do so is to 'code' your own profile page, which you can do by adding a README file to your profile 'Repository'. **How to do so?**
### **Step 1: creating a README.md file for your profile**
1. Create a new repository with the same name as your GitHub username. For example, if your username is Gapur, the repository name must be Gapur.
2. Within the repository, create a README.md file. This new file will be displayed on your GitHub profile page!
### Step 2: code that README.md file!
Now it's time to be creative! You can use HTML markup to style the file, and just like with HTML, you can insert images and other content. In general, we recommend to create various sections, like LinkedIn does as well. For example, you can add the following sections with \
(or h2) elements:
* Quick introduction (who you are, what you do, what you're good at in tech)
* Examples of your experience (web development student at MigraCode, completed various Khanacademy courses, for example)
* Projects portfolio (from small to big ones)
* Goals (learning Java, learning NodeJS, etc.)
* Skills (frameworks, coding languages, technologies, soft skills such as adaptability, creativity, self-criticism, etc.)
* Your programing music!
* How to reach out (LinkedIn profile, other networks)
## Start contributing!
**Now that you have your GitHub page ready, and you may have added your first followers, it's time to become really active. It's SUPER important to have an active GitHub profile, as recruiters will definitely check if you are actively coding and upgrading your skills!**
### **Option 1: committing your own work and projects**
A great way to keep your GitHub profile active and to easily show-off your tech skills is by simply committing all the hard work you do for MigraCode and any other projects or courses. Make sure to commit each exercise, save each project you do and keep track of larger projects in your profile README.md. And keep them organized in the correct repositories, so it's easy for recruiters and others to separate your work.
### Option 2: contributing to open-source projects
There are many reasons why contributing to open-source projects is a great idea:
* It builds your resume by demonstrating that you can collaborate with others on code.
* It gives you practice with Git and GitHub, which is a valuable data science skill.
* It helps you to build relationships in the open source community.
* It feels good to give back to a project that you use!
And luckily, there are many guides out there that explain you in simple steps how to start contributing right away. We found [this one](https://www.dataschool.io/how-to-contribute-on-github/) on DataSchool, although [this one](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) on Akrabat also looks good.
{% hint style="info" %}
**We recommend you to start contributing to other projects once you are a bit further in the course, for example after at least 1 JavaScript module.**
{% endhint %}
# Self-developed profile
## Introduction
**While LinkedIn and GitHub are great to present yourself and promote your skills and experience, the most impressive thing to send to a recruiter is your own developed webpage with your portfolio and other relevant information. Not only will it show great motivation, but by making a great webpage, your profile itself is already showing your skills!**
## Some general advice
* IF you make your own profile page, make sure to have enough coding knowledge to make a really good one. If you just started coding, wait a little while. It's better to just have LinkedIn and GitHub than having a super basic HTML/CSS self-developed profile.
* Once created, make sure to have other developers take a look at your page to receive proper feedback, so you can really finetune both the layout as well as the code itself.
* Any self-developer profile needs to have the following key-information:
1. Who you are
2. What you do
3. Your location
4. The work you have to share
5. How to contact you
## How to make your own profile?
There are many guides online how to make your own profile, and also with various options where to host it. You can either buy a domain like *[www.vincentvangrondelle.es](http://www.vincentvangrondelle.es)*, or you can host your page on [GitHub](https://github.com/) or [Heroku](https://www.heroku.com/) (so you will get like *vincentvang.heroku.com*). Below you can find some guides to start coding your own profile!
{% embed url="" %}
{% embed url="" %}
{% embed url="" %}
{% embed url="" %}
{% hint style="info" %}
**Once you have fully published your own self-developed profile, make sure to add it to your other profiles to showcase it!**
{% endhint %}
# Online networking
## **Introduction**
**Once you have created your online profiles and you have them fully setup as described in the previous sections, you can't just leave them there. You will need to be actively engaging with these networks, ideally on a daily or weekly basis. Don't worry: this is quite easy, as these networks are made exactly for that!**
.png?alt=media\&token=a800371f-f9db-477a-8bfc-2a65d087838b)
## **Connecting to the right people**
### With MigraCode members
The easiest people to start connecting to on LinkedIn and GitHub are those you already know from MigraCode: your fellow students, the volunteers and the management of MigraCode! You can add them or give them a follow, and probably they will join your networks soon enough. If you don't know them that well, make sure to include a message when you add them on LinkedIn.
**Give it a try, starting adding:**
* [Yogesh Yadav](https://www.linkedin.com/in/soyyogi/), our Head of Education (GitHub [over here](https://github.com/soyyogi))
* [Diana Dashkovska](https://www.linkedin.com/in/dianadashkovska/), our Education Assistant (GitHub [over here](https://github.com/hheiress))
* [Vincent van Grondelle](https://www.linkedin.com/in/vincentvangrondelle/), our Program Manager (GitHub [over here](https://github.com/VincentvanG))
* [Eduard Bargues](https://www.linkedin.com/in/eduardbargues/), an awesome volunteer (GitHub [over here](https://github.com/EduardBargues))
* [Ricard More](https://www.linkedin.com/in/ricardmore/), an awesome volunteer (GitHub over here)
* [Anandamaya Arnó](https://www.linkedin.com/in/anandamaya-arno/), a MigraCode graduate (GitHub over here)
* [Henriette Hettinga](https://www.linkedin.com/in/henriette-hettinga/), CodeWomen Manager (GitHub [over here](https://github.com/Jethet))
### With recruiters
Even if you're not a full stack web developer or advanced tech support agent yet, you can already start building a network of recruiters on LinkedIn that could potentially share interesting jobs with you, or contact you once they see you have completed MigraCode or other relevant courses! Just make sure to introduce yourself properly and provide some context when you send them an invite.
**Give it a try, start adding:**
* [Eduard Pinilla](https://www.linkedin.com/in/eduardpb/), Talent Acquisition Specialist at our partner Adaptive
* [Helena Torrents Aymerich](https://www.linkedin.com/in/htorrentsaymerich/?), Tech Recruiter at our partner Adevinta
* [Silvia Bellmunt](https://www.linkedin.com/in/silvia-bellmunt-36220aa3/), Tech Recruiter at our partner Glovo
* [Daniel Mortos](https://www.linkedin.com/in/danimartos/?), Recruitment Operations Lead at our partner Preply
* [Megan Walker](https://www.linkedin.com/in/meganwalker195/), Director of People at our partner Marfeel
* [Alvaro Rodriguez](https://www.linkedin.com/in/alvarorodriguezholaluz/?), Recruiter at our partner Holaluz
### With other people
Don't limit yourself those recruiters out there: add your friends, old colleagues, sports buddies and basically everyone you know: job offers and possibilities can come from the most strange directions! Maybe you add an old friend on LinkedIn, who knows the HR Manager of a tech company, and you can be connected! So don't hesitate to go the '[My Network](https://www.linkedin.com/mynetwork/)' page of LinkedIn and start sending those invites. For GitHub, you can search by username/full name via [this page](https://docs.github.com/en/search-github/searching-on-github/searching-users).
{% hint style="info" %}
**It may seem a bit like how Facebook is used by 16-year old kids: adding as much people as you can.. But this is indeed a bit true as well! A big LinkedIn network creates a big reach when you share you are searching for a job (or anything else, see below), and can lead you to new, interesting connections that can get you that first job.**
{% endhint %}
## Sharing
**On any professional online network, it's important to stay active and share and interact with your network and potential new connections. You can do this by simply liking and commenting to posts of others or of posts of companies, but even better is sharing your own posts with content. Below you can find some examples of what you can share!**
### **Sharing accomplishments**
Whether you finally graduated from MigraCode, or maybe just finished the first HTML/CSS module, share it! Show your progress to your network, and keep potential future employees or interested recruiters up-to-date with the skills you are developing. Who knows, maybe after finally finishing the React module of MigraCode, a recruiter suddenly finds you more interesting!
### **Sharing tech-related topics**
Whether you visited a tech event and have some cool pictures, or you read a great article about the future of coding (for example), it's always good to share this as well. LinkedIn is no Instagram, but as long as it's career-related, feel free to share a cool picture related to your job search or to coding/tech!
### **Sharing your projects**
Last but not least, don't be afraid to show off your hard work! Whether it's your first Codepen page made with HTML and CSS, or it's the draft of your Final Project, share it as an update on LinkedIn or put it as a public repository on GitHub. Explain people what you have done and how you have done it, and spark the interested of a recruiter or impress a CEO!
# Events & job fairs
## Introduction
**You can do all the things perfectly online and have your profiles ready and active - nothing works as good as just meeting people in-person and just talking directly to recruiters and other company representatives. You can always add them on LinkedIn and GitHub later! It's easy to find events and to join them (for free) - below some tips how to find them and what to do there once you're there.**
.png?alt=media\&token=7958740a-7c51-44a2-b20c-f7140409f1d3)
## Types of events
### Meetups
Meetup became an organizing tool for a variety of interests including hobbies, drinking, sports, and gaming. Meetups provide a means of gathering like-minded people interested in a variety of social activities or interest. Especially in Barcelona, there are many Meetup events related to technology, and even so specific such as JavaScript or React events.
### Job Fairs
A job fair, also referred commonly as a job expo or career fair or career expo, is an event in which employers, recruiters, and schools give information to potential employees. Job seekers attend these while trying to make a good impression to potential coworkers by speaking face-to-face with one another, filling out résumés, and asking questions in attempt to get a good feel on the work needed. It's THE best way to get in direct contact with recruiters and find that first job.
.png?alt=media\&token=14b9a90f-a7d4-4dbe-8e61-8438edb830b8)
### Hackathons
A hackathon (also known as a hack day, hackfest, datathon or codefest; a portmanteau of hacking marathon) is a design sprint-like event; often, in which computer programmers and others involved in software development, including graphic designers, interface designers, project managers, domain experts, and others collaborate intensively on software projects. It's an awesome way to build your portfolio and to meet other developers.
.png?alt=media\&token=8dda448f-30f8-44d6-af76-d7f9bbc83e70)
## Finding useful events
### Meetup.com
{% embed url="" %}
### Eventbrite
{% embed url="" %}
### LinkedIn Events
{% embed url="" %}
## You at an event
So, you are there, what now? Finally you are at a job fair or at a cool and fancy tech meetup, now you need to act! Below some best practices, depending what kind of event you have joined:
* **Dress to impress!** That doesn't always mean you need to suit/dress up! It rather means wearing according to the type of event: if it's a job fair, yes, maybe wear a tie or a nice dress, but if it's a regular networking event, it's not so common in tech to dress up fancy - just regular clothes will do.
* **Talk to people!** Almost all events are in the end networking events, meaning you need to connect to people and see if there are interesting people who can help you further in your career (or maybe you can help them). Of course, this isn't easy - don't worry if you haven't spoken to a lot of people at your first event: it takes practice!
* **Get information!** Take business cards, take flyers, or in other words: take all the information you can find. At home, you can organise all the information and potentially follow any interesting leads or information you received.
* **Connect digitally!** If you meet an interesting person or get to know a cool company, connect to them on LinkedIn or give the company a follow to stay up to date on any potential job opportunities. And as explained before: having more LinkedIn connections can never hurt.
.png?alt=media\&token=f721e5b6-61fb-4fbe-82e7-cc0c621b43a9)
# IT Support & Security Course
## A launchpad to an IT career through MigraCode and INCO Academy
**Through this scholarship program, which is powered by INCO Academy, you will gain the in-demand skills that will prepare you to be job-ready and have access to employability services to launch your career in IT.**
With this 5-course certificate scholarship program designed by Google and delivered on Coursera, you will have access to a variety of hands-on assessments which will help you to simulate real-world IT support scenarios that are critical for success in the workplace.
If you complete this course, you can apply for basic to advanced tech support roles, and we will offer you support with doing this.
## What are the outcomes
**By earning these IT Skills, you prepare yourself for roles that include — systems analyst, support specialist, database administrator, IT technician, computer specialist, and many more. More specifically, you will learn the following skills:**
* Learn skills required to succeed in an entry-level IT capacity
* Learn to perform day-to-day IT support tasks including computer assembly, wireless networking, installing programs, and customer service
* Learn how to provide end-to-end customer support, ranging from identifying problems to troubleshooting and debugging
* Learn to use systems including Linux, Domain Name Systems, Command-Line Interface, and Binary Code\\
**MigraCode's IT Support & Security course is made possible by INCO Academy.**
## Background information about INCO Academy
{% embed url="" %}
# Structure
## Structure of the program
This program counts with 5 courses that will prepare you for a career in the high-growth field of IT. The content is highly interactive and exclusively developed by Google employees with decades of experience in IT. Each course is divided into modules dedicated to concrete subjects. Through a mix of videos, assessments, and hands-on labs, you’ll be introduced to foundational IT skills required for an entry-level job.
## 100% online
The course itself is 100% online which means you will need a computer. It can be a basic computer - it doesn’t have to be an expensive/strong one. We encourage you to work from home on your own computer, but if you are not (always) able to do so, you can discuss the possibility to either lend a laptop (if we have availability) or to work from the Open Cultural Center (OCC) office (C/Rec, 27 08003 Barcelona).
## Platforms & Tools
### Coursera
The courses are delivered by Coursera, an online learning platform that will provide you with all the content of the program.
{% embed url="" %}
### Slack
The channel-based messaging platform that we use as our main communication tool. Many tech companies also use Slack and it is a huge advantage to have Slack skills when you apply for jobs in tech.
{% embed url="" %}
## Self-learning approach
This program is based on autonomous learning. Autonomous learning revolves around students being responsible for themselves. As a student, you will be able to manage your study hours and customize your way of learning to adapt it to your own needs. But do not worry, you will not be alone in this. The mentor and a group of specialized tech volunteers will be by your side to provide support, advice, and knowledge when asked.
***However, it is very important to be proactive: ask for help when you are stuck, inform your mentor when you have issues, and do not hesitate to use Slack to get help with the course.***
## **Main support**
#### Specialized volunteers
Migracode counts with a community of tech professional volunteers and students who will be willing to help you with any issue or any questions you have. You will be able to reach them at any time via Slack. Your mentor will explain Slack during the onboarding session,
#### Your personal mentor
The mentor - Simón -, will be the main contact person. He will help you to design your learning plan at the beginning, introduce you to the different platforms and guide you throughout the process. You will have a regular meeting with him - depending on your learning plan -, listen to your feedback and make sure everything is going as planned. The meetings will take place online or in-person at the office of OCC depending on your availability. You can contact him via email [simon@migracode.org](mailto:joana@migracode.org) or via Slack.
# Course content
## Summary
* 116 hours in total
* 5 modules
* 30 parts in total
[Link to Coursera course](https://www.coursera.org/professional-certificates/google-it-support)
*Please note that on Coursera, the 5 modules are called 'Courses', and the parts within the courses are called 'Modules'.*
## Overview
### Module 1: Technical Support Fundamentals
*25 hours in total*
* Part 1: Introduction to IT\
4 hours: 14 videos (Total 51 min), 6 readings, 3 quizzes
* Part 2: Hardware\
5 hours: 17 videos (Total 80 min), 7 readings, 4 quizzes
* Part 3: Operating System\
6 hours: 21 videos (Total 69 min), 6 readings, 5 quizzes
* Part 4: Networking\
3 hours: 15 videos (Total 44 min), 1 reading, 2 quizzes
* Part 5: Software\
4 hours: 10 videos (Total 25 min), 1 reading, 4 quizzes
* Part 6: Troubleshooting\
3 hours: 22 videos (Total 69 min), 2 readings, 4 quizzes
### Module 2: The Bits and Bytes of Computer Networking
*34 hours in total*
* Part 1: Introduction to Networking\
6 hours: 15 videos (Total 47 min), 8 readings, 6 quizzes
* Part 2: The Network Layer\
5 hours: 18 videos (Total 68 min), 3 readings, 5 quizzes
* Part 3: The Transport and Application Layers\
5 hours: 11 videos (Total 45 min), 1 reading, 4 quizzes
* Part 4: Networking Services\
6 hours: 15 videos (Total 70 min), 2 readings, 7 quizzes
* Part 5: Connecting to Internet \
6 hours; 15 videos (Total 49 min), 5 readings, 6 quizzes
* Part 6: Troubleshooting and the Future of Networking\
6 hours: 18 videos (Total 59 min), 3 readings, 6 quizzes
### Module 3: Operating Systems and You: Becoming a Power User
*35 hours in total*
* Part 1: Navigating System\
7 hours: 32 videos (Total 94 min), 10 readings, 5 quizzes
* Part 2: Users and Permissions\
4 hours: 16 videos (Total 67 min), 4 readings, 3 quizzes
* Part 3: Package and Software Management\
7 hours: 16 videos (Total 58 min), 14 readings, 6 quizzes
* Part 4: Filesystems\
5 hours: 16 videos (Total 52 min), 9 readings, 3 quizzes
* Part 5: Process Management
6 hours: 14 videos (Total 43 min), 8 readings, 5 quizzes
* Part 6: Operating Systems in Practice
6 hours: 17 videos (Total 52 min), 6 readings, 4 quizzes
### Module 4: System Administration and IT Infrastructure Services
*31 hours in total*
* Part 1: What is System Administration?\
5 hours: 16 videos (Total 44 min), 6 readings, 5 quizzes
* Part 2: Network and Infrastructure Services\
7 hours: 23 videos (Total 74 min), 6 readings, 10 quizzes
* Part 3: Software and Platform Services\
7 hours: 16 videos (Total 45 min), 10 readings, 8 quizzes
* Part 4: Directory Services\
7 hours: 19 videos (Total 100 min), 11 readings, 6 quizzes
* Part 5: Data Recovery & Backups
4 hours: 13 videos (Total 43 min), 3 readings, 4 quizzes
* Part 6: Final Project
14 min: 3 videos (Total 4 min)
### Module 5: IT Security: Defense against the digital dark arts
*29 hours in total*
* Part 1: Understanding Security Threats\
5 hours: 10 videos (Total 36 min), 7 readings, 4 quizzes
* Part 2: Pelcgbybtl (Cryptology)\
7 hours: 14 videos (Total 83 min), 9 readings, 7 quizzes
* Part 3: AAA Security (Not Roadside Assistance)\
3 hours: 14 videos (Total 55 min), 2 readings, 3 quizzes
* Part 4: Securing Your Networks\
5 hours: 11 videos (Total 70 min), 7 readings, 5 quizzes
* Part 5: Defense in Depth\
3 hours: 9 videos (Total 44 min), 3 readings, 3 quizzes
* Part 6: Creating a Company Culture for Security\
6 hours: 16 videos (Total 59 min), 9 readings, 6 quizzes
# Planning & Schedule
**As mentioned before, the IT Support & Security Course is a flexible scholarship program that allows students to organize their study time according to their schedule and needs. To help students reach their goals and complete the 5 courses successfully in a concrete period of time, the mentor will help each student to develop a personalized learning plan.**
The average time to complete the course is 3,5 months. However, depending on your previous skills, time availability, life situation, etc. this time can be shorter or longer. As mentioned above, the study plan will be elaborated together with you and according to your needs at the beginning of the program so, you will be required to commit to it.
# Application process
Applications for this scholarship will be open throughout 2023 and accepted students will be able to start the course right away. Make sure to read the details below before applying.
## **The Requirements**
## **The Application process**
### **Step 1 - Apply online**
Apply through our [website.](https://migracode.openculturalcenter.org/it-support-security-course/) In the form, **you will be asked to fill in some personal data and to write a short motivation why you want to join this course.**
This part is already extremely important! **Motivation is the strongest aspect of our course**, as you will need to work a lot to complete our program. After sending the form, we will reply to you as soon as possible to inform you if you can continue with step 2.
### **Step 2 - Home assignment**
Step 2 is the most difficult step and you will need to take your time for it. **It requires making a small home assignment.**
The assignment consists of the following:
* You will receive a simulated question from a customer about a technical issue.
* Your task is to answer the customer in the best way possible!
* After you wrote your answer to this customer, you send it to us by email.
You can find the assignment [here. ](/courses/untitled/application-process/home-assignment)
### **Step 3 - Interview**
Once we have received your work, we will let you know **if you have passed the assignment** and if so, we will invite you to an **online interview.**
After a few days, we will inform you about the result of the interview.
### **Step 4 - Onboarding session**
The final part of the application process is **to come to our office in Barcelona** to get to know us in person and to receive **a comprehensive introduction** to MigraCode Barcelona.
You will get help installing the required software on your laptop, we will explain to you the main tools that we use during the course and we explain **other practical information about MigraCode.**
Once this is done, **you are ready to start with the course right away!**
# Home assignment
This is the next step of the application process, a technical assignment. It is a simulation of a technical support case as if you are working in the Google technical support department.
### **Situation**
You have received a new technical case from a customer of Google Gmail. The customer is asking the following:
### **Assignment**
Reply to this customer like you are writing a real email back as if you already were working in Google Technical Support. Include the explanation of how to set a signature in Google Gmail, and if you can, include a link to a webpage with more information. Make sure to use a good email structure and be polite and clear to the customer. Make use of Google Search to find the required information.
Once you have written this email, you can send it in a reply to ****
### **Resolution**
We will let you know as soon as possible if you have passed this step and if you will be accepted to our course.
Thank you in advance and let us know if you have any questions.
# IT Automation with Python Course
## Learn to code confidently. Take your next career steps in IT through MigraCode, Google.org & INCO Academy
**Learn in-demand skills like Python, Git, and IT automation to advance your career.**
This 6-course certificate scholarship program designed by Google and delivered on Coursera, is designed to help individuals with a background in IT Support advance to technical paths like Systems Administrators. This stackable credential helps IT professionals build in-demand skills including Python, Git, and IT automation.
## What are the outcomes
**By earning these IT Skills, you prepare yourself for roles that include — IT Support II, Jr Systems Analyst, Jr Systems Administrator, Network Specialist, and many more. More specifically, you will learn the following skills:**
* Learn how to program with Python with no previous knowledge of coding required and you’ll use Python to automate common system administration tasks
* Learn to use Git and GitHub, to troubleshoot and debug complex problems
* Apply automation at scale by using configuration management and the Cloud
* Practice your technical skills with hands-on projects including a capstone project where you’ll use your new knowledge to solve a real-world IT problem
**MigraCode's IT Automation with Python course is made possible by INCO Academy.**
## Background information about INCO Academy
{% embed url="" %}
# Structure
## Structure of the program
This program counts with 6 courses that will improve your IT foundations to help you take your career to the next level. The content is highly interactive and exclusively developed by Google employees with decades of experience in IT. Each course is divided into modules dedicated to concrete subjects. Through a mix of videos, assessments, and hands-on labs, you’ll be introduced to foundational IT skills required for an entry-level job.
## 100% online
The course itself is 100% online which means you will need a computer. It can be a basic computer - it doesn’t have to be an expensive/strong one. We encourage you to work from home on your own computer, but if you are not (always) able to do so, you can discuss the possibility to either lend a laptop (if we have availability) or to work from the Open Cultural Center (OCC) office (C/Rec, 27 08003 Barcelona).
## Platforms & Tools
### Coursera
The courses are delivered by Coursera, an online learning platform that will provide you with all the content of the program.
{% embed url="" %}
### Slack
The channel-based messaging platform that we use as our main communication tool. Many tech companies also use Slack and it is a huge advantage to have Slack skills when you apply for jobs in tech.
{% embed url="" %}
## Self-learning approach
This program is based on autonomous learning. Autonomous learning revolves around students being responsible for themselves. As a student, you will be able to manage your study hours and customize your way of learning to adapt it to your own needs. But do not worry, you will not be alone in this. The mentor and a group of specialized tech volunteers will be by your side to provide support, advice, and knowledge when asked.
***However, it is very important to be proactive: ask for help when you are stuck, inform your mentor when you have issues, and do not hesitate to use Slack to get help with the course.***
## **Main support**
#### Specialized volunteers
Migracode counts with a community of tech professional volunteers and students who will be willing to help you with any issue or any questions you have. You will be able to reach them at any time via Slack. Your mentor will explain Slack during the onboarding session,
#### Your personal mentor
The mentor - Simón -, will be the main contact person. He will help you to design your learning plan at the beginning, introduce you to the different platforms and guide you throughout the process. You will have a regular meeting with him - depending on your learning plan -, listen to your feedback and make sure everything is going as planned. The meetings will take place online or in-person at the office of OCC depending on your availability. You can contact him via email [simon@migracode.org](mailto:joana@migracode.org) or via Slack.
# Course content
## Summary
* 117 hours in total
* 6 modules
* 30 parts in total
[Link to Coursera course](https://www.coursera.org/professional-certificates/google-it-automation#enroll)
*Please note that on Coursera, the 6 modules are called 'Courses', and the parts within the courses are called 'Modules'.*
## Overview
### Module 1: Crash Course on Python
*27 hours in total*
* Part 1: Hello Python!\
4 hours: 14 videos (Total 44 min), 9 readings, 4 quizzes
* Part 2: Basic Python Syntax\
5 hours: 14 videos (Total 45 min), 14 readings, 4 quizzes
* Part 3: Loops \
4 hours: 13 videos (Total 47 min), 9 readings, 4 quizzes
* Part 4: Strings, Lists and Dictionaries\
6 hours: 16 videos (Total 67 min), 17 readings, 4 quizzes
* Part 5: Object Oriented Programming (Optional)\
6 hours: 13 videos (Total 50 min), 12 readings, 1 quiz
* Part 6: Final Project\
2 hours: 9 videos (Total 27 min)
### Module 2: Using Python to Interact with the Operating System
*26 hours in total*
* Part 1: Getting Your Python On\
3 hours: 15 videos (Total 76 min), 4 readings, 3 quizzes
* Part 2: Managing Files with Python\
5 hours: 13 videos (Total 52 min), 4 readings, 3 quizzes
* Part 3: Regular Expressions\
4 hours: 14 videos (Total 60 min), 2 readings, 4 quizzes
* Part 4: Managing Data and Processes\
3 hours: 12 videos (Total 48 min), 2 readings, 4 quizzes
* Part 5: Testing in Python\
6 hours; 14 videos (Total 50 min), 4 readings, 3 quizzes
* Part 6: Bash Scripting\
4 hours: 13 videos (Total 62 min), 3 readings, 4 quizzes
* Part 7: Final Project\
2 hours: 6 videos (Total 13 min)
### Module 3: Introduction to Git and GitHub
*16 hours in total*
* Part 1: Introduction to Version Control\
5 hours: 16 videos (Total 74 min), 6 readings, 4 quizzes
* Part 2: Using Git Locally\
4 hours: 14 videos (Total 60 min), 3 readings, 4 quizzes
* Part 3: Working with Remotes\
4 hours: 13 videos (Total 61 min), 3 readings, 4 quizzes
* Part 4: Collaboration\
4 hours: 14 videos (Total 61 min), 3 readings, 4 quizzes
### Module 4: Troubleshooting and Debugging Techniques
*16 hours in total*
* Part 1: Troubleshooting Concepts\
4 hours: 14 videos (Total 71 min), 3 readings, 4 quizzes
* Part 2: Slowness\
4 hours: 15 videos (Total 77 min), 3 readings, 4 quizzes
* Part 3: Crashing Programs\
4 hours: 14 videos (Total 78 min), 2 readings, 4 quizzes
* Part 4: Managing Resources\
4 hours: 16 videos (Total 74 min), 3 readings, 4 quizzes
### Module 5: Configuration Management and the Cloud
*15 hours in total*
* Part 1: Automating with Configuration Management\
4 hours: 11 videos (Total 45 min), 4 readings, 4 quizzes
* Part 2: Deploying Puppet\
3 hours: 10 videos (Total 44 min), 3 readings, 4 quizzes
* Part 3: Automation in the Cloud\
4 hours: 13 videos (Total 66 min), 2 readings, 4 quizzes
* Part 4: Managing Cloud Instances at Scale\
4 hours: 14 videos (Total 67 min), 3 readings, 4 quizzes
### Module 6: Automating Real-World Tasks with Python
*17 hours in total*
* Part 1: Manipulating Images\
3 hours: 8 readings
* Part 2: Interacting with Web Services\
3 hours: 10 readings
* Part 3: Automatic Output Generation\
3 hours: 8 readings
* Part 4: Putting It All Together\
3 hours: 1 video (Total 1 min), 3 readings, 1 quiz
* Part 5: Career Resources\
5 hours: 27 readings
# Planning & Schedule
**As mentioned before, the IT Automation with Python Course is a flexible scholarship program that allows students to organize their study time according to their schedule and needs. To help students reach their goals and complete the 6 courses successfully in a concrete period of time, the mentor will help each student to develop a personalized learning plan.**
The average time to complete the course is 3,5 months. However, depending on your previous skills, time availability, life situation, etc. this time can be shorter or longer. As mentioned above, the study plan will be elaborated together with you and according to your needs at the beginning of the program so, you will be required to commit to it.
# Application process
Applications for this scholarship will be open throughout 2023 and accepted students will be able to start the course right away. Make sure to read the details below before applying.
## **The Requirements**
## **The Application process**
### **Step 1 - Apply online**
Apply through our [website.](https://migracode.openculturalcenter.org/it-support-security-course/) In the form, **you will be asked to fill in some personal data and to write a short motivation why you want to join this course.**
This part is already extremely important! **Motivation is the strongest aspect of our course**, as you will need to work a lot to complete our program. After sending the form, we will reply to you as soon as possible to inform you if you can continue with step 2.
### **Step 2 - Home assignment**
Step 2 is the most difficult step and you will need to take your time for it. **It requires making a small home assignment.**
The assignment consists of the following:
* You will have to follow a short online material about functions in Python
* You will develop a simple function
* After you wrote that function, you will send it to us by email
You can find the assignment [here](/courses/untitled-1/application-process/home-assignment).
### **Step 3 - Interview**
Once we have received your work, we will let you know **if you have passed the assignment** and if so, we will invite you to an **online interview.**
After a few days, we will inform you about the result of the interview.
### **Step 4 - Onboarding session**
The final part of the application process is **to come to our office in Barcelona** to get to know us in person and to receive **a comprehensive introduction** to MigraCode Barcelona.
You will get help installing the required software on your laptop, we will explain to you the main tools that we use during the course and we explain **other practical information about MigraCode.**
Once this is done, **you are ready to start with the course right away!**
# Home assignment
This is the next step of the application process, a technical assignment. It is a simple function that would ask for a name, and print out a message.
### **Situation**
You will be asked to develop a python function that will return a message. As example you have the function below:
### **Assignment**
You will be advised to follow the material included in [W3Schools](https://www.w3schools.com/python/python_functions.asp) and [DataCamp](https://www.datacamp.com/tutorial/functions-python-tutorial); proceed to create an account in [Repl.it](https://replit.com/~); write the function, which should either prompt the user for a name or take it as parameter, then print out a personalised "Hello" response, like "Hello Jose". Otherwise, the function will print out "Hello World"
Once you have written and downloaded the python function file, you can send it in a reply to **.**
### **Resolution**
We will let you know as soon as possible if you have passed this step and if you will be accepted to our course.
Thank you in advance and let us know if you have any questions.
# Web Development Course
This is the complete syllabus and course material for the web development course of [MigraCode Barcelona](https://migracode.openculturalcenter.org/). It is based on the syllabus from [CodeYourFuture](https://codeyourfuture.io/), [HackYourFuture](https://github.com/HackYourFuture/curriculum) and other resources. This syllabus does not only include the coding course, but also all other information for students.
During the course you will learn a technology stack that helps you build anything from a simple website to a powerful database-driven web application or even a mobile app!
If you are familiar with MigraCode yet and you're interested in joining the program, please [refer to the main MigraCode Barcelona website](https://migracode.openculturalcenter.org/).
## Overall Course Content
* HTML/CSS
* Core JavaScript
* Backend development using [NodeJS](https://nodejs.org/)
* Modern front-end development with [React](https://facebook.github.io/react/)
* Databases
We’ll complement the training with workshops on modern software methodologies and job interview practices, etc. A simplified overview of our curriculum can be found [here](https://migracode.openculturalcenter.org/web-development-course/), including other details of our course.
## Our program in one video
{% embed url="" %}
## Our learning objectives in detail
**Technical skills:**
* Lean to understand and use the following coding languages on a medium to advanced level: HTML/CSS, JavaScript, React, NodeJS and Databases
* Learn how to use Git and the Command Line, and also how to use the related GitHub platform
* Learn how to use project management tools such as Trello, Slack and Cloud Services
* Learn how to think in algorithms and how to search for solutions
**Job-seeking skills:**
* Learn how to use LinkedIn and how to benefit most from this platform
* Learn how to prepare and go through an interview process to get hired by a professional IT company
* Learn how to create and design a professional CV/Resume
**General soft skills:**
* Learn how to work in a team under supervision of a mentor
* Learn how to communicate effectively through professional communication training
* Learn how to work with people from different cultures and nationalities
* Learn how to cope with work-related stress and how to plan ahead
* Learn how to be proactive in asking things and approaching people
# Pre-Courses
Once you are accepted at MigraCode, we recommend you to have a look at the following courses to be fully prepared to start with MigraCode:
**Recommended:**
* [Get an introduction to what web development is](https://www.w3schools.com/whatis/default.asp) (a complete overview)
* [Find out about Git, GitHub and the Terminal](https://lab.github.com/githubtraining/introduction-to-github) (strongly recommended)
* [Find another intro into HTML](https://www.w3schools.com/html/default.asp) (learning how to code is repeating)
* [Do a specific course into CSS](https://www.w3schools.com/css/default.asp) (dive deeper into CSS)
**Additional:**
* [Take a first look at JavaScript](https://www.w3schools.com/js/default.asp) (just to have an idea)
* [Discover people already working in tech](https://www.khanacademy.org/computing/computer-programming/meet-the-computing-professional-unit) (your potential future)
* [Do a full programming introduction course](https://www.freecodecamp.org/learn/) (only if you really have time)
# Main Tools & Software
## GitHub
[**https://www.github.com**](https://www.github.com)
* Where our curriculum can be found
* To manage and save your homework
{% embed url="" %}
## LinkedIn
[**https://www.linkedin.com**](https://www.linkedin.com)
* To build your professional network
* To find your potential future job
{% embed url="" %}
## Slack
[**https://migracodebarcelona.slack.com/**](https://migracodebarcelona.slack.com/)
* To communicate with all from MigraCode
* Request help or a one-two-one session
{% embed url="" %}
## Meetup
[**https://www.meetup.com**](https://www.meetup.com/migracode-barcelona/)
* To find interesting (job-finding) events
* To stay up-to-date with our events
{% embed url="" %}
## Trello
[**https://www.trello.com**](https://www.trello.com) **(to join** [**click here**](https://trello.com/invite/migracodebarcelona/fa78073e193607429c2dbacd77cc356f)**)**
* View useful info about MigraCode
* Learn to use a project management tool
{% embed url="" %}
## Visual Studio Code
[**https://code.visualstudio.com/**](https://code.visualstudio.com/)
* To easily work with different coding languages
* To manage coding projects and collaborate with others
{% embed url="" %}
# Slack Information
**Slack is our main communication tool. Any help you need or any questions you have: communicate them via Slack! Many tech companies also use Slack and it’s a huge advantage to have Slack skills when you apply for jobs in tech.**
## **An introduction video**
{% embed url="" %}
## Main Channels in the MigraCode Slack
* **Class channel (i.e. #jan2021-1-en)**\
The one we use to share information for your group and that we use during the classes
* **#all-students**\
Useful news messages specifically for MigraCode students
* **#general**\
General news messages for everyone that is part of MigraCode (students, volunteers, staff)
* **#support-coding**\
To ask for technical help with your homework
* **#support-employability**\
To ask for help with improving your CV/LinkedIn/Etc.
* **#random**\
Jokes, memes and nice articles or videos!
* **#recreation-activities**\
Not used now due to Covid, but soon to be used to organise nice activities together
* **#job-offers-junior**\
Not to be used in the beginning of MigraCode but after a few months we'll use it to find job opportunities
## How to ask for help in #support-coding
#### **How to ask for help**
When you ask something here, always make sure that you:
* Describe what you are trying to do/achieve, and in which exercise/project
* Include details about what you have tried already
* Write your question in a clear and understandable way (preferably in English, but in Spanish is also allowed)
* Include the relevant parts of the code where you are getting the error/issue and **always include any error codes** you have received
* Use code snippets **(ctrl / cmd + shift + c)** to share your code to make it readable for humans
* Use **(shift + enter)** to pass to the next line
#### **Question templates**
In case you receive errors or things that go wrong during exercises, so short questions that can probably be solved in a chat, you can write your question as follows:
* *Hello + I need help with \[issue description] + screenshot/error message/etc. + what you have already tried to do + potential solutions you already found.*
If you feel lost, if you missed things or if you need some extra support in understand the materials, you can write your question as follows:
* *Hello + I need help with \[issue description] + proposal for time period you could have a call.*
#### **Useful links to search information before posting in this channel**
*
* [https://www.freecodecamp.org](https://www.freecodecamp.org/)
*
Please don’t hesitate to make use of asking questions here! You can also have a look at previous questions of other students to see what are good approaches to asking for help.
## Useful Slack tips
* Use THREADS (Hilos) to reply to messages, and find replies to your active threads on the top right (a nice video with more details [here](https://www.youtube.com/watch?v=JsX8V4hzENo\&ab_channel=Slack))
* Put a clear display name and a clear profile picture (info on how to edit your profile [here](https://slack.com/intl/es-es/help/articles/204092246-Editar-tu-perfil#:~:text=From%20your%20desktop%2C%20click%20your,profile%2C%20then%20click%20Save%20Changes.))
* Confirm messages by leaving an Emoji (how to do so check [here](https://slack.com/intl/es-es/help/articles/202931348-C%C3%B3mo-utilizar-emojis-y-emoticonos))
* I will save important messages by adding them to 'Pinned Items' (more info how to find them [here](https://slack.com/intl/es-es/help/articles/205239997-C%C3%B3mo-fijar-mensajes))
* Create a private/direct message with the round button on the top left of the screen (more info [here](https://slack.com/intl/es-es/help/articles/212281468-%C2%BFQu%C3%A9-es-un-mensaje-directo))
# Grading System
## Introduction
At MigraCode, we believe in the power of learning by doing. Because of that, we don't give students tests - we rather let each student do small projects during the course and work on an extensive curriculum with many exercises to improve their knowledge and skills. And, most importantly: at the end of the course, students work together in groups on a larger final project.
## Tracking student progress
Still, of course, we need to also keep track of student's progress and see if they are gaining all the knowledge required to become junior web developers. Therefore, we have developed a grading system that is based on three aspects:
1. Class participation and being on time
2. Homework progress for the front-end modules
3. Homework progress for the back-end modules
4. Final Project efforts and output
Each aspect is graded on a 1-10 scale based on what students upload on GitHub and how to progress during and in-between classes. Each student will receive a Google Sheet in which they can see their own progress, like the one below:
## Minimum progress requirements
We constantly check your homework and give you feedback on it. However, during the 8-month course, there are 3 main checks where you MUST have finished all homework and required tasks. If you haven't it means you either need to quickly recover, or drop out and wait for the next course. Below the three main checks during the MigraCode course:
### Check 1: Between the front-end and back-end modules
After you finish the HTML/CSS, JavaScript and React module, we will do the first full check on your progress. If you are not fully up-to-date, you get a chance to recover before the back-end modules starts. However, if you are not able to, you will not be able to continue the course and you will have the opportunity to join a next course.
### Check 2: Between the back-end modules and the final projects
After finishing all modules, we will do the second check on your progress. If you are not fully up-to-date, you'll also get a chance to recover the missing parts. However, if you can't, you will not be able to enter the final projects. You will then be offered to join the final projects of a next course.
### Check 3: At the end of the course, after the final projects
Before graduation, we will check how you have performed in the final projects and if you have done all the tasks assigned to you on Trello. If you have not completed them, you will get a chance to recover. However, if you haven't performed sufficiently, you will need to re-do the final projects with another group in another course.
# Homework
You are requested to check your homework on the [Trello Board](https://trello.com/b/wl6LgDXD/homework-overview) after every class. There you will find a column with your **class group** name and at top of that list you will find the **latest homework** with a **due date** as shown in the image below.
# Course content
**The MigraCode Barcelona curriculum - a direct output of the European collaboration between various NGOs spread over the European Union - contains all the information and knowledge a MigraCode student needs to become a junior web developer.**
Find the full curriculum of MigraCode Barcelona through the links below:
{% content-ref url="/pages/-MSXEC0pesR1SoB8bZeo" %}
[Introduction](/courses/introduction-3/course-content/introduction-2)
{% endcontent-ref %}
{% content-ref url="/pages/-MSXEE63JMwaJeip3hPh" %}
[HTML/CSS](/courses/introduction-3/course-content/html-css)
{% endcontent-ref %}
{% content-ref url="/pages/-MSXEGAZddbU2uQ9jwNE" %}
[JavaScript I](/courses/introduction-3/course-content/javascript-i)
{% endcontent-ref %}
{% content-ref url="/pages/-MSXEJ63BOPXkuy9E4RK" %}
[JavaScript II](/courses/introduction-3/course-content/javascript-ii)
{% endcontent-ref %}
{% content-ref url="/pages/-MSXELBw6idsUc8q8vPM" %}
[JavaScript III](/courses/introduction-3/course-content/javascript-iii)
{% endcontent-ref %}
{% content-ref url="/pages/-MSXEN8BD9OtsiaIjtmW" %}
[React](/courses/introduction-3/course-content/react)
{% endcontent-ref %}
{% content-ref url="/pages/-MSXEPaBPsy4MmrWcMol" %}
[Node.js](/courses/introduction-3/course-content/nodejs)
{% endcontent-ref %}
{% content-ref url="/pages/-MVqQRCbyh21DEHnEEZX" %}
[Databases](/courses/introduction-3/course-content/databases)
{% endcontent-ref %}
{% content-ref url="/pages/-MSX1cSNPSDOCCzGu1Or" %}
[Final Projects](/courses/introduction-3/course-content/introduction-1)
{% endcontent-ref %}
# Introduction
**In the first week, you will get an introduction to the world of coding, including explanations how to use the terminal, what GitHub is and why you will use it and how to ‘push’ the website you made during the application process.**
Below an overview of the week-by-week topics - click on the title to find more details.
{% content-ref url="/pages/-MS-2\_mIrPtKoKM34QSL" %}
[1 - Dev Tools and command line](/courses/introduction-3/course-content/introduction-2/dev_tools)
{% endcontent-ref %}
{% content-ref url="/pages/-MS-3ZUkjhgpclYdGKB3" %}
[2 - Git and Github](/courses/introduction-3/course-content/introduction-2/2-git-and-github)
{% endcontent-ref %}
migracode-bcn.jpg?alt=media\&token=710c808a-262a-4ee1-8881-379963418a2a)
# 1 - Dev Tools and command line
## Table of Content
1. [Operating systems](/courses/introduction-3/course-content/introduction-2/dev_tools#operating-systems)
2. [The Command Line](/courses/introduction-3/course-content/introduction-2/dev_tools#the-command-line)
3. [Beginner Level Terminal](/courses/introduction-3/course-content/introduction-2/dev_tools#beginner-level)
1. [Navigating in Terminal](/courses/introduction-3/course-content/introduction-2/dev_tools#navigating-in-terminal)
2. [Working with Files and Folders](/courses/introduction-3/course-content/introduction-2/dev_tools#working-with-files-and-folders)
3. [Listing Files and Flags](/courses/introduction-3/course-content/introduction-2/dev_tools#listing-files-and-flags)
4. [Terminal Basics Exercises](/courses/introduction-3/course-content/introduction-2/dev_tools#terminal-basics-exercises)
5. [Intermediate Level Terminal](/courses/introduction-3/course-content/introduction-2/dev_tools#intermediate-level)
1. [Permissions and Links](/courses/introduction-3/course-content/introduction-2/dev_tools#permissions-and-links)
2. [Redirection](/courses/introduction-3/course-content/introduction-2/dev_tools#redirection)
3. [Piping](/courses/introduction-3/course-content/introduction-2/dev_tools#piping)
6. [Permissions, Redirection, and Piping Exercises](/courses/introduction-3/course-content/introduction-2/dev_tools#permissions-redirection-and-piping-exercise)
7. [Development Tools](/courses/introduction-3/course-content/introduction-2/dev_tools#development-tools)
8. [Visual Studio Code Extensions](/courses/introduction-3/course-content/introduction-2/dev_tools#optional-visual-studio-code-extensions-for-web-development)
9. [More Resources](/courses/introduction-3/course-content/introduction-2/dev_tools#more-resources)
10. [Advanced Level - 1](/courses/introduction-3/course-content/introduction-2/dev_tools#advanced-level-1-optional) **{ OPTIONAL }**
11. [Advanced Level - 2](/courses/introduction-3/course-content/introduction-2/dev_tools#advanced-level-2-optional) **{ OPTIONAL }**
## Operating Systems
An Operating System (OS) is a powerful, and usually large, program that controls and manages the hardware and software on a computer. All computers and computer-like devices require operating systems, including laptops, tablets, desktops, and smartphones. The OS performs all the basic tasks like file management, memory management, process management, handling input and output, and controlling peripheral devices such as disk drives and printers.
The most common operating systems for desktop and laptop computers are:
* Microsoft Windows (Windows 95, Windows 7, Windows 10,...)
* Linux (Debian, Red Hat, Ubuntu,..)
* MacOS
* Chrome OS
* Android and iOS are operating systems for mobile devices.
#### Unix
Unix is a family of operating systems. The first version was developed starting in 1969. Unix is characterized by being portable and multitasking.
Unix operating systems are widely used in a multitude of devices that range from the most capable supercomputers to the mobile phones and computers that we use daily. The philosophy of Unix systems is characterized by:
* a hierarchical file system,
* a large collection of small programs that can work in series,
* the use of text files to store the data,
* treating devices as files.
Linux and MacOS are examples of Unix systems.
#### Linux
Linux is a family of Unix-like operating systems that use the Linux kernel. The name comes from the original programmer, a student named Linus Torvals, who in 1991, working with the GNU project of the Free Software Foundation, created the first version of this operating system.
Linux development is one of the clearest examples of free, open source software development by a diverse community of programmers all over the world. Anyone can use the operating system, study it and modify it. The open source nature of Linux is protected by the GPL (GNU General Public License).
#### Ubuntu
Ubuntu is a Linux distribution. It is an open-source operating system aimed at desktop users, and its strengths are that it is easy to use and install. Although the desktop is somewhat different from Windows or Mac OS, a user who is accustomed to any of these operating systems will not have many problems becoming familiar with Ubuntu. Ubuntu is a Linux distribution based on Debian and composed mostly of free and open-source software. Ubuntu is officially released in three editions: Desktop, Server, and Core for Internet of things devices and robots.
If you are using [Ubuntu](https://ubuntu.com/), you will see this sreen:
Demo of Ubuntu:
* The friendly Desktop
* The filesystem: navigate through folders and files using File Manager
* Ubuntu software: a tool to install software easily
## The Command Line
The **Command Line**, also knows as **Bash**, **Terminal** or **Shell** (**Línea de Comandos** ó **Símbolo de sistema** in Spanish) is a way of controlling a computer, based on a text interface.
Why should I use the command line/terminal?
* Once you know the basics, it helps you to interact with you computer faster
* Some software for developers must always be used from a terminal
* You have more control over the software
* It allows you to create scripts (lists of commands) and automate manual tasks
* It is what hackers use in movies.
#### How do I use the terminal on my computer?
Here are the instructions for the three operating system:
* **MacOS:** You can find the Terminal.app in your Applications, in the folder Utilities. An alternative way to open the Terminal is to search with Spotlight and type in “terminal”. Select the application called terminal and press the return key. This should open up an app with a black background. When you see your username followed by a dollar sign, you’re ready to start using the command line.
* **Linux:** You can open the Terminal by directly pressing \[ctrl+alt+T] or you can search for it by clicking the dash (#) icon, typing in “terminal” in the search box, and opening the Terminal application. This should open up an app with a black background. When you see your username followed by a dollar sign, you’re ready to start using the command line.
* **Windows:** Windows has its own **Command Prompt**. It is very similar to the Unix command line, but some commands are not exactly the same. For the main differences go to this [link](https://enexdi.sciencesconf.org/data/pages/windows_vs_mac_commands_1.pdf). Because of these differences, and because we want to learn UNIX commands, we use the **Git Bash**. Go to the Windows "Start" button and search the program **Git Bash**. When you open it you will see a screen like this one:
After you have followed the instructions, open a terminal and write `ls`, then press the `Enter` key. What do you see?
#### Commonly used commands
These are the most used commands that you will quickly become comfortable with during the course. These commands allow you to effectively move around the filesystem and write software on your laptop. There are more commands in the tables with more commands and descriptions below.
* `cd` - change directory. To move up one folder level and 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 working directory: print the full location of the folder you are working in
* `mkdir [name]` - make directory: 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**)
**Getting Help**
When you're stuck and need help with a command, help is usually only a few keystrokes away. Help on most commands is built right into the commands themselves, available through online help programs (such as ), and of course online.
**Using a command's built-in help**\
Many (but not all) commands have simple help screens that can be called with special command flags. These flags usually look like `-h` or `--help`. Example: `grep --help`.
**Online manuals: the man pages**\
The best source of information for most commands are the manual pages, also known as the man pages. To read a command's man page, type `man` plus a space and the command.
| Example | Info |
| --------- | -------------------------------------- |
| `man ls` | Get help on the ls command |
| `man man` | Get the manual for info on the manual! |
## Beginner Level
### { Navigating in Terminal. }
#### Objectives:
By the end of this chapter, you should be able to:
* Define what Terminal is and how it is structured
* Navigate through and list files on your machine
* Define the following terms: shell, terminal, directory, absolute path, relative path
| Linux/Mac | Windows | Description |
| ------------------ | --------------- | -------------------------------------------------------------------------- |
| `pwd` | `cd` | print working directory: shows current location |
| `cd` | `cd`, `chdir` | change directory; returns to the home directory |
| `cd directory` | `cd directory` | change into the specified directory |
| `cd ~` | | \~ means home directory; shortcut to the home directory |
| `cd ..` | `cd ..` | move up one directory |
| `cd -` | | returns to the directory of your previous location |
| `ls` | `dir /w` | list all files in current directory |
| `ls directory` | `dir directory` | list all files in the specified directory |
| `ls -l` | `dir` | list all files in long format: one file per line, with info about the file |
| `ls -a` | `dir /a` | list all files, including hidden files (= filenames that start with .) |
| `ls -ld directory` | | show detailed information about the directory |
| `ls /usr/bin/d*` | `dir d*.*` | list all files starting with d in the `/usr/bin` directory |
#### What is Terminal?
Terminal is an application that gives us a command line interface (or CLI) to interact with the computer. Everything you can do in Finder/Windows Explorer you can do in Terminal. Developers use Terminal because it is usually much faster to use Terminal than a graphical user interface (GUI) such as Finder/Windows Explorer. Although the Terminal interface can seem daunting at first, with a bit of practice, you'll be up to speed in no time!
#### What is a shell? Bash/ZSH
You will also hear the term "shell" when learning about Terminal so it is important to distinguish between these terms. From [Stack Overflow](https://superuser.com/questions/144666/what-is-the-difference-between-shell-console-and-terminal):
> The **shell** is the program which actually processes commands and returns output. Most shells also manage foreground and background processes, command history and command line editing. These features (and many more) are standard in bash, the most common shell in modern linux systems. (We are using `zsh`).
>
> A **terminal** refers to a wrapper program which runs a shell. Decades ago, this was a physical device consisting of little more than a monitor and keyboard. As unix/linux systems added better multiprocessing and windowing systems, this terminal concept was abstracted into software.
If you are using Windows, there is a great tool called [Babun](https://babun.github.io/), which is a shell that you can install and use the same commands as if you were on Mac or Linux. This is not essential, but using it will enable you to more easily follow along with the material.
#### How Terminal is Structured
In Terminal, all files and folders begin at the root directory. The root directory is noted by a `/`. Inside the root directory are essential files/folders that your machine needs, but we do not modify the files and folders in the root directory often. Inside of the root directory, we have a folder called `Users` which contains all of the user accounts on your computer. If you move into the directory for your user account, you will be in the `home` directory, which is denoted by `~`. For example, if your user name on the computer is `eschoppik`, then your home directory would be `/Users/eschoppik`. A synonym for the `/Users/eschoppik` path is `~` when you are logged in as `eschoppik`.
#### Moving Around
The first thing you want to start to understand when using Terminal is how to navigate from folder to folder. One of the most common commands you will be using in Terminal is `cd` which is short for "change directory." In order to change a directory, type `cd` followed by the directory or a path to the directory. If we want to move up a directory we use `cd ..` and if we want to move into a directory we specify the name of the directory we are moving into. For example, if you are in your home directory and type `cd Desktop`, you should move into your Desktop directory.
We just mentioned that you can type `cd` followed by a directory or path. But what is a path? Let's learn some more vocabulary:
#### Absolute Paths vs Relative Paths
A path is simply the way to reach a file or folder; it's like an address for the file or folder you're trying to reach. When we specify a path starting from the root directory `/`, we call that an absolute path. For example, if I am currently in the `~` home directory and I would like to change directories into my Desktop folder, I can do that in two of the following ways:
1. `cd Desktop` - relative to where I am currently
2. `cd /Users/eschoppik/Desktop` - absolute, starting from the root (first `/`, then `Users`, then `eschoppik`, then `Desktop`)
**Questions to Answer**
* What is the difference between `/` and `~`? What do we call each of these directories?
* What command do we use to change directories?
* What is the difference between an absolute and relative path?
### { Working with Files and Folders. }
#### Objectives
By the end of this chapter, you should be able to:
* Create files and folders in Terminal using `mkdir` and `touch`
* Move files and folders in Terminal using `mv`
* Copy files and folders in Terminal using `cp`
* Remove files and folders in Terminal using `rm` and `rmdir`
* Explain what a flag is in Terminal
* Explain what the following commands do: `whoami`, `pwd`, `cat`, `echo`, `less`, `open`
| Linux/Mac | Windows | Description |
| --------- | ----------------------- | ------------------------------------------------- |
| `cp` | `copy` | copy a file from one location to another |
| `mv` | `rename`, `ren`, `move` | moves a file to a new location, or renames a file |
| `rm` | `del` | remove (= delete) a file |
| `mkdir` | `md` | create a new directory |
| `rmdir` | `rd`, `rmdir` | remove a directory |
#### Creating Files And Folders
Now that we have a good understanding of how to change directories and navigate in Terminal, let's see how we can create our own folders and files. To create a folder we use the `mkdir` command (short for "make directory"), followed by the name (or space-separated names) of the folder(s) that we would like to create. So let's head over to our `Desktop` and create a new folder called `first_folder`.
```
cd /Users/$USER/Desktop
mkdir first_folder
```
Whoa...you should be asking yourself, what is that `$USER` thing? It is an environment variable in your shell that keeps track of the current user of the shell. You can also see who `$USER` by typing `echo $USER` or by using the command `whoami`. Try out both methods of checking who the current user is.
As another side note, this tutorial will use absolute paths to navigate, just to make it easier for you to follow along. However, don't feel like you MUST use absolute paths over relative ones.
Now that we made the `first_folder`, how do we change directories into it? If you are thinking of the `cd` command, you're right! So let's `cd /Users/$USER/Desktop/first_folder`. Or, if you are already in your Desktop, you can just `cd first_folder`.
We just mentioned "if you are already in your Desktop." How do you know which directory you are in if you forget? Thankfully, there is a handy command called `pwd` which will display the absolute path and let you know what current directory you are working in. So if you are ever unsure, just type in `pwd` (which is short for *present working directory*).
Now that we are inside our new folder, `first_folder`, let's create a new file. A simple way to create a file is with the `touch` command. The `touch` command simply creates an empty file. Let's create a file called `first_file`: `touch /Users/$USER/Desktop/first_folder/first_file`. Alternatively, if you are currently in the `first_folder` directory, you can simple type `touch first_file`. Now use the `ls` command to verify that your file was created. `ls`, which is short for "list," will list all of the files and folders in your current directory.
#### Displaying Contents Of A File
A very common command to display the contents of a file is the `cat` command. If you type `cat NAME_OF_FILE` you can see the contents of the file easily, right there in Terminal. Try it out on the file you just created, `first_file`. You should see no output after pressing enter. There is no output because `first_file` is empty.
Let's add some text to the file so that we can use `cat`. Type:
`echo "Hello World" > first_file`
The `echo` command simply writes text to the terminal. The `>` is called a redirect. The `>` redirects the output from the command on the left side into the file on the right hand side. We will see more redirects in the next chapter.
Now try using `cat` on the file again. Do you see `Hello World`?
There are other ways of seeing the contents of a file in the terminal. Try using the command `less`: `less first_file`. `less` is a program that displays the contents of a file and allows the user to navigate up and down through the file or search for text in the file. To exit `less`, just press `q`.
#### Opening up a file
If you would like to open up a file, you can use the `open` command. So if we want to see the contents of `first_file` we can do `open first_file`. The `open` command is also very useful if you want to open all the files and folders in a directory (using your operating system's user interface). Try typing in `open .` and see what happens! If you are on Windows, the command to do this is `start NAME_OF_FILE`
#### Moving Files And Folders
Now that you understand how to create files and folders, let's move onto another essential operation: moving and copying folders. To move files and folders we use the `mv` command. Let's try this out!
Head back to the Desktop by typing in `cd ~/Desktop` and let's make a new file called `test.txt` (remember that command? If not - stop reading and go through the previous section again). Now on your Desktop you should have a folder called `first_folder` and a file called `test.txt`. Our goal is to move `test.txt` inside of `first_folder` - let's do that using the `mv` command. First make sure you are in the Desktop (type `pwd` to be sure), type `mv test.txt first_folder/test.txt`, and press enter.
Did it work? You shouldn't see any kind of success message or confirmation from Terminal, but you also should not see an error. This is very common when working with Terminal: you will see error messages if a command is incorrect, but very rarely see a success message. In other words, no news is good news. In this case, to make sure we did the correct thing, let's `cd` into `first_folder` and type in `ls`. We should see `test.txt` inside of `first_folder`.
#### Copying Files and Folders
Sometimes you may want to make a copy of a file or a folder. To copy a file, we use the `cp` command (short for copy). The general syntax looks like this:
```
cp PATH_TO_ORIGINAL_FILE PATH_TO_COPIED_FILE
```
For example, if we wanted to create a copy of `test.txt` and call it `test_copy.txt`, we could enter the following command (assuming we're inside of `first_folder`:
```
cp test.txt test_copy.txt
```
If you list all of the files in `first_folder`, you should now see three text files.
What if you want to copy an entire directory of files? Try moving up a directory from `first_folder`, and then type `cp first_folder first_folder_copy`. Uh oh! You should see an error: `cp: questions_copy is a directory (not copied).`
In order to copy a directory, you need to modify the `cp` command as follows:
```
cp -r first_folder first_folder_copy
```
The `-r` is called a *flag*; you can think of a flag for a command as an option that can be passed to that command. To learn more about the flags that you can pass to `cp`, you can type `man cp` (`man` is short for manual, on Windows this command is `--help`) and use the arrow keys to move up and down. When you're finished, press `q` to quit.
#### Deleting Files And Folders
Alright, enough with all of these files and folders, let's get rid of them. Make sure you are inside the `first_folder` and type `rm test.txt`. Once again, you shouldn't see much of a response from the terminal, so run a quick `ls` to make sure that the file is removed. Now that it is gone... where did it go? The Trash? The answer is it is completely removed from your computer. There is no confirmation or undo so be **VERY** careful when using the `rm` command. After you have removed this file, go ahead and remove the copied file as well. Finally, remove `first_file`. Now that the `first_folder` is empty, let's move up a directory and remove the `first_folder` directory itself.
Here you may run into a problem. If you try to use `rm` on a directory, you will see this message: `rm: first_folder: is a directory`. It turns out that `rm` is for a file, while the command `rmdir` is used to remove (empty) directories. So, let's use the `rmdir` command to remove `first_folder`. Make sure that there is nothing else inside that folder, or else you will see a message that looks like this: `rmdir: first_folder: Directory not empty`.
If there is anything inside the folder, you will have to use `rm -rf first_folder`. Like we saw with `cp`, the `r` and `f` in `-rf` are examples of flags. How can you learn more about the flags for `rm`? Go ahead and remove the `first_folder_copy` directory using `rm -rf`.
**Exercises**
1. Create a file called `name.txt`.
2. Try renaming the file to `rename.txt` using the `mv` command. What does this tell you about the command?
3. Using the `cp` command, make a copy of `rename.txt` and call it `copy.txt`.
4. Remove the file `copy.txt`.
5. Create a folder called `questions`.
6. Change directories to the `questions` folder.
7. Create a file called `first.txt`.
8. Create a file called `second.txt`.
9. Go back a directory and make a copy of the questions folder and call it `questions_copy`.
10. When using `cp -r` what is the `-r` called? What does it do?
11. Delete the original `questions` folder and the copy.
### { Listing Files and Flags. }
#### Objectives
By the end of this chapter, you should be able to:
* Understand what the `ls` command does
* Define flags and describe how the syntax works
* List files using flags
#### Listing Files
As you saw in the previous chapter, one of the most important commands you are going to be using is `ls`, which lists the contents of a directory. If you type `ls` in a directory you will see all sorts of content. For example, typing `ls` in your home directory will show you all of the files and folders inside of that directory. Typically your home directory contains folders such as `Desktop`, `Documents`, `Downloads`, `Music`, `Pictures`, etc.
Sometimes the default `ls` command does not give us all the information we want. In such cases, we'll need to add some flags to get more details.
#### Flags
In the previous chapter, we saw how flags could be used to modify the behavior of `cp` and `rm`. Flags can change and even enhance commands and are added using a `-` after the command. Flags are usually represented by single uppercase and lowercase letters. With the `ls` command, we can pass in the `-a` flag to list "all" files (including hidden files and folders). If we want the `ls` command to give us more information about each file, we can pass in the `-l` flag. To combine flags we can just use one `-` and pass in each flag. So the command to use `ls` and show all files and more detailed information about each one would be `ls -la`.
Using flags for `ls` will be essential when working with permissions as well as when you start working with `git`. We will also see many other terminal commands which accept flags later in this course.
## { Terminal Basics Exercises. }
Write the following terminal commands to perform the following tasks:
#### Part I
1. make a directory called `first`
2. change directory to the `first` folder
3. create a file called `person.txt`
4. change the name of `person.txt` to `another.txt`
5. make a copy of the `another.txt` file and call it `copy.txt`
6. remove the `copy.txt` file
7. make a copy of the `first` folder and call it `second`
8. delete the `second` folder
#### Part II
1. What does the `man` command do? Type in `man rm`. How do you scroll and get out?
2. Look at the `man` page for `ls`. What does the `-l` flag do? What does the `-a` flag do?
3. Type the following command to download and save the contents of google.com: `curl https://www.google.com > google.html`
4. Use `less` to look at the contents of `google.html`.
5. Look at the `man` page for less. Read the section on `/pattern`. Search for the text **hplogo** in the `google.html` file.
6. How do you jump between words in the terminal?
7. How do you get to the end of a line in terminal?
8. How do you move your cursor to the beginning in terminal?
9. How do you delete a word (without pressing backspace multiple times) in terminal?
10. What is the difference between a terminal and shell?
11. What is an absolute path?
12. What is an relative path?
13. What is a flag? Give three examples of flags you have used.
14. What do the `r` and `f` flags do with the `rm` command?
## Intermediate Level
### { Permissions and Links. }
#### Objectives
By the end of this chapter, you should be able to:
* Determine the permissions set for a file or a directory
* Manage and change permissions using `chmod`
* Manage and change users and groups using `chown` and `chgrp`
* Explain what `root` is, and the relationship between `root` and `sudo`
* Create links in the file system using the `ln` command
* Explain the difference between a hard and a symbolic link
#### Introduction
When you're working in Terminal, you may sometimes find that you're not allowed to do things you want to do. Maybe you're trying to install something, or move a file from one directory to another, and you get an error telling you something along the lines of "permission denied." These sorts of permissions errors are extremely common, so understanding how to deal with them is important. That's what we'll learn how to in this chapter.
#### Users and Groups
Before you learn about permissions, you first need to understand users and groups. Let's take a look at an example. Head to your home directory and list everything using the `ls -lah` command. (Not sure what the `h` flag does? Check the manual!)
The output you get might look something like this:
The details of these files aren't important. What you should see is a bunch of rows of output, one row for each file or directory. Let's figure out what all of this actually means. For instance, here is the line for the `.bashrc` file from the above screen shot:
`-rwxr-xr-x 1 eschoppik staff 67B Aug 29 2014 .bashrc`
The third column specifies the username of the user that owns the file. In this case, `eschoppik` is the owner of the file. The fourth column specifies the name of the group associated with the file. In this case the group `staff` is associated with the file.
In most Mac systems, users are also members of the `staff` group. To see which groups you are a member of, type the `groups` command in Terminal. The `staff` group will likely be one of the many groups you are in. As we will see next, permissions can be set for the owner of the file, a user that is in a group associated with the file, or a user that is neither the owner nor a member of the associated group.
#### Permissions
Let's take a look at that `.bashrc` line again:
`-rwxr-xr-x 1 eschoppik staff 67B Aug 29 2014 .bashrc`
We've already talked about the third and fourth columns in this output. Now let's talk about the first column. The `-rwxr-xr-x` refers to *permissions* of the `.bashrc` file. Each character of the permissions string, `-rwxr-xr-x` describes something about the file's permisisons. But what are permissions? A file's permissions is a set of rules that describes which operations a user can or cannot perform on a file or folder. There are 3 types of operations that can be allowed or not allowed:
* `r` - reading the file
* `w` - writing to the file
* `x` - executing the file (we will go into this in more detail soon)
You may be asking at this point, why is the permissions string so long if there are only 3 operations that can be specified? Well, a permissions string describes different types of users that can or cannot perform read, write and execute operations. You may be one of 3 different types of users:
1. The owner of the file.
2. Not the owner, but a member of a group associated with the file.
3. Other. Not an owner and not in a group that is associated with the file
So a permissions string specifies the permissions for all 3 types of users plus an extra character to specify the type (file, folder, etc).
Here is how the above permissions string breaks down:
In other words, this string says that `.bashrc` is a file, that the owner of the file can read, write, and execute, users in the group can only read and execute, and other users can only read and execute as well.
#### Changing Permissions
To change the permissions of a file we use the `chmod` command. For each set of permissions (owner, group, everyone) we can assign a number from 0 to 7. This is called **octal** (base-8) notation. Here's a table that illustrates what each number means.
| Number | Permission | `rwx` (display in terminal) |
| ------ | ----------------------- | --------------------------- |
| 0 | none | `---` |
| 1 | execute | `--x` |
| 2 | write only | `-w-` |
| 3 | write and execute | `-wx` |
| 4 | read only | `r--` |
| 5 | read and execute | `r-x` |
| 6 | read and write | `rw-` |
| 7 | read, write and execute | `rwx` |
So if we want to change a file so that only the owner and group can read, write, and execute, we would type `chmod 770 somefile.txt`.
If you'd like to be a bit more specific, you can also set permissions using what's called **symbolic** notation. Here's an example of what that looks like:
```
chmod ug+rwx,o-rwx hi.txt
```
This is saying "add read, write, and execute permissions to the **u**ser and the **g**roup, and remove read, write, and execute permissions from **o**ther." While a bit more verbose, it's also a little more descriptive. To see more examples of symbolic notation, check out [this](https://askubuntu.com/questions/518259/understanding-chmod-symbolic-notation-and-use-of-octal) article.
If we want to change permissions for a folder, we need to add the `-R` flag: `chmod -R 755 some_folder`.
You can read more about `chmod` [here](https://en.wikipedia.org/wiki/Chmod).
#### Executable Files and Folders
Now let's talk a little bit more about what the `x` (executable) means for a file or a folder's permissions. If you have executable permissions on a folder, it means that you can cd into it. See what happens with the following commands:
```
mkdir test_folder
cd test_folder
cd ..
chmod 666 test_folder
cd test_folder
```
You should see an error saying permission denied. Add the execute permission back to the folder, and then remove the folder.
Now onto executable files. When a file is executable, it can be run from your shell as if it were a program. Let's first create our file. Type the following in your terminal:
```
echo ls > test.sh
echo pwd >> test.sh
echo pushd . >> test.sh
echo "cd ~" >> test.sh
echo "pwd" >> test.sh
echo popd >> test.sh
cat test.sh
```
The `test.sh` file should look like the following now:
```
ls
pwd
pushd .
cd ~
pwd
popd
```
(Did you notice that our first `echo` command used a single arrow (`>`), while the other commands used two? We'll explore the difference between these two operators in the next chapter!)
Now let's make the file executable and run it. Use chmod to make it executable: `chmod 755 test.sh`. Next, execute the file by providing a path to the file. In our case, the file is in the current directory, so to execute it, we do the following: `./test.sh`. We just made our first executable shell script!
#### chown and chgrp
Now that we have a clearer understanding of users, groups and permissions, let's take a look at the line from `ls -lah` again:
`-rwxr-xr-x 1 eschoppik staff 67B Aug 29 2014 .bashrc`
* The `1` refers to the number of files (this will always be 1 for files)
* `eschoppik` is the "owner"
* `staff` is the group
* `67B` is the size of the file
* `Aug 29 2014` is the last day the file was modified
* `.bashrc` is the name of the file
So what if we don't want `eschoppik` as the owner of the file any longer? Or what if we want a different group to own that file? We can use one of the following commands:
`chown anotheruser:anothergroup .bashrc`
Or if we just want to change the group:
`chgrp anothergroup .zshrc`.
Now let's take a look at this line from the `ls -lah` command:
`drwxr-xr-x 6 root admin 204B Oct 20 2015 ..`
The other file said `eschoppik` for user and `staff` for group, but this one says `root` and `admin`. We can also see that this is a directory because it starts with a `d` before listing the permissions. So what is the `root` user?
#### root user and sudo
The `root` user is a special user on your computer that has the power to do anything it wants. It can change permissions on any file, delete anything it wants, etc. When you see `root` as the owner, and you want to make a change to that file, you have to use a command called `sudo`. The `sudo` command gives you the powers of the `root` user for just one command and will ask you for your password in order to preform the command. Try out commands with sudo. Create a file called `somefile.txt`. Then make the owner the root user:
`sudo chown root somefile.txt`
Now try to delete the file without using sudo. You are not allowed. Look at the permissions. Why is this not allowed?
#### Links
Since we have files and folders located all over our file system, it becomes difficult to identify where many of these are located. Fortunately, we can create a link (also known as an alias) to a file or folder using the `ln` command. The structure looks like this:
`ln path_to_link name_of_link`
There are two kinds of links we can make, hard and symbolic links - let's see how they work!
#### Hard Links
Let's create a file called `learn.txt` in our `Desktop` folder (type in `cd /Users/$USER/Desktop` if you need to get there). We can open up our `learn.txt` file using `open learn.txt` and let's add the text "Learning about links!".
Now let's create a link to this file! We can call our link `first_link`. To do this we use the `ln` command and type `ln learn.txt first_link`. Now if we `cat first_link` we should see the output "Learning about links!".
If we decide to move our `learn.txt` file anywhere we still have a link to it through `first_link`! Pretty awesome!
If we decided to delete our `learn.txt` file, what happens to our hard link? Let's `rm learn.txt` and then `cat first_link`. We still see that we have a link! This might seem strange; shouldn't a link be broken if a file is removed? Not with hard links! You can think of a hard link like a direct copy of a file. If the file is removed, the link still exists.
#### Symbolic Links
We saw that when we remove the original file, any hard links still remain and contain the entire source file. This is usually not what we want, since we usually want a reference to some file and not a direct copy. To create a reference instead of a copy, let's make a symbolic link.
To create a symbolic link, we use the `-s` flag when creating a link. Let's create a new file called `learn_again.txt` and then create a symbolic link using `ln -s learn_again.txt first_sym_link`. If we `cat first_sym_link` we do not get any errors! But if we delete or move `learn_again.txt`, our `first_sym_link` will be broken!
We can also use symbolic links for folders as well, which makes it very useful if we need to access a folder but do not remember the path. However, if your original file/folder path changes or is removed , the symbolic link **will** break!
### { Redirection. }
#### Objectives
By the end of this chapter, you should be able to:
* Explain what redirection is
* Explain the difference between `>`, `>>`, and `<`
* Use redirection to work more effectively in Terminal
#### Redirection
Sometimes instead of simply displaying the output from a command to the terminal, it's useful to take the result output of a command and send it somewhere else. We call this "redirection" and it is denoted by `>>` or `>`. Let's start with a simple example using the `echo` command.
The `echo` command is useful for displaying text to the terminal, but many times it is more useful to take that text and redirect it to a file. In Terminal, type the command `echo Hello World > hello.txt`. Then, using the `cat` command, let's see what we just did by typing `cat hello.txt`. All we did here is take the text "Hello World" and instead of displaying it to the terminal, we sent it to a file called `hello.txt`!
Run the same command again but with slightly different text: `echo Hello Universe > hello.txt`. Now cat the file again. Notice that your new text completely overwrote the old text: you should see that "Hello World" has been replaced by "Hello Universe." In other words, when you use `>`, whatever text you're echoing into the file will completely overwrite any text that might already be in the file.
Maybe this is what you want, but maybe not. What if you're trying to append some text to the end of the file, rather than overwriting the text? In this case, use `>>` instead. Try it out: `echo Hello World >> hello.txt`. Now cat the file. You should see the following:
```
Hello Universe
Hello World
```
One very common use case for redirection is to put small pieces of text in a file. Instead of opening a text editor, typing in some text, saving it and closing the file we can do this all in one step.
#### Redirection with Input
So far we have seen redirection using `>` and `>>`. These arrows indicate redirection with standard output (take something and output it to something else). However, we can also use redirection with input as well using the `<` arrow. Let's use a command called `sort`, which sorts a file alphabetically. Imagine we have a file called `names.txt` with the following names:
```
Bob
Tom
Jim
Amy
```
If we want to sort this file, we can type `sort names.txt` and it will output
```
Amy
Bob
Jim
Tom
```
Now what if we want to take the contents of `names.txt`, redirect that to the `sort` command, and then send *that* output to a file called `sorted.txt`? The redirection will look like this: `sort < names.txt > sorted.txt`. This will now create a new file called `sorted.txt` with the names sorted alphabetically!
This might seem a bit strange, but try typing these commands and see what information you can output and redirect. As we see right now, we are only using the `sort` command, but what would happen if we wanted to use other commands along with sort? We would somehow need to connect each of these commands together. We connect these commands together through something called "pipes."
### { Piping. }
#### Objectives
By the end of this chapter, you should be able to:
* Explain what the `head`, `tail`, `sort`, `uniq`, `wc` and `grep` commands do
* Define what piping is
* Understand use cases for piping
* Use piping to better work in Terminal
#### Piping
At the end of the last chapter, we saw how we could use redirection to combine a couple of commands into one. In that case, in a single line we were able to both sort a text file and output the contents to a new file.
But what if we want to chain even more commands together? This is where piping comes into play. Before we learn about piping, though, let's learn/review a couple other terminal commands.
`head` - display the first lines of a file (using the `-n` flag we can specify the number of lines)
`tail` - display the last lines of a file (using the `-n` flag we can specify the number of lines)
`sort` - sort lines of a text file
`uniq` - removes duplicated lines (your data **must** be sorted for this to work)
`wc` - word, line, character and byte count
Now let's create two files - `first.txt` which contains the text
```
First
Second
Third
```
And `second.txt` which contains:
```
Fourth
Fifth
Sixth
```
If we want to concatenate (join) these two files together, we use the `cat` command:
`cat first.txt second.txt` (make sure the files and commands are separated by a space).
But what happens if we want to concatenate these two files and then find the word count? What if we want to concatenate and then sort it? This is where we need piping! You can think of a pipe as a connection between the output of one command into the input of another command. So once we concatenate two files we then want to send (or pipe) the result of that to another command. We can even combine this with redirection!
To pipe a command we use the `|` character. So if we want to pipe `cat` into `sort` it would look like this:
`cat first.txt second.txt | sort` or `cat first.txt second.txt | sort | head -n 2`
Take a look at this command and try to figure out what it's doing. You'll find a step-by-step answer below.
`cat first.txt second.txt | sort | tail -n 3 | head -n 1`
1. Concatenate the two files first.txt and second.txt
2. Sort the results
3. Find the last 3 lines
4. Find the first line of those last 3 lines
This is how we can find the third from last line in a file (without knowing how many lines the file has).
#### `grep`
Let's examine another useful command called `grep` which is extremely powerful for finding text. On its own it is helpful, but it is quite useful when piped with `cat`. Let's try a simple example with `cat first.txt | grep First` - what do you see?
You should see the word `First` output to the terminal. This is because `grep` searched the file for the text `First` and found a match!
Notice that if `grep` doesn't find a match, it won't output anything. If it finds multiple matches, it will print them all. Try out these commands and see what `grep` returns to you!
```
cat first.txt second.txt | grep Nope
cat first.txt second.txt | grep th
```
Let's look at another example. Imagine you have a file called `petnames.txt`, and inside you have the following list of names:
```
Lassie
Moxie
Whiskey
Fido
Lassie
Moxie
```
We see here there are quite a few duplicates, so let's try to use the `uniq` command to remove these duplicate names. The problem is, when we run `uniq petnames.txt` we get the following
```
Lassie
Moxie
Whiskey
Fido
Lassie
Moxie
```
If we look back at our definition of how the `uniq` command works, we see that our data must be sorted! So how can we first use `sort` on `petnames.txt` then attach the `uniq` command? Piping to the rescue!
`sort petnames.txt | uniq` gives us
```
Fido
Lassie
Moxie
Whiskey
```
This looks great! But this text is just being output to the terminal, what if we want to output this text to a new file called `petnames_sorted.txt`? We can combine piping with redirection and use `sort petnames.txt | uniq > petnames_sorted.txt`. Now if we `cat petnames_sorted.txt` we should see our four unique sorted names!
## { Permissions, Redirection, and Piping Exercise. }
#### Part I (Permissions and links)
Write terminal commands to do the following:
1. Create a file called `restricted.txt`.
2. Change the permissions on the `restricted.txt` file to allow the owner to read and write to the `restricted.txt` file. Do this using the **Octal** Notation.
3. Change the permissions on the `restricted.txt` file to only allow the owner, group and everyone to read and write and execute the `restricted.txt` file. Do this using the **Symbolic** notation.
4. Create a folder called `secret_files`. Inside the `secret_files` folder create a file called `first_secret.txt` and another folder called `classified`. Inside of the `classified` folder create a file called `super_secret.txt`.
5. Change the permissions on the secret\_files to only allow the owner and group to read, write and execute in all the files and folders inside of secret\_files. Do this using the Octal Notation.
6. Create a hard link for the `restricted.txt` called `hard_link`.
7. Create a symbolic link for the `classified` folder called `classified_link`.
#### Part II (Piping and Redirection)
For the following exercises, create a text file called `vegetables.txt` with the following text:
```
Lettuce
Amaranth
Beet
Celery
Kale
Dill
Cabbage
Broccoli
Lettuce
Amaranth
Beet
Spinach
Chard
Broccoli
Cabbage
Dill
```
Write the following terminal commands to do the following
1. Sort `vegetables.txt`.
2. Count the number of lines in `vegetables.txt`.
3. Create a file called vegetables\_sorted.txt which contains all the unique vegetables sorted in ascending order in vegetables.txt (do this without the touch command).
4. Create a file called `last_three.txt` which contains the last three vegetables in the `vegetables.txt` file (do this without the `touch` command).
5. Count the number of lines the word "Broccoli" appears on (using `wc` and `grep`).
## 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 online 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 write next, while you are typing something.
For example, when writing a CSS property, VSC will tell you what values you can assign to this property.
**File tree view**
The reason why we call an IDE *integrated* is that you almost don't need to leave the window when you are write your code. 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**. You can find this view on the left side of your IDE.
**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.
**Enable formatting on save**
To automatically give your code the right format:
* In Visual Studio open the settings file (see )
* Search for `editor format`
* Set `editor.formatOnSave` and `editor.formatOnPaste` to `true`
### { OPTIONAL } Visual Studio Code Extensions For Web Development
Visual studio code offers a wide range of extensions. Here is how to install the extension.
Press **SHIFT+COMMAND (or Windows)+X** or just click on the extension icon of visual studio code. Search for the extension and press install
Here are some visual studio code extensions for web development. The choices of the extension are ones personal opinion.
#### 1: Javascript (ES6) Code Snippets
No need to mention that JavaScript is the core of web development. There are lots of code snippets that we used on a daily basis and this extension helps you by not writing that repetitive code again and again.
It provides JavaScript, TypeScript, Vue, React, and HTML code snippets. This is a must-have extension for web development.
Link:
You can install it by searching the name on the extension section of the visual studio code.
#### 2: CSS Peek
As its name suggests, this extension lets you jump to the CSS code using classes and IDs.
Link:
You can install it by searching the name on the extension section of the visual studio code.
#### 3: Auto Close Tag
This extension automatically adds the closing tag of HTML and XML.
Link:[ https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
You can install it by searching the name on the extension section of the visual studio code.
#### 4: ESLint
ESLint is the linting utility for JavaScript. It checks your code for common errors and lets you know in the editor itself. It’s like a virtual peer who is validating your code while you are writing it.
Link:[ https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
You can install it by searching the name on the extension section of the visual studio code.
Before installing ESLint in visual studio, install it as a global package first. `npm install -g eslint`
#### 5: Prettier – Code formatter
This extension performs the formatting of the JavaScript, CSS, and HTML code.
Link:
You can install it by searching the name on the extension section of the visual studio code.
#### 6: Path Intellisense
Importing code from other files is what everyone does on a daily basis. This extension makes the development time faster by autocompleting file names.
You type the name of the file in statements and it will search and give you suggestions.
Link:
You can install it by searching the name on the extension section of the visual studio code.
#### 7: GitLens
We use Git almost every day of our life. GitLens is the visual studio code plugin to supercharge git capabilities.
With GitLens, it’s so easy to view code authorship, check commit number, view changes between the last commit and existing changes, and so on
Link: \
You can install it by searching the name on the extension section of the visual studio code.
#### 8: Project Manager
Do you work on multiple projects and switch back and forth? I know I do and the project manager has been a savior to manage multiple projects in visual studio code
Link:
You can install it by searching the name on the extension section of the visual studio code.
#### 9: Live Server
Live Server extension provides the live preview of your web application right within the editor.
This is very handy and useful for the front end developers.
Link:[ https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)\
You can install it by searching the name on the extension section of the visual studio code.
#### 10: Debugger for Chrome
This extension brought the powerful chrome debugger right into the visual studio code.
It is very useful for front-end developers to perform the testing and debugging.
Link: \
You can install it by searching the name on the extension section of the visual studio code.
#### 11: Better Comments
This extension helps you to create more human-friendly and easy-to-read comments
Link: \
You can install it by searching the name on the extension section of the visual studio code.
#### 12: Code time
This extension tracks your development time and provides you with useful stats such as how many hours you have code today etc.
It’s pretty useful to keep track and see the progress. This is not strictly for web development only, anyone can use this extension.
Link: \
You can install it by searching the name on the extension section of the visual studio code.
#### 13: Settings Sync
I use a different machine for my work and personal use. I use visual studio code in both machines, however, I don’t want to repeat the same steps to configure the editor every time.
Enters Setting Sync extension. It creates and stores your configuration in Github gist and synchronizes wherever you want. Simple and awesome!
Link: \
You can install it by searching the name on the extension section of the visual studio code.
## **More Resources**
* [Tutorial: Terminal for Beginners!](https://medium.com/@grace.m.nolan/terminal-for-beginners-e492ba10902a)
* [Basic commands tutorial 10 mins](https://youtu.be/vhZLTp6N4XA)
* [Intro to Ubuntu and useful command tutorial 45 mins](https://youtu.be/KSh9-6FIu1w)
It's alright if you get stuck or if something doesn't look right! When that happens, please ask your teachers or classmates for help in Slack, or use the **#support-coding** channel.
{% hint style="info" %}
**Everything below is optional and not a requirement of our course. Students who like to challenge themselves can continue with the Advanced Level.**
{% endhint %}
## Advanced Level - 1 { OPTIONAL }
### { Terminal Environment. }
#### Objectives:
By the end of this chapter, you should be able to:
* Describe what a terminal environment is
* Create and modify terminal environment variables, including the `PATH`
* Save environment variables to a configuration file
#### What is your terminal's environment?
A terminal's environment is a list of settings that can be referenced by programs. To see what your terminal's environment looks like right now, try typing `env` in your terminal. You should see output similar to the following:
```
rvm_bin_path=/Users/tim/.rvm/bin
TERM_PROGRAM=Apple_Terminal
GEM_HOME=/Users/tim/.rvm/gems/ruby-2.3.1
TERM=xterm-256color
SHELL=/bin/bash
CLICOLOR=1
IRBRC=/Users/tim/.rvm/rubies/ruby-2.3.1/.irbrc
TMPDIR=/var/folders/5s/zstwqxy52pl_lq_lr3b5v7nc0000gn/T/
Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.Q7TcyOvK4P/Render
TERM_PROGRAM_VERSION=361.1
OLDPWD=/Users/tim
TERM_SESSION_ID=281162A1-5C58-4285-9A35-AC9306923C34
USER=tim
__CF_USER_TEXT_ENCODING=0x1F5:0x0:0x0
LSCOLORS=GxFxCxDxBxegedabagaced
PATH=/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/tim/.rvm/bin
PWD=/Users/tim/Projects/Rithm/prework
.
.
.
```
Each word on the left side of the equal sign is called an **environment variable**. The value on the right side is the value of the variable.
#### Using environment variables
In the terminal, you can see what value an environment variable has by using `echo`. When referencing an environment variable, you must use the `$` as a prefix. In other words, to print the value for the environment variable `PWD`, the command would be:
```
echo $PWD
```
Try that in your terminal. You should get the same output as the output for the command `pwd`.
#### Creating environment variables
Now let's make our own environment variable. Go to your home directory and create a folder called `Projects`. Now let's make an environment variable called `PROJDIR` (environment variables are usually all caps) that keeps track of the path to your projects directory. To create an environment variable, you can use the `export` command. On a Mac or Linux machine, the command would be:
```
export PROJDIR=/Users/tim/Projects
```
Notice that the `$` isn't being used in this case. When you define an environment variable, you do not use the `$`. Only use the `$` when you want to reference the value of the variable.
Now that you've created the environment variable, let's use it:
```
cd ~
cd $PROJDIR
```
You should now be in your project directory.
So now we have a great way of saving a useful variable in our terminal's environment, but we have a problem. Every time you close your terminal window, the environmet variables get reset, so the `PROJDIR` environment variable will be lost! How do we fix that?
#### Saving environment variables
Now that we know how to create environment variables, we need to learn how to save them so that every time we open a new terminal window, we have those environment variables set. To save environment variables, you need to modify the shell configuration file in your home directory. This file is different depending on what your default shell is. If you are using oh-my-zsh, then your configuration file will be called `.zshrc`; if you are using bash, then your configuration file will be called `.bash_profile`.
Open the configuration file for your shell, either `.zshrc` or `.bash_profile`. Next, add the following line to your file:
```
export PROJDIR=/Users/$USER/Projects
```
Save the file, quit out of all terminal windows, and then open terminal again. Try executing `echo $PROJDIR`. You should see the path to your projects directory.
We did one other interesting thing here. Rather than using a hard coded path to the projects directory, we used another environment variable to figure out the correct user name. Try typing `echo $USER` in your terminal. You should see your user name. The important takeaway here is that an environment variable can be defined using other environment variables. For example, if we had a `python` folder inside of the `Projects` directory, we may want a variable for that as well. We could definite it like the following way:
```
export PYTHON_PROJ=/Users/$USER/Projects/python
```
Or we could use the `PROJDIR` environment variable that we already have set:
```
export PYTHON_DIR=$PROJDIR/python
```
The only catch is that the line for exporting `PROJDIR` must come before the line using `PROJDIR`. Otherwise, `PROJDIR` will not yet be defined when we use it in the `PYTHON_DIR` definition.
#### The `PATH` environment variable
An important environment variable to know and understand is the `PATH`. Your terminal uses the `PATH` environment variable to find programs to execute. Try the following in a new terminal window:
```
export PATH=
```
Now try using `ls` in the terminal. It doesn't work! Try a few other commands like `man` or `chgrp`. None of them work. That's because commands like `ls` are just programs stored in a file somewhere in your filesystem. The reason we don't normally need to give the full path to the `ls` command when we use it is because `ls` is a file found in one of the folders that are specified on the path.
Open a fresh terminal window. The `ls` command should be working again. Now use the `which` command to see where on the path `ls` is coming from:
```
which ls
```
Typically, the `ls` command is located in the `/bin` directory (though if you're using oh-my-zsh, the command may be aliased to `ls -G`). Let's change our `PATH` environment variable again, but this time, let's assign it to `/bin`:
```
export PATH=/bin
```
Now try to use the ls command. It should still work! That's because `ls` can now be found in one of the folders of the `PATH`, specifically in `/bin`. Other commands still don't work however. The `man` command still isn't working because it is not found on the `PATH`. Let's add a few more directories to the `PATH` in the same terminal window. We want to add `/usr/bin`, `/usr/sbin`, and `/sbin`, but we don't want to rewrite the `PATH` variable completely. Instead, let's add to the `PATH` that already exists. In order to do that, we reference the `PATH` environment variable using the `$` and separate multiple paths using a colon:
```
export PATH=$PATH:/usr/bin:/usr/sbin:/sbin
```
Now if you do `echo $PATH`, you should see the following output:
```
/bin:/usr/bin:/usr/sbin:/sbin
```
And commands like `man` should work. Now that you understand the `PATH`, close the terminal window and open a fresh window, so that your `PATH` will be set up correctly.
### { Processes. }
#### Objectives
By the end of this chapter, you should be able to:
* Define what a process is
* Examine processes that are running on your machine
* Kill a process using the `kill` command
#### What is a process?
A process is a program on your computer that is being run. For example, when you have Google's chrome browser open, that is a process running on your machine. An email application, a terminal window, and even the `ls` command are also processes when they are being executed on your machine.
The nice thing about processes is that the operating system ensures that all of the memory for one process cannot be accessed by another process. In other words, if one process crashes, it should not have any effect on the rest of the system.
But how can you tell which processes are running at any given time? And how can you stop a process from the terminal?
#### `ps`
The `ps` command is a useful tool for seeing which processes are running on your machine. You can execute the command `ps` on its own, but more commonly you'll see the command `ps aux` being used. The `a` indicates that you're interested in all processes, not just process for your current user; `u` ensures that the process owner will be displayed; finally, specifying `x` makes sure that you'll see a list of all active processes, not just those attached to a terminal.
(Note: you may be wondering why the command is `ps aux`, and not `ps -aux`. For some history on the command, check out [this](https://stackoverflow.com/questions/15102576/ps-aux-works-but-ps-aux-doesnt) Stack Overflow question.)
Try typing `ps aux` in your terminal and see what you get. You should see something similar to this:
```
USER PID %CPU %MEM VSZ RSS TT STAT STARTED TIME COMMAND
tim 74874 8.3 1.7 3408348 139912 ?? S 3:34PM 6:39.74 /Applications/Google Chrome.app/Contents/Versions/53.0.2785.116/Google Chrome Helper.app/Contents
tim 74858 6.2 2.8 3224740 233060 ?? S 3:34PM 8:34.62 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
tim 61431 2.5 0.6 2698840 53728 ?? R 9:46AM 0:59.49 /Applications/Utilities/Terminal.app/Contents/MacOS/Terminal
```
Some important columns are `USER`, `PID`, and `COMMAND`. The USER column is the username of the user who executed the process. The PID column is a number that uniquely identifies the process. This PID will be useful very soon when we learn how to stop a process.
#### `kill`
At times you may have a process that for whatever reason is not responsive. In other words, the process continues to execute when you do not want it to. We can stop the process from running by using the `kill` command.
Let's try it out. First, open any file in terminal using the `less` command. The process will continue to run as long as you have not pressed `q` to quit. In a separate terminal window, type the following:
```
ps aux
```
Now scroll through the list until you find a process that is running that has been started by your username and whose command's path ends with less. Once you've identified the process, take note of the PID.
Next, to kill the process, type `kill` and then the PID and hit enter. For example, if your process looks like the following:
```
tim 10011 0.0 0.0 2434948 900 s000 S+ 5:32PM 0:00.00 less readme.md
```
Then your PID is `10011`. So to kill less, your command would be the following:
```
kill 10011
```
After killing the process, you should see your terminal window that was running less go back to a normal terminal prompt.
#### `kill` vs. `kill -9`
Sometimes when you're reading tutorials and a process needs to be killed, you'll see that the command `kill -9` is executed, not `kill`. So what's the difference between these two?
Whenever you try to kill a process, a signal is sent to that process telling it to terminate. By default that signal is the `TERM` signal. However, if a program has crashed or is frozen for some reason, it's possible that it won't pick up on that signal and the process may not terminate. The -9 flag sends a different signal to the process: according to the manual for `kill`, -9 represents the `KILL` signal, which is a "non-catchable, non-ignorable kill." If killing a process doesn't work, try killing with -9 and see if that gets the job done.
For more on `kill` and the different signals you can send, check out [this](https://superuser.com/questions/107543/bash-man-page-kill-pid-vs-kill-9-pid) superuser question.
### { Finding Files and Folders. }
#### Objectives
By the end of this chapter, you should be able to:
* compare and contrast `find` and `grep`
* use `find` to search for files and folders
* use `grep` to search for patterns in a string or text
* define what a *regular expression* is
#### `find`
One of the most useful terminal commands is the `find` command. When you know how to use it well, you can easily find files on your computer without using Spotlight, Alfred or any other GUI. Let's get started by learning how the syntax works.
To find a specific file in your current directory, you can simply type `find` and the name of the file. (If you try to find a folder you will find all of the contents inside as well.) For example, if try typing the following command from your home directory:
```
find Downloads
```
You should see a list of all your Downloads in the terminal.
To find something with a bit more complexity, use the following pattern
1. `find`
2. a filepath
3. an expression (this is where you have the most flexibility)
Let's `cd` into a folder called `views` and try this pattern to find anything with the name `first.txt` inside of the `views` folder:
`find . -name "first.txt"`
Now this is nice if we know exactly the name of the file we are looking for, but many times we need to use wildcard characters including `*`, `?` and `[]`. The difference between these characters is as follows:
`*` - any number of characters\
`?` - one character\
`[]` - any of the characters inside the brackets
Here are some more examples:
* find inside of the `views` folder (assume we are inside the views folder) anything that ends with `.html` => `find . -name "*.html"`
* find inside of the `views` folder (assume we are inside the views folder) anything that ends with a three letter file extension like `.txt` or `.css` => `find . -name "*.???"`
* find inside of the `views` folder (assume we are inside the views folder) anything that starts with the letter `f` `t` or `s` => `find . -name "[fts]*"`
* find inside of the `views` folder anything that has the text `main` somewhere in the filename (this could be the beginning as well) `find . -name "*main*"`
#### `grep`
Another extremely useful tool for finding information that we've seen before is `grep`. While `find` is for files and folders, `grep` is excellent for searching for specific values in a string or in a text file. If you type `grep` on its own, it's not that valuable because you need to make sure you pass a filename and text to it. You can also use `grep` with piping and `cat`.
We have already seen examples using `grep` with `cat` to find words like `cat people.txt | grep Elie` to find if the word Elie exists in the `people.txt` file. Let's use the file below which we will call `names.txt` as an example:
```
Lisa
Mark
Elie
Beth
Tim
Elizabeth
Tom
Matt
Liza
Janey
Jane
Shana
```
Let's add a little more onto our knowledge of `grep` and introduce some flags.
* `-i` for case insensitive search
`grep -i "elie" names.txt` => `Elie`
* `-w` for full word search
`grep -i "beth" names.txt`
```
Beth
Elizabeth
```
`grep -iw "beth" names.txt` => `Beth`
* `-A` display a certain number of lines after
`grep -A 3 "Beth" names.txt`
```
Beth
Tim
Elizabeth
Tom
```
* `-B` display a certain number of lines lines before
`grep -B 3 "Beth" names.txt`
```
Lisa
Mark
Elie
Beth
```
* `-C` display a certain number of lines lines around
`grep -C 3 "Beth" names.txt`
```
Lisa
Mark
Elie
Beth
Tim
Elizabeth
Tom
```
* `-v` invert pattern (you can think of this as anything NOT what you are searching for)
`grep -v "Jane" names.txt`
```
Lisa
Mark
Elie
Beth
Tim
Elizabeth
Tom
Matt
Liza
Shana
```
* `-c` count matches
`grep -c "Jane" names.txt` => `2`
* `-n` show line number
`grep -ni "Jane" names.txt`
```
10:Janey
11:Jane
```
There are **many** more flags with `grep`; you can google around for more or look at `man grep`.
#### Wildcards with `grep`
We previously saw wildcards with `find`, so how can we use them with `grep`? The key is to use *regular expressions*. Regular expressions are used to define patterns in a string of characters, which are then used to search a text for potential matches. Regular expressions are common and quite powerful: you can use them to check whether a user has submitted a properly formatted email address or phone number, for instance.
We will not go in depth with regular expressions here. There are a number of great [interactive references](https://regexr.com/) online. For now, but let's just take a look at a couple examples of the syntax:
`.` - matches any character
**Example:** How many names have a full name that is four characters long?
`grep -wc "...." names.txt` => `7`
`*` - match zero or more of the preceding character or expression.
**Example:** How many names start with a capital T?
`grep -wc "T.*" names.txt` => `2`
`[]` - any specific characters
**Example:** How many names start with a capital L, M, or E?
`grep -wc "[LME].*" names.txt` => `6`
`[^]` - do not match
**Example** How many names **do not** start with a capital T?
`grep -wc "[^T].*" names.txt` => `10`
## { Advanced Terminal - 1 Exercises. }
#### Part I
Answer the following questions:
1. Create an environment variable called `FIRST_NAME` and set it equal to your first name (this does not need to be permanent)
2. Print the `FIRST_NAME` variable
3. Print out the `$PATH` variable
4. What is the `$PATH` variable?
5. Why would you want to create an environment variable?
6. How do you permanently save environment variables?
7. What is a process?
8. How do you list all processes running on your machine?
9. What is a PID?
10. How do you terminate a process?
11. What is the difference between `kill` and `kill -9`?
12. What `grep` flag allows for case insensitive search?
13. What `grep` flag allows for a certain number of lines before the match?
14. What `grep` flag allows for a certain number of lines around the match?
15. What `grep` flag allows for a certain number of lines after the match?
16. What `grep` flag allows for full word search?
17. What `grep` flag shows you the line number of a match?
#### Part II
Write the following terminal commands to do the following (assume that `instructors.txt` is an imaginary file):
1. Find all files inside the `Desktop` folder that have a name of "learn."
2. Find all files inside the `Desktop` folder that start with a "P."
3. Find all files inside the `Desktop` folder that end with `.txt`.
4. Find all files inside the `Desktop/views` folder that have the name `data` somewhere in their filename.
5. Inside of the `instructors.txt` file, output the number of times the word "Elie" appears.
6. Inside of the `instructors.txt` file, list all matches for any full word that starts with a capital "P."
7. Inside of the `instructors.txt` file, list all the line numbers for any full word that starts with a "z" (it should match regardless of upper or lower case).
## Advanced Level - 2 { OPTIONAL }
### { SSH. }
#### Objectives
By the end of this chapter, you should be able to:
* set up an EC2 instance on Amazon
* use the `ssh` command to connect securely to a remote server
* use the `scp` command to copy files to a remote server
#### SSH
SSH, or **S**ecure **Sh**ell, provides a secure channel to access other computers. We commonly use SSH to remotely log in and connect securely to other servers. To practice with SSH we will be setting up our own remote servers using Amazon EC2. This setup can be a bit intimidating, but it's a very valuable skill to know with any kind of development. Let's get started!
#### Setting up an EC2 Instance
As evidenced by the list below, there are a fair number of steps involved in setting up your instance. The links provided also provide a fair amount of context, and help explain the purpose of each of the following steps.
1. Make sure that you have an Amazon Web Services (AWS) account. You can log in / sign up [here](https://docs.aws.amazon.com/) and click on the top right.
2. Create an IAM user [here](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/get-set-up-for-amazon-ec2.html#create-an-iam-user).
3. Create a key pair [here](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/get-set-up-for-amazon-ec2.html#create-a-key-pair)
4. Create a VPC [here](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/get-set-up-for-amazon-ec2.html#create-a-vpc)
5. Create a Security Group [here](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/get-set-up-for-amazon-ec2.html#create-a-base-security-group)
6. Launch your instance [here](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/EC2_GetStarted.html#ec2-launch-instance_linux)
7. Connect to your instance [here](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/EC2_GetStarted.html#ec2-connect-to-instance-linux).
To connect to your instance using SSH you can start [here](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/AccessingInstancesLinux.html).
Before you try to SSH make sure that your instance is running and that the checks have passed. This should involve typing something along the lines of `ssh -i ./me-key-pair-uswest2.pem ec2-user@YOUR_PUBLIC_DNS`
Once you've connected via SSH, you can exit out of the shell by typing `exit`.
#### Securely copying files to the EC2 Instance with scp
To move files to your EC2 instance, we use the `scp` command to securely copy information. We will need our `pem` file that we used before so make sure you know where that is located. The pattern for `scp` looks like this:
`scp -i PATH_TO_YOUR_PEM_FILE FILE_TO_MOVE USERNAME@PUBLIC_DNS`
This command would move the file `move.txt` from my current directory to the `home` directory on my EC2 instance.
`scp -i ./me-key-pair-uswest2.pem move.txt ec2-user@ec2-54-213-7-226.us-west-2.compute.amazonaws.com:/`
#### Terminate your instance
When you are done working on this tutorial - you **MUST** terminate your instance so that it is not still running. This ensures that you will not be charged for anything as well. You can read more about it [here](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/EC2_GetStarted.html#ec2-clean-up-your-instance)
### { Cut, Sed, Awk, and Xargs. }
#### Objectives
By the end of this chapter, you should be able to:
* Understand what the `cut` command does and list some use cases for it
* Understand what the `sed` command does and list some use cases for it
* Understand what the `awk` command does and list some use cases for it
* Understand what the `xargs` command does and list some use cases for it
#### cut
The `cut` command is very useful for separating or delimiting strings and characters. If you need to split apart text files or find certain characters, `cut` is the way to go. Let's see how it works with a few examples in a file called `languages.txt`:
`languages.txt`
```
Java,James
Ruby,Matz
Lisp,John
Bash,Brian
Self,David
```
Here's an example using `cut` to grab the first 4 characters of each line (the `-c` flag indicates that the numerical range coming after the flag is referencing characters, not bytes):
`cut -c 1-4 languages.txt`
```
Java
Ruby
Lisp
Bash
Self
```
Now let's grab the last names, but not by the number of characters. Instead, let's do this by delimiting (splitting) on the comma
`cut -d, -f2 languages.txt`
```
James
Matz
John
Brian
David
```
So what is the `-f2`? `-f` refers to each portion that has been split by the delimeter (`-d`) flag. So if we just want the names we can do
`cut -d, -f1 languages.txt`
```
Java
Ruby
Lisp
Bash
Self
```
This is much better because if we had languages of different character lengths, `cut -c 1-4 languages.txt` would not work!
Next, try to use `cut` to print out just the authors. Then sort them and then return the first two authors!
Here's one solution:
`cut -d, -f2 languages.txt | sort | head -n 2`
#### sed
Sed, or Stream EDitor, is one of the *much* more complex terminal commands, so we will only be going over some simple uses cases. There are many, many things you can do with `sed` so try to follow these examples and push yourself to keep learning!
Sed is commonly used for finding and replacing text, editing text in a file, and printing certain parts of a file (though it can to much more). Let's start by finding and replacing each comma in the `languages.txt` file with a colon.
Here's the command:
`sed 's/,/:/g' languages.txt`
Let's break this down:
`sed` - the command\
`s` - substitute\
`,` - our old value, a comma\
`:` - our new value\
`g` - globally, do this everywhere not just the first match\
`languages.txt` - the file we are working with
Here's what the command should output:
```
Java:James
Ruby:Matz
Lisp:John
Bash:Brian
Self:David
```
Notice that if you `cat languages.txt` after running the above `sed` command, the original file is unchanged. In order to edit the file, we need to use the `i` flag to edit in place. But if you try running the command with the `-i` flag you'll get an error about extra characters. Since we are also specifying additional arguments, we need to use the `-e` flag as well.
`sed -ie 's/,/:/g' languages.txt`
If you run this command, and then `cat languages.txt`, you should see that everything has been replaced!
We are just scratching the surface with `sed`. If you want to learn more about it you can read [this](https://www.tutorialspoint.com/sed/sed_basic_syntax.htm) and [this](http://www.panix.com/~elflord/unix/sed.html)
#### awk
Similar to `sed`, `awk` is an incredibly powerful text processing tool. In fact, AWK itself is actually a language that can pretty much do any kind of text manipulation you can think of. We will briefly cover `awk` and go over a few useful commands you can use with it.
Let's start with the simple command `awk '{print}' languages.txt`. This will simply print out the `languages.txt` file. But what happens if we want to just print out a certain part of the file? We can also use `awk` as a delimiter using the `-F` flag. Let's set `:` to be our delimiter and just print out the first portion delimited using `$1`
`awk -F ':' '{print $1}' languages.txt`
Let's look at another example, using the `history` command. If you type this into the terminal, you should see a list of your recent commands. Let's use `awk` to get a history of just the names of the commands we've used, with no further details. When using `awk`, if the delimiter is an empty space we do not need the `-F` flag. So if we want to find the commands we recently used we can type `history | awk '{print $2}'`.
We can also use `awk` to print out rows and columns. For example, if you type `df -h` into the terminal you'll see a table withs some information on your hard drive (`df` is short for display free desk space). Let's pass the result of this command into `awk`:
```
df -h | awk 'FNR == 2 {print $4}'
```
FNR refers to the record number which is usually a line number. Essentially we're telling `awk` to grab the item in the 2nd row and 4th column of the table, which in this case should be your available disk space.
If you want to read more about `awk`, check out [this](https://www.tutorialspoint.com/awk/) tutorial.
#### xargs
Sometimes you may want to execute the same command for multiple inputs. For instance, maybe you want to search multiple text files for a certain piece of text. This is a case where the `xargs` command can be quite handy. Here are some example use cases for `xargs`; each one runs command for a group of files instead of a single one.
`find . -name *.html | xargs grep "elie"` - look for the text "elie" inside of every single `html` file in the current folder
`ls | xargs wc -l` - counts the total amount of lines for each file in a folder
`find . -name "*" | xargs open` - opens all of the files in the current folder.
`find . -name "*.css" | xargs open` - opens all `css` files in the current folder
`find . -name "*.html | xargs rm` - removes all files that end with `.html`
`ls | xargs -t -I {} mv {} {}.md` - adds a markdown file extension to all files (the `-I` flag replaces occurrences; the `-t` flag causes the command that gets run for each input to be logged to the terminal before it is executed, which can be helpful for debugging).
You can read more about `xargs` [here](http://www.cyberciti.biz/faq/linux-unix-bsd-xargs-construct-argument-lists-utility/)
### { Shell Scripting and Vim. }
#### Objectives
By the end of this chapter, you should be able to:
* write simple shell scripts with arguments
* use `vi` to open and edit files
#### Shell Scripting
So far we have learned how to use terminal commands, but our commands are not dynamic. We know exactly what the filenames are or what we might be searching for. Our commands are also not reusable easily; if the filename changes, we have to write the whole command again. To reduce duplication and perform far more sophisticated commands in the terminal, we can write shell scripts using a language called bash. To get started, let's create a file called `first.sh` and inside place the following
```
echo "Hello World"
```
Now if we try to run `./first.sh` it will tell us `permission denied: ./first.sh`. So we need to make this program executable! Let's change permissions to `755` so that anyone can run this file: `chmod 755 first.sh`. Now we can run `./first.sh`!
Let's make a second script called `second.sh`. Inside of this file, type the following:
```
echo Hello $1
```
What do you think that `$1` represents? Let's first `chmod 755 second.sh` and then run `./second.sh` - we should just see "Hello". Now let's try `./second.sh World` and we should see "Hello World"! What we just did was pass an argument to our script. Using arguments which start with `$1` and continue upward are how we can make more dynamic scripts.
#### Your turn
Write a script called `sum.sh` which accepts two arguments and echoes the sum of the two numbers. You might need to do some research [here](https://stackoverflow.com/questions/6348902/how-can-i-add-numbers-in-a-bash-script).
Here's a solution:
```
echo $(($1+$2))
```
#### More complex scripts
There is much more we can do with shell scripting, including conditional logic, if statements, and much more. But for now, let's try to write some handy scripts to help us with daily tasks. Very commonly we are searching for a process using `ps aux | grep "Something"`. Instead of typing that whole thing, we could make a script that does that for us and passes in an argument. Let's try that out with a script called `process.sh`. It might look something like this.
```
ps aux | grep $1
```
Now this is useful if we want to search for a process! If you would like to use the script frequently, you will want to make sure it is somewhere in your $PATH. You can also remove the `.sh` extension if you are doing this.
#### Vim
Vim is a terminal based text editor. It can be quite intimidating at first, but if you spend the time to learn how to use it, you can become an extremely efficient developer. To open up something in `vi`, simply type `vi NAME_OF_FILE`. Once you are in vim you can exit **without** saving by pressing `escape + : + q`. If that is not working press `escape` + `:` + `q!`. If you want to quit and save a file you can either press `shift + Z + Z` or `escape + : + w + q!`.
When you first get into vim you will be in what is called `visual` mode. This means that your keyboard will be set for navigating and not for inserting characters; if you type letters and do not see anything being output, do not worry! To make insertions, press `i` to enter `insert` mode. Here you can make changes to files and type as you normally would. Just remember, if you want to quit out of a file you have to be in `visual` mode!
You can get more practice by using `vimtutor` - just type `vimtutor` into your terminal and you can get started. Alternatively, if you want a more visual tutorial you can check out [Vim Adventures](https://vim-adventures.com/).
## { Advanced Terminal - 2 Exercises. }
Use the following text file to answer the questions
```
Elie-Schoppik-sushi
Tim-Garcia-gummybears
Janey-Keig-bagels
Colt-Steele-tacos
Matt-Lane-pizza
```
1. Replace all of the `-` with `:` using `sed`
2. Return a file with just the first name and last name separated by a space (you can do this with `cut` and `sed` or just `sed`)
```
1>>>>2
2>>>>3
3>>>>4
4>>>>5
```
1. Using `cut` print out just the numbers 2, 3, 4, 5. Use `xargs` to print them all on 1 line
2. Using `xargs` in the `./Desktop` directory, find all of the files that include the text `Welcome`
3. Write a shell script called `access_file.sh` which accepts one parameter and changes the permissions to `755`
4. Write a shell script called `unaccessible_sh.sh` which accepts one parameter and changes the permissions to `300`
5. Using `sed` write the command to replace all instances of the name "foo" with the string "bar" in a file called `baz.txt`
6. Write the command to only print out all of the `pid`s using `awk`
7. Type in the `df -h` command - it will show you much space you have on your hard drive. Using the `awk` command, print out **only** the first percentage capacity.
# 2 - Git and Github
## Learning Objectives
By the end of this class, you should be able to:
* Explain what Git is, and why it is a useful tool.
* Get a copy of your homework questions onto your computer.
* (To *clone* a repository).
* Save your answers, and send them to our volunteers.
* (To *commit*, *fork* a repository, and *push* changes).
* See and respond to feedback on your homework.
* (To use GitHub's *pull request* workflows, and *push* further changes).
* Explore how a file has changed over time.
* (To use Git's *history log*).
### Get started
We will use Git as our Version Control System (also known as Source Control). Simply put, a version control system takes snapshots of your files and saves them.
> **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](https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control) )
So what is **Git**? Git is one of many Version Control Systems available, and by far [the most popular](http://stackoverflow.com/insights/survey/2015#tech-sourcecontrol).
Do not confuse Git with **GitHub**! GitHub is a very popular website where you can publish and share your code. You upload your code as Git repositories (a type of folder or directory), so that you can share it. This makes it possible to collaborate with other people: everyone is writing code that tracked by Git and is added to the same repository.
During our course, we will be using [GitHub](https://github.com/) 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.
Most software engineers use a tool called Git to organise their code, and collaborate with other people.
Git is a version control tool that is used to keep the history of changes. I - this sets up the remote URL (GitHub)t makes collaboration easier. We'll see many of its uses throughout the course.
Each week, you're going to use Git to get a copy of your homework exercises, to submit your solutions, and to get feedback on your solutions. Today, you're going to learn how to do these things.
[MigraCode's GitHub page >](https://github.com/migracode-barcelona)
If Git is not installed, follow this tutorial from GitHub to [setup Git](https://docs.github.com/en/github/getting-started-with-github/set-up-git#setting-up-git)
Once Git is installed, set your username and email address: `git config --global user.name ` and `git config --global user.email `. Example:
```
git config --global user.name "Mona Lisa"
git config --global user.email email@example.com
```
**Git in the Terminal: most used commands**
* `git init` to be used only ***if it is a new project***, i.e. a project not **cloned** from a repo or a fork
* `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` to be used only ***if it is a new project***
* `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)
The commands `git add .` and `git commit -m "Good explanation of your file changes"` are used to index and save the files in our computer repository, and we will use `git push` to send the changes to GitHub. This is confusing when you read it the first time, so let's draw the flow:
### What problem does Git solve?
Git is a version control tool, used to keep the history of changes, and make collaboration easier. It's used to solve many problems, but today we're going to focus on how it:
* Helps us to share information.
* Enables people to make their own changes to that information, and share it back.
* Allows us to make checkpoints so that we can save our work as we go along.
* Allows us to track how information has changed between each checkpoint, and go back to older versions of our work if we want to see what we tried before, or to undo changes.
* Enables us to try more things, because if they didn't work out, we can always go back to what we had working before, by going back to a checkpoint.
#### Versioning
We use Git to track different versions of files.
Perhaps you've had this experience before...
You've probably in the past saved a document in a file with "draft" in its name, and then another with "version 1" in its name, and eventually one called "final", and then "really final", and then "final after feedback". It can be hard to know what the latest one is, and to track what order the files came in. But we keep these files around, because they were useful, and we may want to check something from them.
Git helps us to avoid this problem. Before we see how Git helps, let's try an exercise:
#### Exercise 1 (10 minutes)
Open these three links - they are different stages of a draft blog post about CodeYourFuture:
* [final](https://codeyourfuture.github.io/git-draft-blog-post-example/final)
* [revised](https://codeyourfuture.github.io/git-draft-blog-post-example/revised)
* [v1](https://codeyourfuture.github.io/git-draft-blog-post-example/v1)
Try to find all of the differences between these three documents. Can you work out which one is the finished one which was meant to go on the website?
You probably found it hard to see all of the differences (some were really small, like adding or removing a comma!), and non-obvious which is the most complete version!
### How does Git help?
Imagine your teacher wanted everyone in the class to answer three questions and to send back the answers. What capabilities would we need in order to be able to do that?
**First**, the teacher needs to be able to write the questions, and **store** them somewhere.
When we're using Git, we write things down in files in a folder (these could be text files, Word documents, images, or really any kind of file). When we save these files, we say we're *committing* them, and we call the folder where we're saving them a *repository* (or *repo* for short).
**Next**, the teacher needs to put the repository somewhere where the learners can get it. We call this *pushing* the repository. The teacher won't send a copy to each learner, but will put one copy somewhere on the Internet, and tell the learners where it is. The place the teachers on this course will be pushing to is a website called [GitHub](https://github.com/), but there are other websites they could push to if they wanted to. This is the difference between Git and GitHub - Git is a way of storing and sharing files, and GitHub is one website where you can use Git.
**Then**, now that the teacher has pushed the questions, each learner needs to be able to **get the questions onto their computer**.
When we're using Git, we call this *cloning* the teacher's repository (because we're making our own copy). After we've cloned the repository, we will have the same folder on our computer as the teacher created, committed, and pushed.
### The Git Cheatsheet
We tend to do the same four or five things in Git over and over again, but it can be easy to forget them. There's a handy reference at [Git Guide](https://syllabus.migracode.org/git) and [Git CheatSheet](https://education.github.com/git-cheat-sheet-education.pdf) to help you remember.
Let's walk through one of the sections together: "I want to get code from a repo onto my computer (Cloning)". It has a video, to show us what we should be doing, and explains each step in the text.
We'll use it in our next exercise:
#### Exercise 2 (15 minutes)
Volunteers from Code Your Future have already pushed an example repository, so you're going to try to clone it from GitHub onto your computer.
Try following the instructions labelled "I want to get code from a repo onto my computer (Cloning)" from the [Git Cheatsheet](https://education.github.com/git-cheat-sheet-education.pdf). The repository we want to clone is `https://github.com/CodeYourFuture/cyf-demo-repo`.
When you've finished the exercise, you should have `file.txt` open in VS Code.
### What did we just do?
Each of you just cloned a repository which CodeYourFuture created onto your computer, and opened up your copy of one of the files. This is the process you're going to follow to get your homework every week.
### Let's do some homework (teacher-led demo)
The file you opened, `file.txt`, has a question in it. We're going to answer the question, and submit it as if it was our homework.
Let's clone our repository to our computer:
```
https://github.com/CodeYourFuture/cyf-demo-repo
```
We can edit the file in VS Code to answer the question, and save it like normal.
After we've saved the file, if we open up GitHub Desktop, something interesting has changed. On the left, it now says "1 changed file", and on the right, it shows us what the change was. Things we've removed get a red background, and things we've added get a green background.
(If you've changed a line, the old version will appear with a red background, and the new version with a green background).
This is a really useful way for us to check over our homework before submitting it. If we've accidentally deleted things, or changed things we didn't mean to, we can notice now, and undo them by editing the file again.
When we're happy with our change, we can press the "Commit to main" button. That tells Git "This change is an interesting change, I want to keep it". You don't need to wait until you've got your answers perfect before committing, in fact it's better to make lots of commits as you work - we'll come back to this in a bit!
This doesn't copy our change to any other computer - it won't go on GitHub - committing is something we just do on our computer.
#### Exercise 3 (10 minutes)
Try doing what your teacher just did:
1. Answer the question in `file.txt` in VS Code and save your changes.
2. Look at the diff in GitHub desktop - does it look as you expect?
3. Make a commit in your local repository.
#### Teacher-led demo continues...
Now, because we committed a change, our copy of the repository is different from CodeYourFuture's copy. GitHub Desktop now gives us a new button: "Push origin" ("origin" is what Git calls "where I cloned this repository from"). If we press it, it will try to send our change to the CodeYourFuture version.
We didn't have this button before, because even though we had changed the files, we hadn't committed any changes. There's an important distinction here: When we save files in VS Code, we store them in the file on our computer, but Git doesn't automatically commit them. It notices the changes (it showed them to us!), and asks us if we want to commit them. Only after we've committed them does it let us push them. We'll talk about when you want to commit later on today.
So, we're happy with our homework, we've committed it, let's try pushing it!
### Forking
GitHub Desktop just gave us a really useful warning, but it uses some words we haven't seen yet!
We just tried to push our changes to CodeYourFuture's copy of this repository. But we're not allowed to do that! Imagine if anyone could just push anything they wanted to our repository! Someone could accidentally delete all of the questions, or add the answers to all of the questions, or turn the HTML homework into a bunch of questions about vegetables!
To avoid this, we use something called a *fork* and something called a *pull request*.
Remember when we cloned the repo, we pasted `https://github.com/CodeYourFuture/cyf-demo-repo` in as the place to clone from? Let's look at that:
This is saying "On GitHub, the user `CodeYourFuture` has a repository called `cyf-demo-repo`, I want that".
GitHub lets you host your own copy of the repository on GitHub too! If your username is `EagerLearner`, can you guess what URL your repository would be at?
That's right, !
This is called a *fork*. It's a copy of the repository, where you're allowed to make changes. So when GitHub Desktop just asked us "Do you want to fork this repository?", what it's really saying is "You're not allowed to make changes to CodeYourFuture's repository, would you like to make your own copy on GitHub where you *are* allowed to make changes, and put your changes there?"
That sounds like exactly what we want to do, so we'll click the "Fork This Repository" button.
Then GitHub asks us whether we want to fork "To contribute to the parent project" (i.e. because we want to work with CodeYourFuture) or "For my own purposes" (i.e. because we want to do our own thing apart from CodeYourFuture). We want to work with CodeYourFuture, so we'll select "To contribute to the parent project" and press Continue.
Now if we press "Push origin", it will copy our changes to our fork on GitHub.
If you forget this, it's in the [cheatsheet](https://education.github.com/git-cheat-sheet-education.pdf)! Check out the "I want to send my code to volunteers (Pushing)" section.
### Making a Pull Request
Now that we've pushed our homework to our fork, we need to tell CodeYourFuture about it, so that the volunteers know to look at it!
We do this with something called a *pull request*. This is a slightly weird name, in the context of homework.
Normally, when people push changes to a fork on GitHub, they're doing so because they want the person who owns the repository to look at the changes, and pull the changes into their repository. For example, this webpage we're reading the syllabus on right now is hosted on GitHub, and if someone spots a typo, they can fix it, push it to their fork, and request for CodeYourFuture to pull their change into CodeYourFuture's version (hence the name a pull request - "requesting to pull in changes").
We call pulling someone's change into a repository "merging" the change, because we're merging what we're pulling into our repo with what we had before.
For submitting homework, every week you're going to create a pull request, and a volunteer will look at it and give you feedback, but we won't be pulling your homework into CodeYourFuture's copy (then the next student would have the answers when they tried to read the questions!). You'll be creating pull requests, but we won't actually merge your changes into the repository.
In GitHub Desktop, if you open the Branch menu, and click "Create Pull Request", it will open your web browser at GitHub, and show you the changes you're about to make a pull request for. This is another great time to check that you're happy with your homework (if you're not, go back to VS Code, make your changes, commit them, push them to origin again, and refresh this page).
If you're happy, press the "Create pull request" button. Fill in the details in the form, so that the volunteers know what they're meant to be reviewing, and press "Create pull request".
Now there's a pull request that volunteers can look at! They can see who made the pull request, and see all the changes you've made.
#### Exercise 4 (15 minutes)
Make yourself a pull request with your change!
1. Try to push your changes, make a fork, and then actually push your changes.
2. Make your first pull request!
If you get stuck, check out the [cheatsheet](https://education.github.com/git-cheat-sheet-education.pdf) :)
#### Exercise 5 (5 minutes)
There's another file in the repository you've cloned, `other-file.txt`.
1. Open it
2. Answer the question in the file
3. Commit
4. and Push
Notice a couple of things are different this time!
It didn't ask you to fork the repository - that's because you already have a fork you're allowed to push to.
You may also notice that if you click the "Create Pull Request" menu item, it brings you to a different page. It doesn't have a "Create Pull Request" button, it has a "View Pull Request" button. This is because if you already have a pull request open, when you push more changes, it will update your existing pull request.
This is useful for responding to feedback you get on your homework. There are ways to open more than one pull request at a time (using something called branches), which we'll learn about in the future, but for now, one should do!
### Getting feedback
When you've made your pull request, our volunteers will be notified. They will look at your changes. When they are done, you will get an email. Here are some of the things they may do:
* Make comments with suggestions, either about a particular bit of code, or about the whole pull request.
* Add labels to the pull request (e.g. marking it as complete, or unfinished).
If they give you suggestions, you should try to implement the suggestions, and push a new commit. If you're confused, struggling, or find them unclear, you can respond to the comment with a comment of your own, or ask on Slack.
### History
One useful features of Git is how it stores your commits. In GitHub Desktop, if you open the History tab, you can see a list of each commit that's been made in the repository, with the oldest at the bottom and the newest at the top.
If you click on one of the commits, you'll see the changes that happened in it. This can be really useful to understand how the repository evolved to how it looks today. It can also help us to find out when bugs were introduced!
You can always see an old version of a file by looking in the Git history, and if you want to get it back, you can just copy and paste it from the history view into your text editor.
#### When to commit, push, and make a pull request
You should commit often! Every time you think you've done something you may want to look at again, you should make a commit.
Let's say you've made a website, and it generally looks about right, but you were thinking of adding some colour, or an animation. Before you do that, make a commit, because then if you break some of the CSS by trying to add an animation, you can always undo it.
Or if you want to try out a few different colours, make a commit for each colour, and then you can easily see what colours you tried out, and compare them.
**Teacher-led demo: Changing the colours**
A volunteer made a small website, which we can find in
They had a few different colour combinations they were trying to choose between. Because they made commits for each choice, we can look at their choices, and try them each out.
If they hadn't made all of those commits, they probably would've forgotten at least one of the colours, and we wouldn't be able to see them now. Maybe they would've lost the perfect colour! Thankfully, we can look in the git history and see each step along the way.
Similarly, you don't need to have finished everything before you push - in fact, it can be better to push lots! If your computer crashes, or you accidentally delete your files, or you want to work on homework on someone else's computer, you can always get back anything that you've pushed to GitHub. So commit often, and push often!
You also don't need to have finished all of your homework in order to make a pull request! If you've been struggling with one question, you can make a pull request and ask for help (you can even link to it on Slack! It will help the volunteers to help you, because they will be able to see exactly the code you're struggling with). Or if you've done most of the homework, but are struggling with a few questions, a volunteer can look at what you've done and help you out - but only if they can see your code!
Commit often, push often, and make pull requests early!
You may notice that your commits all have messages like "Update file.txt", whereas the ones before you started editing have different messages.
Commit messages can be really useful to understand what a change did without having to read the whole thing. Let's try out an exercise to help us understand this:
#### Exercise 6 (10 minutes)
1. Clone (if you forgot how, check the [cheatsheet](https://education.github.com/git-cheat-sheet-education.pdf)
2. Have a read of the file called `README.md`. See if you can find a problem in the file.
3. Look through the history in GitHub Desktop. See if you can work out when and why the problem was introduced.
4. Make a pull request fixing the problem.
#### Exercise 7 (5 minutes)
Remember earlier we looked at three blog posts? They're actually in a repository on GitHub!
Clone the repository and take a look. Can you find all of the differences between them now? Can you tell which was the finished version? How much easier/harder is this than it was without Git?
### Commit messages
If you looked through the history of the Git repository, you may have been able to see where the problem came in just from the commit message, without having to look at the changes that were actually made. If the commit messages were all just "Update file.txt", that would've been much harder!
When we make commits in Git, we try to give clear, helpful messages, describing what changed, and why. (The why is really important! You can always work out *what* changed by reading the change itself, but it's much harder to work out *why* if no one wrote it down!)
There is a convention when using Git to use the following format for commit messages:
```
One sentence summary
Longer explanation of how, the reasons, exceptions, or anything that may be surprising.
This may be many sentences, and keep going for a long time.
```
Try to use this format when making your own commits. GitHub Desktop tries to encourage this by having two boxes above the "Commit to main" button - one which is just one line, and one where you can put lots of lines.
Explaining *why* we're making the change can help people in the future to understand why things look the way they do, and what's important not to change.
### Glossary
We introduced a few new things in this class, and it can be a bit confusing to know which is which:
* **Git** is a system for storing changes to files in commits, and sharing them between different computers. There are also other systems which do this, but Git is the most popular one.
* **GitHub** is a website which will store a copy of your Git repository, and allow you to clone it, and push changes to it. There are also other websites which can do this, but GitHub is the most popular one.
* **GitHub Desktop** is a program made by GitHub to allow you to use Git easily from your computer. Later in the course, we will use other programs to use Git, too.
### **More Resources**
* [Git Cheat Sheet](https://education.github.com/git-cheat-sheet-education.pdf)
* [How does GitHub work? (30min)](https://www.youtube.com/watch?v=E8TXME3bzNs)
* Follow this tutorial to learn the basic Git commands
* Another good resource: Git - the simple guide
* A more detailed tutorial that goes into advanced topics of Git -
* You can also check this visual explanation of different commands and what they do:
* This Glossary has definitions of the terms normally used with Git:
###
# Git and GitHub Practice Session
## Assignment
In this project, we’ll walk through the basic Git workflow that you will use in all your projects.
**Create the Repository**
1. Create a new repository by clicking the button shown in the screenshot below.
**2.** Give your repository the name “git\_test” in the repository name input field, and create the repository by clicking the green “Create repository” button at the bottom of the page.
**3.** This will redirect you to your new repository on GitHub. To copy this repository onto your local machine, select the HTTPS option and copy the line next to it.
**4.** In the command line on your local machine, navigate to where you want to store this project, and then clone your repository on GitHub onto your computer with `git clone` followed by the URL you copied in the last step. The full command should look similar to `git clone https://github.com/USER-NAME/REPOSITORY-NAME.git`.
**Note:** In the image below SSH link is used instead of HTTPS which is not important for us at this point. You can continue with HTTPS link.
**5.** That’s it! You have successfully connected the repository you created on GitHub to your local machine. To test this, you can `cd` into the new **git\_test** folder that was downloaded and then enter `git remote -v` in your command line. This will display the URL of the repository you created in GitHub, which is the remote for your local copy. You may have also noticed the word **origin** at the start of the `git remote -v` output, which is the name of your remote connection. The name “origin” is both the default and the convention for the remote repository, but it could have just as easily been named “party-parrot” or “dancing-banana”. (Don’t worry about the details of origin for now; it will come up again near the end of this tutorial.)
**Use the Git Workflow**
Create a new file in the `git_test` folder called “README.md” with the command `touch README.md`.
Type `git status` in your terminal. In the output, notice that your README.md file is shown in red, which means that this file is not staged.
Type `git add README.md`. This command adds your README.md file to the staging area in Git. Now, type `git status` again. In the output, notice that your file is now shown in green, which means that this file is now in the staging area.
Type `git commit -m "Add README.md"` and then type `git status` once more. The output should now say, “*nothing to commit, working tree clean*”, indicating that your changes have been committed. Don’t worry about the `upstream is gone` message you may see, this is totally normal and only showing because your cloned repository currently has no branches. It will be resolved once you have followed the rest of the steps in this project.
Type `git log` and look at the output. You should see an entry for your “Add README.md” commit. You will also see details on the author who made the commit and the date and time for when the commit was made.
**Add Another File**
Create a new file in the `git_test` folder called `hello_world.txt`. In the terminal, type `git status`, and notice `hello_world.txt` is not staged.
Open README.md in your text editor of choice and add the text “This is (YourUsername)’s first git project!” and then save the file.
Back in your terminal, type `git status`, and notice that README.md is now shown as modified, and not staged or committed. This is because you made a change to it, and it is already a tracked file.
Add README.md to the staging area with `git add README.md`.
Can you guess what `git status` will output now? README.md will be displayed in green text, while hello\_world.txt will still be in red. This means that only README.md has been added to the staging area.
Now, add hello\_world.txt to the staging area with a slightly different command: `git add .`, where the full stop means to add all files **in the current directory** that are not staged. Then, type `git status` once more, and everything should now be in the staging area. *(Note: You can use `git add -A` to add ALL unstaged files to the staging area within the repository)*
Finally, let’s commit all of the files that are in the staging area and add a descriptive commit message `git commit -m "Add hello_world.txt and edit README.md"`. Then, type `git status` once again, which will output “*nothing to commit*”.
Take one last look at your commit history by typing `git log`. You should now see two entries.
**Push Your Work to GitHub**
Finally, let’s upload your work to the GitHub repository you created at the start of this tutorial.
Type `git push origin main`.
Type `git status` one final time. It should output “*nothing to commit, working tree clean*”.
When you reload the repository on GitHub, you should see the README.md and hello\_world.txt files that you just pushed there from your local machine.
### Conclusion
The main take away from the past lessons is how to use Git and GitHub for your projects. You now have this very powerful skill that will help you immensely when we get into the coding projects. You will be able to share your work with others for code reviews and to get help with your code if you’re stuck.
### Extra Practice
Follow the instructions on this [link](https://github.com/Migracode-Barcelona/learn-git) for more practice.
# HTML/CSS
**HTML and CSS are the building blocks of any website and in this module we teach you how to use them well. You will learn how to make responsive, modern websites and it will prepare you for the following modules.**
Below an overview of the week-by-week topics - click on the title to find more details.
{% content-ref url="/pages/-MRec6e6x6aZ3xxMxQh3" %}
[1 - Semantic HTML and CSS](/courses/introduction-3/course-content/html-css/week-1)
{% endcontent-ref %}
{% content-ref url="/pages/-MRecnqgzbvMvorhLEK0" %}
[2 - Responsive Web and Layout](/courses/introduction-3/course-content/html-css/week-2)
{% endcontent-ref %}
{% content-ref url="/pages/-MRed5QUCSaJXXwC47aq" %}
[3 - Bootstrap](/courses/introduction-3/course-content/html-css/week-3)
{% endcontent-ref %}
migracode-bcn.jpg?alt=media\&token=acbac257-6603-4a0a-9281-4c39ec679f92)
# 1 - Semantic HTML and CSS
What you will learn this week:
1. A refresh of HTML syntax and semantics
2. How to use Chrome Developer Tools
3. How is HTML and CSS consumed by the browser
4. A deeper dive into CSS
5. HTML forms
## Part 1 - HTML refresh
### 1.1 HTML Syntax
You're already familiar with HTML code from your application process. If you want to refresh your memory, read this [quick guide to the HTML syntax](http://marksheet.io/html-syntax.html).
#### Exercise (1 minute)
All together, let's review the basic syntax in the following example:
```
Learning HTML
Get to know the HTML basics.
Read Article
```
Which parts are the **Tags** and which parts are the **Attributes**.
### 1.2 HTML Tags
HTML tags are arranged in a hierarchy. This is sometimes called "nesting" tags or creating an HTML "tree". Between the opening `` tag and the closing `` tag there are three other tags. We call these "child" tags, because they have a parent-child relationship.
#### Exercise (5 minutes)
As a group, let's try to name all of the parent and child tags in the following example.
```
Read Article
```
###
### Example HTML/CSS Project
In today's class, we will begin adapting styles on this example website. We'll review some of the HTML/CSS basics you already encountered during your application process and learn some new techniques. By the end of the third lesson, we will have worked together to improve the example site on the left so that it looks like the screenshot on the right.
Next image shows how it is right now:
And this image shows how should be after you complete it:
The example website you'll begin working with is available on this Code Your Future GitHub repository - [Bikes for Refugees](https://github.com/CodeYourFuture/bikes-for-refugees). Fork the repository to your personal account and then clone the repository
#### Exercise (5 minutes)
Spend a few minutes exploring the `.html` and `.css` files for this page. Why don't we put everything in one file?
###
### 1.3 Semantic HTML
When writing HTML code, you can use different tags to describe the content. Is it a navigation menu, a paragraph of text, or an article? By using the correct tag, you help search engines like Google or screen readers for the visually impaired.
> Semantic HTML is the use of HTML markup to reinforce the semantics, or **meaning**, of the information in webpages and web applications rather than merely to define its presentation or look. [Wikipedia](https://en.wikipedia.org/wiki/Semantic_HTML)
We'll cover the following semantic tags:
* ``
* `
{% endhint %}
If you are familiar with MigraCode yet and you're interested in joining the program, please [refer to the main MigraCode Barcelona website](https://migracode.openculturalcenter.org/).
# Code of conduct
## **Safeguarding**
**Whilst working together we’re dedicated to providing a harassment-free community for everyone, regardless of gender or anything to do with it (‘including but not limited to gender identity, history, and expression, non-binary gender, etc), sexual orientation, disability, physical appearance, body size, race, religion, and programming background. We do not tolerate harassment of community participants in any form, and sexual language and imagery is not appropriate for any community activity.**
Our full safeguarding policies AND the methods to report any issues you may face or have observed, can be found in the handbook of the parent organisation of Open Cultural Center.
{% embed url="
2. Within the repository, create a README.md file. This new file will be displayed on your GitHub profile page!
### Step 2: code that README.md file!
Now it's time to be creative! You can use HTML markup to style the file, and just like with HTML, you can insert images and other content. In general, we recommend to create various sections, like LinkedIn does as well. For example, you can add the following sections with \
.png?alt=media&token=2f2d866a-0063-4767-9761-fd73bd6aa9e7)
## Overall Course Content
* HTML/CSS
* Core JavaScript
* Backend development using [NodeJS](https://nodejs.org/)
* Modern front-end development with [React](https://facebook.github.io/react/)
* Databases
We’ll complement the training with workshops on modern software methodologies and job interview practices, etc. A simplified overview of our curriculum can be found [here](https://migracode.openculturalcenter.org/web-development-course/), including other details of our course.
## Our program in one video
{% embed url="