Welcome!

The IT Education training is officially hosted by the Peer Educators Nework (PEN).

Welcome, dear trainer. This material will be your official guide to training young students in the ITEducation course.
First things first: this material is written for you, the trainer - not for the students. This is why it won't be very
technical thechnology-wise but it will rather be a guide to manage the flow of your training sessions.
The structure of the material is rather simple. Each session in this material you will correspond in a real training
session you will go through in the classroom in chronological order. Each session in this material will be synced with
the students' material and it will contain the key points you have to explain in every subsection. Of course, it will also
contain solved classwork and homework problems.

A typical classroom training session would approximately go like this:

Discuss about the theme of the day

Go through the session subsections in order, expanding and descussing each suggestion
Going through the classwork problems either by giving the students individual tasks or group ones
Recapping what was discussed through the day and answering questinos
Discussing and assigning homework problems

We require you to read the students' material prior to every session, as well as this material. You also have to go
beyond the material and explain personal experiences, things you've read before, personal projects relevant to the
course, etcetera - anything that keeps the students' attention in the classroom and gets them generally excited about
programming.
Finally, this material is not your holy book. It may lack information, may be misinterpreted, may contain typos, may
be dire, may contain untested code, and may sometimes be vague. It is your job to add your own flavor to every
session and cooperate with this material. Be friendly. Be honest. Be funny. Be supportive.

Here is your first task: If you find typos or anything incorrect or misleading in this material, please email them to:
arditdemolli98@[Link].

With these details out of the way, let us begin.

Session 1 - Introduction
Since this is the first session, you have to make it as interesting and fun as you can. Make the students feel
comfortable.
What you will do in this session is:

1. Introduce yourself
2. Let the students introduce themselves
3. Get the students exited about the course
4. Make a list of rules
5. Theory
6. Break
7. HTML introduction
8. Classwork
9. Create a group chat
10. Assign the homeworks

1. Introduce yourself
Introduce yourself and talk something about your life, what made you start programming, your experience, how did
you become a teacher, etc. Try to have eye contact with all of the students since it is your first interaction with them
and first impression matters.
Tell them what you will offer to them as a trainer, and what you await from them as students.
You can say that you will give your best and you await the same from them.

2. Let the students introduce themselves

Give papers to each of them and ask them to write their names.
After they finish, call them by their names and ask certain questions like:

Who they are?

How old they are?
What do they do?
How familiar are they with programming?
What was their motive to join this course?

If they give interesting answers where you think you can interact, go ahead by giving a comment or making a sub-
question. Remember, the more they talk, the more comfortable they will feel.

3. Get the students exited about the course

To get the students exited about learning programming show them the benefits of it:

High wages
Work remotely
Guaranteed job
No need for a degree
Express your creativity
Flexible hours

Explain each of the points mentioned, you can use photos to make it more interesting.
After you talk about all the benefits, you can show on screen this meme:

It is a good practice to make the students laugh sometimes to get their attention and make them feel comfortable
with you.
4. Make a list of rules
Because the training will last two months long and it's a quite a time, it is good to set some basic rules in order to
have the best experience. Make the list of rules together with the group.
Start by adding rule number 1 in the table which can be a word or a short sentence like "Respect each other".
Ask them for rules to write, if they don't give answers you can add one more, like "Help each other".
Repeat the process until you have a list with rules that looks something like this:

Respect each other

Help each other
Engage
Come on time
No absences
Be friendly
Give our best
HAVE FUN!

You can first write the list on the white board and in a big paper after, make sure to write it beautiful and clean then
hang the paper on the front wall where everybody can see it. The rules have to be followed by everyone fom that
moment on.

5. Theory
After doing the presentation part and setting the rules now it's time to start.
The things that you will discuss are related to the student's manual.

What is the internet?

Start by asking them what is the internet?
Whenever you get a question even if it is not completely correct try to make a point out of it and seem as it is partly
correct.
You can explain how internet works based on the students manual you can also add some more examples and
information, but try to avoid "fancy terms". The best way to explain things is by using metaphors and then making
the linkings (like the one with the restaurant in the students manual).

What is a Web Application

Applications that are run in the browser are called Web applications.

Involved technologies to create a Web application:

They have to understand what each of the technologies do.

HTML - (Hyper Text Markup Language) which is responsible for the structure of a website.

CSS - (Cascading Style Sheet) which is responsible for the aesthetics and the visual appeal of a website.

JavaScript - which is responsible for adding behaviour or special effects on a website.

Make connections between client side devices and server side devices with frontend and backend. Tell them that
someone who codes in frontend is called a frontend Web developer, someone who codes in backend is called a
backend Web developer and someone who codes in both frontend and backend is called a full stack web developer.
Now tell them that at the end of the training they will become frontend Web developers.

6. Break
Take a 15 minute break.

7. HTML introduction
HTML (Hyper Text Markup Language) is a markup language used for structuring and presenting Web page content.
You can explain HTML to the students based in the students manual, but also go beyond it by giving more examples
and making constantly questions about the things that you are talking to make sure that everyone is on track.

You can show a photo like this on screen and simplify the html element's structure to them.

Make sure that the students understand exactly the purpose of html. Note to them that every element has a
meaning, and show them how you choose which tag when to use.
Talk a bit more about the semantic meaning and importance of html tags.

Now before you start writing html, explain the students the tools that are used to write code (code editors) and
mention some of them. Go ahead by using VS Code and teach them how to create an html file and save it. Explain by
using examples:

paragraphs
headings
ordered and unordered lists

Make sure to explain to them that the headings should be chosen not because of the size of the content, but
because of the importance of it. A page should only have one h1. Explain how this affects the SEO and Web
Accessibility.

8. Classwork

Exercise 1.1

Put a picture of a newspaper on the screen and identify the headings and the paragraphs together with the
students. You can use the photo of the newspaper from the students manual.

Answer

The title "The Daily Telegraph" is a heading 1 because it is the most important information, other titles and subtitles
can be h1, h2, ..., h6 and the text under the titles are paragraphs. Ignore the images. And note that the styling is
done by using CSS.

Exercise 1.2
 The students have to copy the text by their manuals under the section "Classwork material" which is at the end and
paste it in the editor, after that they have to wrap the text in html tags, using headings, paragraphs and lists.

Answer:

<h1>BBQ Ranch Chicken Tacos</h1>

<h2>Ingridients:</h2>
<ul>
<li>Tortillas</li>
<li>Chicken (cooked & shredded)</li>
<li>Corn</li>
<li>Black Beans</li>
<li>BBQ Sauce</li>
<li>Ranch Dressing</li>
<li>Optional: French onions</li>
</ul>
<h2>Instructions:</h2>
<ol>
<li>Gather all ingridients</li>
<li>In a bowl add cooked chicken, black beans, corn, BBQ sauce and ranch
dressing</li>
<li>Mix together well until everything is coated in sauce.</li>
<li>Scoop the mix into tortillas</li>
<li>Sprinkle french onions on top</li>
<li>Enjoy</li>
</ol>
<p>Note: For easy serving, you can prepare the mix ahead of time & store in a
tupperware. Layer on tortillas when you're ready to serve. To enjoy this on the
go, use canned or packets of chicken, cans of black beans & corn and packets of
ranch & BBQ sauce.</p>

9. Create a group chat

Ask them what application would be the best for them to create a group chat. In case that you or someone has to
share something with the group, that will be the place.
Make sure to include everyone in the group chat.

10. Assign the homeworks

1. Write something about yourself where you can include headings, paragraphs, and lists.

2. There are some other tags for representing text like:

span
strong
em
pre

There are many other, but search about these tags online and use them in the first exercise.

Give them some extra explanation and tips about the homeworks and tell them what to do after they finish.
Session 2 - Basic HTML
Plan
1. Last session summary
2. HTML document structure
3. More HTML elements
4. The anchor tag
5. Classwork
6. Break
7. Self closing tags, emphasize img
8. Talk about attributes
9. Assign the homeworks

Last session summary

The best way to not forget something is doing repetitions, that's why at the beggining of every session you will
spend 5-10 minutes repeating the most important concepts from last sessions. The best way of doing this is by
showing some slides and asking them questions, so the students can give answers.
You can start it by showing this picture on the screen and asking them questions like:

Why do we use the internet?

What is the internet?
How does it work in short steps?

Now ask the students what is a web application and what are the involved technologies in it. After they give you an
answer show this image on the screen and ask them what does each of the languages do.
Now focus on html and ask them how do we write html, after getting an answer show to them this image and ask
explain one more time the html element.

Ask them which tags did we learn last session.

Note

The idea of the repetition is to have interactivity with the students, however there is a possibility that they don't
know any of the questions you asked, so it is your duty to answer to all of them with better examples so this time
they won't forget them.

HTML document structure

Explain the HTML document structure deeply, use metaphors to make it more understandable for the students. You
can read the students manual for information, but also add more things to it that aren't covered in the students
manual. For example you can say that <head> is like the settings of the page where you can add a title,
configuration, metadata, explain what metadata is, etc.
 <!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

More HTML elements for text

You can cover the HTML elements that are covered in the students manual and those are:

<strong>
<em>
<blockquote>
<cite>
<pre>

Use the same examples that are in the student's manual, or create some other examples to make everything more
understandable to the students.

The anchor tag

Here you will talk about the anchor tag and href...

Break
Take a 15 minute break.

Self closing tags, emphasize img

In this part let the student's know that not all html elements contain a closing tag. Show them the <br> and
<hr> tags but do not recommend the students to use them, since we can add styling in the CSS file.
Talk about seperation of concerns where we want to write HTML, CSS and JS seperately and tell them the benefits of
it.

This is going to be the most important tag in this part. Talk about the <img> tag and explain it with examples, use
the attributes of the img tag as well (src, alt, width, height) and explain how they all work. Download some images
and explain how you would write the src of a local image.

We recommend you to look at the explanation and examples in the students manual.

Classwork

Exercise 2.1

Use the last exercise from the last session, but now the students have to use the new tags they learnt. Show them
how the result should look in the browser and give them up to 15 minute to solve it. Instruct them to download a
photo and insert it.
 Answer:

