Main instructor

Supporting instructor

Professional skills trainer

Final projects supervisor

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

• You will get first-hand experience in working in the NGO sector

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.

• #support-employability This is where students can ask for help to improve their CV, get help with their job interview, etc. 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.

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

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.

Context

This document has been implemented based on the experience of the first course done to a group of 8 students with a good level of English. They had no knowledge of computers, but they all have a smartphone, so a screen and Internet is nothing new to them.

We have been using Mac laptops, meaning that rather than a Mouse the students have been getting used to a track-pad.

The course has been focused on Google suite, mainly because all of them already had a google account. And of course the tools are well known by the community.

Preparation

Accounts

Before starting the lessons make sure that all the computers have an account created and the password of these accounts is known by the instructor. Best is setting up the same account (name and password) for all the laptops.

Chrome

Also make sure that all the laptops have chrome installed. As said we are getting focused on google tools, so Chrome is the browser that suits us the most. By default Mac only has Safari installed as a browser.

Language

Also make sure all the laptops are configured in English to avoid issues when explaining the lessons due to Arabic being written from right to left.

Keyboard setup

Some laptops had a keyboard configuration which was not matching the actual keyboard. So this was getting the students confused. Make sure that keyboard config and physicall keyboard are matching.

Sharing screen

I kinda managed doing the first 3 lessons without sharing my screen to all the students, but definitely it makes things way slower as I had to go table by table showing what I was are talking about.

So it is highly required having either a projector or a big screen you can get our laptop connected to, in order to show all the students at once what you are talking about, with examples.

Tips

• It really helps having each laptop in the same place every day. The point is that not all laptops have the same keyboard, as we have different models of Mac. Also background images are different. So making a diagram of the distribution of the laptops the first day and placing them in the same table everyday will really help.

• Make sure that the wifi password is visible to everyone.

• Before ending each class, remind the users to log out their google accounts for safety.

• Try to make the students be as participative as you can. I had the feeling they are a bit afraid of asking questions. So when explaining the lessons, when do you feel they might know the answer, like how to open a new tab in a browser, always ask them before explaining.

• Keep wtaching how are they using the track-pad. For some of them it was really hard getting how it works. Sometimes they were pushing so hard, or the oder way, not pressing at all. Some of them were clicking at the center of the track-pad, some of them struggled with double click... if it was needed stop the lesson for a while and spend some time on getting them used to it.

Online tech coach

Online employability coach

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

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

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.

CodeBuddy mentor

CodeWomen volunteer

CodeWomen tech coach

CodeWomen general volunteer

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

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

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.

Lesson Outline

In this lesson we cover the following areas:

Google doc

They will get familiar on editing and formatting a google doc

Copy and paste

They will either learn or refresh how can a text be copied

Undo

How can a change be undone

Setup

Make sure all the laptops are either plugged or with the battery full enough to last for 1 hour at least.

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

Do the attendance!

Content

Recap

Do a quick recap (5-10) of what they were taught last day. Would be good to repeat the step of creating a new folder in Drive.

Google doc

In the last class the students already added a new google doc to their drive. Ask them to open it (by double clicking on it), and to start adding some text. Any subject works. At least 6 or 7 lines of text.

And try to make sure all of the students can mange typing these 6 or 7 lines as some of them might get stuck.

Add sections to a document

Explain how a line of text can become a title. Go to the predefined formats selector and pick the main title.

Then add a second level of titles.

At this point show them that adding different levels of Titles not only makes the document itself more clear, but also generates an Index which makes it easier navigating to any section in our document.

Formatting text

Explain also how to change the format of a specific word or group of words in a paragraph of text, by using the different menus at the top: Bold, Italic, text font, text size…

Push for them to repeat all the steps.

Selecting text

Before formatting specific words, it would be good to explain quickly how to select a word (placing the cursor over the word + double click) and a set of them (placing the cursor at the beginning, pressing shift key and moving the cursor with track-pad till the end).

Take into account here that they might still be struggling with the track pad, so be patient and try to check how are all the students doing.

Copy and paste

Since they already have their first ‘document’, it is a good time to show how copy and paste works.

Select a text (several lines), copy them, place the cursor at the end of the document, and paste the text.

