Introduction

Migracode acts as a bridge between the demand for skilled people in the tech sector and people with a migration background who are eager to work in the tech industry. Through free education, we teach HTML/CSS, JavaScript, React, Node JS, Databases and Soft Skills through our 8-month coding bootcamp, to anyone with a migration background and limited access to the labour market.

At MigraCode we believe, as we have always done, that finding professional programmers to deliver our course best prepares our students for professional life by giving them the most up to date knowledge and helping them build a network of developers for when they graduate. That also goes for improving their soft and employability skills: we think that people that work as recruiter or in HR are those who are best suited to prepare our students with the job search and preparations.

Therefore, our project is for 99% powered by volunteers like YOU. That's why we are super happy with your interest in our program and we hope you find this guide useful to start volunteering with us!

Why volunteer with us?

• You will contribute to improving the lives of others

• You will become a better expert of your own craft by teaching

• You will be exposed to different cultures and different ways of thinking & working

• You will become a part of Migracode’s professional network, including tech Meetups, companies, NGO’s and other professionals

Which roles does MigraCode offer?

Broadly seen, there are two categories of volunteering opportunities in MigraCode Barcelona: one for people with a technical/coding background, and one for people with a HR/Training/Recruitment background.

Safety and security

Make sure to read our Code of Conduct, Safeguarding protocols and reporting methods before starting at MigraCode.

How do I start?

Simple. have a look at the different volunteer roles, and for each one you can see how to start with it. In general, all communication and sign-ups go through our Slack workspace, although now and then you will also receive volunteer opportunities by email as a MigraCode volunteer.

Our Slack workspace

These are our main channels that are applicable to our volunteers and where you have access to:

Main Slack channels

• #general General news messages for everyone that is part of MigraCode (students, volunteers, staff)

• #volunteers The channel where we share useful information or any request with all our volunteers - this is not visible to students.

• #0-module-name (i.e. #2-javascript) These are channels about specific modules where instructors can discuss anything related to that specific module and to prepare classes. These are not visible to students.

Student support channels