<!DOCTYPE html>
<html>
<head>
<title>Recipes</title>
</head>
<body>
<h1>BBQ Ranch Chicken Tacos</h1>
<img alt="BBQ ranch chicken tacos photo" src="[Link]">
<h5>Recipe by John Doe</h5>
<h2>Ingridients:</h2>
<ul>
<li>Tortillas</li>
<li>Chicken (cooked & shredded)</li>
<li>Corn</li>
<li>Black Beans</li>
<li>BBQ Sauce</li>
<li>Ranch Dressing</li>
<li>Optional: French onions</li>
</ul>
<h2>Instructions:</h2>
<ol>
<li>Gather all ingridients</li>
<li>In a bowl add cooked chicken, black beans, corn, BBQ sauce and
ranch
dressing</li>
<li>Mix together well until everything is coated in sauce.</li>
<li>Scoop the mix into tortillas</li>
<li>Sprinkle french onions on top</li>
<li>Enjoy</li>
</ol>
<p><strong>Wash your hands before starting</strong></p>
<p><em>Note: For easy serving, you can prepare the mix ahead of time &
store in a
tupperware. Layer on tortillas when you're ready to serve. To enjoy this
on the
go, use canned or packets of chicken, cans of black beans & corn and
packets of
ranch & BBQ sauce.</em></p>
</body>
</html>

Talk about attributes

This part is covered in the students manual as well, so feel free to read it and explain it the same way, by adding
some more details. Use metaphors to make it more understandable to the students, for example you can call the
attributes "superpowers" of an element, that make the element do something extra or contain some more
information. Explain more the class and the id attributes.
Assign the homeworks
1. Write some random text where you would need to use the text tags we learned in this session, but this time
write the HTML structure and put the content where it belongs.
2. Search in mdn (mozilla developers network) about the tags <sup> and <sub> and use them in the first
exercise.
3. Give id-s and classes to some of the elements.

Session 3 - Intermediate HTML

Plan
1. Last session summary
2. The anchor element
3. Inline and block level elements and their difference
4. Containing elements
5. Classwork
6. Break
7. The table element
8. Classwork
9. Assign the homeworks

Last session summary

Make a powerpoint presentation with these photos:
Discuss them shortly one by one just to make sure that they haven't forgotten the things from last sessions.
You can make questions easier with the photos in front and if they don't answer you tell them what these photos are
about.

The anchor element

You can show the students simply by going in google some links and tell them that those links are made with the
anchor element, for example:
Now use it to link some of the documents that you created for the previous exercises, or take whatever example you
want to explain the anchor element.

Inline and block elements

Here you are going to explain to the students the inline-level and the block-level elements, you can look at the
student's manual it is very good explained with examples.

Tell them which of the elements we used until now are inline-level and which block-level.

Use them to create examples for better understanding.

The containing elements

Explain to the students what the concept containing element or container means.

Start with <div> and <span> , mention the main difference between these two tags (one is block-level the other
inline-level) use them in an example.

Now make the difference between generic containers and semantic containers and continue with the semantic
containers.

Since we are going to use semantic tags during the whole course you need to explain every semantic container to
them carefully. You can find a good explanation in the student's manual.

Classwork

Exercise 3.1

Identify the containers such as: header, nav, main, section, article, aside, footer, etc. in a Webpage like BBC.

Answer
 Identify all the elements, even lists, headings, images, paragraphs but emphasize the containers.

Break
Take a 15 minute break.

Tables
First explain to them what tables are in simple words and show them an example. You can say that tables are made
by rows and columns, the first row usually represent's the header of the table that describes the table or the columns
of the table and all the other rows are filled with data and sometimes the last row works as a footer.

Now create a table in HTML and tell them that it won't look good, but you will make it look better when you learn
how to style elements in CSS.

Classwork

Exercise 3.2

Create a table row with three table headers.

The three table headers should have the values "Name", "Age", "City".
Now add three more rows with random data

Answer:

<!DOCTYPE html>
<html>
<head>
<title>Exercise 3.2</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
 <td>John</td>
<td>34</td>
<td>New York</td>
</tr>
<tr>
<td>Mark</td>
<td>22</td>
<td>Berlin</td>
</tr>
<tr>
<td>Jane</td>
<td>27</td>
<td>Vancouver</td>
</tr>
</table>
</body>
</html>

Assign the homeworks

1. Create this table using HTML, it is important to use tags for seperating the head, the body and the footer,
ignore the styling.
 2. Create this table using HTML

Because this is a complex table you will be provided with some instructions.

1. Add this code inside <head> :

<style>
th,td{border: 1px solid black}
</style>

2. Add this attribute inside the opening tag of the table: cellspacing="0"
3. Use thead to wrap first two rows, use tbody to wrap the third, fourth and fifth rows and use tfoot
to wrap the last three rows.
4. Use divs inside the <td> tags of the second row, to seperate the text in new lines.

The solution:

<!DOCTYPE html>
<html>
<head>
<title>Homework 3.2</title>
<style>
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table cellspacing="0">
<caption>Complex Table</caption>
<thead>
<tr>
<td colspan="3">Invoice #123456789</td>
<td>14 January 2015</td>
</tr>
<tr>
<td colspan="2">
<div><strong>Pay to:</strong></div>
<div>Acme Billing Co.</div>
<div>123 Main str.</div>
<div>Cityville, NA 12345</div>
</td>
<td colspan="2">
<div><strong>Customer:</strong></div>
<div>John Smith</div>
<div>321 Willow Way</div>
<div>Southeast Massachussets, MA 54321</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<th>Name/Description</th>
<th>Qty.</th>
<th>@</th>
<th>Cost</th>
</tr>
<tr>
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Subtotal</th>
<td>110.00</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td>8%</td>
<td>8.80</td>
</tr>
 <tr>
<th colspan="3">Grand Total</th>
<td>$ 118.00</td>
</tr>
</tfoot>
</table>
</body>
</html>
Session 4 - Advanced HTML
Plan
1. Last session summary

2. Forms

3. Form elements (input, label, button, textarea)

4. Fieldset element

5. Break

6. Videos

7. Audios

8. Assign the homeworks

Last session summary

Ask them some questions from the last sessions, if you don't get an answer, explain the answer shortly. You can ask:

What do we use to create a link?

What are attributes?
What are classes and id-s?
What are containing elements?
Which containers are semantic and which generic?
What is the difference between generic and semantic containers?
How do we write a table?

You can track their progress with these questions, if they couldn't answer none of them, you should discuss with
them what to do to get back on track.

Forms
Now first explain the need of forms, let the students know that whenever we give data in a browser there is a
<form> behind written in html. Now show them examples like facebooks login and signup forms, just to show
them what elements can a form contain, like inputs, labels and buttons. Now start by writting a form with two inputs
and a button.

<form action="" method="get">

<input type="text" placeholder="Your name..." name="name">
<br>
<input type="email" placeholder="Your email..." name="email">
<br>
<button>Subscribe</button>
</form>

Now explain in details what the attributes of the input mean and how do they affect the input try to explain name
attribute in an easy way. Explain to them that these are all inline elements that's why you used the <br> tag,
remove the <br> tag to let them see how the form would appear.

Now show them a better way of doing this. Add some labels and wrap the labels and inputs in div tags instead of
using <br> .

<form>
<div>
<label for="name">Enter your name: </label>
<input type="text" placeholder="Your name..." name="name" id="name">
</div>
<div>
<label for="email">Enter your email: </label>
<input type="email" placeholder="Your email..." name="email" id="email">
</div>
<div>
<button type="submit">Subscribe</button>
</div>
</form>

Now explain what the label does, why the inputs need to have id-s to work with labels, what kind of types can a
button have (submit, button, reset), etc.

After you've done explaining them all, show them an example by using some of the input types that will be mostly
used by creating a more complex form.

<form>
<div>
<label for="username">Username: </label>
<input type="text" placeholder="Username here..." name="username"
id="username">
</div>
<div>
<label for="email">Email: </label>
<input type="email" placeholder="Email here..." name="email" id="email">
</div>

<div>
<label for="dob">Date of birth: </label>
<input type="date" name="dob" id="dob">
</div>
<h2>Favorite language</h2>
<div>
<input type="radio" name="fav-lang" id="html" value="html">
<label for="html">HTML</label>
</div>
<div>
<input type="radio" name="fav-lang" id="css" value="css">
<label for="css">CSS</label>
</div>
<div>
<input type="radio" name="fav-lang" id="javascript" value="javascript">
 <label for="javascript">JavaScript</label>
</div>
<h2>Select only the car brands</h2>
<div>
<label for="bmw">BMW</label>
<input type="checkbox" name="terms" id="bmw" value="bmw">
</div>
<div>
<label for="msoft">Microsoft</label>
<input type="checkbox" name="terms" id="msoft" value="msoft">
</div>
<div>
<label for="nbullet">Nutribullet</label>
<input type="checkbox" name="terms" id="nbullet" value="nbullet">
</div>
<div>
<label for="comment">Leave a comment: </label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
</div>
<div>
<label for="password">Password: </label>
<input type="password" placeholder="Password here..." name="password"
id="password">
</div>
<div>
<button type="submit">Subscribe</button>
</div>
</form>

This is just an example of a more complex form, you can use other input types as well, after you've done with most of
the input types show them the fieldset element.

The fieldset element

You can wrap some elements from previous form with the fieldset element, for example:

<form>
<div>
<label for="username">Username: </label>
<input type="text" placeholder="Username here..." name="username"
id="username">
</div>
<div>
<label for="email">Email: </label>
<input type="email" placeholder="Email here..." name="email" id="email">
</div>

<div>
<label for="dob">Date of birth: </label>
<input type="date" name="dob" id="dob">
</div>
 <fieldset>
<legend>Favorite language</legend>
<div>
<input type="radio" name="fav-lang" id="html" value="html">
<label for="html">HTML</label>
</div>
<div>
<input type="radio" name="fav-lang" id="css" value="css">
<label for="css">CSS</label>
</div>
<div>
<input type="radio" name="fav-lang" id="javascript" value="javascript">
<label for="javascript">JavaScript</label>
</div>
</fieldset>
<fieldset>
<legend>Select only the car brands</legend>
<div>
<label for="bmw">BMW</label>
<input type="checkbox" name="terms" id="bmw" value="bmw">
</div>
<div>
<label for="msoft">Microsoft</label>
<input type="checkbox" name="terms" id="msoft" value="msoft">
</div>
<div>
<label for="nbullet">Nutribullet</label>
<input type="checkbox" name="terms" id="nbullet" value="nbullet">
</div>
</fieldset>
<div>
<label for="comment">Leave a comment: </label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
</div>
<div>
<label for="password">Password: </label>
<input type="password" placeholder="Password here..." name="password"
id="password">
</div>