Undo

Now let’s make some changes in the document, changing the format of the text for instance.

And once the changes are done, show them how to go to the previous version of the document by using the Undo command.

Lesson Outline

In this lesson we cover the following areas:

Get more used to navigate on internet

Make them aware there are several browsers, and navigate to several webs.

Get a bit of background on how Internet works

Try to explain to the students how from our laptop we can get connected to a server which is in a different place around the globe.

Setup

Make sure all the laptops are either plugged or with the battery full enough to last for 1 hour at least.

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

Do the attendance!

Content

Recap

Do a quick recap (5-10) of what we explained last day:

• How to use trackpad

• Different parts of the laptop

• Open chrome and go to youtube

Keep surfing the internet

Ask the students to open a different browser and to do exactly the same steps they did last day with chrome. Since we are on a Mac, Safari could be the best option.

Explain to them that chrome and safari are just different flavours of the same thing: a window to the internet.

Triky point here is finding the icon to open a new tab with a different browser. All browsers have the + icon, but it might be placed in a different place. Try as much as you can to be the students by themself the ones finding it.

Back and forward buttons

Go to youtube and click several videos or links one after another. At some point ask the students to go back to the previous page. Show them how to use back and forward buttons.

Go to different servers

Ask them to navigate (any browser works) to different servers, like:

It is important to fully write the server’s name on a board, and ask them to write the whole name in the browser’s navigation box:

And once inside wikipedia, do a search. And explain again what’s the difference between searching in google (search the whole internet) and searching inside wikipedia (it searches only inside wikipedia).

Internet

Now let’s try to explain at a very high level how the Internet works.

What is it?

A global network. Explain what a network is: a group of computers connected to each other. A network can also be local, meaning that a few computers standing close to each other (in the same building) are connected to each other.

Internet is a world wide network. It connects all the computers around the world. And as it is world wide, Internet really makes physical distances not to be a problem anymore.

We can share information with everyone. It allows us to share pictures with someone who is on the other side of the world, we can socialise with anyone regardless of where he or she is living…

A bit of history about internet

How to connect to a server

As said from our laptop we can connect to any other computer in the world. A browser is a window to the Internet, a tool which can get us connected to everywhere.

And to connect to a specific computer we need to know its address, like wikipedia.org

This address is a unique identifier of a computer or server on the internet. Exactly as a postal address is a unique identifier of a house or physical place.

The problem of this model is that we need to know the address of all the servers we want to connect to. And of course this is not possible. And here is where search engines come into the scene.

Search engines

Imagine now that instead of connecting to wikipedia.org which is easy to remember, we want to check what’s the forecast for next days in Athens. For sure there is a server on the Internet that can provide this kind of information, but we don’t really know what its address is.

Easiest thing we can do is connect to a search engine and type a text explaining what we are looking for. In our case we would type something like: Forecast in Athens for next 7 days

Once a link gets clicked, the browser connects to the server that is hidden in the link.

This is what a search engine does: converting natural text in English, Arabic or any other languages to a list of links and each link takes us to a server on the Internet.

Make sure that the students notice that when they click a link, the address of the browser at the top gets changed.

And at the end google search is another server on the Internet. The only thing is that it loads as a default page in our browser as soon as we open it.

Also when we type a regular text in the browser navigation box and the browser notices that it is not a server’s name, it sends the link to the search engine. So at the end for us, typing a text in the two boxes above gives us the same result.

Online classes

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

• 1 hour of teaching

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

  • Homework: exercises they should complete after the class and before Saturday

  • Extra: optional exercises students can complete when they want

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

• Visual Code: is the IDE we use for all the languages during the course

• Git: all the students have a GitHub account and push their exercises always using the Terminal

• Node: is the tool we use to execute by command line scripts without UI

• NPM: to install modules and to execute Web Servers

• Chrome: Browser we normally use, and we teach how to use the inspector

• PostgreSQL

• DBeaver: as an SQL client with UI

Know your students

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

• Percentage

• etc

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

• <= lower or equal to

• <> not equal to

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

• ISNUMBER

• ISNONTEXT

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:

Mail

Students will be able to send an email with text and links

Drive

They will also get familiar with google Drive

Setup