• Class channels (i.e. #jan2021-1-en) The one we use to share information during the (online) classes - this is also the place to start in case you want to join a class.

• #support-coding This is where students can ask for help with their homework for the web development course. Feel free to reply to any questions you think you can help the student with.

• #support-it This is where students can ask for help with their homework for the IT Support and Security course. Feel free to reply to any questions you think you can help the student with.

To help students directly through Slack in these channels, read more info about the Slack volunteer roles.

Others

• #random Jokes, memes and nice articles or videos!

• #job-offers-senior Here you can find job opportunities selected for senior developers, aimed at our volunteer community (students are not in this channel). Feel free to share opportunities as well.

Some general tips and advice

Our Slack and our classes

As we have many volunteers, it is difficult for us to micro-manage (even though we want to). We therefore promote a proactive and independent attitude. This means that you can enter our Slack whenever you want, and just start replying to student's requests in the different channels by offering your knowledge where needed. You can also join the classes whenever you can and offer a helping hand over there. If you feel lost, please reach out to Vincent or Ali!

Contact with students

As we are only working with adult-students, we don't have specific guidelines how to interact with them - see them as your fellow-colleagues! Still it's important to read our Code of Conduct and Safeguarding protocols, see above.

However, some students may struggle with social interaction due to (for instance) cultural differences, so try to be understanding and always keep in mind some students may have very different backgrounds than yourself. Just be open and always encourage them to be proactive and ask for help if needed!

Feedback & Contributing

Our program, our syllabus and even this guide are under continuous construction: we need your feedback and ideas for improvement! If you have general points, feel free to contact @Vincent van Grondelle on Slack. If it's about technical side of our program, drop a message at @Ali Raza Ashraf on Slack.

Module Introduction

This module covers Terminal or Command line tool and Git GitHub. This module will last two weeks. During the first week we will cover Terminal or Command line tool and We will dedicate second week to Git and GitHub.

Lessons

Module Introduction

This is the first student contact with a development language

In this first module, we use Javascript without a browser, executing .js files from the command line using node.

Check that you have successfully installed NodeJS by ensuring that the following command returns returns a version number e.g. "v13.8.0"

• node -v

Lessons

Class name

What we will learn today?

Online tech coach

Homework Suggestion

Review and practice in class material to make sure you understand all the concepts.

About MigraCode Barcelona

Migracode acts as a bridge between the demand for skilled people in the tech sector and people with a migration background who are eager to work in the tech industry. Founded in 2019, we are cooperating with other code schools in Europe to build a large community of companies and students to foster both labor integration as well as social inclusion.

We believe that everyone deserves the right to follow education, especially those with less opportunities. Therefore we focus on those with a migration background and who have the eagerness to learn, but are often not able to do so.

“Education is the most powerful weapon which you can use to change the world”

Nelson Mandela

Requirements and application procedure

Our course is built on the motivation of our students - without that, they will not be able to join and keep up with our classes and homework. Because of that, we have a strict and quite intense application process for students to join our course. Find all details on our website.

Student profiles

Our students are all people with a migration background, who either don't have equal access to the labour market or whose economic situation doesn't allow them to find new job opportunities. This could also mean they lack previous education, or that their previous education is not valid in Europe. Our group if students is a mix of cultures and nationalities: we work with students coming from all over the world - from Venezuela to Romania, from Syria to Argentina and from Liberia to Morocco.

Our course content

Click on the link to view the information that students also have in .

Course Structure

One MigraCode course lasts 8 months for students. Each course contains coding modules, soft skill trainings and a final project. Each week, students will have to work on MigraCode up to 30 hours. In detail, that means that each student has:

Weekday class

4hs Lecture

During the lecture, the focus is on explaining the weekly materials. Our approach is: learning by doing, so show the coding and then students can be given exercises to fix during the class and to prepare them for homework.

Homework

Up to 20hs

The homework is extremely important for students to really develop themselves, so always emphasise that they should be well-prepared for the Saturday class by making the exercises that are given through Trello.

Weekend class

4hs Practice

At the beginning we would do a recap and check together the homework, after it and with support, they have to do the exercises by their own. The instructor can stop the class to explain a common doubt or solve.

CodeBuddy mentor

CodeWomen volunteer

CodeWomen tech coach

CodeWomen general volunteer

Homework Suggestion

1. From the review and finish all exercises in the folder week-3

2. the changes to your repository in Github

Practice Day (Saturday)

1. Check together, solve doubts and fix the Homework exercises

2. Complete the exercises in the folder week-3

3. the changes to your repository in Github

Feedback

Day 1: Facing challenges

• Conflict management

• Working under pressure

Day 2: Project Management

• Project Management

• Agile Methodologies

• Feature Development

• User Story Development

Homework Suggestion

1. Fork and clone .

2. Complete Steps for development Part 2

Practice Day (Saturday)

Live coding session with students to go over homework project and Q&A session to clear their doubts.

Feedback

Module Introduction

Last Module

In the previous Modules of Javascript (6 weeks) students learned the basics of programming and data types, callbacks as well as DOM manipulation. So students are expected to have sound knowledge of basic Javascript programming.

During this module they will be introduced to asynchronous programming and How to consume an API.

Lessons

Structure

This document is structured in lessons. Each lesson has been thought to be explained in sessions of 1 hour.

Of course depending on the level of the students and their interest it might take longer or shorter. This is not a problem. Take this set of lessons as a guide to help the instructors to split the content in different sessions.

Overview

In this week we will use JavaScript executing node, like the students did in the last module.

Check that you have successfully installed NodeJS by ensuring that the following command returns returns a version number e.g. "v13.8.0"

• node -v

Lesson Resources

Presentations

Module Introduction

Last Module

In the first Module of Javascript (3 weeks) students learned the basics of programming: variables, arrays, conditionals, loops, functions. So will be completely normal if students still don't have a deep knowledge on programming, and perhaps we have to go back to explain one of these concepts.

Notes for Instructors

Students have no previous knowledge of DBMS, however all students have postgresql install in their systems along with pgAdmin4.

Module Introduction

Learning Objectives

By the end of the three lessons & homework, trainees should be able to build a React application:

Day 1: Communication

• Communication Styles (Self-awareness, disk model, including a short test)

Module Introduction

Learning Objectives

Homework Suggestion

Learning Objectives

By the end of this lesson students should be able to

• Explain why databases are needed in Web Development

Homework Suggestion

Overview

This week the students will execute javascript in a browser for the first time, you can execute by using or just by opening the files from a browser

Lesson Outline

In this lesson we cover the following areas:

Google doc

Online classes

At the moment, due to the Covid situation, all our teaching activities happen online through ZOOM. Please find some important information about our online class below:

Cameras

Most students don't like to connect to the camera, but please ask them in a friendly way to still enable them. Some students have good reasons to disable it - we will inform you in advance about this.

Breakout Rooms

In each class on saturday we will create a breakout room with maximum 4 students, so they can work together in the exercises. The supporting instructors can be assigned to a group and the main mentor can switch through them.

Support in the classes

In each class, the following people are present:

• Yogi, Vincent and/or Diana to manage

• The Main Instructor

• One or more supporting instructors

Outside the classes, there are many volunteers to further help students.

Weekly class structure

Lecture Day (Weekday)

1. Introduction to the week's materials

2. Teaching/explaining the materials

3. Doing exercises now and then to practice

4. Give homework to be finished for Saturday class

Practice Day (Saturday)

1. Finish any remaining explanations from the weekday class

2. Check together, solve doubts and fix the Homework exercises

3. List of exercises depends on the week

Class structure

In general, we maintain the following class structure:

• 1.5 hours teaching to start with

• 10 mins break

• then 1 hour teaching

• 15 mins break

Before the class

10 minutes before the class we will share the Zoom link in the class channels (i.e. Jan2020-1). Around 18h all students will join and we will start the class then as well.

At the beginning of the class

1. Migracode Team will manage the first 5 minutes, with an introduction

2. Then we will split the class in 2 groups: Spanish and English students

3. The Main & Supporting Instructors can do a quick introduction (Introduce yourself, explain where you work, etc.)

4. Then the main instructor will lead the class

At the end of the class

The main instructor will explain and copy the Homework in the Trello Board. Our Head of Education will help you with this as well.

Exercises Repositories in Github

All the exercises students should complete during the class, as homework and on saturday, are all inside a GitHub repository that they fork and clone every module. The structure is as follows:

• For each week of the module we have a folder with the week number week-1

• Inside each week folder, we can find 3 folders:

  • InClass: exercises they should complete during the class

Tools that we use

As a mentor you can use the O.S. that you have, or you can use other tools not listed taking into account to not confuse students

• Slack: for main communication with students

• Trello: to find the homework and to manage the final projects

• ZOOM: to be used for the online classes and breakout rooms

• Ubuntu: most students have Ubuntu, but there are some students with Mac or Windows

Know your students

To see the students progress ask for access to the sheet.

Lesson Resources

Presentations

• • Created by Alexandra Yamaui [MigraCode]

• • Created by Alexandra Yamaui [MigraCode]

• • Created by Manchester Volunteers [CodeYourFuture]

Completed exercises

• (InClass + Homework)

  • Created by Diana Dashkovska [MigraCode]

Homework Suggestion

1. From the review and finish all exercises in the folder week-3/InClass

2. Complete all of the exercises in the folder week-3/Homework

3. the changes to your repository in Github

Practice Day (Saturday)

1. Check together, solve doubts and fix the Homework exercises

2. Go to and solve all the katas you didn't finish last week

3. [Optional] Complete the exercises in the folder week-3/Extra

Feedback

Notes for Instructors

Updating data when props change

"Lifecycle" of a component

With Hooks, we don't really talk about the "lifecycle" of a component any more, but this section is intended to show exactly what happens at each step in the code.

Walking through the code like this is sometimes called "playing computer". A step-by-step description has been provided in the syllabus, but this was intended as revision material. It is recommended to keep the code example on the screen and walk through each line together with the students.

To keep students engaged, it can be useful to ask them to predict what the next step does. This also allows you to get feedback on whether a trainee is following or not.

At the end of the "playing computer" ask whether the students have spotted the bug in the logic: the effect is not updating when the prop changes. Therefore the key point to emphasize is that useEffect is not queued when the component re-renders.

ESLint rule for React Hooks

Emphasize that the rule likely knows best, so if it suggests adding a dependency it is recommended to add it.

Homework Suggestion

1. If you haven't already, complete the in-class exercises on your pokedex app

2. Complete all of the lesson 3 of project

3. Try to complete the in the cyf-hotel-react homework

Practice Day (Saturday)

Live coding session with students to go over project lession 3 steps and Q&A session to clear their doubts.

Feedback

Migracode supports migrants refugees and asylum seekers in gaining IT skills, building employability, and finding job and work experience opportunities. In addressing the employability support needs of this group it is important to recognise the specific challenges that come from the identity of ‘refugee’, ‘migrant’ or ‘asylum seeker’.

Employment outcomes for refugees in particular lag behind those of other migrant groups (OECD, 2016). Refugees often face uncertainty and limited opportunities in their country of resettlement (Obschonka, Hahn & Bajwa, 2018). The career counselling that Migracode offers to its graduates should be designed with the contextual challenges of the identity of ‘migrant’ or ‘refugee’ in mind.

Career Adaptability

Career Adaptability is a psychological construct which identifies personal attributes, as well as the interaction between the individual and their environment. It provides a qualitative measure of fitness to adapt to changes in work life (Knasel & Super, 1981). Quantitative studies have correlated CA with coping and positive adjustment in the workplace (Johnston, 2016), and the Migracode Identity Informed Career Counselling Model helps the practitioner to support their client through the 4 dimensions of Career Adaptability, also known as ‘the 4 C’s’:

Psychological Safety

As somebody who is working with people belonging to a potentially vulnerable group, it is important that you are aware of the importance of psychological safety in your interactions, and how to foster a sense of safety and trust. You may do some of this naturally, but it’s good to develop your awareness nonetheless.

Informational Support

There are informational needs that job-seekers or career changers have, and which are particularly difficult to access for people who have recently arrived from other countries, or have limited networks. The unspoken codes relating to how one finds new information is also often another missing piece of the employability skills picture for migrants. The career counselor will need to be a guide, without taking on the actual work of information-finding themselves.

Meaningful Conversations

As a career counselor it is important to keep focused on your clients needs. While the focus of the conversation might wander while you strengthen the relationship and build trust, it is important that you are able to bring the focus of the conversation to your clients needs. Asking questions can help you to do this, and below is a list of questions which demonstrates how questioning can be used to help your client build their Career Adaptability. You can use these questions, or formulate your own. What is important is that you develop your awareness of how your questions influence the outcomes of the conversation.

The table above shows some questions that can help you to find out about your clients needs. They are just suggestions, you can also just come up with your own, of course! Note that there are some needs (above) that you will need to identify without asking directly, such as psychological safety. There are no suggested questions, but there are signs you can look for.

Career problems and competences

In the process of exploring needs and building a relationship, you may sense the existence of a ‘career problem’. Some of the major types of career problem are listed below. You can see which dimension of Career Adaptability they connect to, and most importantly you can see the competence which you can help them develop to overcome the problem. If they seem stuck, but don’t know why, one approach is to ask what is stopping them from demonstrating the relevant competence. So: ‘What is stopping you from planning/exploring?’. At the same time, the career counsellor can ask themselves: ‘Is my client aware/involved/preparing?’

Safeguarding

• Set expectations and boundaries

• Make sure both sides are clear that you are not a counsellor or mental health professional

• Make sure that you know who your safeguarding lead is, and that you can inform them of any safeguarding concerns you may have.

• Make sure that you have read the safeguarding information in the Volunteers Handbook, and know who to bring safeguarding questions and concerns to.

Continuous Improvement

The Migracode team are committed to learning as we go, and improving. Please do bring any feedback you have on the suitability of this career counseling model, whether positive or criticism to the author of the model, Jalal Afhim. You can reach him at: .

During the first class of MigraCode we begin with a presentation which usually lasts more than an hour. After the presentation we take a 20 mins break to allow students freshen up before they jump into the course.

Points to remember:

1. Our students are either refugees or migrants with no previous technical background (except a few).

2. There are always some exceptional students who want to go a step ahead of everyone else and learn more advanced commands.

3. There are two optional sections for these students Advanced Terminal -1 and Advanced Terminal -2.

4. There will always be at least one supporting instructor present in the class.

5. You can divide students in two groups according to their level of knowledge and go through optional material with students who want more challenging exercises.

6. It is very important to take short breaks after each hour of class (usually 10 mins)

7. There will be no homework for the first week except that they need to review inClass material.

Feedback

During the 8-month web development course, students will receive four weeks of Professional Skills trainings. These trainings include many different topics related to discovering their own work personality, preparing them for the labour market, strengthening their emotional intelligence and getting experience with advanced project management tools.

Below you can find a week-by-week overview - click on the topic title to see more details, including the training content:

Day 1: Self-branding and the job search

• (online) Networking

• Personal Branding

• Market Research

• GitHub & Stack Overflow presentation

• LinkedIn and CV

• Motivation letter writing

• Competence Interview Practice

Day 2: Cracking the tech-interview

• Technical Interview Introduction

• Mock interviews

Notes for Instructors

If you are teaching this class in the coming weeks you must instruct your students to complete the instructions below.

Install Postman

Install the software "Postman" for your OS.

If students do not arrive with these steps completed then you will lose a lot of time on your first lesson. You should consider running short mid-week sessions the week before to help students get set up.

Homework Suggestion

1. If you haven't already, complete the in-class exercises.

2. Fork and clone the and finish Level 1 and 2.

Practice Day (Saturday)

Live coding session with students to go over project level 1 and 2 and Q&A session to clear their doubts.

Feedback

Homework Suggestion

1. Fork and clone .

2. Complete Steps for development Part 1

Practice Day (Saturday)

Live coding session with students to go over homework project and Q&A session to clear their doubts.

Feedback

Homework Suggestion

1. If you haven't already, complete the in-class exercises.

2. You should complete all of the tasks in Week 3 of the .

Practice Day (Saturday)

Live coding session with students to go over week 3 of the and Q&A session to clear their doubts.

Feedback

Lesson Outline

In this lesson we cover the following areas:

Get more used to navigate on internet

Main instructor

Lesson Resources

Presentations

Lesson Resources

Lesson Objective

This is an opportunity for any students who are struggling to get another pass at the basics. Even if it seems like some students get it quickly, try not to rush through this section.

Comments and Tips

HTML Syntax

When conducting the parent/child tags exercise, don't forget to point out that the first <p> tag is both a parent and a child.

CSS Selectors

Students may need more or less review depending on how much they remember from their application process. If students are struggling with the basics, have them go through this , starting with the CSS Syntax lesson. Mentors should help guide them through and identify where they're struggling.

Students should set the button background color using the .btn-primary selector, and adjust the white button using the .btn-secondary selector. If they use the .btn selector, they'll effect both buttons. When they do that, use it as a lesson in how Object-Oriented CSS works and how to choose the right selector.

Exercises solutions

Second exercise, the answer will look something like this:

Presentations

• • Created by Birmingham

Important Links

• in the Instructor's Guide

• to copy the homework

Homework Suggestion

1) Finish the Zoo Project