<div>
<button type="submit">Subscribe</button>
</div>
</form>

Break
Take a 15 minute break.

Video
You can look at the student's manual and check mdn as well for the video tag, mention what the attributes do. Don't
forget to download some videos before just to make some examples

Audio
Let them know that video and audio work the same, check about audio in the same sources as for the video
(student's manual and mdn). Download some audios before, so you can create examples with them.

Assign homeworks
1. Create a page that has a nav with a list in it. The list must have 3 list items, one should be "Recipe exercise",
the other "Form exercise" and the last one "Video and Audio exercise".
All of the list items should be wrapped in anchor tags, the first one should redirect you in the last exercise
where we did the recipe, the second one should redirect you in a page with just a form and some inputs in
it (try to use as many input types as you can) and the last one should redirect you in a page with a video
and an audio (choose whatever video and audio you want).
Session 5 - git and GitHub
We wanted students to have a good workflow in the classroom and in their homes. This is why we came up with the
following idea: All students will have a folder called Name_Surname on their classroom laptops which is synced to a
remote repository on GitHub. In this way they can clone the repo at their house and have everything right where
they left off.
The goal of this session is for students to understand the basics of Git and GitHub and also set up their workflow.
There is no need to go into complicated commands (even branching, for that matter) but to simply understand
commits and remote repositories.

Installing Git
If Git is not already installed in the students' machines, you should install it with them. This should take very little
time.

Learning the basics of git step-by-step

This section of the Student Material goes through a simple example with a folder called Name_Surname and a file
inside it called [Link]. You should go through this exercise with the students as by the end of it they will have the
remote repository set up and will grasp the basics of Git.

A key thing to focus in this section is that you should use the Command Line and not any GUI tool. In this way the
students won't get scared of the command line and understand it accomplishes the same things as a GUI.

The next exercise is the same as in the student material

Exercise 5.1

Create a folder on the Desktop with the name Name_Surname. Initialize this as a git repository. Create an empty
file called [Link]. Add this change to the Staging Environment. Commit this change with the message "Created
the file where the book will be written".

Solution

It is detailed in the Student Material

After commiting the new file, as in the student material, you can go through the next exercise.

Exercise 5.2

Let's try commiting more. Add the line "Spiderman is the greatest hero of all time." to the [Link] file. Commit this
change as "Added Spiderman as main character".
Change the line in the file to "Superman is the greatest hero of all time.". Commit this change as "Changed main
character to Superman". Do this with a couple more superheroes. Can you print all the commits in the command
line?

Solution

It is simple doing these exercises, however there is one new thing at the end. Namely, the git log command
which prints all of the commits.

Note

Mention that naming commits in a a descriptive manner is imperative.

What is Github
It is important so students understand the difference between Git and GitHub. That's why you have to be very clear
on this point.

Note

The GitHub Desktop application is needed for this exercise. If it is not already installed, you should go through it
with the students.

Exercise 5.3

Publish the repository Name_Surname to your GitHub account as a private repository using GitHub Desktop.

Exercise 5.4

Divide the students into pairs of two. Let them invite each other as collaborators on the GitHub repositories they
just published. After accepting the invites, let them clone each other's repository to their machines using GitHub
Desktop.

Exercise 5.5

While the students are still divided in pairs, do this exercise. Let them make a change to their repositories and
commit it as "I just pushed this!". Then make them push the changes to GitHub. Now, if they and the collaborator
go to GitHub on the website they should see the new commit.

Exercise 5.6

While the students are still divided in pairs, do this exercise. Let the collaborators pull the changes from their
friend's repository and see the change, through git log , on their local copy.

Note

After this exercise is successfully finished, don't forget to tell students remove each other as collaborators and delete
the cloned repositories.

Homework 5
1. Clone the repository Name_Surname on your home PC.
2. Delete the file [Link] commit it as "Cleared the folder". Now push this change to the Remote Repository.
3. Install the GitHub application on your phone so you always have your work with you.
Session 6 - CSS Intro (selectors and specification rules)
Plan
1. Last session summary
2. What is CSS
3. Explain inline, internal and external CSS
4. Classwork
5. Break
6. Explain selector combinations
7. Classwork
8. Explain class and id
9. Explain the specification rules
10. Assign the homeworks

Last session summary

Like in the last sessions, it is good to prepare some questions to repeat the things that we have been learning until
now. You can ask questions like:

How do we give information to the browser? (through forms)

What elements can a form contain?
What kind of inputs do we have?
How do we insert a video on our page?
What is git?
What is github?
What is a repository?

If the students don't know the answers, make sure to explain them all again just in short words.

What is CSS
You can describe CSS to them with your own words or check the student's manual, however, at this point only
explain them what CSS does, how it works, and how we write it.

You can show an image like this so you can define easily a css rule:
Inline, internal, external CSS
Now make examples with all three ways of writting CSS starting by inline and internal, but focus on showing them
the benefit of using external CSS.

Talk about separation of concerns

Classwork
Exercise 6.1

The students have to create a css file and link it with the following html document.

<!DOCTYPE html>
<html>
<head>
<title>Exercise 6.1</title>
</head>
<body>
<h1>The most important information</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit facilis
eum veniam ratione harum qui!</p>
<h2>Another heading</h2>
</body>
</html>

Now they have to:

make the <h1> blue and align it in the center

make the <p> violet
make the <h2> tomato color and align it in the center.

You can give them 7-8 minutes to finish the task.

Break
Take a 15 minute break.

Selector combinations
Show to the students how we can use combinations for targeting a specific element or group of elements in the
selector. You can check the student's manual and use the same examples or create your own if you want to. It is
important to use semantic containers and elements like we have been using until now.
You can explain a bit more how the siblings relationship works by giving more complex examples.

Example:

<h2>First heading</h2>
<h2>Second heading</h2>
<h2>Third heading</h2>
<p>Fourth should appear</p>
<h2>Fourth</h2>
<p>Fifth too</p>
<h2>fifth</h2>

Now you can tell them which element would get targeted if we write combinations like these:

h2 + h2 {
color:red;
}
p + h2 {
color:blue;
}
p + h2 + p {
color: pink;
}
h2 + p + h2 {
color: tomato;
}

Classwork
Exercise 6.2

Like in the last exercise, the students have to create a css file and link it to the following html document.

<!DOCTYPE html>
<html>
<head>
<title>Exercise 6.1</title>
</head>
<body>
<header>
<h1>Webpage Title</h1>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>About</li>
</ul>
</nav>
</header>
<main>
 <h2>Latest</h2>
<article>
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
facilis eum veniam ratione harum qui!</p>
</article>
</main>
<section>
<article>
<h3>Yesterday</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
facilis eum veniam ratione harum qui!</p>
</article>
</section>
<footer>
<p>All rights reserved by IT Education</p>
</footer>
</body>
</html>

Now they have to:

make <h1> darkblue and align it to center

make the second and third list item red
make the <h3> inside <main> violet and the one inside <section> pink and align them both to
center
make the paragraphs gold
make the paragraph inside footer darkred and align it to center

Class and id
Now use the examples that you have worked on until now, just add some classes or id to the elements and target
them by their classname or id.

Explain the specification rules

Now here you can show this picture on the table:
And explain to them how the specificity works with cascading.

Take some examples like the ones in the student's manual to explain when they can override something and when
not.

Try to learn them by the beginning to avoid the use of inline css, !important and id's. Recommend the use of classes
for styling.

Assign homeworks
1. Create the proper structure of an html document and add the code below to the body.

<h1>Most important</h1>
<nav>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</nav>
<section>
<h2>Section heading</h2>
<article>
<h2>Heading inside article</h2>
<p>This is a paragraph inside article</p>
</article>
</section>
<section>
<h2>Another heading</h2>
<blockquote>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae velit
veniam eius laboriosam. Iusto, eos!
</blockquote>
<cite>John Doe</cite>
</section>

2. Now create an external css file and link it with the html document.
3. Finish the following tasks:
align the h1 to center and make it's color darkblue
make the second and third list item red
change the color of h2's inside section to lightblue
change the color of the h2's inside article to cyan
use the "all" selector, to align all element's inside section to center

4. Now create a new css file and link it with the same document.
5. You have to do the same tasks, but now give to the elements in html some classes and target them only by
classes in css
Session 7 - Background, Size, Units and Colors
Plan
1. Last session summary
2. The background property
3. The height and width properties
4. Classwork
5. Break
6. RGB and RGBA
7. Assign the homeworks

Last session summary

You can ask questions like:

What is CSS?
How can we write CSS and which is the prefered way?
What is a CSS rule, declaration block, declaration, property, value?
What is the property for changing text color?
What is the property for aligning text?

Show them images of selectors like these and ask them what they mean:
For the end show them the specificity points table and see if they understand it.

If the students don't know the answers, make sure to explain them all again just in short words.

The background property

Here you have to explain background-color and background-image, however since the background-image is more
complicated spend more time on it. You can even use background-repeat, background-size and background-
position just to make the background image look good, but don't go deep on these properties, since for now it's
important for them only to know how to add an image as a background.

Whenever you make examples with images, it is good to use photos from internet, but also from your local storage.

The height and width

Here you will have to spend more time, because in order to explain how width and height work they also need to
understand the units, like px, vh, vw, %.
You can check the student's manual how this topic is explained. Best way to explain width and height is using divs, by
giving them different colors and then manipulating with the width and height.

Make sure that they understand exactly how % , vh and vw work since these are relative units and help us create
responsive Webpages.

Classwork
Exercise 7.1

Create a css file and link it to the following html

<!DOCTYPE html>
<html>
<head>
<title>Exercise 7.1</title>
</head>
<body>
<header>
<h1>Page Logo</h1>
<nav>
<ul>
 <li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section heading</h2>
<article>
<h2>Heading inside article</h2>
<p>This is a paragraph inside article</p>
</article>
</section>
<section>
<h2>Another heading</h2>
<blockquote>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Recusandae velit veniam eius laboriosam.
Iusto,
eos!
</blockquote>
<cite>John Doe</cite>
</section>
</main>
<footer>
<p>Copyrights reserved to ...</p>
</footer>
</body>
</html>

Tasks:
Give a background color to the body
Give a background color to the header
Give a background image to the main
Give a background color to the footer
Give different background colors to the sections
The header should occupy 15% of the height of the viewport
The main should occupy 70% of the height of the viewport
The footer should occupy 10% of the height of the viewport
The blockquote should occupy 20% of the width of the section
The headings of the sections should be in the center

Give the students 15 minute to finish the exercise

Break
Take a 15 minute break.
RGB and RGBA
Here you will explain how RGB and RGBA work, you can check the student's manual, there are some examples, but
you can go ahead and create your own examples too.

Best way to explain rgba is to put a background image so the transparency will be obvious.

Learn them how to use a color picker tool online, so they will have an easier time with the colors.

Assign the homeworks

1. Create a simple webpage by using the things we learned until now in CSS. Try to make it look like this:

Use whatever photo you want for the background of <main> and use a color picker to find the values of the colors
I used in rgb. The background color of the elements inside <main> is done with rgba.

Note:

This is not a goodlooking or a meaningful page, the idea here is to use all the properties and values that we learned
in css. If you want to add meaningful content and make it look better, go ahead.
Session 8 - Typography, The Box Model and Display
Plan
1. Last session summary
2. Typography
3. The Box Model
4. Break
5. Classwork
6. Display inline, block, inline-block
7. Assign the homeworks

Last session summary

You can ask questions like:

What property do we use to add an image as a background?

What properties do we use to change the size of an element?
What units do we use in CSS?
How does RGBA work?

Typography
You can read from the student's manual about the theory, there is a ton of information about typography.

You can write some headings and parahraphs to manipulate with different properties and create examples for
typography.

Check this video if you need examples to explain things

The Box Model

The best way to explain how box model works is by creating some empty divs, giving them the same height and
width, and add different background colors to them. Now you can use borders and paddings on them to explain how
they work, and use margin to move the boxes around.

There are some examples on the student's manual that you can use.

Break
Take a 15 minute break.

Classwork
Exercise 8.1

<!DOCTYPE html>
<html lang="en">
<head>
<title>Blank Template</title>
</head>
 <body>
<h1>Make this text blue, underlined, and have a gold background</h1>
<h2>Make this text purple, bolded, 25px, and hav an orange border </h2>
<section>
<p>Make this section width of 50%, height of 200px, background of gray,
border of black, and the paragraph text white</p>
</section>
<footer>
<h3>Make this footer have a black background, with light green border,
and this text 20px white plus a font-family of Roboto</h3>
</footer>
</body>
</html>

All the tasks the student's have to do are inside the text tags in the html code above.

Display
For the display property, first mention only the values that the student's are already aware that exist (inline and
block).