Make sure all the laptops are either plugged or with the battery full enough to last for 1 hour at least.

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

Do the attendance!

Content

Recap

Do a recap of what we explained till now. As the students have been taught 2 lessons and they have been learning a lot of concepts which are new to them, let’s spend a reasonable time (10-15 minutes at least) reviewing the main concepts explained till now.

Mail

Explaining how to send an email should be quite straightforward as they already know how it works in their smartphone.

Logging into google account

Before starting to use Gmail, ask the students to log into google. This can be usually done by navigating to google.com and clicking to the icon at the right bottom corner.

Once they are in, show them the ‘google apps’ button is also at top right corner

And hit the Gmail button.

Once there, show them how to send an email. The students must share their addresses with someone else.

If possible, ask them to send the email to two people. A recipient and a cc

Drive

Once the emails are sent and received by the other side, let’s move to Drive. Click again google apps’s button and now hit on the Drive icon.

At this point it might happen that some users already have some stuff in Drive whereas for others it is still empty.

What is it?

Drive is at the end a file system. And a file system is, at very high level, a tool to manage documents and organize them in folders.

Document can be any type: Text, Images, Slides, Spreadsheet, html file, …

Create new folder

Ask them to create a new folder called Computer Class under their main unit. Try them to do it on their own, guessing how to do it. If they don’t manage, just guide them. Remind them how the right button works.

At the end they just are able to right click on the main folder, and then hit the ‘New folder’ option. There are several ways to do it. Either way works.

Navigate to a folder

Now ask them to go into the new folder. Again give them some time to do it on their own. Tip: refresh their minds with the double click.

Add a new document

And to finish the lesson, add a new text document or Google doc to the new folder. Right click on the folder’s panel, and then pick the Doc option in blue.

Show them how to set the name of the document in the left top text box:

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

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

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

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

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.

• Anyone with the link can view: Shared users can view the file, but can’t edit it in any way. This is the default action when you share a file, and it’s the best option if you’re trying to share a file for download.

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

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.

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

• Ctrl+V (Windows/Chrome OS) or Cmd+V (macOS): Paste the contents of the Clipboard to a slide.

• Ctrl+Z (Windows/Chrome OS) or Cmd+Z (macOS): Undo an action.

• Ctrl+Y (Windows/Chrome OS) or Cmd+Y (macOS): Redo an action.

• Ctrl+K (Windows/Chrome OS) or Cmd+K (macOS): Insert or edit an external link.

• Ctrl+S (Windows/Chrome OS) or Cmd+S (macOS): Save (every change is saved in Drive, though, if you’re paranoid)

• Ctrl+P (Windows/Chrome OS) or Cmd+P (macOS): Print your presentation.

• Ctrl+O (Windows/Chrome OS) or Cmd+O (macOS): Open a file from your drive or computer.

• Ctrl+F (Windows/Chrome OS) or Cmd+F (macOS): Find specific text in your slides.

• Ctrl+H (Windows/Chrome OS) or Cmd+H (macOS): Find and replace text in your slides.

• Ctrl+Shift+F (Windows/Chrome OS) or Cmd+Shift+F (macOS): Switch to Compact mode (hide the menus).

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.

• Alt+Shift+5 (Windows/Chrome OS) or Cmd+Shift+X (macOS): Apply strikethrough to text.

• Ctrl+Shift+J (Windows/Chrome OS) or Cmd+Shift+J (macOS): Justify text.

• Ctrl+Alt+C (Windows/Chrome OS) or Cmd+Option+C (macOS): Copy the format of the selected text.

• Ctrl+Alt+V (Windows/Chrome OS) or Cmd+Option+V (macOS): Paste the format of the text.

• Ctrl+\ (Windows/Chrome OS) or Cmd+\ (macOS): Clear the format of the text.

• Ctrl+Shift+> and < (Windows/Chrome OS), or Cmd+Shift+> and < (macOS): Increase or decrease the font size, one point at a time.