• Finish all the steps of the project (1 Hour)

• Commit and Push all the changes to your Github account

2) Advanced CSS Selectors

• CSS Diner (3 hours): The Flukeout Game online game will help you learn Advanced CSS Selectors.

3) HTML Reading (1 hour)

• Read this page on HTML syntax. It gives you a good overview of how HTML works inside a website.

4) Portfolio Project (3 hours)

• In this repository you will find the Portfolio Project, complete the Step 1

Practice Day (Saturday)

• Check together the result of the Zoo Project and the Portfolio Project (1 hour)

• Solve any doubt about the content

• Split into groups and keep working on the next steps of the Portfolio Project (3 hour)

Feedback

We can always improve thanks to your feedback, you can use this document to send your ideas or suggestions on every week. This document will help us to improve Syllabus and this guide

Notes for Instructors

Handling Events

• Function references vs function calls is a very common source of confusion

  • It is worth recapping again to ensure that students really do understand it

• Passing event handler function references

  • The concept trips up a lot of students - will try to immediately call the function when passing to an event handler e.g. onClick={this.foo()}

• Passing functions as props

  • This concept isn't really that much different from the section above, but passing across components does often confuse students

Re-Rendering Components

• The goal of this section is to demonstrate React re-rendering but without using state

  • i.e. showing that React will call component functions again to get updated JSX after props/state changes

  • Teaching separately allows us to emphasise that setting state has 2 jobs: updating the state and triggering React to re-render