Display inline-block will be the highlight of this part, so focus more on it. You can create a simple navbar just to give
them the idea how inline-block works and this will help them with the homework.

Assign the homeworks

1. Finish the quiz in the link below, download the badge as a proof that you finished the homework
successfully. [Link]
2. Use all the necessary properties and values to create this simple layout.
Session 9 - Positioning and Flexbox
Plan
1. Last session summary
2. Position relative
3. Position absolute
4. Classwork
5. Position fixed and sticky
6. Break
7. Flexbox
8. Assign the homeworks

Last session summary

You can ask questions like:

Why do we write three font names when we set a font-family?

What is the box model?
What is padding?
What is border?
What is margin?
What is the difference between inline and inline-block elements?

Position relative
You can use the examples that are in the student's manual to present position relative.

Position absolute
You can use the examples that are in the student's manual to present position absolute. Make sure to explain the z-
index and transform: translate property to them properly, and how the position absolute takes the element out from
the webpage flow.

Classwork
Exercise 9.1
Create 5 boxes using div tags, give them a height, a width and a color just so they can be seen. Now position 4 of the
boxes on each corner of the page and the fifth box in the middle.

Position fixed and sticky

If they do understand position relative and absolute, most likely they are going to understand position fixed and
position sticky as well. There are no examples for these two values in the student's manual, however you can use
some old examples and make the navbar position fixed or sticky, just to give them the idea when to use them.

Break
Take a 15 minute break
Flexbox
In this part focus only on showing them the benefits of using flexbox. Since flexbox has more properties to use, in
this session use only properties on flex containers and not flex items. There are some examples on the student's
manual, however you can use some other examples too

Asign the homeworks

1. Use "position relative", "position absolute" and "transform translate" to create this view.

2. Use all the necessary properties to create this layout.

Note

Since this is the first time of doing an exercise like the second one, we don't expect you to make it 100%, but try
your best.
Session 10 - Flexbox and Responsive Web
Plan
1. Last session summary
2. Flex items and properties
3. Classwork
4. Responsiveness
5. Break
6. Media queries
7. Assign the homeworks

Last session summary

You can ask questions like:

When we have position set to relative, based on what do top, right, bottom and left properties work?
When we have position set to absolute, based on what do top, right, bottom and left properties work?
What is the z-index?
What properties do we use to set an element in the middle of the page?
What is a flex container?
What properties do we use to position items on a flex container?

Flex items and properties

In the last session you explained to the student's how the flex containers properties work, now it's time to use some
flex items properties. Make sure to let them know that only the direct childs of a flex container are considered as flex
items.

For example:

<ul>
<li><a href=#>Home</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Contact</a></li>
</ul>

If we set here the ul to display:flex; only the li 's are considered flex items and not the anchors inside
them.

The best way to explain flexbox is by creating some empty boxes using div tags and then manipulating with them
just to show the students how every property works. In the future sessions you will be working more complex layouts
with meaningful content using flexbox.

Here is an example of the use of some flexbox properties with dummy items

<!DOCTYPE html>
<html>
<head>
<title>Flex Box</title>
 <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
</body>
</html>

.container{
margin:50px;
padding:15px;
background-color: gray;
display: flex;
flex-direction:row;
height:600px;
align-items:flex-start;
justify-content: space-between;
flex-wrap:wrap;
align-content: space-between;
}
.item{
font-size: 30px;
background-color: red;
padding:15px;
margin:10px;
flex-grow:1;
}
.item-1{
flex-basis:75%;
order:3;
}
.item-2{
order:0;
}
.item-3{
order:1;
flex-basis:25%
}
.item-4{
order:2;
}

You can add more div tags to demonstrate the use of different properties.
Classwork
The students have to finish all the levels in Flexbox Froggy.

Give them 15-20 minutes to finish the assignment.

Web Responsiveness
There is a lot of theory in the student's material, show them how web responsiveness came as an idea and it's
importance.

Mention fluidity, elasticity and content decision and tell them in short words what they mean.

You can show examples of responsive websites online, for example: BBC, Techcrunch, etc.

Break
Take a 15 minute break

Media queries
Explain how media queries work, how we set the size of the viewport and everything.

Don't forget that an important part for media queries to work is to set it up first inside <head> with the meta tag
<meta name="viewport" content="width=device-width, initial-scale=0.1"> . Create examples
with boxes by changing their size or color on different viewport sizes.

For example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive web</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="wrapper">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
</div>
</body>
</html>

.wrapper {
display: flex;
justify-content: space-around;
}
.box {
width: 200px;
height: 200px;
background-color: #1e1e1e;
border: 1px solid red;
}

@media only screen and (max-width:615px) {

.wrapper {
flex-direction: column;
}
.box {
width: auto;
margin: 10px;
}
.box-1 {
background-color: gold;
}
.box-2 {
background-color: rebeccapurple;
}
.box-3 {
background-color: brown;
}
}

@media only screen and (max-width:500px) {

.wrapper {
flex-direction: column;
}
.box {
width: auto;
margin: 10px;
}
.box-1 {
order: 3
}
.box-2 {
order: 1
}
.box-3 {
order: 2;
}
}
Asign the homeworks
1. Use all the necessary elements and css properties to create the following page.
Session 11 - Display Grid
Plan
1. Last session summary
2. Display grid
3. Classwork
4. Break
5. Homework discussion or exercise
6. Assign the homeworks

Last session summary

You can ask questions like:

What is the difference between a flex container and a flex item?

What is the difference between justify-content and align-items?
What does responsive web mean?
How do we create responsive websites? What should we use and what should we avoid?
What are media queries and how do they work?

Display grid
You can find plenty information about grid in the students material with examples as well.

The best way of demonstrating all the properties is just by creating some empty boxes and moving them around
using different properties and values. Explain to the students how fractions work in a simple way.

After this you can create an easy layout that is in the students material by using grid. There is also the code added.

Open inspect element and show the students how grid appears, also it is very common to make mistakes when
using: grid-column and grid-row to set the grid items positioning, so the easiest way is to check with inspect
element.
Now they will know better how to use these properties and not mess up the whole layout.

Classwork
The students have to create the layout below using grid, instruct them to make a grid with 12 columns and 12 rows
so they can be more flexible on how long or wide they want their elements to appear.
The answer:

<!DOCTYPE html>
<html>
<head>
<title>Grid View</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
margin: 0;
padding: 10px;
height: 100vh;
color: red;

display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 5px;
}
section,
nav,
main,
 aside,
header,
footer {
border: 2px solid red;
border-radius: 5px;
padding: 15px;
}
header {
grid-column: 1 / -1;
}
.sidebar {
grid-column: 1 / 3;
grid-row: 2 / 12;
}
nav {
grid-column: 3 / 11;
}
main {
grid-column-start: 3;
grid-column-end: 11;
grid-row-start: 3;
grid-row-end: 12;
}
aside {
grid-column-start: 11;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 12;
}
footer {
grid-column-start: 1;
grid-column-end: 13;
}
</style>
</head>
<body>
<div class="wrapper">
<header>Header</header>
<section class="sidebar">Sidebar</section>
<nav>Navigation</nav>
<main>Main</main>
<aside>Ads</aside>
<footer>Footer</footer>
</div>
</body>
</html>