• Ctrl+] and [ (Windows/Chrome OS), or Cmd+] and [ (macOS): Increase or decrease paragraph indentation.

• Ctrl+Shift+L (Windows/Chrome OS) or Cmd+Shift+L (macOS): Left align the text.

• Ctrl+Shift+E (Windows/Chrome OS) or Cmd+Shift+E (macOS): Center align the text.

• Ctrl+Shift+R (Windows/Chrome OS) or Cmd+Shift+R (macOS): Right align the text.

• Ctrl+Shift+7 (Windows/Chrome OS) or Cmd+Shift+7 (macOS): Insert a numbered list.

• Ctrl+Shift+8 (Windows/Chrome OS) or Cmd+Shift+8 (macOS): Insert a bulleted list.

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.

• Home/End (Windows), Ctrl+Alt+Up/Down Arrow (Chrome OS), or Fn+Left/Right Arrow(macOS): Move focus to the first or last slide.

• Ctrl+Up/Down Arrow (Windows/Chrome OS) or Cmd+up/Down Arrow (macOS): Move the slide in focus up or down.

• Ctrl+Shift+Up/Down Arrow (Windows/Chrome OS) or Cmd+Up/Down Arrow (macOS): Move the slide in focus to the beginning or end.

• Shift+Up/Down Arrow (Windows/Chrome OS/macOS): Extend the selection to the previous or next slide.

• Shift+Home/End (Windows) or Shift+Fn+Left/Right Arrow (macOS): Select the first or last 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.

• Ctrl+Alt+Shift+B (Windows/Chrome OS) or Cmd+Option+Shift+B (macOS): Open a slide’s transition animation panel.

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.

• Ctrl+Alt+G (Windows/Chrome OS) or Cmd+Option+G (macOS): Group the selected objects.

• Ctrl+Alt+Shift+G (Windows/Chrome OS) or Cmd+Option+Shift+G (macOS): Ungroup objects.

• Ctrl+Down/Up Arrow (Windows/Chrome OS) or Cmd+Down/Up Arrow (macOS): Send the selected object backward or forward.

• Ctrl+Shift+Down/Up Arrow (Windows/Chrome OS) or Cmd+Shift+Down/Up Arrow (macOS): Send the selected object to the back or front.

• Arrow keys (Windows/Chrome OS/macOS): Nudge an object or shape right or left.

• Shift+Arrow keys (Windows/Chrome OS/macOS): Nudge an object or shape right or left, one pixel at a time.

• Ctrl+Alt+J (Windows/Chrome OS) or Cmd+Ctrl+J (macOS): Make the object or shape smaller.

• Ctrl+Alt+K (Windows/Chrome OS) or Cmd+Ctrl+K (macOS): Make the object or shape larger.

• Ctrl+Alt+Q (Windows/Chrome OS) or Cmd+Ctrl+Q (macOS): Make the object or shape smaller vertically.

• Ctrl+Alt+I (Windows/Chrome OS) or Cmd+Ctrl+W (macOS): Make the object or shape larger vertically.

• Ctrl+Alt+W (Windows/Chrome OS) or Cmd+Ctrl+I (macOS): Make the object or shape smaller horizontally.

• Ctrl+Alt+B (Windows/Chrome OS) or Cmd+Ctrl+B (macOS): Make the object or shape larger horizontally.

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

• A Number followed by Enter (Windows/Chrome OS/macOS): Go to a specific slide number (4+Enter goes to slide 4).

• S (Windows/Chrome OS/macOS): Open speaker notes.

• A (Windows/Chrome OS/macOS): Open audience tools.

• L (Windows/Chrome OS/macOS): Toggle the laser pointer.

• F11 (Windows/Chrome OS) and Cmd+Shift+F (macOS): Toggle to full-screen.

• B (Windows/Chrome OS/macOS): Show or return from a blank black slide.

• W (Windows/Chrome OS/macOS): Show or return from a blank white 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.

• Alt+I (Chrome) or Alt+Shift+I (Other browsers): Access the Insert menu.

• Alt+O (Chrome) or Alt+Shift+O (Other browsers): Access the Format menu.

• Alt+T (Chrome) or Alt+Shift+T (Other browsers): Access the Tools menu.

• Alt+H (Chrome) or Alt+Shift+H (Other browsers): Access the Help menu.

• Alt+A (Chrome) or Alt+Shift+A (Other browsers): Access the Accessibility menu (present when screen reader support is enabled).

• Shift+Right-click: Show your browser’s context menu (by default, Google Slides overrides your browser’s context menu with its own).

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.

• Ctrl+Option+I: Open the Insert menu.

• Ctrl+Option+O: Open the Format menu.

• Ctrl+Option+T: Open the Tools menu.

• Ctrl+Option+H: Open the Help menu.

• Ctrl+Option+A: Open the Accessibility menu (present when screen reader support is enabled).

• Cmd+Option+Shift+K: Open the Input Tools menu (available in documents that contain non-Latin languages).

• Shift+Right-click: Show your browser’s context menu (by default, Google Slides overrides your browser’s context menu with its own).

Exercise

Create a presentation like this

Class name

What we will learn today?

• Topic 1

• Topic 2

• Topic 3

Topic 1

High level explanation of Topic 1 - rely on the exercises

Exercise A (10 min) exercises students should do during the class

Topic 2

Exercise B (10 min)

Topic 3

Exercise C (10 min)

Resources

Homework

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

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

Lesson Resources

Presentations

• • Created by Birmingham

• • Created by Birmingham

Homework Suggestion

1) Complete Flexbox Froggy and CSS Grid Garden (6 hours)