State

• This section takes a bit of a risk - it deliberately shows the wrong way trying to do state, then refactors to fix it

• Before fixing the problem, something to emphasise is the moment when we start using the virtual DOM for the first time

  • When we trigger a manual re-render to ReactDOM.render()

Homework Suggestion

1. If unfinished, complete the in-class exercises on your pokedex app

2. Complete all of the lesson 2 of project

Practice Day (Saturday)

Live coding session with students to go over project lession 2 steps and Q&A session to clear their doubts.

Feedback

Notes for Instructors

• Components - talk about the conceptual idea of components, not just React components

Lesson Resources

Presentations

Lesson Outline

Today let's get focused on spreadsheets.

Spreadsheets

After the lesson the students should know what a spreadsheet is and what are the their key concepts

Setup

Make sure all the laptops are either plugged or with the battery full enough to last for 1 hour at least. Try to set every laptop in the same place as the previous class.

Instructor’s laptop is connected to the projector or big screen.

Do the attendance!

Content

Recap

Do a quick recap of what was explained last day. Get focused on formatting the text again, and undoing changes. And again, make sure they are getting better using track-pad.

Google sheets

What they are?

A spreadsheet (google sheets are a flavor of Spreadsheet as Excel is), is a tool to handle data in a tabular way.

A sheet is composed of rows and columns. And in each intersection of a row and a column there is a cell. And a Cell is where the data is stored.

Moving around the sheet

Before starting adding data, give some time to the students to get used to the sheet format itself.

Show them how to, or better ask them to try to, select a cell (single click) , move to contiguous cells (arrow keys), select more than one cell (press shift and click on several contiguous cells), etc…

Then show them how to change the background color of a cell or group of cells.

Adding data

Now we are ready to start adding data. For instance you can start by creating a very simple table to store the list of students, with their name, surname and age (or any other field that comes to your mind).

4 or 5 students must be more than enough.

Once the table is done, explain again how to highlight the first row (header) by changing background color, centering the text and making it bold.

List of countries in European Union

As they already know how to build a table, now you can ask them to create a list of countries in the European Union. For each country we want to store:

• Name

• Capital

• Population

• Link to wikipedia

So they can start by adding the header of the table. And of course they should search the list of members using google. And once they get the list, they should pick 4 countries and add them to the table.

So once the 4 countries are chosen, they should now search one by one to find Capital and population.

Most likely they will end up in Wikipedia after first search. At this point you can remind them that there are two ways to keep searching all the remaining countries. Google (general search) or inside Wikipedia.

This exercise is going to keep them busy for a while. Try to notice if a student got stuck and guide him or her to the next step.

Merging data

Once everyone is done, ask the to share the data of one of the countries they added to the list with you, and write each one in your own sheet in different rows.

This is just a previous step to explain can be done in a way better way: by sharing the document among us all.

Renaming and adding sheets

Let's start with something easy. Show the students how to rename a sheet and how to add a new one

Sharing same sheet

In order to get all the students working in the same document, ask them to share their emails with you.

Give them access to a new empty google sheet in your own folder.

At this moment explain a bit further what sharing documents means:

By default when a document is added to a folder in Drive, only the owner of the document can access it. But what google drive is really good at is sharing content. So by sharing a specific document or folder, we are making a piece of our file system (Drive) accessible to a group of known users.

We can share documents as read only or in edit mode as well.

Also there are two ways of sharing the document.

• By providing the list of users we want to share the document with

• Or generating a link and sending this link to our contacts

First option is always better and safer. Explain to them why… or as usual, try to push for them to guess the reason.

Editing the document all together

The students should now go to Gmail (remember they can get there with the google apps button), and open the new email which is given them access to the shared file.

Click on the link.

When everyone is in the file, add a header for the list of countries with:

• Name

• Capital

• Population

• Area

Now share your screen and assign every student two rows of the shared sheet (assuming header is in row 2, student A takes rows 3 and 4, student B 5 and 6 and so on).

Ask them to fill the rows with the data they have in their own sheet. Only the first 3 columns, as the Area is new.

While editing the file in their own computer, they will see how things are also changing in your shared screen.

When all the rows are filled up, now ask them to look for the area of each country, but to make it collaborative, each student will search the Area of the countries added by another student (student A takes now rows 5 and 6, student B 7 and 8 and so on)

Cell type

Show them how to set the type of data in a cell. Google sheet itself is setting the type of a cell based on its content. Mainly text and numbers.

But as users we can explicitly let google sheets know what kind of data is stored in a cell:

• Plain text

• Number without decimals

• Number one ore more decimals

• Currency

Functions

Show them now how to add a function to a cell. Type 3 or four number in consecutive cells, from top to bottom. Use easy number:)

And then select the cell at the bottom of last number and start typing the formula in the content box:

Hit enter so that the additions of all the numbers will show.

Of course to show how good is this feature, change the value of one or several numbers for the to see how the SUM gets automatically updated.

Note here that this is a big step for them. At leat the group I was teaching got a bit confused about this crazy thing called Functions.

So might be good spending some time going to the differnt tables, and repeat the steps on their computers step by step.

More Formulas

As said at the end of previous lesson, the students got a bit confused with formulas. So let's start again from scratch.

SUM

Repeat the SUM function by adding several numbers in several contiguous cells, and in the last one add the sum function.

Once done, show them again how changing one of the numbers make the SUM result to change as well.