Another variation using template areas:

<!DOCTYPE html>
<html>
<head>
<title>Grid View</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
padding: 10px;
height: 100vh;
color: red;

display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 5px;

grid-template-areas:
"h h h h h h h h h h h h"
"s s n n n n n n n n a a"
"s s m m m m m m m m a a"
"s s m m m m m m m m a a"
"s s m m m m m m m m a a"
"s s m m m m m m m m a a"
"s s m m m m m m m m a a"
"s s m m m m m m m m a a"
"s s m m m m m m m m a a"
"s s m m m m m m m m a a"
"s s m m m m m m m m a a"
"f f f f f f f f f f f f";
}
section,
nav,
main,
aside,
header,
footer {
border: 2px solid red;
border-radius: 5px;
padding: 15px;
}
header {
grid-area: h;
}
.sidebar {
grid-area: s;
}
nav {
grid-area: n;
}
main {
 grid-area: m;
}
aside {
grid-area: a;
}
footer {
grid-area: f;
}
</style>
</head>
<body>
<div class="wrapper">
<header>Header</header>
<section class="sidebar">Sidebar</section>
<nav>Navigation</nav>
<main>Main</main>
<aside>Ads</aside>
<footer>Footer</footer>
</div>
</body>
</html>

Break
Take a 15 minute break.

Homework discussion or exercise

If you have still time left, you can discuss the homeworks with them, and do some of them together, for example you
can create one of the layouts they had for homeworks in an easy way using display grid or flex whatever comes more
handy.

Assign the homeworks

 1. Create the following layouts using grid and media queries.

Answer

@media only screen and (max-width: 900px){

.wrapper{
gap: 20px;
}
nav{
grid-column: 1 / -1;
}
.sidebar{
grid-column: 1 / 4;
grid-row: 3 / 12;
}
main{
grid-column: 4 / -1;
grid-row: 3 / 12;
}
aside{
grid-row:12 / 13;
grid-column: 1 / 4;
}

footer{
grid-column: 4 / -1;
 }
}
@media only screen and (max-width: 600px) {
.wrapper{
gap: 20px;
}
nav{
grid-column: 1 / -1;
}
.sidebar{
grid-column: 1 / 13;
grid-row: 10 / 11;
}
main{
grid-column: 1 / -1;
grid-row: 3 / 10;
}
aside{
grid-row: 11 / 12;
grid-column: 1 / 13;
}
footer{
grid-column: 1 / -1;
}
}

Template area variation

@media only screen and (max-width: 900px){

.wrapper{
gap: 20px;
grid-template-areas:
"h h h h h h h h h h h h"
"n n n n n n n n n n n n"
"s s m m m m m m m m m m"
"s s m m m m m m m m m m"
"s s m m m m m m m m m m"
"s s m m m m m m m m m m"
"s s m m m m m m m m m m"
"s s m m m m m m m m m m"
"s s m m m m m m m m m m"
"s s m m m m m m m m m m"
"s s m m m m m m m m m m"
"a a f f f f f f f f f f";
}
}
@media only screen and (max-width: 600px) {
.wrapper{
gap: 20px;
grid-template-areas:
"h h h h h h h h h h h h"
 "n n n n n n n n n n n n"
"m m m m m m m m m m m m"
"m m m m m m m m m m m m"
"m m m m m m m m m m m m"
"m m m m m m m m m m m m"
"m m m m m m m m m m m m"
"m m m m m m m m m m m m"
"m m m m m m m m m m m m"
"s s s s s s s s s s s s"
"a a a a a a a a a a a a"
"f f f f f f f f f f f f";
}
}
Session 12 and 13 - Project front-page
In this session you are going to build a website together with the students. The idea here is to teach them the best
practices of working with html and css, this includes:

the file organization

the use of git and github

reseting browsers default values of css

identifying the elements

the use of semantic tags

the best way of targeting elements in css

the use of google fonts

the use of relative units

the use of flexbox and grid

After creating the front-page together with them, their homework will be to create another page of the website.

So let's get started.

File organization
Start by creating a folder for the project, and create seperate folders in it for images, css and javascript. You can even
create an html folder if you want.

The use of git

After creating the folder for the project and organizing the subfolders, you can initialize git on the main folder and
push the repository on github. Don't forget to tell the students to push all the changes by the end, so they can clone
the project on their home devices and work on it.

Reseting browsers default values of css

You can create a file in the css folder, named [Link] and link it to index. Now go in google and type reset css, you
will get plenty websites with the code of reseting the default values of css. Copy the code and put it in the [Link]
file.

You can use this website if you want.

[Link]

Now all the css that is applied by the browser, will be removed (all paddings, margins will be removed, the text will
look all the same, the headings will be no longer bold and big, etc.).

The use of semantic tags

Use h1 only one time for the most important information, which is the title of the website, and use other headings
for other titles.

Use header, nav, main, article etc.

The best way of targeting elements in css

Use classes for most of the elements you use and target them by the classname, or if you target them by the tag
name make sure to specify it's parent also so you won't mess up other elements somewhere else.

The use of google fonts

You can find the best typefaces on google fonts, so import and use them.
In this project we are going to use 'Forum' and 'Inter'.

The use of relative units

In order to make the website fluid and elastic so it can easily become responsive you need to use relative units and
avoid pixels as much as possible.

The use of flexbox and grid

Demonstrate the use of flexbox and grid. You can create the layout in main using grid and you can create the menu
using flexbox.

The project template

You can find the project template under this link.

The project code

Check the folder "frontend-blog-project, you will find the source code there.
Session 14 - Bootstrap Overview
You can check the students manual for the opening and demonstrate Bootstrap by using different components that
Bootstrap offers.

Tell them that they have two ways of using Bootstrap, via download and via CDN, but don't spend time on teaching
them how to download and install Bootstrap, instead use the CDN.

You can first demonstrate components that we have been using until now, like navbars, tables, forms, cards,
containers, etc. and demonstrate some fancier components like modals and carousels after.

Create a simple website that includes only CSS, without bootstrap and looks beautiful.

Since we are going to teach them Bootstrap only in this session, it is good to focus on teaching them how to use the
Bootstrap documentation to find all the things they need.

Check this video!

Assign the homeworks

Create a webpage using bootstrap components.
Session 15 - Javascript - (Values, Variables, Data Types,
Basic Operators, if/else Statement)
Start by asking the students what do we need to use to give funcinality to our page.

Now give them a short explanation about Javascript. You can define it as: A high-level, object-oriented programming
language.

You can read the theory in the students material for a deconstrunct of this sentence.

Explain to them how important is a programming language to the computer and make them exited about Javascript.

Now open the browser and type some Javascript in the console in inspect. You can type something fancy just to
show them some basic functions of javascript, like this:

Don't waste time on explaining them in details what you did here, you can explain in short terms though.

Creating a Javascript file

Explain the students how we write internal Javascript and then create an external file and link them together.

You will be using console log to teach the students the basics of javascript. So start by displaying something like
hello world in the console again, but this time from the browser.
 [Link]("Hello world");

You can write some mathematical operations like:

[Link](40 + 16 - 10);
[Link](40 + 16 * 7 / 10);
[Link]("John Doe");

Values and Variables

Now explain to them that everything we displayed in the console until now is a value and if we want to store this
value to use it later, we have to put it inside a variable.

Explain how variables work, by storing some values in variables and then referencing them with console log.

let firstName = "John";

let lastName = "Doe";

[Link](firstName);
[Link](lastName);

Tell them about naming of variables, you can check the students material about this.

// descriptive variable names

let myFirstJob = 'Programmer';
let myCurrentJob = 'Teacher';
// non-descriptive variable names
let job1 = "programmer";
let job2 = 'teacher';

Data Types
Here you will have to explain the data types and how to check them using the typeof operator.

Check the students manual for examples in this section.

let, const and var

Show them how you can change the value of let and how you can't do the same with const. The best practice is to
use const by default and let when you know that the variable will change in the future, you can make an
example like this:

let age = 24;

age = 25;
[Link](age);

const birthYear = 1998;

 birthYear = 1997;
[Link](birthYear);

Show them the error that comes in the console as well.

Reasigning value with different data type to a variable

Tell them that Javascript is dynamic typing and explain what it means. Create some examples where you change the
data type of a variable.

Check the students material for examples.

Basic operators
Create examples by using the basic operators which are:

aritmetic operators
assignment operators
comparison operators

// Basic Operators
// Math operators
const now = 2022;
const ageJohn = now - 1991;
const ageJeniffer = now - 2018;
[Link](ageJohn, ageJeniffer);

[Link](ageJohn * 2, ageJohn / 10, 2 ** 3);

// 2 ** 3 means 2 to the power of 3 = 2 * 2 * 2

const firstName = 'John';

const lastName = 'Dow';
[Link](firstName + ' ' + lastName);

// Assignment operators
let x = 10 + 5; // 15
x += 10; // x = x + 10 = 25
x *= 4; // x = x * 4 = 100
x++; // x = x + 1
x--;
x--;
 [Link](x);

// Comparison operators
[Link](ageJohn > ageJeniffer); // >, <, >=, <=
[Link](ageSarah >= 18);

const isFullAge = ageSarah >= 18;

[Link](now - 1991 > now - 2018);

Classwork
Mark and John are trying to compare their BMI (Body Mass Index), which is calculated using the formula: BMI = mass
/ height ** 2 = mass / (height * height). (mass in kg and height in meter).

1. Store Mark's and John's mass and height in variables

2. Calculate both their BMIs using the formula (you can even implement both versions)
3. Create a boolean variable 'markHigherBMI' containing information about whether Mark has a higher BMI
than John.

TEST DATA 1: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95 m tall.

TEST DATA 2: Marks weights 95 kg and is 1.88 m tall. John weights 85 kg and is 1.76 m tall.

GOOD LUCK 😀

Answer

// const massMark = 78;

// const heightMark = 1.69;
// const massJohn = 92;
// const heightJohn = 1.95;

const massMark = 95;

const heightMark = 1.88;
const massJohn = 85;
const heightJohn = 1.76;

const BMIMark = massMark / heightMark ** 2;