Flexbox Froggy is a really fun way of learning how Flexbox works.

You should complete all the levels

Grid Garden is a really fun way of learning how Grid layout works.

You should complete all the levels

2) Flexbox Project (4 hours)

In this repository you will find a project for you to complete

Before you start, make sure you fork the repository to your Github account.

Push the changes yo your Github account

Practice Day (Saturday)

• Finish the Karma-clone project to look as awesome as you can

• Finish Apple clone workshop.

Background

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

Personal Websites

The goal of this exercise is to identify students who are struggling to keep up. Try to identify where a student is struggling:

• Can they find their files quickly?

• Are they using the command line when appropriate?

• Do they understand how their HTML and CSS interact?

• Do they seem to understand syntax, or are they writing code in the wrong place?

If you find a student who is struggling with any of these basics, try to work through them together, then give them a short assignment where they need to do something on their own.

There will be several students who have the basics down. If they do, push them on some of the higher-level abstract concepts, like re-usable HTML/CSS components, and using CSS specificity cleverly (eg - basic and primary buttons). Beyond that, let them read up on HTML Forms (links in the resources), do some of the advanced suggestions in the syllabus, or challenge them to read and implement BEM naming syntax.

Resources

Homework suggestion

1) Responsive Cake Website Project (4 hours)

In this repository you will find a project for you to complete

Before you start, make sure you fork the repository to your Github account.

Practice Day (Saturday)

• Finish the Online Shop project to look as awesome as you can

• Push the changes to your repository in Github

Practice Day Saturday

Suggested Homework

Exercise 0: Upload your first Migracode GitHub project (2 Hours)

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

How to move your code to Github

2. Extract the contents of the zip file to a folder on your computer. Make a note of the location of this folder.

3. Upload the contents of this folder to a Github repository. To do this, you first need to create a new repository in your account on GitHub that has exactly the same name as the folder of the website on your computer. To upload the code from your computer into your GitHub repository: make sure you are in the directory where you have your website code (use cd to get into that directory). Then use the git add ., git commit -m "Your message" and git push commands as explained.

4. You should now have a repository with your code in your GitHub account: http://github.com/your-username/your-repository-name. Here you can see your code, and there should be an overview of your files, including an index.html file.

Exercise 3: Watch these videos:

Exercise 5: Create a repo on GitHub that contains a markdown file that answers these questions:

• How do you see the files changed within each commit from git log?

• How do you see the contents of what changed within each file from the git log?

• What does HEAD refer to in the context of git? (Not to be confused with the "HEAD<<<<" one observes within merge conflict)

Feedback

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 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:

.nav-link {
  border: 1px solid transparent;
}
.nav-link:hover,
.nav-link:focus {
  border-color: #ce5f31;
}

Presentations

• • Created by Birmingham

Important Links

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

3) HTML Reading (1 hour)

4) Portfolio Project (3 hours)

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

Lesson Resources

Presentations

• • Created by Alexandra Yamaui [MigraCode]

• • Created by Alexandra Yamaui [MigraCode]