Now repeat all the steps, but this time select the range of cells with the cursor. Type =SUM( in the function's box, then move the cursor to first cell, click on it, press shift, click on the last cell and hit enter.

Ask them to repeat the steps. Try to check if all of them are doing it, as they might struggle a bit with the combination of track-pad and Shift key.

Now change one of the numbers with a text, and show them how the text is ignored in the result of the sum.

Arithmetic

Add two number 2 one after another in two different columns. In the next column at the right, declare the arithmetic sum function using + operand. Something like =B1+C1

And then keep adding other arithmetic operations like subtract, multiply or divide.

Concatenation

Now, using the shared sheet, ask them to write their name in a cell, and their surname in the next column. Assign a row to each student.

Write also your own name and surname.

Once all the names and surnames are written, concatenate your name and surname using CONCATENATE function.

Exercise - Build a Logical Test in Excel

What it a logical test

Logical tests are everywhere.

• Is my salary higher than my colleague's?

• Is my rent higher than my neighbor's?

• Is the quantity in stock larger now than at the beginning of the month?

• Does a ticket is closed or not?

A logical test is just a comparison between 2 items.

Construction of a logical test

You can create a logical test in a cell WITHOUT using the IF function.

In fact, it is the opposite. A test is used in an IF function.

A test in Excel is very simple.

1. Start your test with the equals sign =.

2. Then add a value or cell reference

3. Then the logical symbol (see below)

4. Then another cell or another value

For instance, write the following formula in a cell to see the result

=C2="Closed"

Logical symbols you can use

To create a test, you can use one of the following symbol

• = equal to

• > greater than

• >= greater than or equal to

• < lower than

Examples of logical tests

On the previous example, we have created a test with the string "Closed". But you can build a test with numerical values or formulas

Example 1: Does the age is greater than 21?

If you want to know if the cell contents are greater than a specific value, like 21, you can write the following test.

=B2>21

Example 2: Compare 2 cells

You can also create the same test but this time, the value 21 is in the cell G4. So, instead of comparing one cell with one value, you can also create a test between 2 cells

=B2>=$G$4

In this example, we must add dollars to block the reference of the cell G4

Example 3: Is the cell empty or not?

Now, if you want to know if a cell is not empty, you will write the following formula

=A2<>""

The 2 double quotes is the code for an empty cell (it's a string with nothing in between)

Many functions return TRUE or FALSE

Excel has a collection of functions that return TRUE or FALSE. These functions start with IS

• ISBLANK

• ISERROR

• ISFORMULA

• ISNA

For instance, a common mistake in Excel is to write the month in letter instead of customize your date format. So, because a date is a number in Excel, we can create this test to check if a cell contents a date or not.

=ISNUMBER(B2)

Function COUNTIF

A basic task with Excel is to count the number of rows for a specific criteria. The function COUNTIF do that easily

Presentation of COUNTIF

The function COUNTIF counts the number of rows for one criteria.

The function requires only two arguments

• The range of cells where is your data

• The value you search (the criterion).

=COUNTIF(Range of cells, criteria of selection)

Example with COUNTIF

In the following document, you have a list of sales.

You want to know how many times you have sold Banana.

To return the number of time you have the name Banana in your list, you have to write the formula like this

=COUNTIF(B3:B12,"Banana")

And the result is

Replace the criteria by a cell reference

Now if instead of typing the name of the data you want to have the reference of a cell where its value = the name you want

For instance, you can use the cell G4 where its value is Banana

=COUNTIF(B3:B12,G4)

Not sensitive case

Don't worry if your criteria hasn't the same case of the data in your table, the function COUNTIF, is not sensitive case.

For instance, in this example, we want to count the number of times we have the word PEACH in uppercase and the result is

Lesson Outline

In this lesson we cover the following areas:

Computer terminology

This includes the different parts of a computer, language around interacting with a

computer and information on screen.

Getting used to Trackpad

Learn how to move the cursor, how to scroll and how to click

Getting on to the internet

Using a browser, searching on Youtube and logging in to email

Setup

Before starting the class make sure all the laptops are on, connected to the internet and either plugged to the power or with battery enough to last for 1 hour.

Computers must all have an account created and the password of such accounts known by the instructor. Best is setting up the same account (name and password) for all the laptops.

Do the attendance!

Content

Introductions

Introduce yourself to the class and have them introduce themselves. Ask them to outline

how much experience they have with computers which will help you to work out the speed

that you will be able to teach at.

Try and error

Just open a browser yourself and type this text. This should take you to .

Read what it says, or even try to get a volunteer to read it for all the class.

This is so important before starting the course itself. The instructor must translate to the students the idea of making errors as the way to improve. They should not be afraid at all of making mistakes during the course but the opposite: not making them means they are not trying to solve a problem and keep learning.

Computer Terminology Dictionary

At the start of the lesson you should give the students pens and paper each to write down

the computer terminology that they learn throughout this lesson. You should encourage them

to write down key words as they learn them in this format.

Introduce them the names of a laptop’s basic parts: Screen, Keyboard and either trackpad (Mac) or Mouse. Trackpad to us.

Open the Desktop

Ask usestudents to login into the computers. Share passwords(s) with them.

Note here that if they are using a trackpad (Mac) it might be difficult for them to do a ‘click’ once the password is written. Tell them to ‘hard push’ the bottom left corner of the trackpad.

Once they all are logged in explain them the different parts of a Desktop:

For a Mac

Now ask them to move the cursor over the desktop and click on the browser (Chrome) Incon.

Distribute a printed copy of this document to the users, and explain one by one all the steps explained on it. Share your screen to all of them (with a projector or big screen) and make sure that everyone is doing all the steps. Be especially careful with the buttons, left and right click, as I’ve noticed that some of them seem to be afraid of clicking ‘hard’ the trackpad.

Of course at this point scrolling up and down can not be explained. We can work on this in the next section when the users start using the browser.

Surfing the internet

Ask the users to open google chrome. At this stage of the course, a browser is nothing else than an open window to the internet.

Now ask them to navigate to youtube and to search for a video they like.

Explain to them what's the difference between searching in google and searching inside youtube.

Also while the students are on youtube is a good moment to practice the scroll up and down.

Open a new tab

Once they get how scrolling up and down works, ask them to open a new tab. Instead of directly showing how to do it, ask a student to guess how we open a new window to the internet.

Show them clearly where the + symbol can be found.

Practice Day Saturday

We will do the practice assignment provided on page during Saturday's session of second week. There are additional practice projects mentioned at the end of the page. You can find the practice section on MigraCode syllabus website under Introduction section or follow this .

Lesson Outline

In this lesson we cover the following areas:

Mail

There are many things to do as volunteer at MigraCode, and depending on your own professional profile, there is always a way to help us and our students! Have a look at the overview below and click on a role to find out more and how to start.

Teach coding or soft skills, or help with the final projects

Mentor/coach students or help with CodeWomen

Support students through Slack with HR or tech topics

Background

To start the Migracode course, students have to complete an online course on the basics of programming (HTML & CSS). You can find it here.

According to what they learnt on the online course, they created a simple website in CodePen following this instructions:

• Show everything you’ve learnt in the online course Use HTML and CSS.

• Be about yourself, a hobby or anything you like

Overview

This outline provides tips to help mentors guide students to the best answers or outcomes for the lesson topics and exercises.

Open-source HTML/CSS Frameworks

Lesson Outline

Today we are getting focused on building presentations using slides.

Google slides

After the lesson students should get a basic understanding what google slides is, and they should be also able to build a basic presentation on their own.

Content

Recap

As usual spend around 10 minutes doing a quick recap of previous day. Hans on recap for the students to do some arithmetic functions in google sheets for instance.

Slides

What is it

Explain them what Google Slides is for. A presentation is a combination of short texts and images to catch the attentions of the attendance and set the context. But compared to google docs where all the content is in the own document, slides is more a support tool for the speaker. A presentation is a dynamic session where the speaker explains every slide, and listens to possible question from the attendants.

How to Create a Blank Presentation

Now that you have a Google account, it’s time to create your first presentation. Head over to and place the cursor on the multicolored “+” icon in the bottom-right corner.

The + turns into a black pencil icon; click it.

Pro Tip: Type slides.new into the address bar from any browser and hit Enter to automatically create and open a new blank document.

How to Import a Microsoft PowerPoint Presentation

When you import a PowerPoint presentation, you can use either Google Slides or to upload your files. Both methods let you drag and drop a file from your computer directly into the web browser for easy uploads. Your Drive houses all of your uploaded files, but—for the sake of convenience—when you go to the Slides homepage, it only shows you presentation-type files.

From the Slides homepage, click the folder icon in the top right, and then click the “Upload” tab. Now, drag and drop any files you want to upload directly into this window.

Once the file uploads, Slides opens it automatically, and it’s ready for you to edit, share, or collaborate.

To open a PowerPoint presentation that you want to edit, click the filename with the “P” next to it from your Google Slides homepage.

Click to either view the PowerPoint file or edit it in Slides.

After you’ve finished editing your file, you can download and export your presentation back into a Microsoft PowerPoint format. Just go to File > Download As, and then click the “Microsoft PowerPoint” option.

If you’d rather download your presentation as a PDF, ODP, JPEG, TXT, etc., you can do that here, as well.

Delete a Text Box in Googles Slides

First, go ahead and open the Google Slides presentation and navigate to the slide that contains the text box you want to delete. Select the text box by clicking it with your mouse. If you want to select multiple text boxes at once, hold the Ctrl key (Command on Mac) while you click the text boxes. The outside of the text box turns blue when selected.

Once selected, simply press the Backspace key (or Delete on Mac) to remove the text box. Or, right-click the selected text box and then click “Delete” in the context menu.

You can also click “Edit” from the menu bar, and then choose “Delete” from the drop-down menu.

Regardless of which method you choose, the text box will be removed. Repeat this as many times as necessary.

Quickly Undo the Text Box Deletion

If you have several text boxes you need to remove from the presentation, you may accidentally delete the wrong one. The good news is you don’t have to redo everything that was in the text box—you can just undo its deletion.

To undo the text box deletion, just press Ctrl+Z (Command+Z on Mac). You can also click “Edit” from the menu bar and then choose “Undo” at the top of the drop-down menu.

This undoes the previous command, so if you deleted the text box 20 steps ago, you’d need to use this shortcut 20 times. If you accidentally delete a text box that you need, it’s important you bring it back before continuing on with other tasks.

So that’s all there is to deleting (and bringing back) text boxes. You’ll find yourself using this feature quite often as you continue using Google Slides. Sprucing up your presentation is key to making it successful, so don’t feel bad getting rid of those unnecessary distractions.

How to Check Your Spelling in Google Slides

Now that you have a few presentations, it’s time to make sure your spelling and grammar are correct. Slides is equipped with a spellchecker. If you misspell something, it underlines the error with a squiggly line and prompts you to make a change.

This should be on by default, but you can make sure in Tools > Spelling > Underline Errors.

To see spelling corrections and suggestions, right-click the word with the line underneath. Alternatively, press Ctrl+Alt+X (Windows) or Command+Alt+X (Mac) to open the Spell Check and Grammar tool.

Along with a spellchecker, Google Slides comes loaded with a built-in dictionary and thesaurus. To use them, highlight a word, right-click it, and then click “Define [word].”

How to Wrap Text in Google Slides Presentations

To get started, open your Google Slides presentation and then navigate to the slide that contains the image and text you’ll be working with. If you haven’t already inserted your image, click Insert > Image, and then choose the location of the photo. If you don’t already have text in your slide, you can add a text box via Insert > Text box.

When everything is on the slide, it may look something like this:

The issue is that all of the text to the right of the image is in a single text box. In this case, you won’t be able to put the last paragraph of text under the image, giving it the illusion of text wrapping, while it’s still in that same text box. The solution here is to simply add a new text box, copy and paste the bottom paragraph in the new text box, and then position it so that it has the appearance of wrapping around the image.

To copy the text to your clipboard, click and drag your cursor over the text to select it, and then press Ctrl+C (Command+C on Mac). Text is highlighted in blue when selected.

Next, insert a new text box by clicking “Insert” in the menu bar and clicking “Text Box” in the drop-down menu.

Your cursor will turn into crosshairs once selected. Draw the text box on the slide by clicking and dragging your cursor.

Next, press Ctrl+V (Command+V on Mac) to paste the text. Be sure to delete the text you copied and pasted over from the other text box.

Now you may have something that looks like this:

The next step is to adjust the bottom text box to align with both the left side of the image and the right side of the right text box. Click the text box to select it, and then click and drag the handles to adjust it.

After some fine-tuning, you’ll be able to make your text wrap around the image, just as if you were using a built-in tool.

How Inserting Audio in Google Slides Works

Though a seemingly simple feature, inserting audio in Google Slides hasn’t always been an option. Previously, the only way to insert audio in your Google Slides presentation was by inserting a video or linking to a site like Spotify—just inserting the audio file alone wasn’t possible. Thankfully, now you can.

The caveat here is you can’t upload the files directly from your local machine. You can only upload them from Google Drive. So unlike PowerPoint where you can record your audio directly in the application, you’ll need to record your audio separately for Google Slides, upload the audio to Google Drive, and then add it to your presentation from there.

This obviously isn’t limited to audio recordings. As long as the audio files are MP3 or WAV, you can upload any type of audio you like, including music.

Uploading Audio to Google Drive

If you don’t already have your audio file uploaded to Google Drive, head over to your and click the “New” button in the top-left corner of the window.

Next, click “File Upload” in the menu that appears.

File Explorer (or Finder on Mac) will open. Locate and select the file you want to upload and then click “Open.”

How to Import Audio to Google Slides

Once the audio file is uploaded, open your presentation that you’d like to add the audio to, click “Insert” in the menu bar, and then click “Audio.”

The “Insert Audio” window will appear. In the “My Drive” tab, select the file you’d like to upload by clicking it.

Next, click the blue “Select” button in the bottom-left corner of the window.

A speaker icon in a grey circle will appear on the slide. You can resize the icon by clicking and dragging the handles that appear when selected. You can also rearrange the position of the icon by clicking and dragging it to the new location.

Underneath the icon, you’ll find the play/pause and volume options.

You can also choose how and when the audio plays during the presentation. When you click the icon, the “Format Options” pane appears on the right-hand side of the window. You’ll automatically be in the “Audio Playback” group.

Under “Start Playing,” you can decide if you want the audio to play when you click the audio icon or if you want it to play automatically when you make it to the slide.

You can also pre-set the volume of the audio during the presentation. Click and drag the slider under “Volume When Presenting” to adjust it.

Underneath the slider, you’ll see these three options:

• Hide Icon When Presenting – This option, as the name implies, hides the icon when you’re presenting. This option is only available if you selected the option for the audio to start playing automatically.

• Loop Audio – Once your audio reaches the end, it will start over. This is ideal for background music during a wedding or graduation ceremony.

• Stop on Slide Change – Once you move to the next slide, the audio will end.

That’s all there is to it. Adjust the playback options to fit the atmosphere of your presentation.

How to Collaborate on Presentations

One of the best features of Google Slides is its ability to generate a shareable link. Anyone you share the link with can view, suggest edits to, or directly edit the presentation. This eliminates the hassle of sending a file back and forth between collaborators. Each person has her own text entry cursor to use on her computer.

To do this, click the orange “Share” button in the file you want to share. Next, choose how and with whom you want to send a link to the file. You can type email addresses or click “Get Shareable Link” in the top corner to hand out the invitation yourself.

From the drop-down menu, you can select one of these options for what other users can do:

• Off: Sharing is disabled. If you’ve previously shared a link with others, it will no longer work and revokes any permissions they once had.

• Anyone with the link can edit: Gives the shared users full read/write access. They still can’t delete it from your Drive, though—this is just for the contents of the file.

• Anyone with the link can comment: Allows shared users to leave comments which is handy for team projects.

You can do a lot more with these shareable links, as they also work with other Drive files and on mobile.

How to See All Recent Changes to a Presentation

When you share documents with others, it’s difficult to keep track of all the small changes that happen if you’re not present. For that, there’s revision history. Google keeps track of all the changes that occur in a document and groups them into periods to reduce clutter. You can even revert a file to any of the previous versions listed in the history with a click of your mouse.

You can view a list of all recent changes by clicking File > Version History > See Version History. Alternatively, you can press Ctrl+Alt+Shift+H (Command+Option+Shift+H on Mac).

How to Link to a Specific Slide

You can also share a link to a specific slide in your presentation with a friend or coworker, without having to mention which one you’re referencing. When someone clicks the link and the presentation loads, it jumps directly to the slide you’re referencing. You do have to enable file sharing before you can link to a specific slide in your presentation, though.

Because each slide has a unique URL, all you have to do to link to one is click it in the left pane, and then copy the URL from the address bar.

How to Insert Special Characters into a Slide

Google Slides also has a character insertion tool. This allows you to insert special characters into your presentation without having to remember any Alt-codes. There are tons of symbols, characters, languages, and so much more. So, whether you want an arrow, different language scripts, or if you just want a few silly emojis to spruce up your presentation, Google Slides makes it easy to include them.

To open the character insertion tool, click “Insert,” and then click “Special Characters.”

From here, you can manually search for specific characters with the drop-down menus.

Use the search bar to find a specific character or emoji.

You can also use your drawing skills to search.

How to Use Google Slides Offline

What happens if you need to access Google Slides but don’t have an internet connection? Although Slides is a web-based product, that doesn’t mean you can’t use it offline. Any changes you make to the file offline will update the next time you connect to the internet. First, for Chrome.

To enable a presentation for offline use, go to the and, in the top-left corner, click the Hamburger menu > Settings. Once here, toggle “Offline” to the On position, and then click “OK.”

To save storage space on your local machine, Google only downloads and makes the most recently accessed files available offline. To manually enable a file, click the three dots icon, and then toggle “Available Offline” to On.

All the Best Google Slides Keyboard Shortcuts

General Program Actions

These shortcuts make it easier to do everything from copy text to undo a mistake:

• Ctrl+M (Windows/Chrome OS) or Cmd+M (macOS): Make new slide.

• Ctrl+D (Windows/Chrome OS) or Cmd+D (macOS): Duplicate the slide currently selected in the filmstrip.

• Ctrl+C (Windows/Chrome OS) or Cmd+C (macOS): Copy the selected text or graphics to the Clipboard.

Format Text

Google Slides has heaps of shortcuts that allow you to format the text in each slide. These are the shortcuts you use to do things like italicize, bold, or underline text:

• Ctrl+B (Windows/Chrome OS) or Cmd+B (macOS): Bold text.

• Ctrl+I (Windows/Chrome OS) or Cmd+I (macOS): Italicize text.

• Ctrl+U (Windows/Chrome OS) or Cmd+U (macOS): Underline text.

Use the Filmstrip

The filmstrip is the pane on the left where you see a vertical list of all your slides. You can use these keyboard shortcuts when the focus is on the filmstrip:

• Ctrl+Alt+Shift+F (Windows/Chrome OS) or Cmd+Option+Shift+F (macOS): Move focus to the filmstrip.

• Ctrl+Alt+Shift+C (Windows/Chrome OS) or Cmd+Option+Shift+C (macOS): Move focus to the canvas.

• Up/Down Arrow (Windows/Chrome OS/macOS): Move focus to the previous or next slide.

Move Around in a Presentation

You can move around your document quickly without touching your mouse! These helpful shortcuts will have you zipping around in no time:

• Ctrl+Alt and +/- (Windows/Chrome OS), or Cmd+Option and +/- (macOS): Zoom in/out of a slide on the canvas.

• Ctrl+Alt+Shift+S (Windows/Chrome OS) or Cmd+Option+Shift+S (macOS): Open the speaker notes panel.

• Ctrl+Alt+Shift+P (Windows/Chrome OS) or Cmd+Option+Shift+P (macOS): Switch to the HTML view of your presentation.

Move or Arrange Objects in a Slide

You probably have some objects, pictures, or shapes in your presentation you need to move or alter. Here’s how you can do it without touching a mouse:

• Tab (Windows/Chrome OS/macOS): Select the next object or shape.

• Shift+Tab (Windows/Chrome OS/macOS): Select the previous object or shape.

• Ctrl+D (Windows/Chrome OS) or Cmd+D (macOS): Duplicate the currently-selected object.

Present Your Presentation

These shortcuts can make the process of showing your presentation go a lot more smoothly:

• Ctrl+F5 (Windows), Ctrl+Search+5 (Chrome OS), or Cmd+Enter (macOS): Present slides from the currently-selected slide.

• Ctrl+Shift+F5 (Windows), Ctrl+Search+5 (Chrome OS), or Cmd+Shift+Enter (macOS): Present slides from the first slide.

• Right/Left Arrow (Windows/Chrome OS/macOS): Go to the next slide

Access the Menus on a PC

You can use the following shortcuts on a PC to access any of the menus on the menu bar. If you use Chrome, follow those shortcuts instead:

• Alt+F (Chrome) or Alt+Shift+F (Other browsers): Access the File menu.

• Alt+E (Chrome) or Alt+Shift+E (Other browsers): Access the Edit menu.

• Alt+V (Chrome) or Alt+Shift+V (Other browsers): Access the View menu.

Access the Menus on macOS

You can access the menu bar with keyboard shortcuts on a Mac, too. Here’s how:

• Ctrl+Option+F: Open the File menu.

• Ctrl+Option+E: Open the Edit menu.

• Ctrl+Option+V: Open the View menu.

Exercise

Create a presentation like this