const BMIJohn = massJohn / (heightJohn * heightJohn);
const markHigherBMI = BMIMark > BMIJohn;

[Link](BMIMark, BMIJohn, markHigherBMI);

if/else statement
You can explain if/else your own way or check the students manual, there are also examples in it.

Assign the homeworks

Mark and John are trying to compare their BMI (Body Mass Index), which is calculated using the formula: BMI = mass
/ height ** 2 = mass / (height * height). (mass in kg and height in meter).

1. Store Mark's and John's mass and height in variables

2. Calculate both their BMIs using the formula (you can even implement both versions)

3. Create a boolean variable 'markHigherBMI' containing information about whether Mark has a higher BMI
than John.

4. Print a nice output to the console, saying who has the higher BMI. The message can be either "Mark's BMI is
higher than John's!" or "John's BMI is higher than Mark's!"

5. Include the BMI values in the outputs. Example: "Mark's BMI (28.3) is higher than John's (23.9)!"

HINT: Use an if/else statement 😉

TEST DATA 1: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95 m tall.

TEST DATA 2: Marks weights 95 kg and is 1.88 m tall. John weights 85 kg and is 1.76 m tall.

GOOD LUCK 😀

Answer

const massMark = 78;

const heightMark = 1.69;
const massJohn = 92;
const heightJohn = 1.95;

// const massMark = 95;

// const heightMark = 1.88;
// const massJohn = 85;
// const heightJohn = 1.76;

const BMIMark = massMark / heightMark ** 2;

const BMIJohn = massJohn / (heightJohn * heightJohn);
[Link](BMIMark, BMIJohn);

if (BMIMark > BMIJohn) {

[Link](`Mark's BMI (${BMIMark}) is higher than John's (${BMIJohn})!`)
} else {
[Link](`John's BMI (${BMIJohn}) is higher than Marks's (${BMIMark})!`)
}

# Session 16 - Javascript - (Template literals, Type

conversion and type coercion, truthy and falsy values,
logical operators)
Template literals
Examples to show in class:

const firstName = 'John';

const job = 'teacher';
const birthYear = 1998;
const year = 2022;
// Without template literals
const john = "I'm " + firstName + ', a ' + (year - birthYear) + ' year old ' + job +
'!';
[Link](john);

// With template literals

const johnNew = `I'm ${firstName}, a ${year - birthYear} year old ${job}!`;
[Link](johnNew);

[Link](`Just a regular string...`);

// Writing multiple lines without template literals

[Link]('String with \n\
multiple \n\
lines');

// Writing multiple lines with template literals

[Link](`String
multiple
lines`);

Type conversion and type coercion

// type conversion
const inputYear = '1991';
[Link](Number(inputYear), inputYear);
[Link](Number(inputYear) + 18);

[Link](Number('John'));
[Link](typeof NaN);

[Link](String(24), 24);

// type coercion
[Link]('I am ' + 24 + ' years old');

// Ask students about the result they think will come

[Link]('23' - '10' - 3);

[Link]('23' / '2');
[Link]('23' > '18');
 let n = '1' + 1; // '11'
n = n - 1;
[Link](n);

Truthy and Falsy Values

// 5 falsy values: 0, '', undefined, null, NaN

[Link](Boolean(0)); // False
[Link](Boolean(undefined)); // False
[Link](Boolean('John')); // True
[Link](Boolean(null)); // False
[Link](Boolean('')); // False

const money = 100;

if (money) {
[Link]("Don't spend it all ;)");
} else {
[Link]('You should get a job!');
}

let width;
if (width) {
[Link]('Width is defined');
} else {
[Link]('Width is UNDEFINED');
}

Equality operator "==" vs "==="

const age = '18';

if (age === 18) [Link]('You just became an adult :D (strict)');

if (age == 18) [Link]('You just became an adult :D (loose)');

// Use prompt only for example purposes to let the students know that the value that
comes from the input is always a string, you should also store the result in a
variable, like in the comment below

// const favourite = prompt("What's your favourite number?");

// Use the Number function to convert the value to number

const favourite = Number(prompt("What's your favourite number?"));
[Link](favourite);
[Link](typeof favourite);

if (favourite === 23) {

 [Link]('Cool! 23 is an amzaing number!')
} else if (favourite === 7) {
[Link]('7 is also a cool number')
} else if (favourite === 9) {
[Link]('9 is also a cool number')
} else {
[Link]('Number is not 23 or 7 or 9')
}

if (favourite !== 23) [Link]('Why not 23?');

Logical operators

// Logical Operators
const hasDriversLicense = true; // A
const hasGoodVision = true; // B

[Link](hasDriversLicense && hasGoodVision);

[Link](hasDriversLicense || hasGoodVision);
[Link](!hasDriversLicense);

// if (hasDriversLicense && hasGoodVision) {

// [Link]('Sarah is able to drive!');
// } else {
// [Link]('Someone else should drive...');
// }

const isTired = false; // C

[Link](hasDriversLicense && hasGoodVision && isTired);

if (hasDriversLicense && hasGoodVision && !isTired) {

[Link]('Sarah is able to drive!');
} else {
[Link]('Someone else should drive...');
}

Classwork
There are two gymnastics teams, Dolphins and Koalas. They compete against each other 3 times. The winner with the
highest average score wins the trophy!

1. Calculate the average score for each team, using the test data below

2. Compare the team's average scores to determine the winner of the competition, and print it to the console.
Don't forget that there can be a draw, so test for that as well (draw means they have the same average
score).

3. BONUS 1: Include a requirement for a minimum score of 100. With this rule, a team only wins if it has a
higher score than the other team, and the same time a score of at least 100 points.
 HINT: Use a logical operator to test for minimum score, as well as multiple else-if blocks 😉

4. BONUS 2: Minimum score also applies to a draw! So a draw only happens when both teams have the same
score and both have a score greater or equal 100 points. Otherwise, no team wins the trophy.

TEST DATA: Dolphins score 96, 108 and 89. Koalas score 88, 91 and 110

TEST DATA BONUS 1: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 123

TEST DATA BONUS 2: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 106

GOOD LUCK 😀

Answer

// const scoreDolphins = (96 + 108 + 89) / 3;

// const scoreKoalas = (88 + 91 + 110) / 3;
// [Link](scoreDolphins, scoreKoalas);

// if (scoreDolphins > scoreKoalas) {

// [Link]('Dolphins win the trophy 🏆');
// } else if (scoreKoalas > scoreDolphins) {
// [Link]('Koalas win the trophy 🏆');
// } else if (scoreDolphins === scoreKoalas) {
// [Link]('Both win the trophy!');
// }

// BONUS 1
const scoreDolphins = (97 + 112 + 80) / 3;
const scoreKoalas = (109 + 95 + 50) / 3;
[Link](scoreDolphins, scoreKoalas);

if (scoreDolphins > scoreKoalas && scoreDolphins >= 100) {

[Link]('Dolphins win the trophy 🏆');
} else if (scoreKoalas > scoreDolphins && scoreKoalas >= 100) {
[Link]('Koalas win the trophy 🏆');
} else if (scoreDolphins === scoreKoalas && scoreDolphins >= 100 && scoreKoalas >=
100) {
[Link]('Both win the trophy!');
} else {
[Link]('No one wins the trophy 😭');
}

The conditional ternary operator

The conditional ternary operator is special because it produces a value. Look at the examples below, you can even
store it directly in a variable and as we know we can store only expressions in a variable and not statements.

Conclusion: Conditional ternary operator allows us to write an if/else statement as an expression.

// The Conditional (Ternary) Operator

const age = 23;
 // age >= 18 ? [Link]('I like to drink wine 🍷') : [Link]('I like to drink
water 💧');

const drink = age >= 18 ? 'wine 🍷' : 'water 💧';

[Link](drink);

let drink2;
if (age >= 18) {
drink2 = 'wine 🍷';
} else {
drink2 = 'water 💧';
}
[Link](drink2);

[Link](`I like to drink ${age >= 18 ? 'wine 🍷' : 'water 💧'}`);

Assign the homeworks

Steven wants to build a very simple tip calculator for whenever he goes eating in a resturant. In his country, it's usual
to tip 15% if the bill value is between 50 and 300. If the value is different, the tip is 20%.

1. Your task is to caluclate the tip, depending on the bill value. Create a variable called 'tip' for this. It's not
allowed to use an if/else statement 😅 (If it's easier for you, you can start with an if/else statement, and
then try to convert it to a ternary operator!)
2. Print a string to the console containing the bill value, the tip, and the final value (bill + tip). Example: 'The
bill was 275, the tip was 41.25, and the total value 316.25'

TEST DATA: Test for bill values 275, 40 and 430

HINT: To calculate 20% of a value, simply multiply it by 20/100 = 0.2 HINT: Value X is between 50 and 300, if it's >=
50 && <= 300 😉

GOOD LUCK 😀

Answer

const bill = 430;

const tip = bill <= 300 && bill >= 50 ? bill * 0.15 : bill * 0.2;
[Link](`The bill was ${bill}, the tip was ${tip}, and the total value ${bill +
tip}`);
Session 17 - Javascript - Functions and arrays
In this session you will be talking about functions and arrays.

Functions
You can describe functions as machines that are programmed to do something.

Let the students know that we were using build-in functions before, for example [Link]() which logs
something to the console or Number() which converts a value to number data type, String() , etc., but now
we are going to create our own functions.

You can first define a simple function like this:

function logger(){
[Link](“Hello world”);
}

logger();

Now explain to them the structure of the function:

the keyword function to declare it

the name of the function followed by parentheses
the body of the function wraped in curly braces

After they understand how it works, you can move on with functions with parameters. For example you can create a
fruit processor function like this:

function nutribullet(apples, oranges){

const juice = `Juice with ${apples} apples and ${oranges} oranges.`
return juice;
}

const appleJuice = nutribullet(4, 2);

[Link](appleJuice);

const orangeJuice = nutribullet(2, 4);

[Link](orangeJuice);

The output in the console will be like this:

Explain that by using the return keyword we can produce a value from the function and we can capture this value in a
variable after (eg. orangeJuice and appleJuice).
The words apples and oranges are called parameters which act like placeholders to describe the values that we
should put in the function to be processed.

After understanding this one too, you can go ahead and explain to them other variations for writing functions.