• • Created by Scotland and Richard Darby [CodeYourFuture]

Completed exercises

• • Created by Diana Dashkovska [MigraCode]

Homework Suggestion

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

Practice Day (Saturday)

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

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

Feedback

Lesson Resources

Presentations

• • Created by Alexandra Yamaui [MigraCode]

• • Created by Alexandra Yamaui [MigraCode]

• • Created by Manchester Volunteers [CodeYourFuture]

Completed exercises

• • Created by Diana Dashkovska [MigraCode]

Homework Suggestion

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

Practice Day (Saturday)

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

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

Feedback

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.

During this module they did not start using Javascript in a browser, only executing .js files from the command line using node.

Lessons

Lesson Resources

Presentations

• • Created by Alexandra Yamaui [MigraCode]

• • Created by Alexandra Yamaui [MigraCode]

• • Created by Manchester Volunteers [CodeYourFuture]

Completed exercises

• • Created by Diana Dashkovska [MigraCode]

Homework Suggestion

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

Practice Day (Saturday)

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

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

Feedback

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

Overview

Homework Suggestion

Practice Day (Saturday)

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

2. Complete the exercises in the folder week-1

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

Feedback

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

Homework Suggestion

Practice Day (Saturday)

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

Feedback

Homework Suggestion

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

Practice Day (Saturday)

Start building Pokedex project.

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

Homework Suggestion

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

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

Learning Objectives

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

• Written with components

  • Appropriately composed/nested

  • Split across multiple files

• Uses props to pass values between components

  • Data like numbers/strings/objects/arrays

  • Functions as event handlers

• Uses state to react to user interaction

  • E.g. a button can be clicked to increment a counter

• That fetches data from an API

  • Loading, success and error states are shown

• Containing a form

  • Form inputs that can be filled out by the user

  • Can be submitted, triggering an update in the app

For advanced trainees, some further objectives would be:

• Use class components instead of functional components/Hooks

• Explain why React state is used over plain old JavaScript variables

Out of scope

These topics are considered out-of-scope:

• Object-Orientated JavaScript (classes/inheritance)

  • Details of extends/super() are not necessary to use React (they are an implementation detail of Component class), so don't go out of the way to teach this

• Redux

  • Want to focus on learning and practising the basics of React, before introducing new concepts

  • Learning Redux will be easier once confident with React

• Styled Components

• In depth functional programming

Lessons

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

  • It is also convenient to (briefly) discuss how the virtual DOM is efficient

• Re-rendering demo

  • Focus on the Counter component primarily, in particular the console.log

  • The code in index.js is just a way of forcing a re-render without using state. But we don't really want students to learn the bad habits here (we want them to ultimately learn state), so they are hidden away.

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()

  • But we are updating the DOM here - we mentioned in lesson 1 that this was hard, and now we've got an easy way of updating it. This is the true power of React

• We cover the problems with using a global variable, so hopefully that is enough to prevent the students copy/pasting the wrong way

  • Ensure that you emphasise this is the wrong way to do state

• Demonstrate the app with multiple counters

  • Shows that each components remembers their own state separate to other components

• When to use props or state?

  • My rule of thumb: use props until you need it to change over time, then switch to state

Homework Suggestion

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

Practice Day (Saturday)

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

Practice Day (Saturday)

Feedback

Notes for Instructors

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

  • E.g. bootstrap components

• Why React?

  • Updating the DOM is potentially buggy, verbose, slow

  • In complex web apps (like Facebook), updating the DOM is common

  • React solves a lot of those problems

• Thinking in React exercise - useful to print out the screenshot, so they can draw on it

• Rendering in React section

  • Build towards component usage from vanilla DOM

  • This hopefully reduces the "magic" that React is

  • Although don't spend too much time on it - the trainee's don't know about other frameworks, and so don't really care about other approaches

  • Also useful to identify why the React api is improved over the vanilla DOM apis

• JSX section

  • Just React.createElement calls with syntax sugar

• Do not ask students to install Create-React-App

  • Instead use npx create-react-app my-app it automatically installs the latest version of Create React App.

  • CRA can consume a lot of resources (especially on older laptops) so emphasize stopping/starting

  • This is the first time that students will have encountered a file watcher/daemon background process

    • So take some time to demonstrate how to start and stop the app

    • Recommend that students with slower computers stop the app when they are not using it