// Function written as a declaration

function nutribullet(apples, oranges){
const juice = `Juice with ${apples} apples and ${oranges} oranges.`
return juice;
}

// Function written as an expression

const nutribullet2 = function (apples, oranges){
const juice = `Juice with ${apples} apples and ${oranges} oranges.`
return juice;
}

// Arrow function
nutribullet3 = (apples, oranges) => {
const juice = `Juice with ${apples} apples and ${oranges} oranges.`
return juice;
}

Now the difference between writing the function as a declaration and as an expression is that:

functions written as a declaration can be called before the function is defined

const ageJohn = findAge(2022 - 1991);

function findAge(currentYear, birthYear){

return currentYear - birthYear;
}

[Link](ageJohn);
// This works perfectly fine

functions written as an expression can only be called after we define them

const ageJohn = findAge(2022 - 1991);

findAge = function(currentYear, birthYear){

return currentYear - birthYear;
}

[Link](ageJohn);
// This will throw an error

As for the arrow functions you can show them how to write a one line function like this:

findAge = (currentYear, birthYear) => currentYear - birthYear;

So when there is only one line of code you don't even have to use the curly braces or the return keyword, however
when there is more than one line of code the curly braces and the return keyword are necessary.

Functions calling other functions

You can create two functions and use them together by calling one function inside the other. For example:

const findAge = function (currentYear, birthYear) {

return currentYear - birthYear;
}

const findYearsUntilRetirement = function (birthYear, firstName) {

const age = findAge(2022, birthYear);
const retirement = 65 - age;
return `${firstName} will be retired in ${retirement} years.`;
}

[Link](findYearsUntilRetirement(1991, 'John'));
[Link](findYearsUntilRetirement(1951, 'Jennifer'));

Now there is a problem, the output of the second console log is "Jennifer will be retired in -6 years." and this doesn't
make sense at all, so to fix the problem use an if/else statement inside the function.

By doing this you will create a more complex function.

const findAge = function (currentYear, birthYear) {

return currentYear - birthYear;
}

const findYearsUntilRetirement = function (birthYear, firstName) {

const age = findAge(2022, birthYear);
const retirement = 65 - age;
if (retirement > 0) {
[Link](`${firstName} retires in ${retirement} years`);
return retirement;
} else {
[Link](`${firstName} has already retired 🎉`);
return -1;
}
}

[Link](findYearsUntilRetirement(1991, 'John'));
[Link](findYearsUntilRetirement(1951, 'Jennifer'));

Classwork
Back to the two gymnastics teams, the Dolphins and the Koalas! There is a new gymnastics discipline, which works
differently. Each team competes 3 times, and then the average of the 3 scores is calculated (so one average score per
team). A team ONLY wins if it has at least DOUBLE the average score of the other team. Otherwise, no team wins!
 1. Create an arrow function 'calcAverage' to calculate the average of 3 scores
2. Use the function to calculate the average for both teams
3. Create a function 'checkWinner' that takes the average score of each team as parameters ('avgDolhins' and
'avgKoalas'), and then logs the winner to the console, together with the victory points, according to the rule
above. Example: "Koalas win (30 vs. 13)".
4. Use the 'checkWinner' function to determine the winner for both DATA 1 and DATA 2.
5. Ignore draws this time.

TEST DATA 1: Dolphins score 44, 23 and 71. Koalas score 65, 54 and 49 TEST DATA 2: Dolphins score 85, 54 and 41.
Koalas score 23, 34 and 27

HINT: To calculate average of 3 values, add them all together and divide by 3 HINT: To check if number A is at least
double number B, check for A >= 2 * B. Apply this to the team's average scores 😉

GOOD LUCK 😀

Answer

const calcAverage = (a, b, c) => (a + b + c) / 3;

[Link](calcAverage(3, 4, 5));

// Test 1
let scoreDolphins = calcAverage(44, 23, 71);
let scoreKoalas = calcAverage(65, 54, 49);
[Link](scoreDolphins, scoreKoalas);

const checkWinner = function (avgDolphins, avgKoalas) {

if (avgDolphins >= 2 * avgKoalas) {
[Link](`Dolphins win 🏆 (${avgDolphins} vs. ${avgKoalas})`);
} else if (avgKoalas >= 2 * avgDolphins) {
[Link](`Koalas win 🏆 (${avgKoalas} vs. ${avgDolphins})`);
} else {
[Link]('No team wins...');
}
}
checkWinner(scoreDolphins, scoreKoalas);

checkWinner(576, 111);

// Test 2
scoreDolphins = calcAverage(85, 54, 41);
scoreKoalas = calcAverage(23, 34, 27);
[Link](scoreDolphins, scoreKoalas);
checkWinner(scoreDolphins, scoreKoalas);

Arrays
Arrays are data structures which allow us to store a collection of multiple values under a single variable.

You can first save some values in seperate variables and then explain to them how useful arrays are, for example:
 let car1 = 'BMW';
let car2 = 'Audi';
let car3 = 'Volkswagen';
let car4 = 'Tesla';

let cars = ['BMW', 'Audi', 'Volkswagen', 'Tesla'];

Now after teaching them how to create an array, go ahead with some basic array operations, like:

targeting an element
finding the length of array
targeting the last element of the array
adding a new element in the array
removing an element from the array
finding the index of an element
checking if an element exists in the array

Targeting an element
You need to explain to them how the indexes work first, that they start from 0 and not from 1. Now use the array you
created before to target some of the elements.

[Link](cars[0]);
[Link](cars[2]);
[Link](cars[3]);

Array length and targeting the last element

[Link]([Link]);

[Link](cars[[Link]-1]);

Adding a new element

// Adding an element as the first item of the array

[Link]('Mustang');
[Link](cars);

// Adding an element as the last item of the array

[Link]('Mercedes');
[Link](cars);

Removing an element from the array

// Removing the first element of the array

[Link]();
[Link]();
 // Removing the last element of the array
[Link]('Mercedes');
[Link](cars);

Finding the index of an element

[Link]([Link]('Volkswagen'));

Checking if an element exists

[Link]([Link]('Mercedes'));
// The result will be a boolean value

Assign the homeworks

Steven is still building his tip calculator, using the same rules as before: Tip 15% of the bill if the bill value is between
50 and 300, and if the value is different, the tip is 20%.

1. Write a function 'calcTip' that takes any bill value as an input and returns the corresponding tip, calculated
based on the rules above (you can check out the code from first tip calculator challenge if you need to). Use
the function type you like the most. Test the function using a bill value of 100.
2. And now let's use arrays! So create an array 'bills' containing the test data below.
3. Create an array 'tips' containing the tip value for each bill, calculated from the function you created before.
4. BONUS: Create an array 'total' containing the total values, so the bill + tip.

TEST DATA: 125, 555 and 44

HINT: Remember that an array needs a value in each position, and that value can actually be the returned value of a
function! So you can just call a function as array values (so don't store the tip values in separate variables first, but
right in the new array) 😉

GOOD LUCK 😀
Session 18 - Objects and Loops
Homework discussion
Discuss the homeworks of last session and code them together with the students by explaining what you're doing.

Objects
Check the students manual for theory and examples about the objects. As soon as you explain how objects and
properties work, assign them the first classwork and give them 5 minutes time to finish it since it is not a hard one.

Classwork
Exercise 18.1

Write the sentence below, but you have to get the highlighted values from the object, do not write them manually:

"John Doe a 27 year old programmer visited 3 countries."

Answer

const person = {
firstName: 'John',
lastName: 'Doe',
age: 25,
nationality: 'american',
visitedCountries: ['Spain', 'Germany', 'Italy'],
job: 'programmer'
}

const summary = `${[Link]} ${[Link]} a ${[Link]} year old

${[Link]} visited ${[Link]} countries.`;

After finishing the first classwork and explaining what object methods are, how we write and how we call them, you
can assign the second classwork to the students and give them around 15 minutes to finish it.

Classwork
Exercise 18.2

Let's go back to Mark and John comparing their BMIs! This time, let's use objects to implement the calculations!
Remember: BMI = mass / height ** 2 = mass / (height * height) (mass in kg and height in meter)

Your tasks:

1. For each of them, create an object with properties for their full name, mass, and height (Mark Miller and
John Smith)
2. Create a 'calcBMI' method on each object to calculate the BMI (the same method on both objects). Store
the BMI value to a property, and also return it from the method
 3. Log to the console who has the higher BMI, together with the full name and the respective BMI. Example:
"John's BMI (28.3) is higher than Mark's (23.9)!" Test data: Marks weights 78 kg and is 1.69 m tall. John
weights 92 kg and is 1.95 m tall. GOOD LUCK

Answer

const mark = {
fullName: 'Mark Miller',
mass: 78,
height: 1.69,
calcBMI: function () {
[Link] = [Link] / [Link] ** 2;
return [Link];
}
};

const john = {
fullName: 'John Smith',
mass: 92,
height: 1.95,
calcBMI: function () {
[Link] = [Link] / [Link] ** 2;
return [Link];
}
};

Loops
Check the students manual for theory and examples.

Example
This one can be used as classwork as well.

Create the multiplication table

for (let i = 1; i <= 10; i++) {

[Link]('---------------')
for (let e = 1; e <= 10; e++) {
[Link](`${i} * ${e} = ${i * e}`);
}
}

Assign homework
Let's improve Steven's tip calculator even more, this time using loops!

Your tasks:

1. Create an array 'bills' containing all 10 test bill values

 2. Create empty arrays for the tips and the totals ('tips' and 'totals')
3. Use the 'calcTip' function we wrote before (no need to repeat) to calculate tips and total values (bill + tip)
for every bill value in the bills array. Use a for loop to perform the 10 calculations! Test data: 22, 295, 176,
440, 37, 105, 10, 1100, 86 and 52 Hints: Call ‘calcTip ‘in the loop and use the push method to add values to
the tips and totals arrays � Bonus:
4. Bonus: Write a function 'calcAverage' which takes an array called 'arr' as an argument. This function
calculates the average of all numbers in the given array. This is a difficult challenge (we haven't done this
before)! Here is how to solve it:
4.1 First, you will need to add up all values in the array. To do the addition, start by creating a
variable 'sum' that starts at 0. Then loop over the array using a for loop. In each iteration, add the
current value to the 'sum' variable. This way, by the end of the loop, you have all values added
together
4.2. To calculate the average, divide the sum you calculated before by the length of the array
(because that's the number of elements)
4.3. Call the function with the 'totals' array

GOOD LUCK

Answer

const calcTip = function (bill) {

return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
}
const bills = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52];
const tips = [];
const totals = [];

for (let i = 0; i < [Link]; i++) {

const tip = calcTip(bills[i]);
[Link](tip);
[Link](tip + bills[i]);
}
[Link](bills, tips, totals);

const calcAverage = function (arr) {

let sum = 0;
for (let i = 0; i < [Link]; i++) {
// sum = sum + arr[i];
sum += arr[i];
}
return sum / [Link];
}
[Link](calcAverage([2, 3, 7]));
[Link](calcAverage(totals));
[Link](calcAverage(tips));
Session 19 - Javascript - DOM
You can start by explaining to the students what DOM is. Try to keep it simple without fancy terms since they don't
know yet what API's are, but make sure to explain them that DOM is not a part of Javascript, but a part of the
browser which Javascript uses to access the HTML.

You can show them a DOM tree like this one:

Explain three ways of targeting elements:

getElementById()
querySelector()
querySelectorAll()

You can check for examples in the students material.

After doing some manipulations with the HTML elements content and styling, you can go ahead and start building
the game 'Guess my number'.

You can show to them how HTML and CSS is written in that game, but don't spend much time doing that, since the
idea is to work with Javascript and DOM here.

Now build the game logic along with them by explaining everything.

Classwork
The students have to programm the 'try again' button in the game, so that when they press it, the game should be
restarted in the begining state, except the highscore that changes only if they get a better score or refresh the page.

Assign the homeworks

The game we built in class (guess my number) isn't finished yet and the code is also very messy.

Your tasks are to:

make it so when the user reaches score 0, the message will say "💥 Game over" and the button will switch
from "Check" to "Try again"
clean the code by creating functions, using ternary operators, variables or whatever you think makes the
code more optimized

Answer
You can find the file named [Link] in the game folder (the path is guess_my_number/js/[Link] ).
Session 20 - Javascript - How to build a carousel
In this session you will teach the students how to create a carousel from scratch, using HTML, CSS and Javascript. You
can send the HTML and CSS code to the students and explain some details to them, like:

The HTML structure

The purpose of classes active and not-active
How the images are disappearing by changing their opacity
The effects that are added with :hover (eg. the arrows and the dots width is increased on hover)

Then code the Javascript along with them.

They will have the opportunity to learn the classList method by doing this exercise and use concepts like functions,
arrays, loops to interact with HTML elements.

Session 21 - Javascript - How to build a modal

In this session you will teach the students how to create a modal from scratch, using HTML, CSS and Javascript. You
can send the HTML and CSS code to the students without the modal and the overlay, so you can build those two
along with them by explaining how the logic of the modal works, with the class overlay that makes the background
blurry, but doesn't affect the modal window because of the z-index.

Continue with the Javascript code after, this time you will create functions from the beginning for closing and
opening the modal, so you can call them easily on event listeners.
Session 23 - Javascript - APIs
Since we haven't discussed about concepts like asynchronous and promises before, don't focus on explaining how
the fetch API works in details, instead use this piece of code to experiment with APIs.

//We used the fetch method to send a request to the server

fetch("[Link] This URL is going to the [Link]
server
.then(res => [Link]()) // This makes sure for us to get JSON formatted data
.then(data =>{// Whatever we got back, we passed it through the parameter of "data"
[Link](data);// This is the block of code where we define what to do with
the data
})
.catch(err=>{//If there is an error, show the error in console
[Link](`error ${err}`)
});

You can find in the students material two examples with APIs, so use them to show the students how APIs work.

The link of documentation for the first API

The link of documentation for the second API

After finishing these two examples, to make it more interesting you can use NASA APIs to get data direct from NASA
servers.

Nasa APIs example

Type in google NASA API and go to the first link, or use this link

To use NASA APIs you have to get a key, so, you will need to open an account. However NASA doesn't really care
about the accounts so, if you don't want to give your personal data, you can just fill out the form with random data
to get it.

For example:

name: john

surname: johnson

email: johnjohnson@[Link]

You can copy the URL, which contains the key as well and put it as a parameter in fetch. If the students ask about the
purpose of the key you can explain to them that if you would send millions of requests into NASA's server, they can
stop you by disabling the key you are using.

Now if you scroll down in the NASA Webpage, you can find information about the API, for example if you click on
APOD (astronomy picture of the day)
you can see the documentation and instructions on how to use the API

You will be using the date parameter, which has to be of type YYYY-MM-DD.

Explain to the students that not every Webpage provides you with a good understanding documentation of the API
like NASA does, and that NASA offers only some data for us to use, it doesn't mean that we can use all the data that
is in NASAs servers.

You can log to the console all the data you get back first.

[Link]("button").addEventListener("click", function () {
const choice = [Link]("input").value;

fetch("[Link]
api_key=grrBXEW80QPHXY7UexNYhLUYmcMQ9LWPbnVra5ye")
 .then(res => [Link]())
.then(data => {
[Link](data);
})
.catch(err => {
[Link](`error ${err}`);
})
})

After showing them the data in console, you will now create an input with type date and a button so when you
click that button, the API will get triggered.

HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Introduction to APIs</title>
</head>
<body>
<h1>Picture of the day</h1>
<input type="date">
<button>Search</button>

<h2>NASA</h2>
<img src="">
<h4>Explanation</h4>
<script src="[Link]"></script>
</body>
</html>

JS code:

[Link]("button").addEventListener("click", function () {
const choice = [Link]("input").value;

fetch(`[Link]
api_key=grrBXEW80QPHXY7UexNYhLUYmcMQ9LWPbnVra5ye&date=${choice}`)
.then(res => [Link]())
.then(data => {
[Link](data);
[Link]("img").src = [Link];
[Link]("h4").textContent = [Link];
})
.catch(err => {
[Link](`error ${err}`);
})
})

Note how I added another parameter at the end of the url, which is date and we are getting the value from the input.
You can play with it now by changing the date and clicking the button, to show the photo that was taken on that day
by NASA, and the explanation of the photo. However, there are some days that NASA didn't take a picture but took a
video instead, so you can get an error. In this case either try another date, or create an if/else statement to show
videos as well, like this:

[Link]("button").addEventListener("click", function () {
const choice = [Link]("input").value;

fetch(`[Link]
api_key=grrBXEW80QPHXY7UexNYhLUYmcMQ9LWPbnVra5ye&date=${choice}`)
.then(res => [Link]())
.then(data => {
[Link](data);
if(data.media_type === 'image'){
[Link]("img").src = [Link];
} else if(data.media_type === 'video'){
[Link]("iframe").src = [Link];
}
[Link]("h4").textContent = [Link];
})
.catch(err => {
[Link](`error ${err}`);
})
})

Don't forget to create an iframe element in the HTML file as well:

<iframe src="0" frameborder="0"></iframe>

Session 24 - JavaScript - Local Storage

Simple example with Local Storage
Create a game where you can press a button that increases the score by 1, the score has to be displayed in the page,
even if the page reloads, which means you have to store it in the local storage too.

Answer
The HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Local Bot Score</title>
</head>
<body>
<button>Another one</button>
<h3>Score</h3>
<span></span>
 <script src="[Link]"></script>
</body>
</html>

The JavaScript code:

if (![Link]("botScore")) {
[Link]("botScore", 0);
}
[Link]("span").textContent = [Link]("botScore");

[Link]("button").addEventListener("click", anotherOne)

function anotherOne() {
let botScoreVal = [Link]("botScore");
botScoreVal++;
[Link]("span").textContent = botScoreVal;
[Link]("botScore", botScoreVal);
}~

The Card Game! (APIs)

Imagine if you would want to build a card game with JavaScript, how hard it would be. You would have to create a
deck of cards which contains all 52 cards and then create functions to shuffle the cards, to draw a card, etc.

However, there is a Website called [Link] and there you can find an API with all the
functions mentioned above. So, we will be using APIs to get a deck of cards, and to draw two cards randomly. One
card will be for player 1 and the other one will be for player 2. Whoever has the greatest card, wins, if both have the
same card there will be a tie.

We are going to show the pictures of both cards as images, and there will be a message that tells if anyone won or
there was a tie.

We will get the value of the card by using the value property, however for ACE, KING, QUEEN and JACK we have
to manually convert the value to number.

The HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Card Game</title>
</head>
<body>
<h1>Card Game!</h1>

<button>Check winner</button>

<h2>Player 1</h2>
<img id="player1">
<h2>Player 2</h2>
 <img id="player2">
<h3>Player wins</h3>

<script src="[Link]"></script>
</body>
</html>

The JavaScript code:

// Creating a variable to store the deck of cards

let deckId = '';

// Getting the deck of cards

fetch("[Link]
.then(res => [Link]())
.then(data => {
[Link](data);
deckId = data.deck_id;
})
.catch(err => {
[Link](`error ${err}`);
});

[Link]("button").addEventListener("click", drawTwo);

// Drawing two cards and showing them in HTML, together with the winner of the game
function drawTwo() {
const url = `[Link]
fetch(url)
.then(res => [Link]())
.then(data => {
[Link](data);
[Link]('#player1').src = [Link][0].image;
[Link]('#player2').src = [Link][1].image;
let player1Val = convertToNum([Link][0].value);
let player2Val = convertToNum([Link][1].value);
if (player1Val > player2Val) {
[Link]('h3').innerText = "Player 1 wins";
} else if (player1Val < player2Val) {
[Link]('h3').innerText = "Player 2 wins";
} else {
[Link]('h3').innerText = "We have a tie";
}
})
.catch(err => {
[Link](`error ${err}`);
});
}
// Converting ACE, KING, QUEEN and JACK to numbers
function convertToNum(val) {
 if (val === 'ACE') {
return 14;
} else if (val === 'KING') {
return 13;
} else if (val === 'QUEEN') {
return 12;
} else if (val === 'JACK') {
return 11;
} else {
return Number(val);
}
}