• Installing stop-runaway-react-effects

  • A package to prevent accidental infinite useEffect loops

  • It must be imported before the react import so that useEffect can be monkey-patched
• Making an argument for props section - Relate to a situation in real life, something like: imagine what our boss might ask for with this small application. What could our boss ask for which would mean we would have to make changes to the code?

• Exercises

  • Written to be quite step-by-step deliberately

    • Some students were distracted by the wording and not getting to the useful part of the exercise

    • This is a tricky balance though - now some students will be distracted by the wordy-ness of the exercises. Feedback welcome

  • Exercises in lessons 2 & 3 depend on the completing the exercises in lesson 1

    • So ensure students have completed most of them before moving on

    • We may want to introduce a way of "catching them up" - have tagged "checkpoints" on a git repo?

• Interactive examples

  • All of the examples should have an associated CodeSandbox with identical code

  • This is so that you can change the example to help demonstrate if necessary

    • I have found this very useful in the past, especially when answering questions like "what happens if you do X?"

    • You can type up exactly what they're asking about and demo it

  • Props section

    • Makes a common analogy of "props as arguments" to a function

    • students often get tripped on up on the props argument to a functional component

    • They tend to forget to add it to the function signature

    • Or they think that each prop is given as a separate argument

  • The first class may be a little short. But not short enough to start getting into state

    • If you have extra time, PropTypes/defaultProps might be worth covering

    • There is a Further Reading section at the very end of lesson 2 about this

Homework Suggestion

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

Practice Day (Saturday)

Feedback

Module Introduction

Learning Objectives

• Define what an API is used for

• Use npm to start a node server

• Explain what express is and what it is used for

• Use express to create an API that will accept a GET request that returns JSON

• Implement routing to return different resources depending on URL

• Implement query params to return different content (?query=ses)

• Define what each part of CRUD is and what it does

• Process a GET request using Express and Node to retrieve data from memory

• Process a POST request using Express and Node and store data in memory

• Process a DELETE request using Express and Node to remove data from memory

• Install a third party library using npm

• Introduce Express Middleware and why it is used.

• Implement Authentication using JSON web tokens or OAuth 2.0 Authentication framework.

Lessons

Presentations

• • Created by London and Jim

• • Created by Birmingham & Mark Farmiloe

Homework Suggestion

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

Optional

Practice Day (Saturday)

Feedback

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.

Practice Day (Saturday)

Feedback

Homework Suggestion

Practice Day (Saturday)

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

2. Complete the exercises in the folder week-3

Feedback

Learning Objectives

By the end of this lesson students should be able to

• Explain why databases are needed in Web Development

• Define what SQL is and what it is used for

• Describe what table, rows and columns are used for in a relational database

• Install and create a database using PostgreSQL

• Create a table in a database using PostgreSQL

• Insert data into a table using PostgreSQL

• Retrieve data from a table using PostgreSQL

• Retrieve data from a table using conditionals in PostgreSQL

• List the different kinds of data that can be held in a PostgreSQL database

• Add and remove columns in a pre-existing table using PostgreSQL using ALTER

• Rename tables and columns in a pre-existing table using PostgreSQL using DELETE

• Update rows in a pre-existing table using PostgreSQL using UPDATE

• Combine tables together using PostgreSQL using INNER JOIN

• Connect a PostgreSQL database to a NodeJS application

• Retrieve data from a PostgreSQL database in a NodeJS application

• Create an API endpoint that can add data to a database

• Write code that effectively validates data before adding it to a database

• Be aware of the dangers of SQL injection attacks, and how to avoid them

• Create an API endpoint that can retrieve data from a database with multiple parameters

• Create an API endpoint that can update data in a database

• Create an API endpoint that can delete data in a database

Lessons

Homework Suggestion

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

2. Create a react app with three pages Login, Sign-up and Home which we will use on Saturday to connect with the Auth API we created today.

Practice Day (Saturday)

Live coding session with students to go over Auth API project and How to connect it with Front-end created using React and Q&A session to clear their doubts.

Feedback