## Overview 🧭
![](https://media1.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif?cid=7941fdc6uwytj9gj1m0c0x51tqoem92i7k5zgc8s748q2r3f&ep=v1_gifs_search&rid=giphy.gif&ct=g)

Welcome to the first module of  DirectEd’s main boot camp. During these weeks you will learn foundational knowledge from the internet and its underlying technology all the way through to building the parts of webpages displayed inside your browser. We are proud of you all for taking the first step in your learning journey. As the famous painter Vincent Van Gogh once said:

> “What would life be if we had no courage to attempt anything?”   

## 📅 Schedule

👉 Reminder: Our Google calendar contains the recommended timeline for taking the course as well as information about when training and surveys will take place so please make sure you have added it to your calendar and accepted all events before moving on.  We have shared a calendar invite with you via Email. 

**⚠️Please ensure that you are using the correct calendar for your country to avoid missing important events.⚠️**

**Kenyan Students Only👇**

- Calendar Link: https://calendar.google.com/calendar/u/1?cid=NTY1ODg4MWRkYzYyNTg3NGZlYzFmYmZhZDljMGQzM2UzMjdiNzM4OTAwZDFhMWZiMTMzZWI3NmM0ZjYwNTRmMUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

**Ethiopian Students Only👇**

- https://calendar.google.com/calendar/u/1?cid=NGU0OGZkNjA1ZTg3ZjI5NGJlNzQyNGZlNDBhNzhkZDQ5ZDNiNWJjNTZjMTkxNTY1YjY4YWU2MDYyOTA2ZGRkMEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

**Google Calendar Tutorial**
- How to access a Google Calendar shared with you: https://www.youtube.com/watch?v=bofIU4rq-VM

## ⏰Special Events

You will be having the following workshop during this module:
- Using AI as Coder 
-  Fundamentals of computers

# 📑 Sections

This module is divided into seven major sections. Each section has a single area of focus and is aimed at helping you master the topics covered. Here is the list of contents covered in this section

- Section One: The Internet 🌐
- Section Two:  Full-stack Web Apps 
- Section Three: Introduction to Frontend HTML5
- Section Four: Introduction to Frontend:- CSS3
- Section Five: Introduction to Frontend:- Tailwind 
- Section Six: Website Design and Development Process 🧗
- Section Seven: Git and GitHub 👨‍💻👩‍💻
- 📝 Sprint Assessment 📝

Introduction 🌅

## **💡Topic: How does the internet work?**

You can’t be a car mechanic without knowing how an engine works, as such you can’t be a web developer without knowing how the internet works so go ahead and watch the video found above to understand how the underlying technology behind the internet works.

## 💡Topic: How does the web work?

During your briefing we mentioned that you will become web developers, but what is the web? A place where a spider lives? The simple concept behind  *How the web works* provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone and it is explained in this section.

This theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background.

### Clients and servers

Computers connected to the internet are called **clients** and **servers**. A simplified diagram of how they interact might look like this:

![](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works/simple-client-server.png)

- Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome).
- Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.

### The other parts of the toolbox

The client and server we've described above don't tell the whole story. There are many other parts involved, and we'll describe them below.

For now, let's imagine that the web is a road. On one end of the road is the client, which is like your house. On the other end of the road is the server, which is a shop you want to buy something from.

![](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works/road.jpg)

In addition to the client and the server, we also need to say hello to:

- **Your internet connection**: Allows you to send and receive data on the web. It's basically like the street between your house and the shop.
- **TCP/IP**: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the Internet. This is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. In our example, this is like a car or a bike (or however else you might get around).
- **DNS**: The Domain Name System is like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website's IP address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address of the shop so you can access it.
- **HTTP**: Hypertext Transfer Protocol is an application [protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol) that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.
- **Component files**: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types:
    - **Code files**: Websites are built primarily from HTML, CSS, and JavaScript, though you'll meet other technologies a bit later.
    - **Assets**: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.

### So what happens, exactly?

When you type a web address into your browser (for our analogy that's like walking to the shop):

1. The browser goes to the DNS server and finds the real address of the server that the website lives on (you find the address of the shop).
2. The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
3. If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course, you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).
4. The browser assembles the small chunks into a complete web page and displays it to you (the goods arrive at your door — new shiny stuff, awesome!).

## 📋 **Instructions:**

1. **Step one:** Follow the link found below to the Web Demystified playlist and watch all 6 videos in the series to better understand how the web works and gain an understanding of some of its technologies:

- [ ] 🔗 **Youtube Video:** https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g

## 🧠 **Exercise / Project:**


1. You have no exercises for this section

## 📚 **Additional Resources**

- Websites
    - https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web

Section One: The Internet 🌐

How well do you understand the workings of the internet and the web? Take this quiz to find out!

The Internet Quiz

## 💡Topic: What is a full-stack web application?

A full-stack web application is like a big castle made out of many different blocks. Each block is like a different part of the website, such as buttons, pictures, and words. A full-stack web application has many different parts, but we can break it down into two main parts: the front end and the back end.

![](https://www.inveraray-castle.com/images/library/castle-exterior-gallery/INVERARAY-CASTLE-IMGP3996.jpg)

The front end is like the outside of the castle that people can see and play with. It's made up of things like buttons, pictures, and text that people can click on and read. The front end is built using special tools like HTML, CSS, and JavaScript, which help us make the castle look really cool and fun to play with.

![](https://knightstemplar.co/wp-content/uploads/2023/08/galileus_staff_of_the_medieval_castle_indoors_knights_kitchen_s_5e1b6239-1759-463d-a849-66492e5d837e-1024x512.jpg)

The back end is like the rules and machinery of the castle that people can't see but is really important to making the castle work. For example, if the king and queen hold a feast their guests only see the food and drinks that are presented to them but there is an entire kitchen full of staff and appliances that work together to create a single meal. The backend allows the castle to function like one. It's made up of things like servers and databases that help us store and organize all the different parts of the castle. The back end is built using special tools like Node.js, MongoDB, and Express, which help us make sure the castle runs really smoothly and everything works together nicely.

So, a full stack web application is like a big castle made out of many different blocks, with a front end we can see and play with, and a back end that helps make everything work together nicely.

### Topic: What is full-stack web development?

Full stack web development is the act of building the big castle with many blocks we spoke about earlier. 
![](https://i.stack.imgur.com/9jovB.jpg)
Full-stack web developers know how to build all the different blocks and put them together to make a really cool castle that people can visit on the internet. They use special tools and languages like HTML, CSS, and JavaScript to build the blocks and make them work together. Just like how it's important to make sure all the blocks in a castle fit together nicely, full-stack web developers make sure all the different parts of a website work well together too. During these ten weeks, you will learn how to become a full-stack web developer.

<aside>
💡 Remember! You can use Piazza to ask questions.
</aside>



Section Two:  Full-stack Web Apps 

Welcome, web development warriors, to this exciting quiz on full-stack web development! Do you have what it takes to build a magnificent castle on the internet? In this quiz, we will take you on a journey to explore the different blocks that make up a full-stack web application. You will learn about the cool and fun tools like HTML, CSS, and JavaScript used to build the front end of the castle that users can see and play with. And, we will also take you behind the scenes to explore the important machinery and rules that make the castle work seamlessly, known as the back end. So, let's put on our hard hats and get ready to build a web application castle that will dazzle and amaze the internet. Let the quiz begin!

The Full Stack Quiz

## 💡**Topic: HTML 5**


 🎯 **Goal: To use HTML5 to create the structure of webpages.**

Now you will start building castles, think of a castle as a webpage. Just like a castle has different parts such as walls, towers, and rooms, a webpage has different elements such as text, images, and videos. These elements are like the bricks used to build the castle.

![](https://thumbs.dreamstime.com/z/castle-blueprint-cartoon-41194965.jpg?ct=jpeg)

HTML is used to specify the blueprint of the castle. It provides the structure and layout for the different elements on the webpage. Just like how the blueprint specifies where each brick should go, HTML specifies where each element should be placed on the webpage.

HTML uses tags to define the different elements on the webpage. These tags are like the different types of bricks used to build the castle. For example, the `<p>` tag is used to define a paragraph of text, while the `<img>` tag is used to define an image.

Overall, HTML is the foundation of any webpage, just like how the blueprint is the foundation of a castle. Without HTML, a webpage would not have structure or layout, just as a castle would not have walls or a roof without a blueprint.

HTML5 is the latest version of the Hypertext Markup Language used to create websites. It is necessary to learn HTML because it is the foundation of web development. HTML is used to structure the content of a web page, define its layout and presentation, and add interactive features. Without HTML, web pages would not exist. Learning HTML will enable you to create your own web pages, and understand how websites work.



## **📋Instructions**


1. **Step one:** Follow the following link to YouTube and take the “HTML for beginners course” by free code camp from start to finish. - 

- 🔗 Youtube Link: https://youtu.be/kUMe1FH4CHE

 The course is organized as follows 

- [ ]  Chapter 1 - Getting Started
- [ ]  Chapter 2 - Head Element
- [ ]  Chapter 3 - Text Basics
- [ ]  Chapter 4 - List Types
- [ ]  Chapter 5 - Add Links
- [ ]  Chapter 6 - Add Images
- [ ]  Chapter 7 - Semantic Tags
- [ ]  Chapter 8 - Create Tables
- [ ]  Chapter 9 - Forms & Inputs
- [ ]  Chapter 10 - HTML Project


⛔ **Note: You are required to complete ALL TEN CHAPTERS before moving to the next section!** ⛔

## **📚Additional Resources:**

- Books: https://flaviocopes.com/book/read/html/
- Websites: https://developer.mozilla.org/en-US/docs/Web/HTML
- Html cheat sheet 👇
    
    [htmlcheatsheet.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c3e492a6-c891-4be9-8d2e-7f29ca149767/htmlcheatsheet.pdf)
    

----------
Good Job on making it to the end of this section :) Just so you know a lot of people do not consider HTML as a programming language and the internet is filled with memes expressing just that. Here are a few memes that you might enjoy 🤣

![](https://i.redd.it/kb68vokgv0411.jpg)

![](https://programmerhumor.io/wp-content/uploads/2023/07/programmerhumor-io-programming-memes-frontend-memes-03782f4719aea3f.jpg)

![](https://img.devrant.com/devrant/rant/r_1544130_3W2zi.jpg)

Section Three: Introduction to Frontend HTML5

## Little Taco Shop Website Peer Review Activity 

![](https://susannapaasonen.files.wordpress.com/2019/05/brace-yourself-peer-review-is-coming.jpg?w=380&h=285)

Hey there, HTML champs! Get ready for our Web Project Peer Review Hangout! 🎉 It's like a cool online party where we'll team up and check out each other's awesome websites. You'll take turns showing off your site and giving friendly feedback to your buddy. It's all about sharing ideas, cheering each other on, and making our websites even better! So, grab a snack, log onto Zoom, and let's have some fun checking out each other's skills! 🌟💻🎉

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1GAjwiViPd4BXAJqCYpn7zZNZXrjsDefe84GdZxnyq8I/edit?usp=sharing
- Make a copy of the rubric sheet before starting to grade each other using the following steps:
![](https://i.ibb.co/xYP1Y4W/image.png)

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:  HTML5 Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the HTML 5 Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: The Little Taco Shop Website (HTML5 Project)

1. Put everything you have created during Section Three inside a zip file. (The Little Taco Site Folder)
2. Set your pseudonym as the name of the file and submit it under the HTML 5 Website assignment using this link: https://tally.so/r/3xpbgG



----------
If you are seeing this then you have just learned how to run your first peer review! 😎

![](https://i0.wp.com/media3.giphy.com/media/3oEjI5VtIhHvK37WYo/giphy.gif)

Go on then, find a friend to do this with what are you waiting for?


HTML5 Project Peer Review


## 💡 Topic: CSS3

🎯 **Goal: To apply visual styling to HTML pages using CSS**

Previously we thought of a castle as a webpage and HTML as the blueprint. While the blueprint specifies where each brick should go, it doesn't specify how the castle should look. This is where CSS comes in.

CSS is like the interior designer of the castle. It's responsible for the styling and visual appeal of the webpage. Just like how an interior designer chooses furniture, colors, and patterns to create a cohesive look, CSS chooses the fonts, colors, and layout to create a visually appealing webpage.

CSS uses selectors to target specific HTML elements and apply styles to them. These selectors are like the paintbrushes an interior designer uses to paint the walls or the fabrics they use to create curtains. For example, the `h1` selector is used to target the heading element in HTML, and the `color` property is used to change its color.

Overall, CSS is the aesthetic layer of a webpage, just like how an interior designer is responsible for the aesthetic appeal of a castle's interior. Without CSS, a webpage would look plain and unappealing, just as a castle's interior would look bare and uninviting without an interior designer's touch.

![](https://i.pinimg.com/originals/33/ae/84/33ae843b506dc2366d342243b3a476f3.jpg)
`HTML focuses on  structure whereas CSS focuses on aesthetic!`

CSS3 is the latest version of Cascading Style Sheets. Using CSS, you can create designs that adapt to different screen sizes, create animations and effects that enhance the user experience (this is what is meant by “responsive”), and make your websites stand out from the crowd. Learning CSS will enable you to create visually appealing and dynamic websites that engage users and keep them coming back for more.
## 📋 **Instructions:**

1. **Step one:** Follow the following link to YouTube and take the CSS for beginners course from start to finish.   
- 🔗 Youtube Link: https://youtu.be/OXGznpKZ_sA

The course is organized as follows :
- [ ]  ([0:00:00](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=0s)) Intro
- [ ]  ([0:01:08](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=68s)) Chapter 1: Start Here
- [ ]  ([0:14:50](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=890s)) Chapter 2: Selectors
- [ ]  ([0:34:41](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=2081s)) Chapter 3: Colors
- [ ]  ([0:51:13](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=3073s)) Chapter 4: Units & Sizes
- [ ]  ([1:11:56](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=4316s)) Chapter 5: Box Model
- [ ]  ([1:37:08](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=5828s)) Chapter 6: Typography
- [ ]  ([2:00:29](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=7229s)) Chapter 7: Styling Links
- [ ]  ([2:16:37](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=8197s)) Chapter 8: List Styles
- [ ]  ([2:32:31](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=9151s)) Chapter 9: Mini Project
- [ ]  ([2:45:04](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=9904s)) Chapter 10: Display
- [ ]  ([3:00:21](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=10821s)) Chapter 11: Floats
- [ ]  ([3:12:46](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=11566s)) Chapter 12: Columns
- [ ]  ([3:34:30](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=12870s)) Chapter 13: Position
- [ ]  ([3:57:53](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=14273s)) Chapter 14: Flexbox
- [ ]  ([4:21:39](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=15699s)) Chapter 15: Grid Layout
- [ ]  ([4:46:33](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=17193s)) Chapter 16: Images
- [ ]  ([5:32:40](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=19960s)) Chapter 17: Media Queries
- [ ]  ([5:58:59](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=21539s)) Chapter 18: Card Project
- [ ]  ([6:33:21](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=23601s)) Chapter 19: Pseudo
- [ ]  ([6:52:56](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=24776s)) Chapter 20: Variables
- [ ]  ([7:20:28](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=26428s)) Chapter 21: Functions
- [ ]  ([7:50:05](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=28205s)) Chapter 22: Animations
- [ ]  ([8:37:33](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=31053s)) Chapter 23: Organization
- [ ]  ([8:57:23](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=32243s)) Chapter 24: Final Project

⛔ **Note: You are required to complete ALL 24 CHAPTERS before moving to the next section!** ⛔
<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>

## 📚 **Additional Resources:**


- Book: https://flaviocopes.com/book/read/css/
- Website: https://developer.mozilla.org/en-US/docs/Web/CSS
- CSS cheat sheet 👇
    
    [wsu-css-cheat-sheet-gdocs.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5da37b09-23f1-4f6c-8399-cd1a549ab7f7/wsu-css-cheat-sheet-gdocs.pdf)
    

Section Four: Introduction to Frontend:- CSS3

## Little Taco Shop Website (CSS3 ) Peer Review Activity 



Hey CSS wizards!

Get ready for an exciting peer review activity to showcase your awesome CSS skills and level up together! 🎉


In this activity, you'll pair up with a fellow DirectEd scholar to present your final projects and provide constructive feedback. It's a fantastic opportunity to celebrate each other's accomplishments, share insights, and learn from one another's experiences.

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/17ik5BypEt6VJZ-TV0GLMYCjmypcqiNWroL_Z86mKtyI/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:  CSS3 Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the CSS3 Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: The Little Taco Shop Website (CSS3 Project)

1. Put everything you have created during Section Four inside a zip file. (The Little Taco Site Folder)
2. Set your pseudonym as the name of the file and submit it under the CSS3 Website assignment using this link: https://tally.so/r/3xpbgG



----------
Giving you both a double high five for doing a good job!😎

![](https://lh4.googleusercontent.com/O1vizj7LXutB37BIasnu57vh-3K8KHpKTmCyHkAMFFlPt5B9K6Iv8Jkw2ePdeGBT1ukC9YGuSCOx7MnZvzCcNVX5H9PNTcQQzuKLrx6xG7Ol5CdGax5b-bBeS-GJEW3Ppymaph6AA8RPnA8FpvPDDInxvQ4OEpQmWUrT5APGPZANvHTdJmsyVJumSP420Q)




CSS3 Project Peer Review 

## 💡Topic: Tailwind

🎯**Goal: To use Tailwind along with traditional CSS to create visually appealing websites.**

Traditional CSS is like an interior designer who works with paint, wallpaper, and furniture to decorate the castle. They have to create custom styles for each element, just as a decorator has to choose specific pieces of furniture for each room.

Tailwind CSS, on the other hand, is like a modular decorator who works with pre-built furniture pieces. They have access to a library of modular furniture pieces that can be combined to create a cohesive look for the castle. Similarly, Tailwind CSS has a library of pre-built utility classes that can be combined to style a webpage.

Traditional CSS requires writing custom styles for each element, which can be time-consuming and tedious, just like a decorator who has to choose specific pieces of furniture for each room. Tailwind CSS, on the other hand, simplifies the process by providing a library of pre-built utility classes that can be quickly applied to elements, just like how a modular decorator can quickly combine pre-built furniture pieces.

Overall, Tailwind CSS simplifies the process of styling a webpage, making it more efficient and easy to maintain, just like how a modular decorator simplifies the process of decorating a castle, making it more efficient and easy to maintain.

Tailwind CSS is a utility-first CSS framework that provides a set of pre-designed CSS classes that can be used to style HTML elements.

You see Tailwind is a utility-first CSS framework that provides a set of pre-designed utility classes that can be used to style HTML elements. These classes are designed to perform one specific task, such as setting the text color, font size, or margin of an element. By using these utility classes, developers can quickly and easily style their web pages without having to write custom CSS code from scratch. 

It is important to learn Tailwind CSS because it simplifies the process of designing and styling web pages, making it easier for you to create visually appealing websites without having to write custom CSS from scratch. The framework also promotes consistency in design and speeds up development time. Additionally, with Tailwind CSS, you can focus on the functionality of your websites instead of spending too much time on design, which is a huge plus when working on large projects.

## 📋 **Instructions**

1. **Step one:** Follow the following links to YouTube and take the CSS for Beginners course from start to finish.  The course is organized as follows :
    - [ ]  ([00:00:00](https://www.youtube.com/watch?v=lCxcTsOHrjo&t=0s)) Intro
    - [ ]  ([00:00:25](https://www.youtube.com/watch?v=lCxcTsOHrjo&t=25s)) Welcome
    - [ ]  ([00:00:51](https://www.youtube.com/watch?v=lCxcTsOHrjo&t=51s)) Chapter 1: Introduction & Tailwind CSS Setup
    - [ ]  ([00:22:25](https://www.youtube.com/watch?v=lCxcTsOHrjo&t=1345s)) Chapter 2: Project Header, Hero & Cards
    - [ ]  ([01:08:48](https://www.youtube.com/watch?v=lCxcTsOHrjo&t=4128s)) Chapter 3: Project Pseudo-Classes, Forms & Footer
    - [ ]  ([01:45:52](https://www.youtube.com/watch?v=lCxcTsOHrjo&t=6352s)) Chapter 4: Animated Mobile Menu & Hamburger Icon
    - [ ]  ([02:33:28](https://www.youtube.com/watch?v=lCxcTsOHrjo&t=9208s)) Chapter 5: Theme Config & Deploy to the Web
    
    **Note: You are required to complete ALL FIVE CHAPTERS before moving to the next section!**

<aside>
💡 Are you stuck? Ask a question on Piazza!
</aside>


## 📚 **Additional Resources**


- Tailwind Documentation: https://v2.tailwindcss.com/docs
- Tailwind cheat sheet: https://github.com/just214/tailwind-cheatsheet


----------

POV: You after learning Tailwind 
![](https://www.wisesa.dev/blog/switching-to-tailwindcss/og.jpg)


----------



Section Five: Introduction to Frontend:- Tailwind 

## Acme Rocket Launcher Website (Tailwind) Peer Review Activity 

Hey DirectEd Scholars!

Get ready for a collaborative journey through the world of Tailwind CSS in our final project peer review session! 🎉


In this activity, you'll team up with a fellow CSS adventurer to present your Tailwind CSS final projects and provide valuable feedback to each other. It's an opportunity to showcase your creativity, learn from your peers, and refine your skills together.

Check out the video found at the top to learn the Best Way to Accept Constructive Criticism :)

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1k7EGMwD7C2b7hLN3pC3lKgKhbh9gJH2AWdVRKZdV6Cs/edit?usp=sharing
### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:  Tailwind Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Tailwind Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Acme Rocket Launcher Website (Tailwind Project) 

1. Put everything you have created during **Section Five** inside a zip file. 
2. Set your pseudonym as the name of the file and submit it under the Tailwind Website assignment using this link: https://tally.so/r/3xpbgG



----------

Forcing good reviews out of your peers like Liam Neeson in Taken is frowned upon and punishable👎👎👎👎 **DO NOT DO THAT!**

![](https://i.pinimg.com/originals/68/17/d0/6817d0297367d4b7b37ef94e83ae8066.jpg)

That said if your peer is in any way insulting you, coercing you, or not cooperative please reach out to  Kidus(+251910305299) via Whatsapp. We are here to protect you 🛡️



Tailwind Peer Review


![](https://i.ibb.co/R3MyNn0/Are-you-a-WEB-DEVELOPER-1.png)

No, you are not! Right now you are someone who understands web development and knows HTML, CSS, and Tailwind but this alone does not make you a web developer. To become a web developer you need to master the website development process provided to you below.

Creating a website can be compared to building a castle. The four phases of website development could be likened to the construction phases of a castle. 

![](https://cashflowinventory.com/blog/wp-content/uploads/2023/03/production-planning.png)

**Phase one** is the planning phase or the castle blueprint. In this phase, the website owner decides what kind of website they want, what features it should have, and what the website should look like. This is where the foundation of the "castle" is laid out.

let’s use a personal portfolio site as an example. Here are the tasks you need to perform during this phase

1. **Brainstorming features:** This is where you sit down and try to figure out what features your website needs to have. The features you have depend on the goals you want to achieve using your website. For example, If you want people to hire you after seeing your website you might want to include a Contact Me section where they can send you an Email for business inquiries.
2. **Confirming features:** Look through the list of features you have brainstormed and decide on the ones that are essential to your website. 
3. **Prioritizing Features:**  Put your features in an order of importance, starting from the most important to the least important one. The importance of a feature depends upon the purpose of your website.
4. **Prepare a site map:** After you know what features / pages your website has then it is time to structure everything to see how it is all structured that is where a sitemap comes in, Watch the video below to see how you can create a sitemap. 
![](///png.icons8.com/youtube_play_button/Color/4)

- [ ] YouTube Link: https://www.youtube.com/watch?v=Wv8rejN92vg&list=PLPNKzICztf5Am0eHzIwPz1NfkvXlmC-9l&index=1

![](https://investip.vn/wp-content/uploads/2023/01/design-tools.jpeg)

**Phase two** is the design phase. Just like in castle construction, this is the phase where the aesthetics of the castle are determined. The design phase involves creating a visual representation of the website using a wireframe to show how the website will look.

Here is a step-by-step guide on wireframing:

- [ ] YouTube Link: https://www.youtube.com/watch?v=t3XkDvq-Dw4&list=PLPNKzICztf5Am0eHzIwPz1NfkvXlmC-9l&index=3


`💡 Are you confused? Ask a question on Piazza!`


Here is a list of sites you can use for low-fidelity wireframing online:

- Excalidraw : https://excalidraw.com/
- Tldraw: https://www.tldraw.com/
- Figma:https://www.figma.com/files/recent?fuid=1152496671106809907

![](https://ibiene.com/wp-content/uploads/2022/09/Phenikaa.jpg)

**Phase three** is the content phase, where content pieces are created and added to the website. Just like the bricks that make up a castle, each piece of content is carefully crafted to fit perfectly into the website structure.

- Here is where you find the pictures, videos, and text that you will put inside of your pages.

![](https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2021/08/learn-coding-online-for-free.webp)

**Phase four** is coding, just like the engineers who build a siege engine for a castle in construction. This is where the website builders or developers turn the design and content into a fully functional website complete with code that runs the website.

- This is where you write the HTML, CSS, and Tailwind code that turns your design and curated content into a website.


`💡 Are you stuck? Ask a question on Piazza!`


## 🧠 **Exercise / Project**

1. Pick a project title of your own choice and go through the Phases **one** up to **three** of the web development process.
    
- To
give you an example of a project title, you can try to create a website for a local shopkeeper where they can advertise their goods.
2. Prepare a document that contains the following information :
    
- Your full name and Project Title
-  A list of features your website will have in decreasing order of priority
- A site map of the website you aim to build
- Low-fidelity wireframes showing the home page of the website


**Note: You  DO NOT need to write any code at this point, Stop once you finish the wireframing stage.**

Section Six: Section Six: Website Design and Development Process 🧗

Hey aspiring web designers!

Get ready to dive into the world of website design as we embark on our peer review session for the Website Design Project! 🎨✨

In this activity, you'll team up with a fellow scholar designer to review and provide feedback on each other's website design documents. It's an opportunity to showcase your creativity, learn from your peers, and refine your design skills together.



## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1sByIq9gQtFZJzOJnz0lmPloR8SaWJrjfEqi2CCqA_XM/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:  Website Design Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > PDF(.pdf)
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Website Design assignment using the following Link: https://tally.so/r/3xpbgG

## 📁 Submission:  Website Design Assignment
1.  Set your pseudonym as the name of the file and submit the document you created under Section five under the Website Design Rubric assignment using the following Link: https://tally.so/r/3xpbgG




----------

Forcing good reviews out of your peers like Liam Neeson in Taken is frowned upon and punishable👎👎👎👎 **DO NOT DO THAT!**

![](https://i.pinimg.com/originals/68/17/d0/6817d0297367d4b7b37ef94e83ae8066.jpg)

That said if your peer is in any way insulting you, coercing you, or not cooperative please reach out to  Kidus(+251910305299) via Whatsapp. We are here to protect you 🛡️



Website Design Project Peer Review Activity

![](https://media3.giphy.com/media/Rm1p7xp3Odl2o/giphy.gif?cid=7941fdc6rf3m7ecn5wk6c7fpl46i4u0j4s1wrmzj59rxd1av&ep=v1_gifs_search&rid=giphy.gif&ct=g)

Suppose there is a single builder constructing a castle by themselves, designing all of the castle's walls and towers. A single builder can be compared to a solo developer such as yourself working on a coding project. In the absence of partners, the burden of tracking the progress of the castle falls on the lone builder who, like a developer, requires an effective means of tracking modifications made to their project.

Git and GitHub are essential tools for a solo developer such as yourself working on a project. These technologies allow you to organize and keep track of your work, collaborate with others, and improve upon your products through code reviews. Ultimately, Git and GitHub aid in avoiding confusion caused by bad code and potentially disastrous outcomes and that is why it is essential to master them.

## 📋 Instructions 


1. **Step One:** Follow the link below and watch the video on why you should use GIT.

- [ ] Youtube Link:  https://www.youtube.com/watch?v=3RjQznt-8kE

2. **Step Two:** Follow the link below and watch the video on how to install git and learn the basic commands of the command line interface.  You do not need to install Atom, use Visual Studio code instead.

- [ ] Youtube Link: https://www.youtube.com/watch?v=MFtsLRphqDM&t=201s

3. **Step Three:** Watch the video found below to learn how Git works 👇

- [ ] Youtube Link: https://www.youtube.com/watch?v=iNP_KmOFqXs&t=128s

4. **Step Four:** watch the following tutorial to learn how to use Git with Visual Studio code.

- [ ] Youtube Link: https://www.youtube.com/watch?v=i_23KUAEtUM

5. **Step Five:** You have made many webpages so far but have not released them to the world that is where GitHub pages come in, watch the following tutorial to see how you can deploy your websites for free on GitHub.

https://www.youtube.com/watch?v=XGcuxuhV-Jg

<aside>
💡 Are you stuck? Ask a question on Piazza!

</aside>

## 📚 **Additional Resources:**


- GitHub Docs: https://docs.github.com/en/get-started/quickstart
- GitHub cheat sheet 👇
    
    [git-cheat-sheet-education.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/040c9ee7-0280-43e7-86e4-49ac6a721762/git-cheat-sheet-education.pdf)
    

## 🧠 **Exercise / Project:**


1. Create three separate repositories and upload the following projects
    
- [ ] Your final project from the HTML section

- [ ] Your final project from the CSS section
    
- [ ] Your final project from the Tailwind section
2. Once finished put the links of the repositories in a text file. Set the file name to your full name and submit it to the GitHub Assignment using the following link: Once finished submit the file you worked on to the website designing assignment

Section Seven: Git and GitHub 👨‍💻👩‍💻

## **Project: Build a Personal Website**

### Introduction

![](https://media1.giphy.com/media/0Ul3g0DvDMdsFAn7NN/giphy.gif?cid=7941fdc6qj3rziy30c199ahne02fajxia8r7e16245ll0jxn&ep=v1_gifs_search&rid=giphy.gif&ct=g
)

Greetings, aspiring developer!

We are The Council, a secretive organization known only to the most elite coders. We have been observing your progress in the boot camp and believe that you have a special talent that sets you apart from the rest. As such, we have an offer for you that will put your skills to the ultimate test.

![](https://i.ibb.co/RHvdM4L/a-photo-of-a-code-quest-batlle-royale-upscaled.jpg)

We are hosting a coding battle royal that will take place over the next three months. The competition will be fierce, and only the best coders will survive. But before we can offer you a spot on our team, you must prove your worth by completing a challenge that we have prepared for you.

Your task is to create a personal website that showcases your coding skills. This website will be your ticket to the coding battle royal, where you will compete against other talented developers to complete coding bounties and become the ultimate coding genius.

Think of this challenge as an opportunity to unleash your coding prowess and demonstrate your understanding of HTML, CSS, and Tailwind concepts. You are free to go above and beyond the requirements that we have set for you, as we want to see what you are truly capable of. And if you get stuck, remember that Google is your ally - it's an invaluable tool for developers.

But beware failure is not an option. If you cannot complete this challenge, it's game over for you. We will reveal more information about the coding battle royal once we are certain of your capabilities.


🔥 We have shared with you the requirements as well as any necessary information you may require for the project using the link below. Earn your spot among the elite, We are watching!
~*The Council*

**Sprint Assessment Link** : https://directed.notion.site/Sprint-Assessment-2c69a5bbfe3c4d6c8b442e34544cf33b?pvs=4


📝 Sprint Assessment 📝

Module 1

# 🧭Overview

![](https://media2.giphy.com/media/YRuFixSNWFVcXaxpmX/giphy.gif?cid=7941fdc613gx4k4qfgst03jvelhuebmr4oqusyn2o9qr072i&ep=v1_gifs_search&rid=giphy.gif&ct=g)

> Congrats! You made it to Module 2! 🎉
> 

Welcome to the second module in the series, so far you have learned how to create static web pages with limited functionality. for example, if you tried to add a search bar in your portfolio people which people can use to look for specific projects you have worked on, you can have the search bar displayed but it wouldn’t allow the user to search for content this is because HTML and CSS can only be used to structure and style websites respectively. In this module, you will learn how to add functionality and Interactivity to your web pages and so much more.

# 📅 Schedule
👉 Reminder: Our Google calendar contains the recommended timeline for taking the course as well as information about when training and surveys will take place so please make sure you have added it to your calendar and accepted all events before moving on. We have shared a calendar invite with you via Email.

⚠️Please ensure that you are using the correct calendar for your country to avoid missing important events.⚠️

Kenyan Students Only👇

Calendar Link: https://calendar.google.com/calendar/u/1?cid=NTY1ODg4MWRkYzYyNTg3NGZlYzFmYmZhZDljMGQzM2UzMjdiNzM4OTAwZDFhMWZiMTMzZWI3NmM0ZjYwNTRmMUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Ethiopian Students Only👇

https://calendar.google.com/calendar/u/1?cid=NGU0OGZkNjA1ZTg3ZjI5NGJlNzQyNGZlNDBhNzhkZDQ5ZDNiNWJjNTZjMTkxNTY1YjY4YWU2MDYyOTA2ZGRkMEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Google Calendar Tutorial

How to access a Google Calendar shared with you: https://www.youtube.com/watch?v=bofIU4rq-VM

**Mandatory Module Feedback ‼️**

At the end of every week, you are REQUIRED to fill out the module feedback form found below. Please only fill in the form that applies to your country as you have different timelines.

**For Kenya:** https://tally.so/r/wMAXkE

**For Ethiopia:** https://tally.so/r/wMANzl

# 📑 Sections

This module is divided into ten major sections. Each section has a single area of focus and is aimed at helping you master the topics covered.

1. Section One: Introduction to Linear🤹
2. Section Two: Introduction to JavaScript 🚪
3. Section Three: Basic JavaScript 🌱
4. Section Four: Basic JS Practice 🧑‍💻
5. Section Five: Setting up a local dev environment 💻
6. Section Six: Intermediate JavaScript 🌻
7. Section Seven: Intermediate JS Practice🧑‍💻
8. Section Eight: Advanced JavaScript 🌲
9. Section Nine: Advanced JS Practice🧑‍💻
10. Section Ten: Git Collaboration 👨‍💻👩‍💻
11. 📝 Module Assessment 📝

# 💡 Topic: Task Management Using Linear

During the last module, you had to build a lot of projects, and a challenge that comes with that is managing tasks effectively. When you're juggling multiple projects, keeping track of what needs to be done, who's responsible for each task, and when it's due can quickly become overwhelming. Without a proper task management system in place, you risk missing deadlines, overlooking important details, and feeling stressed out by the sheer volume of work.

This is where Linear comes in as a valuable tool for managing tasks. Linear provides a centralized platform where you can create tasks, organize them into projects, and track their progress in real time. With Linear, you can easily see what needs to be done, prioritize tasks, assign them to team members, and monitor their status as they move through different stages of completion.

![](https://images.unsplash.com/photo-1616530834117-9167fb0d8ebc?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb)

By using Linear, you can overcome the challenge of task management and stay organized and focused as you work on multiple projects. Linear helps you stay on top of your workload, collaborate effectively with your peers, and ultimately, deliver high-quality results on time. As you prepare to enter the workforce or pursue further studies, mastering task management with tools like Linear will be invaluable in helping you succeed in your academic and professional endeavors.

# 📋 Instructions:

1. **Step one:** Follow the link below and go through the tutorial on the basics of Linear
    
  🔗Youtube Link: https://youtu.be/fZjbKqJfXfk
    
2. **Step Two:** Go through the following playlist to gain a complete understanding of how to use Linear.
    
🔗 Playlist Link: https://youtube.com/playlist?list=PLP9v0Y4zla9ut4hlW5W5alGBaEZXjkbEq&si=lCSRdEtai-3WmJBr
    

**Note: you are required to go through all the videos inside the above section before moving forward!**

<aside>
💡 Remember! You can use Piazza to ask questions.
</aside>

## 🧠 Exercise / Project:

1. Sign up for Linear using this link: https://linear.app/
2. Create a workspace and invite your teammates
3. Create a new issue -( You can also use this feature to report a bug you encounter when coding your app.)
4. Set a deadline for your issue
5. Setup/Create your teams - Have your group members in their separate teams depending on what they are developing for efficient communication
6. Go through the settings to familiarize yourself with personalizing and managing your workspace/teams and integration

⚠️ **You are required to use Linear for task management throughout the BootCamp!**

### 💡 **Tips and Tricks:**

Linear offers a variety of keyboard shortcuts to help you work faster. Here are a few handy ones:

- "c": Create a new issue.
- "a": Assign an issue to yourself or another team member.
- "p": Prioritize an issue as high priority.
- "m": Prioritize an issue as medium priority.
- "l": Prioritize an issue as low priority.
- "Shift + D": Set a deadline for an issue.
- "Ctrl + K": Bring up the command menu.


### 🥳 **You are done!** 🥳

let’s make sure this never happens to you now that you know how to manage your time:

![](https://i.pinimg.com/originals/cb/fc/2f/cbfc2fa5aa5987ed3742af2e3a73544b.png)

# 📔 Additional Resources

- Linear docs: https://linear.app/docs




Section One: Introduction to Linear 🤹

## 💡 Topic: What is JavaScript?

Imagine you are a messenger from a neighboring kingdom and arrive at the gate of a large castle. The guards ask you who you are and to state your business. Once you give them a proper answer and they verify your identity they will pull a lever to release the locks and welcome you in.

Now imagine the castle gate is a webpage. HTML sets the basic structure for the gate, defining the various components that make up the gate - the width, height, and position. It creates the basic layout for the gate and determines where the lever that unlocks the gate is placed.

But gates are not just structures, they have colors, texture, and other elements that make them beautiful to look at. CSS is the language that allows us to customize the appearance of the gate, defining the colors, fonts, textures, and spacing that will make it visually appealing. It also allows you to style the lever so it’s comfortable to pull for the guards. However, the mere presence of the structure of a gate (HTML) and styling of which (CSS) is not enough to make the lever open the door. 

To make a door open upon pulling a lever, there need to be cogs, wheels, and other mechanisms. This is the role played by JavaScript. JavaScript is a general-purpose programming language. In this case, it would be used to create the lock or mechanism on the gate that makes it open when pulled. It enables interactivity and functionality, allowing the user to click buttons or enter information that will affect the behavior of the gate. For instance, as a user types their password, JavaScript may validate the format and conditionally enable or disable the "submit" button.

# 🧠  Instructions

1. **Step one:** Follow the link below and take the Basic JavaScript course to get a Basic understanding of JavaScript.

🔗 Course Link: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

- **Note:
 You are required to COMPLETE ALL 113 CHALLENGES found under the Basic JavaScript course!**


<aside>

- 📌
 You can use the YouTube video found below to help you with taking the course. It is based on the same curriculum as the course and covers all the topics that it contains, Here is the recommended way of using the video: First, watch a section of the video focusing on a single topic. For example, comments in JavaScript and then go to a challenge covering comments in the freeCodeCamp course website and then complete the challenge, Repeat the same process until you have completed all 113 challenges.


- [ ] 🔗Youtube
Video: https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1368s

</aside>

### **⭐️Course Contents⭐️**

- [ ]  [0:00:00](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=0s) Introduction
- [ ]  [0:01:24](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=84s) Running JavaScript
- [ ]  [0:04:23](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=263s) Comment Your Code
- [ ]  [0:05:56](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=356s) Declare Variables
- [ ]  [0:06:15](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=375s) Storing Values with the Assignment Operator
- [ ]  [0:11:31](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=691s) Initializing Variables with the Assignment Operator
- [ ]  [0:11:58](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=718s) Uninitialized Variables
- [ ]  [0:12:40](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=760s) Case Sensitivity in Variables
- [ ]  [0:14:05](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=845s) Basic Math
- [ ]  [0:15:30](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=930s) Increment and Decrement
- [ ]  [0:16:22](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=982s) Decimal Numbers
- [ ]  [0:16:48](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1008s) Multiply Two Decimals
- [ ]  [0:17:18](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1038s) Divide Decimals
- [ ]  [0:17:33](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1053s) Finding a Remainder
- [ ]  [0:18:22](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1102s) Augmented Math Operations
- [ ]  [0:21:19](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1279s) Declare String Variables
- [ ]  [0:22:01](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1321s) Escaping Literal Quotes
- [ ]  [0:23:44](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1424s) Quoting Strings with Single Quotes
- [ ]  [0:25:18](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1518s) Escape Sequences
- [ ]  [0:26:46](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1606s) Plus Operator
- [ ]  [0:27:49](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1669s) Plus Equals Operator
- [ ]  [0:29:01](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1741s) Constructing Strings with Variables
- [ ]  [0:30:14](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1814s) Appending Variables to Strings
- [ ]  [0:31:11](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1871s) Length of a String
- [ ]  [0:32:01](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=1921s) Bracket Notation
- [ ]  [0:33:27](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2007s) Understand String Immutability
- [ ]  [0:34:23](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2063s) Find the Nth Character
- [ ]  [0:36:28](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2188s) Word Blanks
- [ ]  [0:40:44](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2444s) Arrays
- [ ]  [0:41:43](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2503s) Nest Arrays
- [ ]  [0:42:33](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2553s) Access Array Data
- [ ]  [0:43:34](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2614s) Modify Array Data
- [ ]  [0:44:48](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2688s) Access Multi-Dimensional Arrays
- [ ]  [0:46:30](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2790s) push()
- [ ]  [0:47:29](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2849s) pop()
- [ ]  [0:48:33](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2913s) shift()
- [ ]  [0:49:23](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=2963s) unshift()
- [ ]  [0:50:36](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3036s) Shopping List
- [ ]  [0:51:41](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3101s) Write Reusable with Functions
- [ ]  [0:53:41](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3221s) Arguments
- [ ]  [0:55:43](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3343s) Global Scope
- [ ]  [0:59:31](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3571s) Local Scope
- [ ]  [1:00:46](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3646s) Global vs Local Scope in Functions
- [ ]  [1:02:40](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3760s) Return a Value from a Function
- [ ]  [1:03:55](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3835s) Undefined Value returned
- [ ]  [1:04:52](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3892s) Assignment with a Returned Value
- [ ]  [1:05:52](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=3952s) Stand in Line
- [ ]  [1:08:41](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=4121s) Boolean Values
- [ ]  [1:09:24](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=4164s) If Statements
- [ ]  [1:11:51](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=4311s) Equality Operators
- [ ]  [1:19:17](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=4757s) And / Or Operators
- [ ]  [1:21:37](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=4897s) Else Statements
- [ ]  [1:22:27](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=4947s) Else If Statements
- [ ]  [1:23:30](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=5010s) Logical Order in If Else Statements
- [ ]  [1:24:45](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=5085s) Chaining If Else Statements
- [ ]  [1:27:45](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=5265s) Golf Code
- [ ]  [1:32:15](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=5535s) Switch Statements
- [ ]  [1:41:11](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6071s) Returning Boolean Values from Functions
- [ ]  [1:42:20](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6140s) Return Early Pattern for Functions
- [ ]  [1:43:38](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6218s) Counting Cards
- [ ]  [1:49:11](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6551s) Build Objects
- [ ]  [1:50:46](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6646s) Dot Notation
- [ ]  [1:51:33](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6693s) Bracket Notation
- [ ]  [1:52:47](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6767s) Variables
- [ ]  [1:53:34](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6814s) Updating Object Properties
- [ ]  [1:54:30](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6870s) Add New Properties to Object
- [ ]  [1:55:19](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6919s) Delete Properties from Object
- [ ]  [1:55:54](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=6954s) Objects for Lookups
- [ ]  [1:57:43](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=7063s) Testing Objects for Properties
- [ ]  [1:59:15](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=7155s) Manipulating Complex Objects
- [ ]  [2:01:00](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=7260s) Nested Objects
- [ ]  [2:01:53](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=7313s) Nested Arrays
- [ ]  [2:03:06](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=7386s) Record Collection
- [ ]  [2:10:15](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=7815s) While Loops
- [ ]  [2:11:35](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=7895s) For Loops
- [ ]  [2:13:56](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=8036s) Odd Numbers With a For Loop
- [ ]  [2:15:28](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=8128s) Count Backwards With a For Loop
- [ ]  [2:17:08](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=8228s) Iterate Through an Array with a For Loop
- [ ]  [2:19:43](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=8383s) Nesting For Loops
- [ ]  [2:22:45](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=8565s) Do...While Loops
- [ ]  [2:24:12](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=8652s) Profile Lookup
- [ ]  [2:28:18](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=8898s) Random Fractions and Whole Numbers
- [ ]  [2:31:46](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=9106s) parseInt Function
- [ ]  [2:33:29](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=9209s) Ternary Operator
- [ ]  [2:34:57](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=9297s) Multiple Ternary Operators
- [ ]  [2:36:57](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=9417s) var vs let
- [ ]  [2:41:32](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=9692s) const Keyword
- [ ]  [2:43:40](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=9820s) Mutate an Array Declared with const
- [ ]  [2:44:52](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=9892s) Prevent Object Mutation
- [ ]  [2:47:17](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=10037s) Arrow Functions
- [ ]  [2:53:04](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=10384s) Default Parameters
- [ ]  [2:54:00](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=10440s) Rest Operator
- [ ]  [2:55:31](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=10531s) Spread Operator
- [ ]  [2:57:18](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=10638s) Destructuring Assignment
- [ ]  [3:06:39](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=11199s) Template Literals
- [ ]  [3:10:43](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=11443s) Simple Fields
- [ ]  [3:12:24](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=11544s) Declarative Functions
- [ ]  [3:12:56](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=11576s) class Syntax
- [ ]  [3:15:11](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=11711s) getters and setters
- [ ]  [3:20:25](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=12025s) import and export



<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>

##  🧠  Exercise / Project:

1. There are no exercises/projects for this section.

# 📔 Additional Resources

- JavaScript Book: https://drive.google.com/file/d/1duftOF4EoT8g-u4M73V-JbxWYTddZGCY/view?usp=drive_link

    
- Cheat-Sheet: https://drive.google.com/file/d/1y3Hgtio5T3qnJDzp9TiN-sxjUIRL2KB-/view?usp=drive_link



----------
![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4S7MOALTb1JQpUIJq_hIuf6Yujnx2KryHet2Pr6V_Sg&s)

Congrats! You just learnt javascript.Here are some memes to relax to 

- [ ]  Javascript Bad ?
![](https://miro.medium.com/v2/resize:fit:640/format:webp/0*tGBjxcH7Y9h3-pr5)

![](https://miro.medium.com/v2/resize:fit:640/format:webp/0*Vi7dVWLLqDhCsEkW)

**Pov: You studying 8 hours a day on your parents couch**
![](https://miro.medium.com/v2/resize:fit:640/format:webp/0*J1cLF8IkHWUI5BUB)

**JS devs be like**
![](https://miro.medium.com/v2/resize:fit:640/format:webp/0*X0qUYmAuQjTy2wni)

**Concatenation Anyone?**
![](https://miro.medium.com/v2/resize:fit:720/format:webp/0*F-rMIkdywVWyB5a6.png)

Section Two: Introduction to JavaScript 🚪

![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmd1MXdlaHhyeTR4NzFjZ3dwc3Y0MHVldWhyeW9hanVxd2NiaHF5dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/8zjxfpuutpJFRnlM2h/giphy.gif)

The Javascript Quiz ❓

Previously you learned about JavaScript the programming language but you still don’t know how to use it inside of your web pages to add the functionality and interactivity we mentioned earlier. When it comes to the web JavaScript can be used to write code both on the front end and back end of a website. All the web is built upon JavaScript and this module is the base upon which we build the rest of the web development course.


![](https://i.ibb.co/6w3Xz6W/Designer-1.jpg)

In the front end, for example, you can use it to

- interact with user input
- alter the content of the page displayed
- validate form data before sending it to the server

In the backend, you can use it to

- write files to disk
- persist data to a database, or fetch data from it
- interact with the operating system

In this section, you will cover the basics of JavaScript along with HTML and CSS by building a Passenger counter app.

# 📋 Instructions

1. **Step one:** Go to https://scrimba.com/#sign-in
2. **Step Two:** Create a Scrimba account by clicking on the Sign-up button and entering the necessary credentials.
![](https://i.ibb.co/SR4FGT2/Untitled-2.png)
![](https://i.ibb.co/XX3tg3y/Untitled-1.png)
3. **Step Three:** Follow the link found below and enroll in the “Learn JavaScript” course:

- 🔗 Course Link:  [Learn JavaScript for free - 7-hour interactive tutorial](https://scrimba.com/learn/learnjavascript)

4. **Step Four:** Watch the tutorial below to find out how to use Scrimba.

- 🔗 Youtube Link: https://www.youtube.com/watch?v=YsDM5Cy93YU&t=35s

5. **Step Five:** Complete all 31 lessons found under the “Build a passenger counter app” module found in the course. Follow the link below to gain access to the module

- 🔗 ModuleLink: [Build a passenger counter app](https://scrimba.com/playlist/pY5b7sQ)

<aside>
💡 Are you stuck? Ask a question on Piazza!

</aside>

 ### 🌟 Course Content 🌟

- [ ]  [1. Welcome to the course! 2:11](https://scrimba.com/learn/learnjavascript/welcome-to-the-course-c87pv3hK)
- [ ]  [2. Let's build a passenger counter app!0:59](https://scrimba.com/learn/learnjavascript/lets-build-a-passenger-counter-app-co2614d6890ec26cd3fdafdbc)
- [ ]  [3. Setting up our JavaScript file2:59](https://scrimba.com/learn/learnjavascript/setting-up-our-javascript-file-co8c8428fa88013351d68c967)
- [ ]  [4. Write your first JavaScript variable4:52](https://scrimba.com/learn/learnjavascript/write-your-first-javascript-variable-coe1747b7aff9aade2ae578a3)
- [ ]  [5. Basic mathematical operations3:35](https://scrimba.com/learn/learnjavascript/basic-mathematical-operations-cof204cd4b7392cf12f7add05)
- [ ]  [6. Frontend Career Path1:56](https://scrimba.com/learn/learnjavascript/frontend-career-path-cmqJvesa)
- [ ]  [7. Reassigning and incrementing3:46](https://scrimba.com/learn/learnjavascript/reassigning-and-incrementing-cobbe4099a4cbadc0fb670f26)
- [ ]  [8. Adding a button1:31](https://scrimba.com/learn/learnjavascript/adding-a-button-cocd84041b96dee3ab94ceda5)
- [ ]  [9. The onclick event listener3:25](https://scrimba.com/learn/learnjavascript/the-onclick-event-listener-coce64940ab7f084677cd047c)
- [ ]  [10. Using functions to write less code3:33](https://scrimba.com/learn/learnjavascript/using-functions-to-write-less-code-c2GgmzTB)
- [ ]  [11. Write your first function0:43](https://scrimba.com/learn/learnjavascript/write-your-first-function-cod364c228ee1daed56bc23eb)
- [ ]  [12. Write a function that logs the sum2:46](https://scrimba.com/learn/learnjavascript/write-a-function-that-logs-the-sum-cod4443268250c6ffbd5946a0)
- [ ]  [13. Write a function that increments1:54](https://scrimba.com/learn/learnjavascript/write-a-function-that-increments-cod5c4180ba5bf024060e3a30)
- [ ]  [14. Increment on clicks2:08](https://scrimba.com/learn/learnjavascript/increment-on-clicks-cod1a4f94b86068e7409956b7)
- [ ]  [15. Display the count5:13](https://scrimba.com/learn/learnjavascript/display-the-count-co9ee43aba082f30338c74a78)
- [ ]  [16. The Document Object Model1:51](https://scrimba.com/learn/learnjavascript/the-document-object-model-cof7f4d15afa89e1eb025850d)
- [ ]  [17. Display the count with innerText0:39](https://scrimba.com/learn/learnjavascript/display-the-count-with-innertext-co23a4860b0ac3968165551ed)
- [ ]  [18. Create the save button2:05](https://scrimba.com/learn/learnjavascript/create-the-save-button-co7534c79a0a694c6cae3f5da)
- [ ]  [19. What is a string?1:33](https://scrimba.com/learn/learnjavascript/what-is-a-string-cod0144b59b694b3315fae65f)
- [ ]  [20. Write your first string variable3:39](https://scrimba.com/learn/learnjavascript/write-your-first-string-variable-cVrgnyhR)
- [ ]  [21. Log a greeting to the console1:16](https://scrimba.com/learn/learnjavascript/log-a-greeting-to-the-console-co79948afa8996bc684459d03)
- [ ]  [22. Strings vs. Numbers2:43](https://scrimba.com/learn/learnjavascript/strings-vs-numbers-cob7245e1968dbb07f17f8c00)
- [ ]  [23. Render a welcome message2:00](https://scrimba.com/learn/learnjavascript/render-a-welcome-message-coab0434ca2e5b2b7006e304a)
- [ ]  [24. Improve the message with string concatenation2:15](https://scrimba.com/learn/learnjavascript/improve-the-message-with-string-concatenation-co6714c6caeb5360ed450d960)
- [ ]  [25. Use plus equal for count0:25](https://scrimba.com/learn/learnjavascript/use-plus-equal-for-count-co71643ab91444be261a5596d)
- [ ]  [26. Create the save feature4:36](https://scrimba.com/learn/learnjavascript/create-the-save-feature-cocc441a284596033853fcbc9)
- [ ]  [27. Debugging online3:49](https://scrimba.com/learn/learnjavascript/debugging-online-co71b4b4e8cf997a4f54bc169)
- [ ]  [28. Set the count to 02:52](https://scrimba.com/learn/learnjavascript/set-the-count-to-0-cof1d432198ea091cc2c690f4)
- [ ]  [29. Personalize and Download Your App4:37](https://scrimba.com/learn/learnjavascript/personalize-and-download-your-app-cMLr3asK)
- [ ]  [30. Deploy with Netlify4:02](https://scrimba.com/learn/learnjavascript/deploy-with-netlify-cwGp4RcJ)
- [ ]  [31. Congrats & recap](https://scrimba.com/learn/learnjavascript/congrats-recap-cob204645a41c79c75524a44a)



⚠️ **You are required to complete ALL 31 LESSONS mentioned above before moving on to the next section!** 

<aside>
📢 Use the following GitHub repo to gain access to the files used for the course 👇

🔗 GitHub repo: [https://github.com/scrimba/learn-javascript/tree/main/1. Build a Passenger Counter App](https://github.com/scrimba/learn-javascript/tree/main/1.%20Build%20a%20Passenger%20Counter%20App)

</aside>


# 📔 Additional Resources

- JavaScript book: https://drive.google.com/file/d/1duftOF4EoT8g-u4M73V-JbxWYTddZGCY/view?usp=drive_link

- Cheat-Sheet: https://drive.google.com/file/d/1y3Hgtio5T3qnJDzp9TiN-sxjUIRL2KB-/view?usp=drive_link

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5



----------


### Another section completed!!!!!

 ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXpvOGVkZ2ljdm8zcDgyc3RrNnFrNzRxcXdwendjc3BiYmtpd3l4aiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/H1NIKdfygAAMruqArl/giphy.gif)

As usual here are some memes for your troubles!
![](https://b1694534.smushcdn.com/1694534/wp-content/uploads/2021/06/its-a-frontend-is-it-3oth-its-both-backend-i-44043917-1.png?lossy=1&strip=1&webp=1)

**Pov: You debugging javascript**
![](https://b1694534.smushcdn.com/1694534/wp-content/uploads/2021/06/269f3708b5e22a1481c78707bfa14a36-2.gif?lossy=1&strip=1&webp=1)

Has this ever happened before?
![](https://b1694534.smushcdn.com/1694534/wp-content/uploads/2021/06/83bbcc474d7142438f00bb3db9c031e8.gif?lossy=1&strip=1&webp=1)

Arrays in Javascript 🔝
![](https://miro.medium.com/v2/resize:fit:720/format:webp/0*q_hMPRT5aXMjNusG)

Section Three: Basic JavaScript 🌱

## Passenger Counter App Peer Review Activity 


Hey fellow developers!

Are you ready to embark on a journey of code review and collaboration? Get ready to dive into the Passenger Counter App Project and help each other improve! 🚗💻

In this activity, you'll team up with a peer to review and provide feedback on each other's Passenger Counter App projects. It's an opportunity to sharpen your coding skills, learn from others, and celebrate your progress together!

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1R127BaCMtB4qMn2wRdOAtdDsWqM9PIuZDuaynliqIuY/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including JavaScript files, HTML, CSS, and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:  Passenger Counter App Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Passenger Counter App Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Passenger Counter App

1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the Passenger counter app assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




Passenger Counter App Peer Review

## 💡 Practice Time
![](https://media1.giphy.com/media/7JETqZF5PbCtYwjpUT/200.webp?cid=790b7611eb2wh3pnahiaup78qpaa251c4qvg3qwmp72rsyt3&ep=v1_gifs_search&rid=200.webp&ct=g)
Time to practice what you learned so far!

# 📋 Instructions


1. **Step One:** Follow the link below and complete all 9 lessons found under the “Practice time - part 1 “ module.

- **🔗 Module Link:** https://scrimba.com/playlist/p5vWxtd

    

### 🌟 Course Content 🌟 

- [ ]  [1. Variables practice1:52](https://scrimba.com/learn/learnjavascript/variables-practice-co2264b0abdbee639d295a80a)
- [ ]  [2. Concatenate two strings in a function0:58](https://scrimba.com/learn/learnjavascript/concatenate-two-strings-in-a-function-co23a4fe8b47802d961fe7eaf)
- [ ]  [3. Incrementing and decrementing2:11](https://scrimba.com/learn/learnjavascript/incrementing-and-decrementing-co8af42a4858bf9338d1b1a99)
- [ ]  [4. Strings and numbers1:34](https://scrimba.com/learn/learnjavascript/strings-and-numbers-co76a4c8584ff3616731daebb)
- [ ]  [5. Rendering an error message3:15](https://scrimba.com/learn/learnjavascript/rendering-an-error-message-co1db4bcd8e2ca63af31e7e0a)
- [ ]  [6. Calculator challenge5:30](https://scrimba.com/learn/learnjavascript/calculator-challenge-co5224608b444f44d1c09cfa7)
- [ ]  [7. Why are Solo Projects important?3:12](https://scrimba.com/learn/learnjavascript/why-are-solo-projects-important-crdV3Gtq)
- [ ]  [8. Solo Project (PRO) - Basketball Scoreboard4:21](https://scrimba.com/learn/learnjavascript/solo-project-pro-basketball-scoreboard-cz9adVfP)
- [ ]  [9. Get a code review!2:39](https://scrimba.com/learn/learnjavascript/get-a-code-review-cBwNn8u6)

<aside>

- 📢
 Use the following GitHub repo to gain access to the files used for the challenges      👇   
🔗 GitHub repo: [https://github.com/scrimba/learn-javascript/tree/main/2. Practice time - part 1](https://github.com/scrimba/learn-javascript/tree/main/2.%20Practice%20time%20-%20part%201)


⚠️ **You are required to complete THE FIRST 6 LESSONS mentioned above before moving on to the next **section!****

# 📔 Additional Resources
- JavaScript book: https://drive.google.com/file/d/1duftOF4EoT8g-u4M73V-JbxWYTddZGCY/view?usp=drive_link

- Cheat-Sheet: https://drive.google.com/file/d/1y3Hgtio5T3qnJDzp9TiN-sxjUIRL2KB-/view?usp=drive_link

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5

---
![](https://media0.giphy.com/media/NTH7hNBn3ehwLBqEhO/200.webp?cid=790b7611co3czncgwo9cweciv3nfxzjuoajsbl4odscy3gc8&ep=v1_gifs_search&rid=200.webp&ct=g)

### Another section completed  ✅

Section Four: Basic JS Practice 🧑‍💻

Previously you have installed VS Code and used it alongside Git and GitHub. In this section, we will have a quick recap of what we have done. You were also able to deploy your portfolio site using GitHub pages now we will see how that can be done using Netlify.

# 📋 Instructions

1. **Step One:** Follow the link below and complete all four lessons found under the “**Setting up a local dev environment” module.**

- 🔗 Module Link: https://scrimba.com/playlist/pZgDaSW


### 🌟Course Content 🌟 

- [ ] [1. Setting Up a Local Dev Environment2:47](https://scrimba.com/learn/learnjavascript/setting-up-a-local-dev-environment-c8wPKgA2)
- [ ] [2. Getting Started with GitHub Desktop4:18](https://scrimba.com/learn/learnjavascript/getting-started-with-github-desktop-c8GdrdtV)
- [ ] [3. Edit with VS Code and Push to GitHub3:35](https://scrimba.com/learn/learnjavascript/edit-with-vs-code-and-push-to-github-cwGp4bTm)
- [ ] [4. Deploy and Share Your Solo Project1:34](https://scrimba.com/learn/learnjavascript/deploy-and-share-your-solo-project-cof904ca8b600057758b71020)

You are required to complete all the lessons mentioned above before moving on to the next section! ⚠️
> 💡 Are you stuck? Ask a question on Piazza!


----------
Chop Chop!!!   🏃 🏃 🏃
![](https://i.imgflip.com/8nr8v2.jpg)


Section Five: Setting up a local dev environment 💻

# 💡 Topic: Control Flow + Arrays

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2017/09/04/e0f1e881-d158-48c7-913c-88c5a0865c2a.png)

Imagine you were building a website that takes a user's age as input and then displays a different message depending on whether they are over 18 or under 18. considering what we have covered you have no means of doing that, that is because you don’t know about conditionals without which the website wouldn’t be able to make decisions. With conditionals, you can write code that says "if the user's age is over 18, display 'Welcome to the site!'", and "if the user's age is under 18, display 'Sorry, this website is for adults only'".

![](https://www.frescodata.com/frescodata_2020/wp-content/uploads/2023/04/Sample-Email-List-724x1024.png)

Now imagine you had a large list of items, such as the names of people who have signed up for an event, and you wanted to send an email to everyone on the list. you can copy and paste the same email over and over again for each person, but that would be a tedious task. In JavaScript, we have Loops to deal with repetitive actions. In this case, you can use a loop that goes through each item in the list and automatically sends the email.

![](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_740,h_900/https://cdn.marketing123.123formbuilder.com/wp-content/uploads/2023/01/business-coaching-quiz.jpg)

suppose you were building a website containing a quiz that asks a series of questions and then displays the user's score at the end. How will you store all the correct answers and then compare them to the user’s answer to calculate their score? You can store each answer in a different variable but if you have 50 questions you will end up with 50 variables and it would be hard to keep track of them all. An array allows you to store as many different values as you want under a single variable name. 

This section covers conditionals, loops, and arrays in JavaScript which are essential for writing efficient, effective, and easy-to-read code, which is key to being a good programmer. You will build a Blackjack game to learn the concepts mentioned.

# 📋 Instructions
1. **Step one:** Follow the link below and complete all Fifty-Four lessons found under the “**Build a Blackjack game”** module**.**

- **🔗Module Link**: [Build a Blackjack game](https://scrimba.com/playlist/p3py7U7)



> 💡 Remember! You can use Piazza to ask questions.



### 🌟 Course Content 🌟

[1. Let's build a Blackjack game!0:57](https://scrimba.com/learn/learnjavascript/lets-build-a-blackjack-game-coa954d1fb213d2a9d5a1c8ab)

[2. Add the firstCard, secondCard, and sum0:52](https://scrimba.com/learn/learnjavascript/add-the-firstcard-secondcard-and-sum-cob32400d901441f0c7b24e48)

[3. If...else conditionals5:39](https://scrimba.com/learn/learnjavascript/ifelse-conditionals-cob8843eab8947d488723e333)

[4. Your first if...else statement2:53](https://scrimba.com/learn/learnjavascript/your-first-ifelse-statement-co8e146ce963eb3c0137364e0)

[5. if/else...if/else statement3:21](https://scrimba.com/learn/learnjavascript/if-elseif-else-statement-co965478e90b91c2d9442dc3f)

[6. The if...else statement for our game1:59](https://scrimba.com/learn/learnjavascript/the-ifelse-statement-for-our-game-c2GGK8SZ)

[7. Add the hasBlackJack variable2:03](https://scrimba.com/learn/learnjavascript/add-the-hasblackjack-variable-coca54339adcc241de8b68c55)

[8. Add the isAlive variable1:44](https://scrimba.com/learn/learnjavascript/add-the-isalive-variable-cod1942868d146f268ac0aaa0)

[9. Let's practice boolean conditions3:25](https://scrimba.com/learn/learnjavascript/lets-practice-boolean-conditions-coce1455491f89332903f392c)

[10. Add the message variable3:21](https://scrimba.com/learn/learnjavascript/add-the-message-variable-coe7145f585d7beae24bf6cad)

[11. Link to stylesheet2:32](https://scrimba.com/learn/learnjavascript/link-to-stylesheet-co13941cbb8c0830394ef2859)

[12. Add basic styling4:18](https://scrimba.com/learn/learnjavascript/add-basic-styling-cofd94b318377a92708266d5b)

[13. Make the start button work5:49](https://scrimba.com/learn/learnjavascript/make-the-start-button-work-coc6c4cbdabbd137c048113eb)

[14. Display the message2:32](https://scrimba.com/learn/learnjavascript/display-the-message-co18e42bfb517c0159b760987)

[15. Display the sum5:43](https://scrimba.com/learn/learnjavascript/display-the-sum-co20c462d828e4c42733f1333)

[16. Display the cards1:53](https://scrimba.com/learn/learnjavascript/display-the-cards-coa57450194cb6d23ee56cfc5)

[17. New card button3:39](https://scrimba.com/learn/learnjavascript/new-card-button-coaeb4264898bcb4ebb96729f)

[18. Add to the sum when newCard is clicked3:16](https://scrimba.com/learn/learnjavascript/add-to-the-sum-when-newcard-is-clicked-co2224763a1e51e908596d470)

[19. Rename the startGame function2:11](https://scrimba.com/learn/learnjavascript/rename-the-startgame-function-co0f441b79b4e4ccc9f524cd3)

[20. Solving our cards problem with an array3:16](https://scrimba.com/learn/learnjavascript/solving-our-cards-problem-with-an-array-co4e446f299b7e5d78be78c02)

[21. Intro to arrays5:24](https://scrimba.com/learn/learnjavascript/intro-to-arrays-cr8bJMtv)

[22. Array indexes4:03](https://scrimba.com/learn/learnjavascript/array-indexes-co46345cd9dc6fcdc854295e0)

[23. Arrays with multiple data types2:18](https://scrimba.com/learn/learnjavascript/arrays-with-multiple-data-types-cod8c4f099a76c3c42c5ce82a)

[24. Adding and removing items from arrays4:20](https://scrimba.com/learn/learnjavascript/adding-and-removing-items-from-arrays-co1bf46daa62a7fe7ccef521a)

[25. Creating the cards array1:04](https://scrimba.com/learn/learnjavascript/creating-the-cards-array-co8594d8eb0cf921138c3a078)

[26. Push a new card to the array1:18](https://scrimba.com/learn/learnjavascript/push-a-new-card-to-the-array-coaf04bcdb05f8a602de25c4c)

[27. Counting in JavaScript4:01](https://scrimba.com/learn/learnjavascript/counting-in-javascript-cgV9KnCy)

[28. Write your first loop3:22](https://scrimba.com/learn/learnjavascript/write-your-first-loop-co53f410f8f30e6ff50d3f397)

[29. For loops and arrays3:43](https://scrimba.com/learn/learnjavascript/for-loops-and-arrays-coaa14d50b0a1f3179f91b6ca)

[30. Write your first array-based for loop1:29](https://scrimba.com/learn/learnjavascript/write-your-first-array-based-for-loop-cGWpRZUR)

[31. For loops, arrays, and DOM2:55](https://scrimba.com/learn/learnjavascript/for-loops-arrays-and-dom-coab24217abef0916cf733c13)

[32. Use a loop to render cards2:16](https://scrimba.com/learn/learnjavascript/use-a-loop-to-render-cards-cobc34d5c9667cea9d00fdb9f)

[33. How can we avoid to hard-code card values?1:31](https://scrimba.com/learn/learnjavascript/how-can-we-avoid-to-hard-code-card-values-cP2N3eSZ)

[34. Returning values in functions4:59](https://scrimba.com/learn/learnjavascript/returning-values-in-functions-co9eb41e6a691a3cef6b6d831)

[35. Use a function to set the card values3:06](https://scrimba.com/learn/learnjavascript/use-a-function-to-set-the-card-values-cof624b909c18f35f6c7caa2f)

[36. Generating random numbers with Math.random()4:15](https://scrimba.com/learn/learnjavascript/generating-random-numbers-with-mathrandom-c87mLMt3)

[37. Math.random() * 61:43](https://scrimba.com/learn/learnjavascript/mathrandom-6-co2b3423eb2262ddf576e7464)

[38. Flooring the number with Math.floor()1:24](https://scrimba.com/learn/learnjavascript/flooring-the-number-with-mathfloor-cJ2LMQsd)

[39. Using Math.random() and Math.floor() to create a dice1:40](https://scrimba.com/learn/learnjavascript/using-mathrandom-and-mathfloor-to-create-a-dice-code64d1c95b2f624e6d21139)

[40. Completing our dice function2:37](https://scrimba.com/learn/learnjavascript/completing-our-dice-function-coa3c45f58f5cb8ba65a72607)

[41. Make getRandomCard() work2:54](https://scrimba.com/learn/learnjavascript/make-getrandomcard-work-codbc4cc29355d9fba5f43e02)

[42. Complete getRandomNumber function3:02](https://scrimba.com/learn/learnjavascript/complete-getrandomnumber-function-coe2d418b8ed48275f389652b)

[43. Assign values in the startGame function2:42](https://scrimba.com/learn/learnjavascript/assign-values-in-the-startgame-function-co3e346869edad080e312f777)

[44. Our new card feature is broken0:59](https://scrimba.com/learn/learnjavascript/our-new-card-feature-is-broken-cobdd4d20bb267ef3beb3bee0)

[45. The logical AND operator3:41](https://scrimba.com/learn/learnjavascript/the-logical-and-operator-cKrkWWcQ)

[46. Write your first logical operator2:04](https://scrimba.com/learn/learnjavascript/write-your-first-logical-operator-co0d644d1b7c1b3cbe31eeee9)

[47. The logical OR operator3:02](https://scrimba.com/learn/learnjavascript/the-logical-or-operator-cod9f40fab80f39ae946299b8)

[48. Only trigger newCard() if you're allowed to1:27](https://scrimba.com/learn/learnjavascript/only-trigger-newcard-if-youre-allowed-to-codb9496aa4451c6b43db4fe2)

[49. Object sneak peek4:32](https://scrimba.com/learn/learnjavascript/object-sneak-peek-co4714518bdba1aaa7b3e7713)

[50. Intro to objects4:43](https://scrimba.com/learn/learnjavascript/intro-to-objects-cod044e07be08ebfa73965a0d)

[51. Create your first object3:15](https://scrimba.com/learn/learnjavascript/create-your-first-object-coc5745b59777020d62a6d715)

[52. Use an object to store player data2:37](https://scrimba.com/learn/learnjavascript/use-an-object-to-store-player-data-co86e407cbdecb0fe264941c0)

[53. Methods on object1:58](https://scrimba.com/learn/learnjavascript/methods-on-object-co1524863b9103b87753fc761)

[54. Congrats & recap4:24](https://scrimba.com/learn/learnjavascript/congrats-recap-co6f14249b468fa5fdd02f1f5)

- **⚠️ Note: You are required to complete ALL 54 LESSONS mentioned above before moving on to the next section! ⚠️**


- 📢
 Use the following GitHub repo to gain access to the files necessary for the course🔗 GitHub repo: [https://github.com/scrimba/learn-javascript/tree/main/3. Build a Blackjack game](https://github.com/scrimba/learn-javascript/tree/main/3.%20Build%20a%20Blackjack%20game)



# 📔 Additional Resources

- JavaScript book: https://drive.google.com/file/d/1duftOF4EoT8g-u4M73V-JbxWYTddZGCY/view?usp=drive_link

- Cheat-Sheet: https://drive.google.com/file/d/1y3Hgtio5T3qnJDzp9TiN-sxjUIRL2KB-/view?usp=drive_link

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5

---

### You Did It Again 😀!!!!!
![](https://media4.giphy.com/media/ehmtO0cTEP4Vuesrr2/200.webp?cid=ecf05e47x1ft390iqpyeias84a79daspne3snn5dpkt7rt5s&ep=v1_gifs_search&rid=200.webp&ct=g)

Meme Time!!!!

![](https://uploads-ssl.webflow.com/5f3c19f18169b62a0d0bf387/60d33be8cf4ba7565123c8bc_YPD3ulQQAGQpOcnqIm3QzSTRgzmr1SexpW9ZjMpJ1mAnUxx4iF05XOTu44sk0qQG-8XgBcYmGZGAD-5SAZvJl3TjtmhgWnn-w0C2XKwhBscV78RVvhwZfyp0v_Pa6sNj5zxpOvRW.png)

![](https://www.thecoderpedia.com/wp-content/uploads/2020/06/Are-you-a-robot-Meme-768x694.jpg)
![](https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Error-in-Code-768x878.jpg)

Section Six: Intermediate JavaScript 🌻

## Black Jack Game Peer Review Activity 


Hey fellow coders!

Are you ready to take your coding skills to the next level by reviewing each other's Blackjack game projects? Let's dive into the world of JavaScript and card games together! 🃏💻

In this activity, you'll pair up with a peer to exchange feedback and insights on your Blackjack game projects. It's a fantastic opportunity to learn from each other's code, identify areas for improvement, and celebrate your accomplishments!

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1zZcrk2GHCPxbQgWG6Wg5J0Q2oeRjw4eVRLLhy_g-yiM/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including JavaScript files, HTML, CSS, and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission: BlackJack Game Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the BlackJack Game Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: BlackJack Game

1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the BlackJack Game assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




BlackJack Game Peer Review





# 📋Instructions

1. **Step One:** Follow the link below and complete the first 8 lessons found under the “**Practice time - part 2**“ module.

- **🔗 Module Link:** [Practice
 time - part 2](https://scrimba.com/playlist/pbnBJTp)


### 🌟 Course Content 🌟 

- [ ] [1. Objects and functions2:00](https://scrimba.com/learn/learnjavascript/objects-and-functions-c3wWM8fb)
- [ ] [2. if else2:48](https://scrimba.com/learn/learnjavascript/if-else-co94743268aef4765e3aa13f0)
- [ ] [3. Loops and arrays2:04](https://scrimba.com/learn/learnjavascript/loops-and-arrays-cod1746eaa71973c69b26b0fd)
- [ ] [4. push, pop, unshift, shift challenge3:25](https://scrimba.com/learn/learnjavascript/push-pop-unshift-shift-challenge-co3654801a1e9d119fc7768bc)
- [ ] [5. Logical operators1:56](https://scrimba.com/learn/learnjavascript/logical-operators-c6drWbSm)
- [ ] [6. Rock papers scissors2:59](https://scrimba.com/learn/learnjavascript/rock-papers-scissors-cobab4601b80df4da81b00c77)
- [ ] [7. EmojiFighter4:32](https://scrimba.com/learn/learnjavascript/emojifighter-co0ae44c3916ad5cbf9d73166)

- [ ] [8. Sorting fruits2:57](https://scrimba.com/learn/learnjavascript/sorting-fruits-co2224ee0aa71a2ab76471c1c)


> 💡 Are you stuck? Ask a question on Piazza!




- **⚠️     You are only required to complete THE FIRST 8 LESSONS mentioned above before moving on to the next section!⚠️**

<aside>

- 📢 Use the following GitHub repo to gain access to the files used for the challenges

🔗 GitHub repo: [https://github.com/scrimba/learn-javascript/tree/main/4. Practice time - part 2](https://github.com/scrimba/learn-javascript/tree/main/4.%20Practice%20time%20-%20part%202)
# 📔 Additional Resources

- JavaScript book: https://drive.google.com/file/d/1duftOF4EoT8g-u4M73V-JbxWYTddZGCY/view?usp=drive_link

- Cheat-Sheet: https://drive.google.com/file/d/1y3Hgtio5T3qnJDzp9TiN-sxjUIRL2KB-/view?usp=drive_link

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
![](https://media2.giphy.com/media/ZXBCQjBvOJ5bQXP95h/200.webp?cid=790b76119ddvzjpw4dw0u9r8ez64an5peya74pvwuwz2uz56&ep=v1_gifs_search&rid=200.webp&ct=g)

### Another section completed  ✅


Section Seven: Intermediate JS Practice

## 💡

Well done for making it this far! So far you have covered the basics of JavaScript extensively. You know how to write JavaScript code, You also know how to use JavaScript along with HTML and CSS to create interactive and functional websites but there is more, you see JavaScript can be used to create a variety of things on the web. At this stage, you can use it to write code that tells the various elements of a website to do stuff but you can’t use it to create a Google Chrome extension. That is what this section focuses on because building a Google Chrome extension using JavaScript can be a great way for you to learn a variety of skills. 

Firstly, you will develop a deep understanding of the fundamentals of JavaScript, including manipulating the Document Object Model (DOM), event handling, and creating interactive user interfaces. 

You will also learn how to interact with Google Chrome's APIs and how to build small programs that run inside the browser. Beyond the programming skills, you will learn, how to use debugging tools, and how to read documentation. It will help you develop strong problem-solving skills and a flexible mindset, as you work to overcome the many challenges that arise during the development process.

# 📋 Instructions
### 

1. **Step one:** Follow the link below and complete all Fifty-Four lessons found under the “**Build a Chrome Extension”** module**.**

- 🔗 **Module Link:** [Build a Chrome Extension](https://scrimba.com/playlist/pPD7Kt4)


### 🌟 Course Content 🌟

- [ ]  [1. Let's build a Chrome Extension!4:33](https://scrimba.com/learn/learnjavascript/lets-build-a-chrome-extension-co85441e3b6bd2c9eeee218bf)
- [ ]  [2. Add button and input tag1:33](https://scrimba.com/learn/learnjavascript/add-button-and-input-tag-coc2b456499fbdd224733183e)
- [ ]  [3. Style the button and input tag7:16](https://scrimba.com/learn/learnjavascript/style-the-button-and-input-tag-co1a14bfa8cd930a4238dabf5)
- [ ]  [4. Make the input button work with onclick1:17](https://scrimba.com/learn/learnjavascript/make-the-input-button-work-with-onclick-co48f417a81a9731509f01933)
- [ ]  [5. Refactor to addEventListener2:18](https://scrimba.com/learn/learnjavascript/refactor-to-addeventlistener-co8ce4dcf8add1c0072d608fa)
- [ ]  [6. Write your first addEventListener()1:44](https://scrimba.com/learn/learnjavascript/write-your-first-addeventlistener-cob514651aa7d906a8c42037a)
- [ ]  [7. Your turn to refactor1:22](https://scrimba.com/learn/learnjavascript/your-turn-to-refactor-co3d648dc88e574bea04fa576)
- [ ]  [8. Create the myLeads array and inputEl2:21](https://scrimba.com/learn/learnjavascript/create-the-myleads-array-and-inputel-cobdc4921bc7ab475bc52cd59)
- [ ]  [9. When to use let and const3:17](https://scrimba.com/learn/learnjavascript/when-to-use-let-and-const-cr8vRQfK)
- [ ]  [10. Push to the myLeads array1:10](https://scrimba.com/learn/learnjavascript/push-to-the-myleads-array-co2a74222ac74938cefd7caf1)
- [ ]  [11. Push the value from the input field2:27](https://scrimba.com/learn/learnjavascript/push-the-value-from-the-input-field-cod93488d8dd146bbe2d11a0f)
- [ ]  [12. Use a for loop to log out leads1:39](https://scrimba.com/learn/learnjavascript/use-a-for-loop-to-log-out-leads-co25149dc879b0bcc7e1fac8a)
- [ ]  [13. Create the unordered list1:55](https://scrimba.com/learn/learnjavascript/create-the-unordered-list-co8c94a4b8a4636bb74711f69)
- [ ]  [14. Render the leads in the unordered list3:41](https://scrimba.com/learn/learnjavascript/render-the-leads-in-the-unordered-list-co8f34f73abf41c76417dae76)
- [ ]  [15. How to render <li> elements with innerHTML1:33](https://scrimba.com/learn/learnjavascript/how-to-render-li-elements-with-innerhtml-co45643f7acb5a22fc0e09451)
- [ ]  [16. Write your first innerHTML1:31](https://scrimba.com/learn/learnjavascript/write-your-first-innerhtml-cobb54e83a949a0c2e6f34357)
- [ ]  [17. More innerHTML practice1:48](https://scrimba.com/learn/learnjavascript/more-innerhtml-practice-cod7c40be85611374193d9451)
- [ ]  [18. Render the <li> elements with innerHTML1:07](https://scrimba.com/learn/learnjavascript/render-the-li-elements-with-innerhtml-cof7b42b4a59ed272c887fc5b)
- [ ]  [19. Use createElement() and append() instead of innerHTML3:35](https://scrimba.com/learn/learnjavascript/use-createelement-and-append-instead-of-innerhtml-co64f4984a41b95b3d8fdd905)
- [ ]  [20. Improving the performance of our app3:17](https://scrimba.com/learn/learnjavascript/improving-the-performance-of-our-app-co033484a8165a2a0111f1358)
- [ ]  [21. Create the render function2:00](https://scrimba.com/learn/learnjavascript/create-the-render-function-co93a49719966d5c97b34dd29)
- [ ]  [22. Clear the input field2:03](https://scrimba.com/learn/learnjavascript/clear-the-input-field-co5404b5e998b95769379d323)
- [ ]  [23. Add the <a> tag4:28](https://scrimba.com/learn/learnjavascript/add-the-a-tag-cod9c432487b5108bdbfe13a0)
- [ ]  [24. Template strings2:30](https://scrimba.com/learn/learnjavascript/template-strings-co67b40c89e401a9f28ead9aa)
- [ ]  [25. Write your first template string1:15](https://scrimba.com/learn/learnjavascript/write-your-first-template-string-cavarZUB)
- [ ]  [26. Make the template string even more dynamic0:51](https://scrimba.com/learn/learnjavascript/make-the-template-string-even-more-dynamic-co7d44b6689d91a26caa4a59b)
- [ ]  [27. Template strings on multiple lines2:53](https://scrimba.com/learn/learnjavascript/template-strings-on-multiple-lines-coa3c4223a8be2d49356b6d1d)
- [ ]  [28. Refactor the app to use a template string1:12](https://scrimba.com/learn/learnjavascript/refactor-the-app-to-use-a-template-string-co05d4431a009e5577ecc4a63)
- [ ]  [29. Style the list3:50](https://scrimba.com/learn/learnjavascript/style-the-list-coe3d4f068f02c23897db2db5)
- [ ]  [30. Preparing the deployment4:52](https://scrimba.com/learn/learnjavascript/preparing-the-deployment-co9a446609df2474539d99006)
- [ ]  [31. Deploying the Chrome Extension2:28](https://scrimba.com/learn/learnjavascript/deploying-the-chrome-extension-coa574dda96a591412a8b7cff)
- [ ]  [32. What is localStorage?3:02](https://scrimba.com/learn/learnjavascript/what-is-localstorage-co3744b46af12db577474ce7e)
- [ ]  [33. Your first localStorage3:48](https://scrimba.com/learn/learnjavascript/your-first-localstorage-coaa54cbd950661b84f5857b7)
- [ ]  [34. Storing arrays in localStorage6:23](https://scrimba.com/learn/learnjavascript/storing-arrays-in-localstorage-co7714fd8a808e480368eb207)
- [ ]  [35. Save the leads to localStorage2:28](https://scrimba.com/learn/learnjavascript/save-the-leads-to-localstorage-coddd43729f1136a310c20b6c)
- [ ]  [36. Get the leads from localStorage3:50](https://scrimba.com/learn/learnjavascript/get-the-leads-from-localstorage-cof6545408c5599b0edb3f958)
- [ ]  [37. Truthy and falsy values7:54](https://scrimba.com/learn/learnjavascript/truthy-and-falsy-values-cKrLayTP)
- [ ]  [38. Guess the expression - truthy or falsy?2:22](https://scrimba.com/learn/learnjavascript/guess-the-expression-truthy-or-falsy-coe164fb4be987acc14f283da)
- [ ]  [39. Checking localStorage before rendering3:37](https://scrimba.com/learn/learnjavascript/checking-localstorage-before-rendering-co4424ccb853621804fd3b40a)
- [ ]  [40. Style the delete button3:17](https://scrimba.com/learn/learnjavascript/style-the-delete-button-coc1c4cd18554916e09e6530b)
- [ ]  [41. Make the delete button work4:16](https://scrimba.com/learn/learnjavascript/make-the-delete-button-work-co58f4ab8a3ae3336a2a9a2f5)
- [ ]  [42. How function parameters can improve our code5:54](https://scrimba.com/learn/learnjavascript/how-function-parameters-can-improve-our-code-coedf4197b29dd9ac8d4e67ff)
- [ ]  [43. Write your first function parameter3:27](https://scrimba.com/learn/learnjavascript/write-your-first-function-parameter-cod5544b98cc0787ec1869790)
- [ ]  [44. Functions with multiple parameters3:11](https://scrimba.com/learn/learnjavascript/functions-with-multiple-parameters-co34b46cc9eedc43796b8177c)
- [ ]  [45. Numbers as function parameters1:41](https://scrimba.com/learn/learnjavascript/numbers-as-function-parameters-c4QL62t3)
- [ ]  [46. Arguments vs Parameters3:22](https://scrimba.com/learn/learnjavascript/arguments-vs-parameters-co37349e2b159781d932b29c6)
- [ ]  [47. Arrays as parameters1:54](https://scrimba.com/learn/learnjavascript/arrays-as-parameters-co5eb447aafb702ddc4de4121)
- [ ]  [48. Refactor renderLeads() to use a parameter1:39](https://scrimba.com/learn/learnjavascript/refactor-renderleads-to-use-a-parameter-co12a49a7aabb859488137c35)
- [ ]  [49. Create the tabBtn3:19](https://scrimba.com/learn/learnjavascript/create-the-tabbtn-co0a1443da9c748713a0060f6)
- [ ]  [50. Save the tab url2:35](https://scrimba.com/learn/learnjavascript/save-the-tab-url-coc6f4a948883b3e1b65db528)
- [ ]  [51. How to get the current tab?4:19](https://scrimba.com/learn/learnjavascript/how-to-get-the-current-tab-co3fe46ddb54b980828b116a9)
- [ ]  [52. Use the Chrome API to get the tab6:18](https://scrimba.com/learn/learnjavascript/use-the-chrome-api-to-get-the-tab-cof4d4a9b8e6dea505a0b1679)
- [ ]  [53. Deploy the final version2:14](https://scrimba.com/learn/learnjavascript/deploy-the-final-version-coc8640b4ab7ea074c56f6bdc)
- [ ]  [54. Congrats & recap5:43](https://scrimba.com/learn/learnjavascript/congrats-recap-co99d4d93bbebc5013f197604)



> 💡 Remember! You can use Piazza to ask questions.


- **⚠️ Note: You are required to complete ALL 54 LESSONS mentioned above before moving on to the next section! ⚠️**

<aside>

- 📢 Use the following GitHub repo to gain access to the files necessary for the course :

 🔗 GitHub repo: [https://github.com/scrimba/learn-javascript/tree/main/5. Build a Chrome Extension](https://github.com/scrimba/learn-javascript/tree/main/5.%20Build%20a%20Chrome%20Extension)

</aside>


# 📔 Additional Resources

- JavaScript book: https://drive.google.com/file/d/1duftOF4EoT8g-u4M73V-JbxWYTddZGCY/view?usp=drive_link

- Cheat-Sheet: https://drive.google.com/file/d/1y3Hgtio5T3qnJDzp9TiN-sxjUIRL2KB-/view?usp=drive_link

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5
---
![](https://media3.giphy.com/media/1MKhxzcv6wrlJm78h5/giphy.webp?cid=790b7611bdjdvao02ud875v4nan0je34tphg2cqhnq32rf4h&ep=v1_gifs_search&rid=giphy.webp&ct=g)
###  Another section completed ✅
![](https://i.chzbgr.com/full/9195085568/hD51ED7F9/programmer-meme-cartoon-when-you-ask-what-type-of-language-they-write-in-and-they-say-htmland-css)

![](https://i.chzbgr.com/full/9195089920/h7E59E42E/meme-cartoon-%D0%B0-%D0%B0-%D0%B0-its-first-word-arrays-start-at-1-live-local-late-breaking-baby-found-in-dumpster)

**How was your experience with CSS?**
![](https://i.chzbgr.com/full/9195093248/h0D029706/is-on-fire-and-everything-is-on-fire-because-it-is-hell-353-am-15-jul-16-2315-retweets-3420-likes)

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYBhOTxF4xwfViB7_6nHQbiMKqpYjJcJ5GKVgdOJLbZA&s)

Section Eight: Advanced JavaScript 🌲

## Chrome Extension Peer Review Activity 

Hey developers!

Are you excited to explore the world of Chrome extensions and share your creations? Let's collaborate and provide feedback to help each other improve our Chrome extension projects! 🚀🔍

In this peer review activity, you'll partner up with a fellow developer to exchange insights and suggestions on your Chrome extension projects. It's a fantastic opportunity to learn from each other's code, discover new techniques, and enhance your extension-building skills!

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1mFbdKWsCvwgZnntrY1qVv7Ky_KpCyQWmhR7dccMTySU/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including JavaScript files, HTML, CSS, and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:  Chrome Extension Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Chrome Extension Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Chrome Extension

1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the Chrome Extension assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




Chrome Extension Peer Review Activity 

### 🏋️ **Are you up for another challenge?**

![](https://media.giphy.com/media/4KHuL7tfoANck/giphy.gif)

# 📋 **Instructions**

1. **Step One:** Follow the link below and complete the first 8 lessons found under the “**Practice time - part 3**“ module.

- 🔗 Module Link: [Practice time - part 3](https://scrimba.com/playlist/pQgXphg)


### 🌟 Course Content 🌟 

- [ ] [1. let & const3:12](https://scrimba.com/learn/learnjavascript/let-const-coa9447d5b2aeedc69985ac63)
- [ ] [2. Log out items in an array1:17](https://scrimba.com/learn/learnjavascript/log-out-items-in-an-array-cod5f44f69a15ee84141ba98a)
- [ ] [3. save to localStorage1:53](https://scrimba.com/learn/learnjavascript/save-to-localstorage-co5b7404f9ce73339cbe5b13e)
- [ ] [4. addEventListener and object in array2:39](https://scrimba.com/learn/learnjavascript/addeventlistener-and-object-in-array-cod7441a996bab8ab629ee423)
- [ ] [5. Generate sentence4:53](https://scrimba.com/learn/learnjavascript/generate-sentence-cp9Grdh3)
- [ ] [6. Render images6:05](https://scrimba.com/learn/learnjavascript/render-images-cbKR3qS9)
- [ ] [7. Rounding numbers1:45](https://scrimba.com/learn/learnjavascript/rounding-numbers-cob924bf8beb96284010598e2)
- [ ] [8. Convert string to number challenge2:24](https://scrimba.com/learn/learnjavascript/convert-string-to-number-challenge-co1ca4a908ffcc7ed176ccf50)

<aside>

> 💡 Are you stuck? Ask a question on Piazza!

</aside>



- **⚠️ You are only required to complete THE FIRST 8 LESSONS mentioned above before moving on to the next section!** ⚠️

<aside>

- 📢 Use the following GitHub repo to gain access to the files used for the challenges      👇  
🔗 GitHub repo: [https://github.com/scrimba/learn-javascript/tree/main/6. Practice time - part 3](https://github.com/scrimba/learn-javascript/tree/main/6.%20Practice%20time%20-%20part%203)

</aside>


----------

![](https://media3.giphy.com/media/l43wSvO0wvV9orCj4q/200.webp)

### Look at you completing sections left and right! Good Job :)

Section Nine: Advanced JS Practice

![](https://resource.auditoryworks.co/server/nearhub/images/c599aef4-a227-409c-9c34-24fe53b3b4c6.jpeg)

It’s time to collaborate! In your upcoming module assessment, you are required to work together with your fellow developers on a project. Remember in module one when we talked about Git and GitHub we mentioned one of the reasons we need Git and GitHub is collaboration. Unless you use these technologies you can't work together on the same codebase because you have no other mechanism for version control and tracking of changes. 

To give you a quick recap Git allows multiple users to work on the same project, and GitHub allows users to share and collaborate on projects. 

# 📋 Instructions

1. **Step one:** Follow the link below and watch all 3 videos in the order they are presented. Follow the step-by-step instructions to learn about GIT and GitHub.

- **🔗Youtube Playlist:** https://youtube.com/playlist?list=PLaw6DVSn8IuR4mu49ZdnT_1I9QQRw44cN

**⚠️Note: You are required to COMPLETE ALL 3 Lessons found under the course!⚠️**


> 💡 Remember! You can use Piazza to ask questions.

----------
### Module Complete 💯


Section Ten: Git Collaboration 👨‍💻👩‍💻

# 📝 Module Assessment 

For the End of Module Assessment, you are required to pick one of the 2 options below. Please note that the project you pick at this point will be the one you work on for the remaining modules if you go down the full-stack tech track. In this assessment, you will also be working in teams so please make sure you communicate with your group beforehand!

**Module Assessment Link:** https://directed.notion.site/Sprint-Assessment-c603e721a70543b9b9688469453b7b5d?pvs=4

Happy Coding🙂


📝 Module Assessment 📝 

Module 2: JavaScript + Task Management 

# 🧭Overview

Welcome to the exciting new module in our web development series! In this module, you will delve deeper into the world of web development by learning about the Document Object Model (DOM), full-stack web development using the MERN stack, and the React framework. With your prior knowledge of front-end programming including HTML, CSS, and JavaScript, you are now ready to take on the challenges of full-stack web development. Through this module, you will learn how to create dynamic web applications that are both interactive and responsive, using some of the most popular web development tools and frameworks available today. Get ready to take your web development skills to the next level and explore the possibilities of full-stack web development with MERN and React!
![](https://i.ibb.co/Rpy5zm3/Untitled-3.png)

# 📅 Schedule
👉 Reminder: Our Google calendar contains the recommended timeline for taking the course as well as information about when training and surveys will take place so please make sure you have added it to your calendar and accepted all events before moving on. We have shared a calendar invite with you via Email.

⚠️Please ensure that you are using the correct calendar for your country to avoid missing important events.⚠️

Kenyan Students Only👇

Calendar Link: https://calendar.google.com/calendar/u/1?cid=NTY1ODg4MWRkYzYyNTg3NGZlYzFmYmZhZDljMGQzM2UzMjdiNzM4OTAwZDFhMWZiMTMzZWI3NmM0ZjYwNTRmMUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Ethiopian Students Only👇

https://calendar.google.com/calendar/u/1?cid=NGU0OGZkNjA1ZTg3ZjI5NGJlNzQyNGZlNDBhNzhkZDQ5ZDNiNWJjNTZjMTkxNTY1YjY4YWU2MDYyOTA2ZGRkMEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Google Calendar Tutorial

How to access a Google Calendar shared with you: https://www.youtube.com/watch?v=bofIU4rq-VM

**Mandatory Module Feedback ‼️**

At the end of every week, you are REQUIRED to fill out the module feedback form found below. Please only fill in the form that applies to your country as you have different timelines.

**For Kenya:** https://tally.so/r/wMAXkE

**For Ethiopia:** https://tally.so/r/wMANzl

# 📑 Sections

This module is divided into Six major sections. Each section has a single area of focus and is aimed at helping you master the topics covered.

1. Section One: JavaScript DOM 🌐
2. Section Two: Introduction To MERN and Dynamic Web Applications
3. Section Three: Introduction to React 🌱
4. Section Four: Beginner React 🐣
5. Section Five: Intermediate React 🐥
6. Section Six: Advanced React 🐓
7. . 📝 Module Assessment 📝

## 💡 Topic: What is DOM?

Imagine you're a king or queen in charge of a grand castle, with many rooms, staircases, and courtyards. You've commissioned the finest stonemasons and craftsmen to build your castle, but now you're facing a problem - you want to rearrange the layout of some of the rooms and add new features like a ballroom and a moat. However, your craftsmen have already finished building the castle and left for other projects, leaving you with a challenge - how can you make changes to the castle without tearing it down and starting over?
![](https://i.ibb.co/thX0k9J/image-1.jpg)
This is where the Document Object Model (DOM) comes in. The DOM is like the map of your castle, showing you the structure of each room and its relationship to the other rooms. With the DOM, you can access and manipulate the elements of your castle (like the walls, doors, and furniture) without needing to rebuild the whole thing. In the same way, the DOM allows developers to access and manipulate the elements of a web page, such as HTML tags and CSS styles, through JavaScript code. This makes it possible to create dynamic and interactive web pages that can respond to user input and update in real-time. Without the DOM, developers would have to manually write complex HTML and CSS code to achieve the same result, making it much more difficult and time-consuming to build engaging and user-friendly web applications.

# 📋 Instructions

1. **Step one:** Follow the link below and take the JavaScript DOM manipulation course to get a Basic understanding of DOM.

🔗Course Link: https://youtu.be/5fb2aPlgoys

**Note: You are required to COMPLETE the entire lesson before moving on to the next section.**

### **⭐️Course Contents⭐️**

- [ ]  ([0:00:00](https://www.youtube.com/watch?v=5fb2aPlgoys&t=0s)) Introduction
- [ ]  ([0:01:32](https://www.youtube.com/watch?v=5fb2aPlgoys&t=92s)) What is the DOM?
- [ ]  ([0:02:05](https://www.youtube.com/watch?v=5fb2aPlgoys&t=125s)) DOM Tree Analogy
- [ ]  ([0:04:01](https://www.youtube.com/watch?v=5fb2aPlgoys&t=241s)) Selecting Elements in the DOM
- [ ]  ([0:11:44](https://www.youtube.com/watch?v=5fb2aPlgoys&t=704s)) Styling an Element
- [ ]  ([0:16:33](https://www.youtube.com/watch?v=5fb2aPlgoys&t=993s)) Creating Elements
- [ ]  ([0:17:32](https://www.youtube.com/watch?v=5fb2aPlgoys&t=1052s)) Adding Elements
- [ ]  ([0:18:33](https://www.youtube.com/watch?v=5fb2aPlgoys&t=1113s)) Modify Text
- [ ]  ([0:21:15](https://www.youtube.com/watch?v=5fb2aPlgoys&t=1275s)) Modifying Elements Attributes & Classes
- [ ]  ([0:24:59](https://www.youtube.com/watch?v=5fb2aPlgoys&t=1499s)) Remove an Element
- [ ]  ([0:25:47](https://www.youtube.com/watch?v=5fb2aPlgoys&t=1547s)) DOM Tree Recap
- [ ]  ([0:27:58](https://www.youtube.com/watch?v=5fb2aPlgoys&t=1678s)) Traversing the DOM
- [ ]  ([0:37:48](https://www.youtube.com/watch?v=5fb2aPlgoys&t=2268s)) Event Listeners
- [ ]  ([0:44:59](https://www.youtube.com/watch?v=5fb2aPlgoys&t=2699s)) Event Listener Example
- [ ]  ([0:50:16](https://www.youtube.com/watch?v=5fb2aPlgoys&t=3016s)) Event Propagation
- [ ]  ([1:00:07](https://www.youtube.com/watch?v=5fb2aPlgoys&t=3607s)) Event Delegation
- [ ]  ([1:11:13](https://www.youtube.com/watch?v=5fb2aPlgoys&t=4273s)) Introduction to Projects
- [ ]  ([1:11:52](https://www.youtube.com/watch?v=5fb2aPlgoys&t=4312s)) Project 1: Beginner
- [ ]  ([1:14:26](https://www.youtube.com/watch?v=5fb2aPlgoys&t=4466s)) Project 1 Mark-Up
- [ ]  ([1:16:31](https://www.youtube.com/watch?v=5fb2aPlgoys&t=4591s)) General Styles for All Projects
- [ ]  ([1:17:08](https://www.youtube.com/watch?v=5fb2aPlgoys&t=4628s)) Project 1 CSS Styling
- [ ]  ([1:24:40](https://www.youtube.com/watch?v=5fb2aPlgoys&t=5080s)) Project 1 JavaScript
- [ ]  ([1:29:39](https://www.youtube.com/watch?v=5fb2aPlgoys&t=5379s)) Project 2: Beginner +
- [ ]  ([1:30:41](https://www.youtube.com/watch?v=5fb2aPlgoys&t=5441s)) Project 2 Mark Up
- [ ]  ([1:32:33](https://www.youtube.com/watch?v=5fb2aPlgoys&t=5553s)) Project 2 CSS styling
- [ ]  ([1:41:30](https://www.youtube.com/watch?v=5fb2aPlgoys&t=6090s)) Project 2 JavaScript
- [ ]  ([1:46:08](https://www.youtube.com/watch?v=5fb2aPlgoys&t=6368s)) Project 2 CSS Styling p2
- [ ]  ([1:47:53](https://www.youtube.com/watch?v=5fb2aPlgoys&t=6473s)) Project 3: Intermediate
- [ ]  ([1:48:39](https://www.youtube.com/watch?v=5fb2aPlgoys&t=6519s)) Project 3 Mark Up
- [ ]  ([1:49:59](https://www.youtube.com/watch?v=5fb2aPlgoys&t=6599s)) Project 3 CSS Styling
- [ ]  ([1:55:19](https://www.youtube.com/watch?v=5fb2aPlgoys&t=6919s)) Project 3 JavaScript
- [ ]  ([1:58:02](https://www.youtube.com/watch?v=5fb2aPlgoys&t=7082s)) Project 3 CSS Styling p2
- [ ]  ([2:00:45](https://www.youtube.com/watch?v=5fb2aPlgoys&t=7245s)) Project 4: Pro
- [ ]  ([2:01:26](https://www.youtube.com/watch?v=5fb2aPlgoys&t=7286s)) Project 4 Mark Up
- [ ]  ([2:02:44](https://www.youtube.com/watch?v=5fb2aPlgoys&t=7364s)) Project 4 CSS Styling
- [ ]  ([2:06:36](https://www.youtube.com/watch?v=5fb2aPlgoys&t=7596s)) Project 4 JavaScript
- [ ]  ([2:20:37](https://www.youtube.com/watch?v=5fb2aPlgoys&t=8437s)) Project 5: Master
- [ ]  ([2:22:01](https://www.youtube.com/watch?v=5fb2aPlgoys&t=8521s)) Project 5 Mark Up
- [ ]  ([2:23:15](https://www.youtube.com/watch?v=5fb2aPlgoys&t=8595s)) Project 5 CSS Styling
- [ ]  ([2:26:39](https://www.youtube.com/watch?v=5fb2aPlgoys&t=8799s)) Project 5 JavaScript
- [ ]  ([2:33:52](https://www.youtube.com/watch?v=5fb2aPlgoys&t=9232s)) Project 5 CSS Styling p2
- [ ]  ([2:38:41](https://www.youtube.com/watch?v=5fb2aPlgoys&t=9521s)) Project 5 JavaScript p2


<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>

# 🧠 Exercise / Project
1. Create a GitHub repository containing each of the projects you just created.
2. Submit the links to your repositories under the DOM Project using this link: 

## 📔 Additional Resources
- JavaScript Book : https://drive.google.com/file/d/1duftOF4EoT8g-u4M73V-JbxWYTddZGCY/view?usp=sharing
    
- Cheat-Sheet: https://drive.google.com/file/d/1y3Hgtio5T3qnJDzp9TiN-sxjUIRL2KB-/view?usp=drive_link
    
- DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
---

### Another section completed!!!!!

Section One: JavaScript DOM 🌐

## 💡 Topic: Static Websites
![](https://i.ibb.co/pjN1sR3/image.gif)

Static websites are websites that don't change based on user interactions or other variables. They display the same content to everyone who visits the site, regardless of who they are or what they do. Static websites are built using HTML, CSS, and JavaScript, which are the basic building blocks of web development.

An example of a static website is a brochure website for a small business. This type of website provides basic information about the business, such as its products or services, contact information, and location. The content on the website doesn't change based on user interactions, and the website is designed to provide a simple, straightforward experience for visitors.

Another example of a static website is a personal blog. A blog is a website that features regularly updated content, but many blogs are still considered static because they don't change based on user interactions. A personal blog might include articles, photos, or videos, but the content on the website remains the same regardless of who is reading it. For example, in module one you have created a personal portfolio website as part of your sprint assessment. The site contained information about you that you regularly updated as time went by but anyone who visited your page be it your teachers or fellow students got the same page regardless of who they are.

So far, you have only learned how to build static websites but while static websites have their advantages, they also have several downsides that can be resolved by using dynamic websites. One of the main limitations of static websites is that they are not interactive, meaning users cannot directly engage with the content. Dynamic websites, on the other hand, are highly interactive and provide a more personalized user experience. The main question is now how do you create dynamic websites? 

Here is a video on Static vs Dynamic websites to expand your knowledge: https://www.youtube.com/watch?v=0QT06AFAbdc

## 💡 Topic: Full Stack Web development

Full-stack web development is a technique that allows you to build and deploy dynamic web applications. Before getting into its different components first, let's talk about the differences between static and dynamic websites. A static website is like a castle made of bricks, where the bricks are pre-made and fixed in place. Everything is set and unchanging, just like the information on a static website. In contrast, a dynamic website is like a castle with movable walls and decorations that can be easily rearranged to meet the needs of different events or occasions. This allows for greater flexibility and customization, just like how a dynamic website can display different information or features based on user input or other variables.

Full-stack web development involves building two major components.  The front end and the back end now let’s see them one by one. Imagine building a castle with multiple rooms, each with its own unique function. The front end of a website is like a castle's exterior, what the visitors see when they approach the castle. It includes the layout, design, and overall user experience. On the other hand, the back end is like the castle's foundation and interior, hidden from the visitors' view but critical to the castle's overall functionality. It includes the server, database, and other infrastructure that supports the front end.
![](https://i.ibb.co/ZhX1JLy/Untitled-4.png)

> Here’s a fun Idea! try Googling what JSON is.

## 💡 Topic:  What is MERN?

Now, let's move on to MERN. MERN is a full-stack web development framework that includes four main components:

- MongoDB is like the foundation of a castle. It stores all the data for the website and keeps it organized and secure.
- Express, which is like the walls of the castle. It handles the back-end logic and connects the front-end and database together.
- React, which is like the furniture and decorations of the castle. It handles the front-end display and user interaction, making the website visually appealing and easy to use.
- Node.js, which is like the moat surrounding the castle. It provides a secure and reliable connection between the website and the server, keeping everything running smoothly.

Together, these components form a cohesive and powerful web development tool that allows for the creation of dynamic and responsive websites.

## 💡 Topic: What is meant by a Web App?

Full stack web applications are a type of website that includes both the front end (what you see and interact with on the website) and the back end (the "behind the scenes" technology that makes the website work). A full-stack web application allows users to interact with the website, while also allowing the website to process and store data entered by users.

For example, imagine a restaurant website where customers can place orders online. The front end of the website would show the menu and allow customers to select their food choices and enter their payment information. The back end of the website would process the order, store the information, and send it to the kitchen to be prepared. The entire system is a full-stack web application.

Please take a look at the following video to gain a better understanding of Web Apps: 
https://youtu.be/lYbATjjjDxM


# 📔 Additional Resources

- What is the MERN stack? : https://www.mongodb.com/mern-stack

---

### Another section completed!!!!!

Section Two: Introduction To MERN and Dynamic web applications 💻

Welcome, web development warriors, to this exciting quiz on full-stack web development! Do you have what it takes to build a magnificent castle on the internet? In this quiz, we will take you on a journey to explore the different blocks that make up a full-stack web application. You will learn about the cool and fun tools like HTML, CSS, and JavaScript used to build the front-end of the castle that users can see and play with. And, we will also take you behind the scenes to explore the important machinery and rules that make the castle work seamlessly, known as the back-end. So, let's put on our hard hats and get ready to build a web application castle that will dazzle and amaze the internet. Let the quiz begin!

The Full Stack Quiz 

Previously,  you learned how to create static and dynamic websites using HTML, CSS, and JavaScript. You also have built a portfolio website showcasing your skills and experiences as a front-end developer. However, you realize that the website lacks interactivity and doesn't communicate with a server to store and retrieve data. It's like having a castle with no secret passages or hidden rooms to explore. That's where React comes in.

React is like having a very skilled interior designer who can easily allow you to modify and add different parts to your castle without tearing down the whole castle. Previously with HTML and CSS which were your paint and brush to creating and styling your websites, you created everything from scratch, and making changes was very time-consuming but with React, you can add interactive components like a contact form or a portfolio gallery that can handle user input and manage data. You can also update different parts of your website without having to reload the entire page. This is like being able to fix a wall of a room without needing to first tear down the entire room first.

Without React, building complex user interfaces like a gallery or a contact form for your portfolio website would be challenging. You would have to manually manage different parts of your website, which can be time-consuming and prone to errors. By learning React, you'll be able to add more interactivity and functionality to your portfolio website in a very time-efficient manner, making it more engaging and memorable for potential clients or employers.

## 💡 Topic: What Is React? (Technical Definition)
React is a popular front-end library used in full-stack web development that builds user interfaces (UI) for web applications. It's a powerful tool that allows developers to create complex, interactive UIs in a structured and efficient way. React uses a component-based architecture that breaks down the UI into small, reusable pieces, making it easier to manage and update code. It also provides features like Virtual DOM, which improves the application's performance by only updating the parts of the UI that need to be changed, rather than reloading the entire page.

In the MERN stack, React is used to create the front end of the web application, which includes the visual components and user interface that users interact with. React components are like the bricks that make up the walls of a castle - they can be reused, arranged, and organized in different ways to create a beautiful and functional structure. Without React, creating a user-friendly and responsive interface for a web application would be much more challenging and time-consuming.


# 📋 Instructions
### 

1. **Step one:** Follow the link found below to Scrimba and enroll in the “Learn React” course:

🔗 Link: [React Tutorial: Learn React JS - Free 11-Hour Course](https://scrimba.com/learn/learnreact)

2. **Step Two:** Follow the link below and complete all Thirty-Four lessons found under the “**Build a React info site”** module**.**

🔗 Link: [Build a React info site](https://scrimba.com/playlist/pKNqYAZ)

<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>


### 🌟 Course Content 🌟

- [ ]  [1. Welcome to an Introduction to React!3:25](https://scrimba.com/learn/learnreact/welcome-to-an-introduction-to-react-coaaf455789c2a9addc20dd24)
- [ ]  [2. What we'll learn3:38](https://scrimba.com/learn/learnreact/what-well-learn-cofad4846b7d0d0744b7ae944)
- [ ]  [3. First React8:02](https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea)
- [ ]  [4. First React Practice1:48](https://scrimba.com/learn/learnreact/first-react-practice-codb545d191c6488eb4d30204)
- [ ]  [5. Local setup (the quick way)1:57](https://scrimba.com/learn/learnreact/local-setup-the-quick-way-co38a4834950b81f65b4187b7)
- [ ]  [6. Why React? It's Composable!4:47](https://scrimba.com/learn/learnreact/why-react-its-composable-coc26489788a896f326eebb8e)
- [ ]  [7. Why React? It's declarative4:42](https://scrimba.com/learn/learnreact/why-react-its-declarative-co3f64d8db3ff607d73e8f14d)
- [ ]  [8. JSX9:39](https://scrimba.com/learn/learnreact/jsx-cob2c4bf28c31480e376a4427)
- [ ]  [9. Drag and Drop Deploy with Netlify2:34](https://scrimba.com/learn/learnreact/drag-and-drop-deploy-with-netlify-co0cc43c19137835bc361427d)
- [ ]  [10. Get detailed reviews of your React projects – Scrimba Bootcamp1:53](https://scrimba.com/learn/learnreact/get-detailed-reviews-of-your-react-projects-scrimba-bootcamp-c3WPegU2)
- [ ]  [11. Goodbye, CDNs!4:05](https://scrimba.com/learn/learnreact/goodbye-cdns-co3534f23a33055e384eb5be5)
- [ ]  [12. UPDATE: New React 18 createRoot API4:18](https://scrimba.com/learn/learnreact/update-new-react-18-createroot-api-co76b46f2a8c2c72363173f9a)
- [ ]  [13. Thought experiment: use .append() instead of ReactDOM.render()?5:28](https://scrimba.com/learn/learnreact/thought-experiment-use-append-instead-of-reactdomrender-co5c54662bb669f19d26693f9)
- [ ]  [14. Project part 1 - markup4:44](https://scrimba.com/learn/learnreact/project-part-1-markup-coc7e4be18a0fe000d0e29e32)
- [ ]  [15. Pop quiz!5:08](https://scrimba.com/learn/learnreact/pop-quiz-co81940cf8093beef73d32de3)
- [ ]  [16. Custom Components6:55](https://scrimba.com/learn/learnreact/custom-components-co31545c6bee41d3b65bed126)
- [ ]  [17. Custom Components part 23:57](https://scrimba.com/learn/learnreact/custom-components-part-2-co3234be9b545e66abba43b55)
- [ ]  [18. Custom Components Quiz2:47](https://scrimba.com/learn/learnreact/custom-components-quiz-cob7948d9a666f6e17b17aff2)
- [ ]  [19. Parent/Child Components4:54](https://scrimba.com/learn/learnreact/parent-child-components-coa384cc0b7aaa06b76b168b8)
- [ ]  [20. Styling with Classes6:43](https://scrimba.com/learn/learnreact/styling-with-classes-co9a8472da55bf26d30d348ba)
- [ ]  [21. Organize components7:41](https://scrimba.com/learn/learnreact/organize-components-coce046849cdbb0430854ed56)
- [ ]  [22. Run React locally with Vite9:30](https://scrimba.com/learn/learnreact/run-react-locally-with-vite-co5c14c369399240413ef9491)
- [ ]  [23. Quick mental outline of project3:54](https://scrimba.com/learn/learnreact/quick-mental-outline-of-project-co25b4851980efb41f5ae45cc)
- [ ]  [24. Project setup7:13](https://scrimba.com/learn/learnreact/project-setup-co2104c96a93e1b2ab03254ba)
- [ ]  [25. Quick Figma Walkthrough1:40](https://scrimba.com/learn/learnreact/quick-figma-walkthrough-cob144fc38f432d088b0f20ab)
- [ ]  [26. Navbar & Styling7:16](https://scrimba.com/learn/learnreact/navbar-styling-co6b241c280719be40956bba1)
- [ ]  [27. Main Section7:44](https://scrimba.com/learn/learnreact/main-section-co48340cd80b68fccc25166ce)
- [ ]  [28. Color the bullets2:23](https://scrimba.com/learn/learnreact/color-the-bullets-co181436dabcfe4183c944026)
- [ ]  [29. Add background logo4:17](https://scrimba.com/learn/learnreact/add-background-logo-coa6145f3a9c7e1cbc40f5f6a)
- [ ]  [30. Why are Solo Projects important?3:14](https://scrimba.com/learn/learnreact/why-are-solo-projects-important-cnwpL3HN)
- [ ]  [31. Solo Project (PRO) - Digital Business Card3:52](https://scrimba.com/learn/learnreact/solo-project-pro-digital-business-card-coce646e88eea46f91af43ca4)
- [ ]  [32. Deploy Your React App with Netlify5:23](https://scrimba.com/learn/learnreact/deploy-your-react-app-with-netlify-cz2NaGce)
- [ ]  [33. Get a code review!2:39](https://scrimba.com/learn/learnreact/get-a-code-review-cBwNn8u6)
- [ ]  [34. React Section 1 Recap2:37](https://scrimba.com/learn/learnreact/react-section-1-recap-coe9c48b4bb10c9885a20151a)

**Note: You are required to complete ALL LESSONS mentioned above before moving on to the next section!**

> <aside>
🚧 You can SKIP activities that require you to have pro features such as lesson 31: SOLO Project. 🚧

</aside>

# 🧠 Exercise / Project
1. Create a GitHub repository containing the React info site you just created.
2. Submit the link to your repository under the “Build a React info site” assignment here:
# 📔 Additional Resources
- React book : https://drive.google.com/file/d/1xlUs6mWfgJ-whUqYOVJv3M2de8oZMimu/view?usp=drive_link
- Cheat-Sheet: https://drive.google.com/file/d/1fb1uR5hAHWs5liRDNdsxP0pZXDiQJ1GE/view?usp=sharing
- How to Download Scrimba Projects:  https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5
---

### Another section completed!!!!!

Section Three: Introduction to React 🌱

![](https://i.ibb.co/g6d2Fnm/Untitled-5.png)
when learning a new framework it is good practice to use the framework’s documentation for reference. This will help you understand how to use it effectively and also makes debugging much easier. Here is a link for documentation on React: https://legacy.reactjs.org/docs/getting-started.html

# 📋 Instructions
### 

1. **Step one:** Follow the link below and complete all Twenty-Seven lessons found under the “**Build an AirBnb Experiences clone”** module.

🔗 Module link:
[Build an AirBnb Experiences clone](https://scrimba.com/playlist/pqQgrcN)

> 💡 Remember! You can use Piazza to ask questions.




### 🌟 Course Content 🌟

- [ ]  [1. Section intro & Figma file4:11](https://scrimba.com/learn/learnreact/section-intro-figma-file-co359499e9b60a56d617d5307)
- [ ]  [2. Project setup: Navbar5:40](https://scrimba.com/learn/learnreact/project-setup-navbar-cob544349a4494c348ab844f0)
- [ ]  [3. Project setup: Hero5:46](https://scrimba.com/learn/learnreact/project-setup-hero-co90845d2aecdbb1a1c84a3ad)
- [ ]  [4. Project: Card Component7:18](https://scrimba.com/learn/learnreact/project-card-component-co1954a349a2aaba7383a6cbe)
- [ ]  [5. Problem - not reusable1:55](https://scrimba.com/learn/learnreact/problem-not-reusable-cob264f4bb014a74ab76c765a)
- [ ]  [6. Props Part 1: Understanding the Concept3:17](https://scrimba.com/learn/learnreact/props-part-1-understanding-the-concept-cobb149518dfd52b07a8cd547)
- [ ]  [7. Props Part 2: Reusable Components1:56](https://scrimba.com/learn/learnreact/props-part-2-reusable-components-co6ee4d91a75aa67d28b43740)
- [ ]  [8. Aside: JS inside JSX6:50](https://scrimba.com/learn/learnreact/aside-js-inside-jsx-coc9f43c3b6078c0c298ce219)
- [ ]  [9. Props part 3: Create a contact component8:28](https://scrimba.com/learn/learnreact/props-part-3-create-a-contact-component-coe1744ae81515a4369f2b32d)
- [ ]  [10. Props part 4: receiving props in a component5:28](https://scrimba.com/learn/learnreact/props-part-4-receiving-props-in-a-component-co88c4bfa84d99b466b78e914)
- [ ]  [11. Prop quiz! (Get it?? 😆)4:25](https://scrimba.com/learn/learnreact/prop-quiz-get-it--co3c8431aa046a5730388c8ae)
- [ ]  [12. Destructuring props3:53](https://scrimba.com/learn/learnreact/destructuring-props-co7e54a6f9d075ae292a4f3ae)
- [ ]  [13. Props practice9:03](https://scrimba.com/learn/learnreact/props-practice-co06f4fa2bd9cf954179925f1)
- [ ]  [14. Passing in non-string props3:57](https://scrimba.com/learn/learnreact/passing-in-non-string-props-coefd4c1ca935bef026e4f6db)
- [ ]  [15. Project: pass props to card component6:55](https://scrimba.com/learn/learnreact/project-pass-props-to-card-component-co2094669b9fe6bf481f857ae)
- [ ]  [16. Review - array .map()7:27](https://scrimba.com/learn/learnreact/review-array-map-co4f44cfb9e4575776dc759eb)
- [ ]  [17. React renders arrays4:29](https://scrimba.com/learn/learnreact/react-renders-arrays-co3dc4d16838dd05ca4667cb9)
- [ ]  [18. Mapping components4:32](https://scrimba.com/learn/learnreact/mapping-components-co20249b69609b9df5473acc7)
- [ ]  [19. Map quiz!3:38](https://scrimba.com/learn/learnreact/map-quiz-coe9846508d586a605352f235)
- [ ]  [20. Loading images from .map()1:34](https://scrimba.com/learn/learnreact/loading-images-from-map-coe6c4822bbdc0a0360bd1961)
- [ ]  [21. Project: Map experiences data into components5:20](https://scrimba.com/learn/learnreact/project-map-experiences-data-into-components-co0704006bcf75aae48fb04c3)
- [ ]  [22. Project: key prop3:29](https://scrimba.com/learn/learnreact/project-key-prop-cod824954b2c1feecf545bc49)
- [ ]  [23. Project: Sold Out Badge9:06](https://scrimba.com/learn/learnreact/project-sold-out-badge-cod6a41078bdec8db3c39513b)
- [ ]  [24. Project: Pass object as props4:25](https://scrimba.com/learn/learnreact/project-pass-object-as-props-cod6f4e56bca6a67caca77684)
- [ ]  [25. Project: Spread object as props3:54](https://scrimba.com/learn/learnreact/project-spread-object-as-props-cobc143b6a3172ef8cfd398f2)
- [ ]  [26. Solo Project (PRO) - Travel Journal3:22](https://scrimba.com/learn/learnreact/solo-project-pro-travel-journal-co74f46f2b22693c5ea577559)
- [ ]  [27. React Section 2 Recap](https://scrimba.com/learn/learnreact/react-section-2-recap-co2a74b21bbb7fef31887674b)

**Note: You are required to complete ALL LESSONS mentioned above before moving on to the next section!**

<aside>
🚧 You can SKIP activities that require you to have pro features such as lesson 26:  Solo Project (PRO) - Travel journal 🚧 

</aside>

# 🧠 Exercise / Project
1. Create a GitHub repository containing the AirBnb experiences clone you just created.
2. Submit the link to your repository under the “Build an AirBnb experiences clone” assignment here:

# 📔 Additional Resources
- React book: https://drive.google.com/file/d/1xlUs6mWfgJ-whUqYOVJv3M2de8oZMimu/view?usp=drive_link
- Cheat-Sheet: https://drive.google.com/file/d/1fb1uR5hAHWs5liRDNdsxP0pZXDiQJ1GE/view?usp=sharing
- Cheat-Sheet: https://www.freecodecamp.org/news/the-react-cheatsheet/
- How to Download Scrimba Projects:  https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5
---

### Another section completed!!!!!


Section Four: Beginner React 🐣

## React Info  Site Peer Review Activity 


Hey fellow developers!

Are you ready to explore the world of React and share your very first React app with your peers? Let's collaborate and provide feedback to help each other improve our React facts sites! 🚀💻

In this peer review activity, you'll partner up with another React developer to exchange insights and suggestions on your React facts site projects. It's a fantastic opportunity to learn from each other's code, discover new React techniques, and enhance your app-building skills!

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1kTzbbezvv2WN8UPDLD9xt-S3-1liH6-9Cc1VGph3kHc/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including JavaScript files, HTML, CSS, and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:   React Info  Site Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the  React Info  Site  Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: React Info  Site 

1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the React Info  Site  assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




 React Info  Site Peer Review

## AirBnB Experiences Clone Peer Review 


Hey fellow coders!

Are you excited to dive into the world of React and build an AirBnB Experiences clone? Let's collaborate and provide feedback to enhance each other's projects! 🏠💻

In this peer review activity, you'll team up with another React developer to exchange insights and suggestions on your AirBnB Experiences clone projects. Together, we'll explore React's capabilities and elevate our app-building skills!

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1CpI8Q0-Ch83IdRlfXjpSUYvcUWXTd7iL9OA5VdpzlAo/edit?usp=drive_link

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including JavaScript files, HTML, CSS, and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission: AirBnB Experiences Clone Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the AirBnB Experiences clone Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: AirBnB Experiences Clone

1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the AirBnB Experiences clone assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




AirBnB Experiences Clone Peer Review

![](https://i.ibb.co/6gXCTDj/Untitled-6.png)

<aside>
💡 While writing code, you are bound to make mistakes but don’t be afraid because debugging is a natural part of coding and the learning process. Use the internet and ChatGPT to help you identify and fix problems in your programs and most importantly use the process to learn and grow.

</aside>





# 📋 Instructions


1. **Step one:** Follow the link below and complete all Sixty-Four lessons found under the “**Build a meme generator”** module.

🔗Module Link: [Build a meme generator](https://scrimba.com/playlist/prXJpCQ)

<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>


### 🌟 Course Content 🌟

- [ ]  [1. Section Intro & Figma file4:17](https://scrimba.com/learn/learnreact/section-intro-figma-file-coeca4c67b87cf73d3fb64da5)
- [ ]  [2. Meme Generator: Header5:08](https://scrimba.com/learn/learnreact/meme-generator-header-cocf84c4c9121d91a0095f3e9)
- [ ]  [3. Meme Generator: Form6:01](https://scrimba.com/learn/learnreact/meme-generator-form-co2614ad9acf3a1840aef597b)
- [ ]  [4. Project analysis1:04](https://scrimba.com/learn/learnreact/project-analysis-cocf44997b3d2993a32081ad5)
- [ ]  [5. Event Listeners6:07](https://scrimba.com/learn/learnreact/event-listeners-co45a4eba8c0ba3e8ba7df31b)
- [ ]  [6. Project: Get random meme5:42](https://scrimba.com/learn/learnreact/project-get-random-meme-co0d240b0b92838697b8749a1)
- [ ]  [7. Our current conundrum8:09](https://scrimba.com/learn/learnreact/our-current-conundrum-co53a4b68be61be4a8e646607)
- [ ]  [8. Props vs. State: Props5:08](https://scrimba.com/learn/learnreact/props-vs-state-props-co090400fb604a75d6b889cf4)
- [ ]  [9. Props vs. State: State4:28](https://scrimba.com/learn/learnreact/props-vs-state-state-cofdc4d4d891c36fc3b0c77fa)
- [ ]  [10. Props vs. State Quiz!4:03](https://scrimba.com/learn/learnreact/props-vs-state-quiz-coccb4f309e3305ece69fbc14)
- [ ]  [11. useState3:52](https://scrimba.com/learn/learnreact/usestate-codb9407dbf1fcf31ecb6bb23)
- [ ]  [12. useState array destructuring1:46](https://scrimba.com/learn/learnreact/usestate-array-destructuring-co70846728c7d60f51fa1997c)
- [ ]  [13. Changing state3:03](https://scrimba.com/learn/learnreact/changing-state-co85d4a75911c0b43ce5ad623)
- [ ]  [14. useState - Counter practice5:45](https://scrimba.com/learn/learnreact/usestate-counter-practice-co1f54adba032538022373b97)
- [ ]  [15. useState - Changing state with a callback function4:18](https://scrimba.com/learn/learnreact/usestate-changing-state-with-a-callback-function-cof9245f4a914e8aaf080c783)
- [ ]  [16. Changing state quiz!2:30](https://scrimba.com/learn/learnreact/changing-state-quiz-co83142b1a97f4e79128e48fa)
- [ ]  [17. Project: Add images to the meme generator2:56](https://scrimba.com/learn/learnreact/project-add-images-to-the-meme-generator-co2e04f5499f85d20fecbdf22)
- [ ]  [18. Challenge: ternary practice3:50](https://scrimba.com/learn/learnreact/challenge-ternary-practice-co36143f0ba77648bc362c31d)
- [ ]  [19. Challenge: flipping state back and forth5:59](https://scrimba.com/learn/learnreact/challenge-flipping-state-back-and-forth-co4674229b54cd8335c75e54d)
- [ ]  [20. Complex state: arrays10:28](https://scrimba.com/learn/learnreact/complex-state-arrays-co8f0498bb502fff29cbc8ee5)
- [ ]  [21. Complex state: objects3:58](https://scrimba.com/learn/learnreact/complex-state-objects-coe244c8c83abea08aa5a283c)
- [ ]  [22. Complex state: updating state objects6:35](https://scrimba.com/learn/learnreact/complex-state-updating-state-objects-cJLgWJSN)
- [ ]  [23. Project: Refactor state4:10](https://scrimba.com/learn/learnreact/project-refactor-state-coaf8489fbc3d70a207f29713)
- [ ]  [24. Passing state as props5:52](https://scrimba.com/learn/learnreact/passing-state-as-props-co7444d9daf79f8f39a8ebef4)
- [ ]  [25. Setting state from child components6:28](https://scrimba.com/learn/learnreact/setting-state-from-child-components-co5104ccd8360769343dc8e51)
- [ ]  [26. Passing data around6:26](https://scrimba.com/learn/learnreact/passing-data-around-coc1c4e8db27909ac7f804244)
- [ ]  [27. Boxes challenge part 13:49](https://scrimba.com/learn/learnreact/boxes-challenge-part-1-co4ff4b9f8504c9a03077bf2c)
- [ ]  [28. Dynamic styles5:42](https://scrimba.com/learn/learnreact/dynamic-styles-co57845e4a49eb86d4414b0fd)
- [ ]  [29. Boxes challenge part 23:37](https://scrimba.com/learn/learnreact/boxes-challenge-part-2-cobb94ca9aed421681cf67b3c)
- [ ]  [30. Boxes challenge part 3.1 - local state4:54](https://scrimba.com/learn/learnreact/boxes-challenge-part-31-local-state-co0264ad6929a556e38a6a10f)
- [ ]  [31. Boxes challenge part 3.2 - unified state7:45](https://scrimba.com/learn/learnreact/boxes-challenge-part-32-unified-state-coc544380b8da728809b4b5f2)
- [ ]  [32. Boxes challenge part 45:50](https://scrimba.com/learn/learnreact/boxes-challenge-part-4-co2ee48359ffd4cb63f392139)
- [ ]  [33. Boxes challenge part 55:57](https://scrimba.com/learn/learnreact/boxes-challenge-part-5-cobdb4d3e907fa304af4b9958)
- [ ]  [34. Conditional rendering: &&6:36](https://scrimba.com/learn/learnreact/conditional-rendering--co00d4a3c9a328b5ff96f418e)
- [ ]  [35. Conditional rendering: && practice1:45](https://scrimba.com/learn/learnreact/conditional-rendering-practice-co7a3413c9530c3e2804c4916)
- [ ]  [36. Conditional rendering: ternary2:49](https://scrimba.com/learn/learnreact/conditional-rendering-ternary-codf54303b0d1934718a0bf5b)
- [ ]  [37. Conditional rendering practice4:45](https://scrimba.com/learn/learnreact/conditional-rendering-practice-co6c14590bfc4e8abe0ef2b40)
- [ ]  [38. Conditional rendering quiz!3:56](https://scrimba.com/learn/learnreact/conditional-rendering-quiz-coeaf48b69510213fee26c35d)
- [ ]  [39. React forms intro3:25](https://scrimba.com/learn/learnreact/react-forms-intro-co2774b5e9623a1cad018bc49)
- [ ]  [40. Watch for input changes in React4:30](https://scrimba.com/learn/learnreact/watch-for-input-changes-in-react-co1bc45cd92a4e5e4aea7cc45)
- [ ]  [41. Form inputs practice2:22](https://scrimba.com/learn/learnreact/form-inputs-practice-co5014a2691f7e17ada7501af)
- [ ]  [42. Forms state object6:09](https://scrimba.com/learn/learnreact/forms-state-object-co4014fe8a23d6c6d376747ca)
- [ ]  [43. Form state object practice1:49](https://scrimba.com/learn/learnreact/form-state-object-practice-cob444ddabb8e498d051b98cb)
- [ ]  [44. Controlled inputs4:14](https://scrimba.com/learn/learnreact/controlled-inputs-co5c7481f910db53cc421f020)
- [ ]  [45. Forms in React: Textarea3:33](https://scrimba.com/learn/learnreact/forms-in-react-textarea-cob6a41f7a22250f5f9bdf71e)
- [ ]  [46. Forms in React: Checkbox6:39](https://scrimba.com/learn/learnreact/forms-in-react-checkbox-co6da4637a27cca33be7cb1d7)
- [ ]  [47. Forms in React: Radio buttons6:00](https://scrimba.com/learn/learnreact/forms-in-react-radio-buttons-co14c423dbc2026a7a2b997a2)
- [ ]  [48. Forms in React: Select & Option2:49](https://scrimba.com/learn/learnreact/forms-in-react-select-option-co83b466d859cf1d6c4b3efaf)
- [ ]  [49. Forms in React: Submitting the form4:31](https://scrimba.com/learn/learnreact/forms-in-react-submitting-the-form-coe43436db60b0c21a1cca067)
- [ ]  [50. Forms quiz!3:13](https://scrimba.com/learn/learnreact/forms-quiz-coe3546b99ba848ab627ef5a3)
- [ ]  [51. Sign up form practice8:26](https://scrimba.com/learn/learnreact/sign-up-form-practice-co30d477b8025a70873e8cb6a)
- [ ]  [52. Project: Add text to image3:58](https://scrimba.com/learn/learnreact/project-add-text-to-image-co9dd4288bcdb0c0cfe7a2d9c)
- [ ]  [53. Making API calls4:00](https://scrimba.com/learn/learnreact/making-api-calls-co9544abfb8036eb9ac767bb2)
- [ ]  [54. Intro to useEffect5:43](https://scrimba.com/learn/learnreact/intro-to-useeffect-co1fd46e5be9b41273ebe14da)
- [ ]  [55. useEffect() syntax and default behavior2:59](https://scrimba.com/learn/learnreact/useeffect-syntax-and-default-behavior-cob274c08aeef0c6f307b8333)
- [ ]  [56. useEffect dependencies array8:01](https://scrimba.com/learn/learnreact/useeffect-dependencies-array-co4fc423992f2d9737eaa55f2)
- [ ]  [57. useEffect quiz!3:48](https://scrimba.com/learn/learnreact/useeffect-quiz-cob5747c8b19a658c6240e8a1)
- [ ]  [58. useEffect for fetching data5:48](https://scrimba.com/learn/learnreact/useeffect-for-fetching-data-cof924a3f92d4ca7648780a8d)
- [ ]  [59. useEffect: when to use dependencies3:02](https://scrimba.com/learn/learnreact/useeffect-when-to-use-dependencies-co87f48fc9c487d958ddeca4a)
- [ ]  [60. Project: Get Memes from API8:11](https://scrimba.com/learn/learnreact/project-get-memes-from-api-coe9a494f854435f2630f2ce4)
- [ ]  [61. State and Effect practices7:02](https://scrimba.com/learn/learnreact/state-and-effect-practices-co3d647f0b559d6e65b6a2762)
- [ ]  [62. useEffect cleanup function5:53](https://scrimba.com/learn/learnreact/useeffect-cleanup-function-coa6a4c9985b4339f164fe0ab)
- [ ]  [63. Using an async function inside useEffect (Clone)3:07](https://scrimba.com/learn/learnreact/using-an-async-function-inside-useeffect-clone-cw73rRud)
- [ ]  [64. React Section 3 Recap2:17](https://scrimba.com/learn/learnreact/react-section-3-recap-co5f14456bbe0f15f99e69ae1)

**Note: You are required to complete ALL LESSONS mentioned above before moving on to the next section!**

<aside>
🚧 Please SKIP any sections that require you to have the PRO version of Scrimba 
🚧 

</aside>


# 🧠 Exercise / Project
1. Create a GitHub repository containing the meme generator you just created.
2. Submit the link to your repository under the “Build a meme generator” assignment in Google Classroom.
# 📔 Additional Resources
- React book: https://drive.google.com/file/d/1xlUs6mWfgJ-whUqYOVJv3M2de8oZMimu/view?usp=drive_link
- Cheat-Sheet: https://drive.google.com/file/d/1fb1uR5hAHWs5liRDNdsxP0pZXDiQJ1GE/view?usp=sharing
- Cheat-Sheet: https://www.freecodecamp.org/news/the-react-cheatsheet/
- How to Download Scrimba Projects:  https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5
---

### Another section completed!!!!!



Section Five: Intermediate React 🐥

## Meme Generator Peer Review Activity 

Hey developers!

Are you ready to embark on a journey of code review and collaboration? Get ready to dive into the Classic Meme Generator Project and help each other improve! 🎨💻

In this activity, you'll team up with a peer to review and provide feedback on each other's Classic Meme Generator projects. It's an opportunity to sharpen your React skills, learn from others, and celebrate your progress together!

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1kaE9Cx9gaAekW1XfnQTbnmK6VViqhapSPjqFSg-HT2c/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including JavaScript files, HTML, CSS, and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission: Meme Generator Project Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Meme Generator Project Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Meme Generator Project

1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the Meme Generator Project assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




Meme Generator Project Peer Review Activity

# 📋 Instructions
### 

1. **Step One:** Follow the link below and complete all Twenty-Eight lessons found under the “**Build a Notes app and Tenzies game”** module.

🔗 Module Link: [Build a notes app and Tenzies game](https://scrimba.com/playlist/pYkgpAP)

<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>


### 🌟 Course Content 🌟

- [ ]  [1. Section 4 Intro2:33](https://scrimba.com/learn/learnreact/section-4-intro-co3d846949cb5ba26cd5b45ac)
- [ ]  [2. Warm-up: Add Dark/Light modes to ReactFacts site6:39](https://scrimba.com/learn/learnreact/warm-up-add-dark-light-modes-to-reactfacts-site-co5924409bb476cc78b0d818a)
- [ ]  [3. Notes App: Intro9:55](https://scrimba.com/learn/learnreact/notes-app-intro-coea14f76b39cf1bfb7c86de4)
- [ ]  [4. Notes App: Features to add1:25](https://scrimba.com/learn/learnreact/notes-app-features-to-add-coaaa4569b9b2bbad23681d93)
- [ ]  [5. Notes App: Sync notes with localStorage5:59](https://scrimba.com/learn/learnreact/notes-app-sync-notes-with-localstorage-co3c5495b8d7949e81b79988a)
- [ ]  [6. Lazy State Initialization5:12](https://scrimba.com/learn/learnreact/lazy-state-initialization-cod784faab248ffe738e900a2)
- [ ]  [7. Notes App: Note summary title4:51](https://scrimba.com/learn/learnreact/notes-app-note-summary-title-co79d4c77b58e6e0f83ac0227)
- [ ]  [8. Notes App: Bump recent note to the top6:49](https://scrimba.com/learn/learnreact/notes-app-bump-recent-note-to-the-top-co3094396ae8a6fba32c9d71c)
- [ ]  [9. Notes App: Delete note8:59](https://scrimba.com/learn/learnreact/notes-app-delete-note-co0764af7bcc2738e9be81e9a)
- [ ]  [10. Tenzies Project Intro1:18](https://scrimba.com/learn/learnreact/tenzies-project-intro-cof0d44bfad1fb88293fdc9d1)
- [ ]  [11. Tenzies: Setup3:26](https://scrimba.com/learn/learnreact/tenzies-setup-co0a9459ea14580c07f072cfd)
- [ ]  [12. Tenzies: Die components6:50](https://scrimba.com/learn/learnreact/tenzies-die-components-co38647cca41846b5b884e953)
- [ ]  [13. Tenzies: Generate array of 10 random numbers3:53](https://scrimba.com/learn/learnreact/tenzies-generate-array-of-10-random-numbers-cod40451b92865f80528ed9e7)
- [ ]  [14. Tenzies: Map array to Die components3:08](https://scrimba.com/learn/learnreact/tenzies-map-array-to-die-components-co68a43f78661a7a3f8411dd0)
- [ ]  [15. Tenzies: Roll dice button4:41](https://scrimba.com/learn/learnreact/tenzies-roll-dice-button-co0a84282a4902d4d2324b7fd)
- [ ]  [16. Tenzies: Change dice to objects4:32](https://scrimba.com/learn/learnreact/tenzies-change-dice-to-objects-cBqReJTz)
- [ ]  [17. Tenzies: Styling held dice3:38](https://scrimba.com/learn/learnreact/tenzies-styling-held-dice-co95f459e817fd41c6bf0f54d)
- [ ]  [18. Tenzies: Hold dice part 15:17](https://scrimba.com/learn/learnreact/tenzies-hold-dice-part-1-co29e4e94aec702f97ffb9ce4)
- [ ]  [19. Tenzies: Hold dice part 23:09](https://scrimba.com/learn/learnreact/tenzies-hold-dice-part-2-cof4842fcb65b330ef2bf07f3)
- [ ]  [20. Tenzies: Hold dice part 34:01](https://scrimba.com/learn/learnreact/tenzies-hold-dice-part-3-co14645439b478cc8343d4ffe)
- [ ]  [21. Tenzies: End game part 12:35](https://scrimba.com/learn/learnreact/tenzies-end-game-part-1-co86d4dd2862c6bda5b935d4f)
- [ ]  [22. Tenzies: End game part 24:55](https://scrimba.com/learn/learnreact/tenzies-end-game-part-2-coda448ae89bf4c2861487e00)
- [ ]  [23. Tenzies: End game part 34:15](https://scrimba.com/learn/learnreact/tenzies-end-game-part-3-co80c434696f1de23fe3a276f)
- [ ]  [24. Tenzies: New Game3:12](https://scrimba.com/learn/learnreact/tenzies-new-game-co5fd4991acd2a6ded9358bb4)
- [ ]  [25. Tenzies: Extra Credit Ideas1:35](https://scrimba.com/learn/learnreact/tenzies-extra-credit-ideas-co82b48eab99c792f6b884857)
- [ ]  [26. Solo Project (PRO) - Quizzical2:55](https://scrimba.com/learn/learnreact/solo-project-pro-quizzical-co24f49bea8aace7c174082c8)
- [ ]  [27. Check out the class components crash course!1:06](https://scrimba.com/learn/learnreact/check-out-the-class-components-crash-course-co3cb4242932f10ab7638cf8f)
- [ ]  [28. Congratulations on completing Learn React! 🤩5:53](https://scrimba.com/learn/learnreact/congratulations-on-completing-learn-react--cbnZPECW)

**Note: You are required to complete ALL LESSONS mentioned above before moving on to the next section!**

<aside>
🚧 Please SKIP any sections that require you to have the PRO version of Scrimba

</aside>

# 🧠 Exercise / Project
1. Create GitHub repositories containing the notes app and Tenzies game you just created.
2. Submit the link to your repository under the “Build a Notes app and Tenzies game” assignment in Google Classroom.

# 📔 Additional Resources
- React book: https://drive.google.com/file/d/1xlUs6mWfgJ-whUqYOVJv3M2de8oZMimu/view?usp=drive_link
- Cheat-Sheet: https://drive.google.com/file/d/1fb1uR5hAHWs5liRDNdsxP0pZXDiQJ1GE/view?usp=sharing
- Cheat-Sheet: https://www.freecodecamp.org/news/the-react-cheatsheet/
- How to Download Scrimba Projects:  https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5
---

### Another section completed!!!!!



Section Six: Advanced React 🐓

## React Notes App Project Peer Review Activity

![](https://susannapaasonen.files.wordpress.com/2019/05/brace-yourself-peer-review-is-coming.jpg?w=380&h=285)

Hey fellow developers!

Are you ready to deepen your understanding of React by collaborating on the creation of a handy notes app? Get ready to dive into the React Notes App Project and help each other improve! 📝💻

In this activity, you'll team up with a peer to review and provide feedback on each other's React Notes App projects. It's an opportunity to enhance your React skills, exchange knowledge, and celebrate your progress together!

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1HMTtSmJTXPK8jCveGaMPZih2etsum7Fe6JdPqFkgwJo/edit?usp=sharing
- Make a copy of the rubric sheet before starting to grade each other using the following steps:
![](https://i.ibb.co/xYP1Y4W/image.png)

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:  React Notes AppRubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the React Notes App  Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: React Notes App

1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the React Notes App assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5



----------
If you are seeing this then you have just learned how to run your first peer review! 😎

![](https://i0.wp.com/media3.giphy.com/media/3oEjI5VtIhHvK37WYo/giphy.gif)

Go on then, find a friend to do this with what are you waiting for?


 React Notes App Project Peer Review

## Tenzies React Game Peer Review Activity 

Hey developers!

Are you excited to level up your React skills by creating a fun and interactive game? Get ready to roll the dice and dive into the Tenzies React Game Project! 🎲💻

In this activity, you'll team up with a peer to review and provide feedback on each other's Tenzies React Game projects. It's a fantastic opportunity to strengthen your React knowledge, share ideas, and make your game even more engaging and enjoyable!

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1QHx1ZdLK-woL9Ro7GMCBEvArzeCDR_k9s8rebEIqzCs/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including JavaScript files, HTML, CSS, and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission: Tenzies React Game Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Tenzies React Game Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Tenzies React Game 

1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the Tenzies React Game assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




Tenzies React Game Project Peer Review

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR08Da8UqEVHMAFAmhUylKHxrw_ZJOaNxOlEvLzMOuRdw&s)
For the End of Module Assessment, you will be working as a team to build a blogging social app. This project will involve collaboration with students from other tech tracks, so effective communication and teamwork are essential. Please note that the project you work on now will continue to be your focus for the remaining modules if you pursue the full-stack tech track.

Module Assessment Link: https://directed.notion.site/Module-Assessment-Blogging-Social-APP-ec87514ea7f64e8db570a702250f1d69

Happy Coding 🙂

📝 Module Assessment 📝

Module 3: DOM, Introduction to MERN, React.

# 🧭Overview

Welcome to the world of backend and server-side programming! In previous modules, you've learned about the front end of web development, where you use HTML, CSS, and JavaScript to build the visual aspects of a website that users interact with. But what about the behind-the-scenes work that makes those websites run smoothly?

Think of a castle again - it's not just the walls, towers, and moat that make it a functioning castle. There are also the people and systems that keep it running, like the cooks in the kitchen, the blacksmiths in the forge, and the guards on the walls. Similarly, backend and server-side programming are the systems and processes that keep a website running smoothly and securely.

Backend programming focuses on the logic and functionality of a website, such as managing databases, processing forms, and handling user log in server-side programming, on the other hand, refers to the code that runs on the server, handling requests from clients and sending back responses.

In this module, you'll learn about the tools and technologies used in backends and server-side programming, such as Node.js, Express, MongoDB, and MySQL giving you the skills you need to build robust and secure web applications.

![](https://media.geeksforgeeks.org/wp-content/uploads/20190712131938/front-end-vs-back-end.png)

# 📅 Schedule
👉 Reminder: Our Google calendar contains the recommended timeline for taking the course as well as information about when training and surveys will take place so please make sure you have added it to your calendar and accepted all events before moving on. We have shared a calendar invite with you via Email.

⚠️Please ensure that you are using the correct calendar for your country to avoid missing important events.⚠️

Kenyan Students Only👇

Calendar Link: https://calendar.google.com/calendar/u/1?cid=NTY1ODg4MWRkYzYyNTg3NGZlYzFmYmZhZDljMGQzM2UzMjdiNzM4OTAwZDFhMWZiMTMzZWI3NmM0ZjYwNTRmMUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Ethiopian Students Only👇

https://calendar.google.com/calendar/u/1?cid=NGU0OGZkNjA1ZTg3ZjI5NGJlNzQyNGZlNDBhNzhkZDQ5ZDNiNWJjNTZjMTkxNTY1YjY4YWU2MDYyOTA2ZGRkMEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Google Calendar Tutorial

How to access a Google Calendar shared with you: https://www.youtube.com/watch?v=bofIU4rq-VM

**Mandatory Module Feedback ‼️**

At the end of every week, you are REQUIRED to fill out the module feedback form found below. Please only fill in the form that applies to your country as you have different timelines.

**For Kenya:** https://tally.so/r/wMAXkE

**For Ethiopia:** https://tally.so/r/wMANzl

# 📑 Sections

This module is divided into Four major sections. Each section has a single area of focus and is aimed at helping you master the topics covered.

1. Section One: Server-Side Programming with Node JS 🏗️
2. Section Two: Relational Databases with MySQL 💽
3. Section Three: Non-Relational Databases with MongoDB 💽
4. Section Four: Express Framework 🧰
5. 📝 Module Assessment 📝

## 💡 Topic: Node JS
You have already learned about the client side of web development, where you use tools like HTML, CSS, and JavaScript to build web pages that are displayed in a user's web browser. But what about the server side? That's where Node.js comes in.
![](https://media.makeameme.org/created/nodejs-is-an.jpg)

Think of a castle. The castle has a drawbridge that controls access to the castle's interior. Similarly, a web server acts as the drawbridge between a user's web browser and the resources stored on the server. When a user requests a web page from a server, the server retrieves the requested resources and sends them back to the user's browser. Node.js is a server-side technology that allows developers to create powerful and scalable web servers that can handle multiple requests at the same time.

But why do we need Node.js? Well, traditional web servers rely on languages like PHP or Java to handle server-side requests. However, these languages can be slow and inefficient when handling large amounts of traffic. Node.js, on the other hand, is built on the fast and efficient V8 JavaScript engine, making it ideal for handling high levels of traffic and requests.

In this module, you'll learn how to use Node.js to build powerful web servers that can handle thousands of requests per second. We'll cover topics like routing, middleware, and database integration, giving you the skills you need to build robust and scalable web applications. So, let's dive into the world of Node.js and start building our own castle walls!
# 📋 Instructions

1. **Step one:**  Take the following link to YouTube and take the beginner Node.js course:

🔗 Course Link:https://www.youtube.com/watch?v=f2EqECiTBL8

1. **Step Two:** Watch the following recap on static and dynamic web pages

🔗 Video Link: https://www.youtube.com/watch?v=_wFJj94kSTU&pp=ygU5d2hhdCBpcyB0aGUgZGlmZmVyZW5jZSBiZXR3ZWVuIHN0YXRpYyBhbmQgZHluYW1pYyB3ZWJzaXRl


**Note: You are required to COMPLETE ALL 15 CHAPTERS before moving on to the next section.**

### **⭐️Course Contents⭐️**



- [ ] [0:00:00](https://www.youtube.com/watch?v=f2EqECiTBL8&t=0s) Intro  
- [ ] [0:00:58](https://www.youtube.com/watch?v=f2EqECiTBL8&t=58s) Chapter 1: Start Here  
- [ ] [0:17:26](https://www.youtube.com/watch?v=f2EqECiTBL8&t=1046s) Chapter 2: Read and Write Files  
- [ ] [0:45:17](https://www.youtube.com/watch?v=f2EqECiTBL8&t=2717s) Chapter 3: NPM Modules  
- [ ] [1:08:20](https://www.youtube.com/watch?v=f2EqECiTBL8&t=4100s) Chapter 4: Event Emitter  
- [ ] [1:23:26](https://www.youtube.com/watch?v=f2EqECiTBL8&t=5006s) Chapter 5: Build a Web Server  
- [ ] [2:02:13](https://www.youtube.com/watch?v=f2EqECiTBL8&t=7333s) Chapter 6: Intro to Express JS framework  
- [ ] [2:23:33](https://www.youtube.com/watch?v=f2EqECiTBL8&t=8613s) Chapter 7: Middleware  
- [ ] [2:58:34](https://www.youtube.com/watch?v=f2EqECiTBL8&t=10714s) Chapter 8: Routing  
- [ ] [3:23:50](https://www.youtube.com/watch?v=f2EqECiTBL8&t=12230s) Chapter 9: MVC REST API  
- [ ] [3:43:49](https://www.youtube.com/watch?v=f2EqECiTBL8&t=13429s) Chapter 10: Authentication  
- [ ] [4:09:43](https://www.youtube.com/watch?v=f2EqECiTBL8&t=14983s) Chapter 11: JWT Auth  
- [ ] [5:09:21](https://www.youtube.com/watch?v=f2EqECiTBL8&t=18561s) Chapter 12: User Roles | Authorization  
- [ ] [5:37:58](https://www.youtube.com/watch?v=f2EqECiTBL8&t=20278s) Chapter 13: Intro to MongoDB & Mongoose  
- [ ] [5:54:32](https://www.youtube.com/watch?v=f2EqECiTBL8&t=21272s) Chapter 14: Mongoose Data Models  
- [ ] [6:15:27](https://www.youtube.com/watch?v=f2EqECiTBL8&t=22527s) Chapter 15: Async CRUD Operations




<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>

# 🧠 Exercise / Project
1. Create a GitHub repository containing the projects you just created.
# 📔 Additional Resources
### 

- Node JS Book 👇
    
    [flaviocopes.com](https://flaviocopes.com/book/read/node/)
    
- Node JS cheat sheet 👇
    
    [node-cheatsheet. pdf](https://drive.google.com/file/d/1Lp_mxToMXJxbSNpifEcao2g61E50JfKI/view?usp=sharing)
    
- JavaScript Book 👇
    
https://drive.google.com/file/d/1duftOF4EoT8g-u4M73V-JbxWYTddZGCY/view?usp=drive_link
    
- JavaScript Cheat-Sheet 👇
https://drive.google.com/file/d/1y3Hgtio5T3qnJDzp9TiN-sxjUIRL2KB-/view?usp=drive_link

---

### Another section completed!!!!!

🔗

Section One: Server-Side Programming with Node JS 🏗️

##  Node.js Peer Review Activity 


Hey fellow developers!

Welcome to the peer review activity for the Node.js and Express.js course! This activity aims to provide feedback on your understanding and implementation of the key concepts covered in the course.


In this peer review activity, you will partner with a peer to evaluate and provide feedback on each other's work related to the Node.js course. Through constructive feedback and discussion, you will identify strengths, areas for improvement, and potential enhancements in your implementations.

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1Dx8UH_a-2BQSePVMR2luNnaQyV1LgGJe4DV7_mFydyY/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:   Node.js project Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the  Node.js project Rubric  Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Node.js project

1. Create a GitHub repository containing the entire project you just created.
2. Submit the link to your repository under the Node.js project  assignment using this link: https://tally.so/r/3xpbgG



----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




  Node.js Peer Review Activity

## 💡 Topic: My SQL

You've come a long way in your journey to becoming full-stack developers, but there's something important you still don't know: how to manage data effectively. Sure, you can create beautiful user interfaces, write elegant code, and deploy servers, but without a database, your website is nothing more than a static page. You can't store user information, perform complex queries, or generate dynamic content. In short, you can't do anything that requires persistent data which is data that is stored permanently for future use. So, if you want to take your web development skills to the next level, you need to learn about databases and how they work so let’s get started.

![](https://i.ibb.co/tmypZY6/Untitled-8.png)

Previously you have been building websites that collect data from users, such as their names and email addresses. You have stored this data in variables or arrays, but as your website grows and more users sign up, managing and storing all this data becomes increasingly challenging. You realize that you need a more efficient and organized way of storing and managing your data.

This is where databases come in. A database is like a castle's storage room, where all the valuable items are stored safely and in an organized manner. Just as a castle has a storage room to keep valuable items safe and organized, a website needs a database to store and manage its data efficiently. These databases can be categorized as relational and non-relational based on how they store and manage data.

One popular type of database is a Relational Database, which is like a castle's library. The library is organized with different sections for different types of books, and each book has information about its author, publisher, and other details. Similarly, a Relational Database is organized into tables, where each table contains different types of data. For example, a table for users may contain their names, email addresses, and passwords, while a table for products may contain their names, prices, and descriptions.

![](https://i.ibb.co/SxJgrv3/Untitled-9.png)

MySQL is a type of Relational Database Management System, which is like a castle's librarian who manages the castle's library. MySQL is used to manage and interact with Relational Databases. With MySQL, you can create, modify, and retrieve data from your database easily and efficiently.

In summary, databases are an essential tool in full-stack development because they allow you to store and manage data efficiently. Relational Databases, like a castle's library, provide a structured way of organizing data, and MySQL is a powerful tool for managing and interacting with your database.


# 📋 Instructions
### 

1. **Step one:** Follow the link below and take the course on relational databases with MySQL.

🔗 Youtube Link: https://youtu.be/HXV3zeQKqGY

### 🌟 Course Content 🌟

- [ ]  ([0:00](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=0s)) Chapter 1: Introduction
- [ ]  ([2:36](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=156s)) Chapter 2: What is a Database?
- [ ]  ([23:10](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=1390s)) Chapter 3: Tables & Keys
- [ ]  ([43:31](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=2611s)) Chapter 4: SQL Basics
- [ ]  ([52:26](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=3146s)) Chapter 5: MySQL Windows Installation
- [ ]  ([1:01:59](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=3719s)) Chapter 6: MySQL Mac Installation
- [ ]  ([1:15:49](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=4549s)) Chapter 7: Creating Tables
- [ ]  ([1:31:05](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=5465s)) Chapter 8: Inserting Data
- [ ]  ([1:38:17](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=5897s)) Chapter 9: Constraints
- [ ]  ([1:48:11](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=6491s)) Chapter 10: Update & Delete
- [ ]  ([1:56:11](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=6971s)) Chapter 11: Basic Queries
- [ ]  ([2:08:37](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=7717s)) Chapter 12: Company Database Intro
- [ ]  ([2:14:05](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=8045s)) Chapter 13: Creating Company Database
- [ ]  ([2:30:27](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=9027s) ) Chapter 14: More Basic Queries
- [ ]  ([2:26:24](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=8784s)) Chapter 15: Functions
- [ ]  ([2:45:13](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=9913s)) Chapter 16: Wildcards
- [ ]  ([2:53:53](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=10433s)) Chapter 17: Union
- [ ]  ([3:01:36](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=10896s)) Chapter 18: Joins
- [ ]  ([3:11:49](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=11509s)) Chapter 19: Nested Queries
- [ ]  ([3:21:52](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=12112s)) Chapter 20: On Delete
- [ ]  ([3:30:05](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=12605s)) Chapter 21: Triggers
- [ ]  ([3:42:12](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=13332s)) Chapter 22: ER Diagrams Intro
- [ ]  ([3:55:53](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=14153s)) Chapter 23: Designing an ER Diagram
- [ ]  ([4:08:34](https://www.youtube.com/watch?v=HXV3zeQKqGY&t=14914s)) Chapter 24: Converting ER Diagrams to Schemas

**You are required to complete ALL LESSONS mentioned above before moving on to the next section!**

# 🧠 Exercise / Project
1. Create GitHub repositories containing all the projects you have built.
# 📔 Additional Resources
- MySQL book 👇
    
    [flaviocopes. com](https://flaviocopes.com/book/read/sql/)
    
- MySQL Cheat-Sheets 👇
1. https://drive.google.com/file/d/1k1xIcR31O6pG8WrXDO-Ncge29m05Q4KT/view?usp=drive_link   
2. https://drive.google.com/file/d/1qsDsWa-4YcqlagoFRYqy4VSiy9WXTVxj/view?usp=drive_link
---

### Another section completed!!!!!

🔗

Section Two: Relational Databases with MySQL 💽

##  MySQL Peer Review Activity 


Hey fellow developers!

Welcome to the peer review activity for the SQL and Database Management section! This activity is designed to provide constructive feedback on your understanding and application of the key concepts covered in the section.


In this peer review activity, you will partner with a peer to evaluate and provide feedback on each other's work related to the SQL and Database Management section. The goal is to identify strengths, areas for improvement, and potential enhancements in your database projects.



## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1zhP2I5_oIFtSiUNgrm2eUhv_vbr_8xaoObo7e77u_30/edit?usp=sharing
### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features by running queries, and showcasing the database structure and functionality.
- Share your project codebase and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:

- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:   MySQL project Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the  MySQL project Rubric  Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: MySQL project

1. Create a GitHub repository containing the entire project you just created.
2. Submit the link to your repository under the MySQL project  assignment using this link: https://tally.so/r/3xpbgG


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




MySQL Peer Review Activity

## 💡 Topic: MongoDB

🎯 Goal
Imagine that you are the architect of a massive castle with hundreds of rooms, each containing valuable treasures. You need a way to organize and keep track of all the items in the castle, so you decide to create a catalog.

Now imagine that the catalog you created can only sort items by their room number, which means you can only find a specific item by searching through every room in the castle. This process would be incredibly time-consuming and inefficient, especially if you have to search for multiple items at once. This is a problem that can't be solved using the traditional catalog.

Similarly, in full-stack development, traditional relational databases like MySQL have limitations when it comes to handling unstructured data, which can cause issues when working with large amounts of data. This is where non-relational databases come in.

Unlike relational databases, non-relational databases like MongoDB can handle unstructured data like JSON files, making it easier to store and retrieve large amounts of data. This is especially useful when working with complex and constantly changing data structures. Without non-relational databases, developers would struggle to efficiently manage large amounts of unstructured data.
![](https://i.ibb.co/jrP1HYc/Untitled-10.png)

can you tell the difference between MYSQL and MongoDB?

To put it in our castle analogy, MongoDB is like a modular castle that can easily expand and adapt as needed. You can add more rooms, change the layout, and even add entire floors to accommodate new features and functionalities. With MongoDB, you have the flexibility to build and customize your data structure to fit your specific needs, without having to conform to a rigid table-based schema like in relational databases.

So, while you may know how to work with traditional relational databases, you can't efficiently work with unstructured data unless you use non-relational databases like MongoDB.


# 📋 Instructions
1. **Step One:**  Follow the link below and watch all 25 videos of the MongoDB tutorial.

🔗 Youtube playlist: https://www.youtube.com/playlist?list=PL4cUxeGkcC9h77dJ-QJlwGlZlTd4ecZOA

### 🌟 ****Course Content 🌟 ****

- [ ]  Complete MongoDB Tutorial #1 - What is MongoDB?
- [ ]  Complete MongoDB Tutorial #2 - Installing MongoDB
- [ ]  Complete MongoDB Tutorial #3 - Collections & Documents
- [ ]  Complete MongoDB Tutorial #4 - Using MongoDB Compass
- [ ]  Complete MongoDB Tutorial #5 - Using the MongoDB Shell
- [ ]  Complete MongoDB Tutorial #6 - Adding New Documents
- [ ]  Complete MongoDB Tutorial #7 - Finding Documents
- [ ]  Complete MongoDB Tutorial #8 - Sorting & Limiting Data
- [ ]  Complete MongoDB Tutorial #9 - Nested Documents
- [ ]  Complete MongoDB Tutorial #10 - Operators & Complex Queries
- [ ]  Complete MongoDB Tutorial #11 - Using $in & $nin
- [ ]  Complete MongoDB Tutorial #12 - Querying Arrays
- [ ]  Complete MongoDB Tutorial #13 - Deleting Documents
- [ ]  Complete MongoDB Tutorial #14 - Updating Documents
- [ ]  Complete MongoDB Tutorial #15 - MongoDB Drivers
- [ ]  Complete MongoDB Tutorial #16 - Connecting to MongoDB
- [ ]  Complete MongoDB Tutorial #17 - Cursors & Fetching Data
- [ ]  Complete MongoDB Tutorial #18 - Finding Single Documents
- [ ]  Complete MongoDB Tutorial #19 - Using POSTMAN
- [ ]  Complete MongoDB Tutorial #20 - Handling POST Requests
- [ ]  Complete MongoDB Tutorial #21 - Handling DELETE Requests
- [ ]  Complete MongoDB Tutorial #22 - PATCH Requests
- [ ]  Complete MongoDB Tutorial #23 - Pagination
- [ ]  Complete MongoDB Tutorial #24 - Indexes
- [ ]  Complete MongoDB Tutorial #25 - MongoDB Atlas

<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>

**Note:** 

- **You are required to complete ALL THE LESSONS mentioned above before moving on to the next section!**

# 🧠 Exercise / Project
Create a GitHub repository containing each of the projects you just created.
# 📔 Additional Resources

- [The Free MongoDB Course for Beginners | MongoDB 101](https://studio3t.com/academy/courses/mongodb-101-getting-started/)
- [Mongo DB 201](https://studio3t.com/academy/courses/mongodb-201-querying-mongodb-data/)

---

### Another section completed!!!!!

🔗

Section Three: Non-Relational Databases with MongoDB 💽

##  MongoDB Peer Review Activity 


Hey fellow developers!

Welcome to the peer review activity for the Complete MongoDB project! This activity aims to provide constructive feedback on your understanding and application of MongoDB concepts covered in the tutorials.

In this peer review activity, you will partner with a peer to evaluate and provide feedback on each other's work related to the MongoDB tutorials. The goal is to identify strengths, areas for improvement, and potential enhancements in your MongoDB projects.


## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1uMlrg0f10hApDSHojsUP_UMKqpuJ3Jwc1HN3s-AQWuY/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features by running queries, and showcasing the database structure and functionality.
- Share your project codebase and any additional resources, with your partner.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:

- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission:   MongoDB Project Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the  MongoDB project Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: MongoDB project

1. Create a GitHub repository containing the entire project you just created.
2. Submit the link to your repository under the MongoDB project  assignment using this link: https://tally.so/r/3xpbgG


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




MongoDB Peer Review Activity 

## 💡 Topic: Express.JS
![](https://i.ibb.co/JxRTpnn/Untitled-11.png)
Imagine you have a castle with different rooms and chambers, and each room serves a specific purpose. However, your castle's visitors cannot enter these rooms without a specific tour guide of the castle who has keys to all the doors to these rooms. The tour guide would be like the Express framework in full-stack development.

Express is a minimal and flexible Node.js web application framework that provides a set of features for building single-page, multi-page, and hybrid web applications. It simplifies the process of creating a server and defining routes, making it easier to handle HTTP requests, data, and views.

Think of it this way, you know how to create individual rooms (HTML, CSS, and JavaScript) and how to store data in them using databases like MySQL and MongoDB, but you cannot efficiently navigate between these rooms without the guidance of Express. Express helps in managing and coordinating the different parts of your application, ensuring that your visitors can access every room in your castle with ease. With Express, you can create robust, secure, and scalable web applications, making it an essential tool in full-stack development.

# 📋 Instructions
### 

1. **Step One:**  Follow the link below and take the complete course on using Node.js and Express.js  


🔗 Youtube Link: https://www.youtube.com/watch?v=Oe421EPjeBE&t=0s

### 🌟 Course Content 🌟

- [ ]  ([00:00](https://www.youtube.com/watch?v=Oe421EPjeBE&t=0s)) Chapter 1: Introduction
- [ ]  ([01:41](https://www.youtube.com/watch?v=Oe421EPjeBE&t=101s)) Chapter 2: What Is Node
- [ ]  ([02:56](https://www.youtube.com/watch?v=Oe421EPjeBE&t=176s)) Chapter 3: Course Requirements
- [ ]  ([04:16](https://www.youtube.com/watch?v=Oe421EPjeBE&t=256s)) Chapter 4: Course Structure
- [ ]  ([04:59](https://www.youtube.com/watch?v=Oe421EPjeBE&t=299s)) Chapter 5: Browser Vs Server
- [ ]  ([07:50](https://www.youtube.com/watch?v=Oe421EPjeBE&t=470s)) Chapter 6: Install Node
- [ ]  ([11:08](https://www.youtube.com/watch?v=Oe421EPjeBE&t=668s)) Chapter 7: Repl
- [ ]  ([13:27](https://www.youtube.com/watch?v=Oe421EPjeBE&t=807s)) Chapter 8: Cli
- [ ]  ([19:07](https://www.youtube.com/watch?v=Oe421EPjeBE&t=1147s)) Chapter 9: Source Code
- [ ]  ([20:27](https://www.youtube.com/watch?v=Oe421EPjeBE&t=1227s)) Chapter 10: Globals
- [ ]  ([29:34](https://www.youtube.com/watch?v=Oe421EPjeBE&t=1774s)) Chapter 11: Modules Setup
- [ ]  ([32:46](https://www.youtube.com/watch?v=Oe421EPjeBE&t=1966s)) Chapter 12: First Module
- [ ]  ([45:32](https://www.youtube.com/watch?v=Oe421EPjeBE&t=2732s)) Chapter 13: Alternative Syntax
- [ ]  ([49:50](https://www.youtube.com/watch?v=Oe421EPjeBE&t=2990s)) Chapter 14 Mind Grenade
- [ ]  ([53:47](https://www.youtube.com/watch?v=Oe421EPjeBE&t=3227s)) Chapter 15: Built-In Module Intro
- [ ]  ([56:31](https://www.youtube.com/watch?v=Oe421EPjeBE&t=3391s)) Chapter 16: Os Module
- [ ]  ([1:04:13](https://www.youtube.com/watch?v=Oe421EPjeBE&t=3853s)) Chapter 17: Path Module
- [ ]  ([1:10:06](https://www.youtube.com/watch?v=Oe421EPjeBE&t=4206s)) Chapter 18: Fs Module (Sync)
- [ ]  ([1:18:28](https://www.youtube.com/watch?v=Oe421EPjeBE&t=4708s)) Chapter 19: Fs Module (Async)
- [ ]  ([1:27:32](https://www.youtube.com/watch?v=Oe421EPjeBE&t=5252s)) Chapter 20: Sync Vs Async
- [ ]  ([1:34:29](https://www.youtube.com/watch?v=Oe421EPjeBE&t=5669s)) Chapter 21: HTTP Intro
- [ ]  ([1:35:58](https://www.youtube.com/watch?v=Oe421EPjeBE&t=5758s)) Chapter 22: Http Module (Setup)
- [ ]  ([1:40:53](https://www.youtube.com/watch?v=Oe421EPjeBE&t=6053s)) Chapter 23: Http Module (More Features)
- [ ]  ([1:45:57](https://www.youtube.com/watch?v=Oe421EPjeBE&t=6357s)) Chapter 24: NPM Info
- [ ]  ([1:50:19](https://www.youtube.com/watch?v=Oe421EPjeBE&t=6619s)) Chapter 25: NPM Command
- [ ]  ([1:53:10](https://www.youtube.com/watch?v=Oe421EPjeBE&t=6790s)) Chapter 26: First Package
- [ ]  ([2:02:52](https://www.youtube.com/watch?v=Oe421EPjeBE&t=7372s)) Chapter 27: Share Code
- [ ]  ([2:09:04](https://www.youtube.com/watch?v=Oe421EPjeBE&t=7744s)) Chapter 28: Nodemon
- [ ]  ([2:15:04](https://www.youtube.com/watch?v=Oe421EPjeBE&t=8104s)) Chapter 29: Uninstall
- [ ]  ([2:17:53](https://www.youtube.com/watch?v=Oe421EPjeBE&t=8273s)) Chapter 30: Global Install
- [ ]  ([2:23:22](https://www.youtube.com/watch?v=Oe421EPjeBE&t=8602s)) Chapter 31: Package-Lock.Json
- [ ]  ([2:25:56](https://www.youtube.com/watch?v=Oe421EPjeBE&t=8756s)) Chapter 32: Important Topics Intro
- [ ]  ([2:27:38](https://www.youtube.com/watch?v=Oe421EPjeBE&t=8858s)) Chapter 33: Event Loop
- [ ]  ([2:30:47](https://www.youtube.com/watch?v=Oe421EPjeBE&t=9047s)) Chapter 34: Event Loop Slides
- [ ]  ([2:37:46](https://www.youtube.com/watch?v=Oe421EPjeBE&t=9466s)) Chapter 35: Event Loop Code Examples
- [ ]  ([2:47:07](https://www.youtube.com/watch?v=Oe421EPjeBE&t=10027s)) Chapter 36: Async Patterns - Blocking Code
- [ ]  ([2:54:49](https://www.youtube.com/watch?v=Oe421EPjeBE&t=10489s)) Chapter 37: Async Patterns - Setup Promises
- [ ]  ([3:00:35](https://www.youtube.com/watch?v=Oe421EPjeBE&t=10835s)) Chapter 38: Async Patterns - Refactor To Async
- [ ]  ([3:06:05](https://www.youtube.com/watch?v=Oe421EPjeBE&t=11165s)) Chapter 39: Async Patterns - Node's Native Option
- [ ]  ([3:12:41](https://www.youtube.com/watch?v=Oe421EPjeBE&t=11561s)) Chapter 40: Events Info
- [ ]  ([3:14:44](https://www.youtube.com/watch?v=Oe421EPjeBE&t=11684s)) Chapter 41: Events Emitter - Code Example
- [ ]  ([3:18:37](https://www.youtube.com/watch?v=Oe421EPjeBE&t=11917s)) Chapter 42: Events Emitter - Additional Info
- [ ]  ([3:21:44](https://www.youtube.com/watch?v=Oe421EPjeBE&t=12104s)) Chapter 43: Events Emitter - Http Module Example
- [ ]  ([3:25:10](https://www.youtube.com/watch?v=Oe421EPjeBE&t=12310s)) Chapter 44: Streams Intro
- [ ]  ([3:26:18](https://www.youtube.com/watch?v=Oe421EPjeBE&t=12378s)) Chapter 45: Streams - Read File
- [ ]  ([3:33:01](https://www.youtube.com/watch?v=Oe421EPjeBE&t=12781s)) Chapter 46: Streams - Additional Info
- [ ]  ([3:35:05](https://www.youtube.com/watch?v=Oe421EPjeBE&t=12905s)) Chapter 47: Streams - Http Example
- [ ]  ([3:40:29](https://www.youtube.com/watch?v=Oe421EPjeBE&t=13229s)) Chapter 48: End Of Node Tutorial Module
- [ ]  ([3:40:46](https://www.youtube.com/watch?v=Oe421EPjeBE&t=13246s)) Chapter 49: HTTP Request/Response Cycle
- [ ]  ([3:44:49](https://www.youtube.com/watch?v=Oe421EPjeBE&t=13489s)) Chapter 50: HTTP Messages
- [ ]  ([3:55:52](https://www.youtube.com/watch?v=Oe421EPjeBE&t=14152s)) Chapter 51: Starter Project Install
- [ ]  ([3:57:59](https://www.youtube.com/watch?v=Oe421EPjeBE&t=14279s)) Chapter 52: Starter Overview
- [ ]  ([4:03:25](https://www.youtube.com/watch?v=Oe421EPjeBE&t=14605s)) Chapter 53: HTTP Basics
- [ ]  ([4:15:09](https://www.youtube.com/watch?v=Oe421EPjeBE&t=15309s)) Chapter 54: HTTP - Headers
- [ ]  ([4:24:50](https://www.youtube.com/watch?v=Oe421EPjeBE&t=15890s)) Chapter 55: HTTP - Request Object
- [ ]  ([4:32:00](https://www.youtube.com/watch?v=Oe421EPjeBE&t=16320s)) Chapter 56: HTTP - Html File
- [ ]  ([4:37:20](https://www.youtube.com/watch?v=Oe421EPjeBE&t=16640s)) Chapter 57: HTTP - App Example
- [ ]  ([4:48:02](https://www.youtube.com/watch?v=Oe421EPjeBE&t=17282s)) Chapter 58: Express Info
- [ ]  ([4:51:50](https://www.youtube.com/watch?v=Oe421EPjeBE&t=17510s)) Chapter 59: Express Basics
- [ ]  ([5:03:05](https://www.youtube.com/watch?v=Oe421EPjeBE&t=18185s)) Chapter 60: Express-App Example
- [ ]  ([5:14:31](https://www.youtube.com/watch?v=Oe421EPjeBE&t=18871s)) Chapter 61: Express - All Static
- [ ]  ([5:18:13](https://www.youtube.com/watch?v=Oe421EPjeBE&t=19093s)) Chapter 62: API Vs SSR
- [ ]  ([5:24:07](https://www.youtube.com/watch?v=Oe421EPjeBE&t=19447s)) Chapter 63: JSON Basics
- [ ]  ([5:32:40](https://www.youtube.com/watch?v=Oe421EPjeBE&t=19960s)) Chapter 64: Params, Query String - Setup
- [ ]  ([5:39:13](https://www.youtube.com/watch?v=Oe421EPjeBE&t=20353s)) Chapter 65: Route Params
- [ ]  ([5:48:25](https://www.youtube.com/watch?v=Oe421EPjeBE&t=20905s)) Chapter 66: Params - Extra Info
- [ ]  ([5:50:42](https://www.youtube.com/watch?v=Oe421EPjeBE&t=21042s)) Chapter 67: Query String
- [ ]  ([6:07:31](https://www.youtube.com/watch?v=Oe421EPjeBE&t=22051s)) Chapter 68: Additional Params And Query String Info
- [ ]  ([6:10:46](https://www.youtube.com/watch?v=Oe421EPjeBE&t=22246s)) Chapter 69: Middleware - Setup
- [ ]  ([6:21:27](https://www.youtube.com/watch?v=Oe421EPjeBE&t=22887s)) Chapter 70: APP.USE
- [ ]  ([6:28:31](https://www.youtube.com/watch?v=Oe421EPjeBE&t=23311s)) Chapter 71: Multiple Middleware Functions
- [ ]  ([6:36:36](https://www.youtube.com/watch?v=Oe421EPjeBE&t=23796s)) Chapter 73: Additional Middleware Info
- [ ]  ([6:43:26](https://www.youtube.com/watch?v=Oe421EPjeBE&t=24206s)) Chapter 74: Methods - GET
- [ ]  ([6:49:01](https://www.youtube.com/watch?v=Oe421EPjeBE&t=24541s)) Chapter 75: Methods - POST
- [ ]  ([6:52:53](https://www.youtube.com/watch?v=Oe421EPjeBE&t=24773s)) Chapter 76: Methods - POST (Form Example)
- [ ]  ([7:05:31](https://www.youtube.com/watch?v=Oe421EPjeBE&t=25531s)) Chapter 77: Methods - POST (Javascript Example)
- [ ]  ([7:21:22](https://www.youtube.com/watch?v=Oe421EPjeBE&t=26482s)) Chapter 78: Install Postman
- [ ]  ([7:30:19](https://www.youtube.com/watch?v=Oe421EPjeBE&t=27019s)) Chapter 79: Methods - PUT
- [ ]  ([7:41:43](https://www.youtube.com/watch?v=Oe421EPjeBE&t=27703s)) Chapter 80: Methods - DELETE
- [ ]  ([7:50:05](https://www.youtube.com/watch?v=Oe421EPjeBE&t=28205s)) Chapter 81: Express Router - Setup
- [ ]  ([8:05:36](https://www.youtube.com/watch?v=Oe421EPjeBE&t=29136s)) Chapter 82: Express Router - Controllers

<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>

**Note:** 

- **You are required to complete ALL Lessons mentioned above before moving on to the next section!**

# 🧠 Exercise / Project
1. Create a GitHub repository containing each of the projects you just created.

# 📔 Additional Resources
- Express Book 👇
    
    
    [flaviocopes. com](https://flaviocopes.com/book/read/express/)
    
- Express cheat sheet
https://drive.google.com/file/d/1IEz1r91vw9kWVsvaW5BXPCDBVJv0sp2E/view?usp=drive_link
---

### Another section completed!!!!!

🔗

Section Four: Express Framework 🧰

For the end of Module Assessment, you will be working as a team to continue building the blogging social app from Module Three. This project will involve collaboration with students from other tech tracks, so effective communication and teamwork are essential.

**Module Assessment Link**: [Module Assessment Blogging Social APP Continuation - Module 4](https://www.notion.so/Module-Assessment-Blogging-Social-APP-Continuation-Module-4-08dda72f7df74fa6888f8fb81d2d3b76?pvs=21) 

Happy Coding🙂

Module 4: Backend programming ⚙️

# 🧭Overview

Having mastered JavaScript and the individual components that make up the MERN stack—MongoDB, Express.js, React, and Node.js—you're now ready to take your development skills to the next level. In this module, we'll explore how TypeScript can be seamlessly integrated into the MERN stack, bringing enhanced type safety and improved developer experience to your full-stack applications. Through a series of hands-on exercises, you'll learn how to apply TypeScript to each part of the MERN stack, creating more robust, maintainable, and scalable applications. This module will not only solidify your understanding of TypeScript but also show you how it enhances the power and flexibility of the MERN stack. Get ready to see how TypeScript can transform your full-stack development workflow!

![](https://miro.medium.com/v2/resize:fit:720/format:webp/0*Sw1rsD8jo1weCKqD.png)

# 📅 Schedule
👉 Reminder: Our Google calendar contains the recommended timeline for taking the course as well as information about when training and surveys will take place so please make sure you have added it to your calendar and accepted all events before moving on. We have shared a calendar invite with you via Email.

⚠️Please ensure that you are using the correct calendar for your country to avoid missing important events.⚠️

Kenyan Students Only👇

Calendar Link: https://calendar.google.com/calendar/u/1?cid=NTY1ODg4MWRkYzYyNTg3NGZlYzFmYmZhZDljMGQzM2UzMjdiNzM4OTAwZDFhMWZiMTMzZWI3NmM0ZjYwNTRmMUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Ethiopian Students Only👇

https://calendar.google.com/calendar/u/1?cid=NGU0OGZkNjA1ZTg3ZjI5NGJlNzQyNGZlNDBhNzhkZDQ5ZDNiNWJjNTZjMTkxNTY1YjY4YWU2MDYyOTA2ZGRkMEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Google Calendar Tutorial

How to access a Google Calendar shared with you: https://www.youtube.com/watch?v=bofIU4rq-VM

**Mandatory Module Feedback ‼️**

At the end of every week, you are REQUIRED to fill out the module feedback form found below. Please only fill in the form that applies to your country as you have different timelines.

**For Kenya:** https://tally.so/r/wMAXkE

**For Ethiopia:** https://tally.so/r/wMANzl

# 📑 Sections

This module is divided into Four major sections. Each section has a single area of focus and is aimed at helping you master the topics covered.

1. Section One: Introduction To Typescript
2. Section Two: Beginner Exercises on Typescript
3. Section Three: Exercises on React with Typescript
4. Section Four: Solving TypeScript Errors
5. Section Five: MERN

## 💡 Topic: Typescript 

🎯 Goal: To learn how to use Typescript in the web applications you build

Imagine you're building a massive Lego city. Each Lego piece represents a line of code, and the city is your complex software application. Now, picture trying to construct this intricate city without any instructions or guides, relying only on trial and error. This can quickly become chaotic and error-prone. Enter TypeScript, your detailed instruction manual. TypeScript is like a supercharged version of JavaScript, providing clear blueprints (types) that ensure every piece fits perfectly, reducing errors and making the construction process smoother and more efficient. It's especially useful for large projects, helping developers catch mistakes early and maintain the structure and integrity of their code, much like having a clear set of Lego instructions keeps your city standing tall and sturdy.

**Typescript VS Javascript**🥊: 
https://www.youtube.com/watch?v=HCXPJmtV47I

# 📋 Instructions
1. **Step one**: Use the link below to go to YouTube and take the Practical TypeScript – Course for Beginners:

    🔗 Youtube link: https://www.youtube.com/watch?v=JHEB7RhJG1Y

### ⭐️Course Contents⭐️
- ⌨️ [0:00:00](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=0s) Intro, Type Annotations, Arrays
- ⌨️ [0:55:40](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=3340s) Objects and Functions
- ⌨️ [1:54:57](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=6897s) Alias and Interface
- ⌨️ [3:02:53](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=10973s) Tuples and Enums
- ⌨️ [3:59:10](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=14350s) Type Guards
- ⌨️ [4:31:02](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=16262s) Generics
- ⌨️ [5:10:25](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=18625s) Fetch Data
- ⌨️ [5:43:05](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=20585s) Classes
- ⌨️ [6:05:17](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=21917s) Tasks
- ⌨️ [6:47:18](https://www.youtube.com/watch?v=JHEB7RhJG1Y&t=24438s) React with TypeScript

<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>


# 📔 Additional Resources

- Typescript Docs: https://www.typescriptlang.org/docs/

---

### Another section completed!!!!!



Section One: Introduction To Typescript

## Introduction To Typescript Peer Review Activity


Welcome to the peer review activity for the Task Management Application project! This activity is designed to provide constructive feedback on your implementation of a task management application using TypeScript and Local Storage. The goal is to evaluate the functionality, code quality, user interface, and overall performance of your task management application.


In this peer review activity, you will collaborate with a peer to assess each other's task management projects. The focus will be on evaluating the functionality of the application, the quality of the TypeScript code, the design and usability of the user interface, and the implementation of local storage for data persistence. Through this review process, you'll identify strengths, areas for improvement, and potential enhancements to the task management application.

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/14bGa1tz6Diepcw1k80X0WVM28x0em5CgWENlusuJWvE/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including TypeScript files, HTML, CSS, and any additional resources, with your partner.
- Demonstrate how the task management application works, including adding, editing, and deleting tasks, and how tasks are saved to and retrieved from local storage.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission: Tasks Typescript App Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Tasks Typescript App Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Tasks Typescript App
1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the Tasks Typescript App assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




Introduction To Typescript Peer Review Activity

Now that you've got a taste of what TypeScript is and why it's such a valuable tool for developers, it's time to roll up your sleeves and dive in. Just like learning to ride a bike, the best way to master TypeScript is through hands-on practice. In the following section, you'll engage in a series of exercises designed to reinforce your understanding and build your confidence. These activities will guide you through real-world scenarios, helping you to see firsthand how TypeScript can streamline your code, catch errors early, and make your development process more efficient and enjoyable. Let's get started and see how TypeScript can transform your coding experience!

# 📋 Instructions

1. **Step One**: Use the following link and take the Beginner's Typescript Course:
🔗Course Link: https://www.totaltypescript.com/tutorials/beginners-typescript

### ⭐️Course Contents⭐️


- [ ] [**1 The Implicit ‘Any’ Type Error**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/implicit-any-type-error)
- [ ] [**2 Working with Object Params**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/working-with-object-params)
- [ ] [**3 Set Properties as Optional**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/set-properties-as-optional)
- [ ] [**4 Optional Parameters**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/optional-parameters)
- [ ] [**5 Assigning Types to Variables**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/assigning-types-to-variables)
- [ ] [**6 Constraining Value Types**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/constraining-value-types)
- [ ] [**7 Working with Arrays**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/working-with-arrays)
- [ ] [**8 Function Return Type Annotations**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/function-return-type-annotations)
- [ ] [**9 Typing Promises and Async Requests**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/typing-promises-and-async-requests)
- [ ] [**10 Passing Type Arguments**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/passing-type-arguments)
- [ ] [**11 Assigning Dynamic Keys to an Object**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/assigning-dynamic-keys-to-an-object)
- [ ] [**12 Narrowing Down Union Types**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/narrowing-down-union-types)
- [ ] [**13 Typing Errors in a Try-Catch**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/typing-errors-in-a-try-catch)
- [ ] [**14 Inheriting Interface Properties**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/inheriting-interface-properties)
- [ ] [**15 Combining Types to Create New Types**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/combining-types-to-create-new-types)
- [ ] [**16 Selectively Construct Types from Other Types**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/selectively-construct-types-from-other-types)
- [ ] [**17 Typing Functions**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/typing-functions)
- [ ] [**18 Typing Async Functions**](https://www.totaltypescript.com/tutorials/beginners-typescript/beginner-s-typescript-section/typing-async-functions)
# 🧠 Exercise / Project
1. Use the following link and submit your certificate under the Beginner's Exercise in Typescript Certificate:  https://tally.so/r/3xpbgG


# 📔 Additional Resources

- Learn Typescript: https://www.typescriptlang.org/docs/

---

### Another section completed!!!!!



Section Two: Beginner Exercises on Typescript

![](https://www.meme-arsenal.com/memes/97a15a9460accd6f4fe0be06e92668fc.jpg)
Now that you have a solid foundation in TypeScript, it's time to elevate your skills by combining it with React, one of the most popular JavaScript libraries for building user interfaces. Imagine React as your creative canvas, allowing you to craft dynamic and interactive web applications. When you add TypeScript into the mix, you gain a powerful set of tools that ensure your components are robust and error-free. In this section, you'll dive into a series of exercises that integrate React with TypeScript, helping you to build efficient, scalable, and maintainable applications. These hands-on activities will take you through real-world scenarios, demonstrating how the synergy between React and TypeScript can enhance your development workflow. Get ready to unleash the full potential of your coding capabilities!

# 📋 Instructions
1. **Step One**: Use the following link and take the React with Typescript Course:
🔗Course Link:https://www.totaltypescript.com/tutorials/react-with-typescript

### ⭐️Course Contents⭐️
- **Introduction**
    - [**1Adding React to a TypeScript Project**](https://www.totaltypescript.com/tutorials/react-with-typescript/introduction/adding-react-to-a-typescript-project)
    - [**2TypeScript in React Frameworks**](https://www.totaltypescript.com/tutorials/react-with-typescript/introduction/typescript-in-react-frameworks)
    - [**3Navigating JSX Types**](https://www.totaltypescript.com/tutorials/react-with-typescript/introduction/navigating-jsx-types)
- **Components**
    - [**1Ensure Props are Present and Defined**](https://www.totaltypescript.com/tutorials/react-with-typescript/components/ensure-props-are-present-and-defined)
    - [**2Typing a Component as a Function**](https://www.totaltypescript.com/tutorials/react-with-typescript/components/typing-a-component-as-a-function)
    - [**3Solving the any Problem with Children**](https://www.totaltypescript.com/tutorials/react-with-typescript/components/solving-the-any-problem-with-children)
    - [**4Typing Event Handlers**](https://www.totaltypescript.com/tutorials/react-with-typescript/components/typing-event-handlers)
    - [**5Using HTML Props in React Components**](https://www.totaltypescript.com/tutorials/react-with-typescript/components/using-html-props-in-react-components)
    - [**6Overriding and Removing Component Props**](https://www.totaltypescript.com/tutorials/react-with-typescript/components/overriding-and-removing-component-props)
    - [**7Extracting Props from Custom Components**](https://www.totaltypescript.com/tutorials/react-with-typescript/components/extracting-props-from-custom-components)
- **Hooks**
    - [**1Properly Typing useState**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/properly-typing-usestate)
    - [**2Typing useState with undefined**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/typing-usestate-with-undefined)
    - [**3Calling useState with Excess Properties**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/calling-usestate-with-excess-properties)
    - [**4Solving Errors with useEffect**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/solving-errors-with-useeffect)
    - [**5Typing the useCallback Hook**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/typing-the-usecallback-hook)
    - [**6Typing the useMemo Hook**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/typing-the-usememo-hook)
    - [**7Basic useRef Typing**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/basic-useref-typing)
    - [**8Refs in React**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/refs-in-react)
    - [**9useRef with HTML Elements**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/useref-with-html-elements)
    - [**10Making a Read-Only Ref Mutable**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/making-a-read-only-ref-mutable)
    - [**11Typing State and Actions for useReducer**](https://www.totaltypescript.com/tutorials/react-with-typescript/hooks/typing-state-and-actions-for-usereducer)
# 🧠 Exercise / Project
1. Once done with the course use the following link and submit your certificate under the React With Typescript Certificate assignment: https://tally.so/r/3xpbgG


# 📔 Additional Resources

- Learn Typescript: https://www.typescriptlang.org/docs/
- React Docs: https://react.dev/
---

### Another section completed!!!!!


Section Three: Exercises on React with Typescript

As you continue your journey with TypeScript, it's inevitable that you'll encounter errors along the way. But fear not! These errors are not roadblocks but rather opportunities for growth and learning. In this section, we'll focus on solving TypeScript errors through practical exercises. Think of these errors as puzzles waiting to be solved, each one helping you to deepen your understanding of TypeScript's type system and error-handling capabilities. By working through these real-world scenarios, you'll develop the skills to diagnose and fix common issues, making your code more robust and reliable. Let's turn those pesky errors into stepping stones on your path to TypeScript mastery!

# 📋 Instructions
1. **Step One**: Use the following link and take the React with Typescript Course:
🔗Course Link: https://www.totaltypescript.com/tutorials/solving-typescript-errors

### ⭐️Course Contents⭐️
- [**Fixing "X Is Not Assignable To Y"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/fixing-x-is-not-assignable-to-y)
- [**2Fixing "Property Does Not Exist On Type"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/property-does-not-exist-on-type-error)
- [**3Fixing "X is Possibly Null Or Undefined"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/fixing-x-is-possibly-null-or-undefined)
- [**4Fixing "Types Of Property Are Incompatible"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/fixing-types-of-property-are-incompatible)
- [**5Fixing "X Is Of Type Unknown"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/fixing-x-is-of-type-unknown)
- [**6Fixing "Expression Can't Be Used To Index Type X"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/fixing-expression-can-t-be-used-to-index-type-x)
- [**7Fixing "Property X Has No Initializer"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/no-initializer-or-construction-assignment-error-in-typescript)
- [**8Fixing "Conversion Of Type X May Be A Mistake"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/fixing-conversion-of-type-x-may-be-a-mistake)
- [**9Fixing "Cannot Redeclare Block-Scoped Variable"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/fixing-cannot-redeclare-block-scoped-variable)
- [**10Fixing "Could Not Find A Declaration File"**](https://www.totaltypescript.com/tutorials/solving-typescript-errors/errors/fixing-could-not-find-a-declaration-file)

# 🧠 Exercise / Project
1. Once done with the course use the following link and submit your certificate under the Solving Typescript Errors Certificate assignment: https://tally.so/r/3xpbgG


# 📔 Additional Resources

- Learn Typescript: https://www.typescriptlang.org/docs/
- 7 Common Errors And Possible Fix Every Typescript Developers Should Know:C  https://dev.to/stanlisberg/7-common-errors-and-possible-fix-every-typescript-developers-should-know-5585

---

### Another section completed!!!!!

Section Four: Solving TypeScript Errors

## 💡 Topic: MERN


![Untitled](https://i.ibb.co/JxrQNhR/Untitled-21.png)

> Putting the “full” in full stack web developer!
> 

Over the past eight weeks, you've been learning different parts of web development, including HTML, CSS, JavaScript, React, Node, Mongo, and Express. Now it's time to put all of that knowledge together and build a complete web application from scratch. Think of it like building a castle from the ground up, where each component plays a critical role in creating a functional and beautiful structure. Let’s each component one by one: 

![A castle’s facade is the principal front of a building, that faces on to a street or open space.](https://i.ibb.co/PM86VyB/Untitled-22.png)

A castle’s facade is the principal front of a building, that faces onto a street or open space.

**The front end** is like the castle's facade, which is the first thing people see when they approach the castle. This is where React comes in. React is like the architect who designs and builds the castle's facade. It creates the user interface, the buttons, the navigation menu, and other interactive components that users will see and interact with.

![This is what a castle’s foundation looks like](https://i.ibb.co/JQHPDGd/Untitled-23.png)

This is what a castle’s foundation looks like

**The back-end** is like the castle's foundation and infrastructure, which provides support for the castle's walls, floors, and roofs. The back-end components of a web application, including Node.js and Express, provide the support and logic needed for the front-end components to work. They handle server-side requests, perform database operations, and manage data. In the castle analogy, Node.js and Express are like the workers who build and maintain the castle's foundation and infrastructure.

![A castle’s storage](https://i.ibb.co/w7MM1V9/Untitled-24.png)

A castle’s storage

Finally, the database is like the castle's storage rooms, where all the important items and treasures are stored. MongoDB is used as the database component of the MERN stack. It stores and retrieves data for the web application. In the castle analogy, MongoDB is like the castle's storage rooms where all the important items and treasures are kept.

By combining all these components, we get a complete web application, just like a castle with its facade, foundation, and storage rooms. Full-stack web development in MERN is the process of designing, building, and maintaining all these components to create a seamless and efficient web application. After completing this section you can call yourselves Junior full-stack developers.


# 📋 Instructions
### 

1. **Step one:** Follow the link below and complete all 14 lessons of the MERN crash course.
    
      🔗Youtube Link:   https://www.youtube.com/playlist?list=PL4cUxeGkcC9iJ_KkrkBZWZRHVwnzLIoUE
    
2. **Step Two:** Follow the link below and complete the complete MERN course setup by Dave Gray.

    🔗 Youtube Link: https://youtu.be/CvCiNeLnZ00?list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V

**Note: You are required to COMPLETE the entire course before moving on to the next section.**

### **⭐️Course Contents⭐️**

1. Crash Course
    - [ ]  MERN Stack Tutorial #1 - What is the MERN Stack?
    - [ ]  MERN Stack Tutorial #2 - Express App Setup
    - [ ]  MERN Stack Tutorial #3 - Express Router & API Routes
    - [ ]  MERN Stack Tutorial #4 - MongoDB Atlas & Mongoose
    - [ ]  MERN Stack Tutorial #5 - Models & Schemas
    - [ ]  MERN Stack Tutorial #6 - Controllers (part 1)
    - [ ]  MERN Stack Tutorial #7 - Controllers (part 2)
    - [ ]  MERN Stack Tutorial #8 - Making a React App
    - [ ]  MERN Stack Tutorial #9 - Fetching Data
    - [ ]  MERN Stack Tutorial #10 - New Workout Form
    - [ ]  MERN Stack Tutorial #11 - Adding React Context
    - [ ]  MERN Stack Tutorial #12 - Deleting Data
    - [ ]  MERN Stack Tutorial #13 - Handling Error Responses
    - [ ]  MERN Stack Tutorial #14 - Finishing Touches
2. Complete Course
    - [ ]  ([00:00:00](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=0s)) Intro
    - [ ]  ([00:00:05](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=5s)) Welcome
    - [ ]  ([00:00:42](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=42s)) Chapter 1: MERN Stack Project
    - [ ]  ([00:28:13](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=1693s)) Chapter 2: Middleware
    - [ ]  ([00:56:04](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=3364s)) Chapter 3: MongoDB
    - [ ]  ([01:24:59](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=5099s)) Chapter 4: Controllers
    - [ ]  ([02:08:14](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=7694s)) Chapter 5: React JS
    - [ ]  ([02:42:15](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=9735s)) Chapter 6: Redux & RTK Query
    - [ ]  ([03:16:54](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=11814s)) Chapter 7: React & Redux Forms
    - [ ]  ([04:08:36](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=14916s)) Chapter 8: Authentication vs Authorization
    - [ ]  ([04:45:17](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=17117s)) Chapter 9: Login Auth
    - [ ]  ([05:18:49](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=19129s)) Chapter 10: JWT Auth
    - [ ]  ([06:00:59](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=21659s)) Chapter 11: Roles & Permissions
    - [ ]  ([06:44:17](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=24257s)) Chapter 12: Refactoring
    - [ ]  ([07:30:19](https://www.youtube.com/watch?v=CvCiNeLnZ00&list=PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V&index=14&t=27019s)) Chapter 13: Deployment

<aside>
💡 Remember! You can use Piazza to ask questions.

</aside>

# 🧠 Exercise / Project
Create a GitHub repository containing the projects you just created.

# 📔 Additional Resources
### **Additional Resources**

- Books👇
    
    [node-handbook.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f49e5973-92d7-45bf-8742-20f315cb9b7f/node-handbook.pdf)
    
    [js-handbook.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/874aaffd-f3fa-4631-9e59-9d702716ae7c/js-handbook.pdf)
    
    [express-handbook_2.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4c1514a4-56ec-4bb2-8d1e-040eff379bbb/express-handbook_2.pdf)
    
    [react-handbook.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/02ba005f-5e88-479e-9020-ae54faedfd50/react-handbook.pdf)
    
    [mongodb.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/aee060be-d009-4c62-bf0c-c4015082e241/mongodb.pdf)
    
- cheat sheets 👇
    
    [node-cheatsheet.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/206e2132-a5f5-431b-9695-23839ced1ebd/node-cheatsheet.pdf)
    
    [Javascript-Cheat-Sheet.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2c321e2b-6728-4544-9500-599935854c9b/Javascript-Cheat-Sheet.pdf)
    
    [tofagerl_express-js.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/812aea5c-1d62-495e-ae95-cc9e55153bcb/tofagerl_express-js.pdf)
    
    [react-cheat-sheet.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a55951ae-4c92-4cf9-9276-bd34d14c2c23/react-cheat-sheet.pdf)
    
    https://www.mongodb.com/developer/products/mongodb/cheat-sheet/
---

### Another section completed!!!!!



Section Five: MERN

Module 5:  MERN + Typescript 

# 🧭Overview

Congratulations on reaching Module 6! Over the past two months, you've progressed from building static websites with HTML and CSS to mastering the components of the MERN stack. Now, it's time to elevate your skills further with TypeScript and NestJS, which offer structured, type-safe development and modern server-side application design. You'll also delve into essential testing methodologies to ensure your applications are robust and reliable and embrace Agile and Lean practices to enhance collaboration and flexibility. Your journey has been remarkable, but one final step remains. Embrace this challenge, and prepare to conquer the final frontier of full-stack development. Your efforts have been commendable, and you're on the brink of success! Finish strong!

> Many will start fast, and few will finish strong! Are you one of the few who will finish?



# 📅 Schedule
👉 Reminder: Our Google calendar contains the recommended timeline for taking the course as well as information about when training and surveys will take place so please make sure you have added it to your calendar and accepted all events before moving on. We have shared a calendar invite with you via Email.

⚠️Please ensure that you are using the correct calendar for your country to avoid missing important events.⚠️

Kenyan Students Only👇

Calendar Link: https://calendar.google.com/calendar/u/1?cid=NTY1ODg4MWRkYzYyNTg3NGZlYzFmYmZhZDljMGQzM2UzMjdiNzM4OTAwZDFhMWZiMTMzZWI3NmM0ZjYwNTRmMUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Ethiopian Students Only👇

https://calendar.google.com/calendar/u/1?cid=NGU0OGZkNjA1ZTg3ZjI5NGJlNzQyNGZlNDBhNzhkZDQ5ZDNiNWJjNTZjMTkxNTY1YjY4YWU2MDYyOTA2ZGRkMEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t

Google Calendar Tutorial

How to access a Google Calendar shared with you: https://www.youtube.com/watch?v=bofIU4rq-VM

**Mandatory Module Feedback ‼️**

At the end of every week, you are REQUIRED to fill out the module feedback form found below. Please only fill in the form that applies to your country as you have different timelines.

**For Kenya:** https://tally.so/r/wMAXkE

**For Ethiopia:** https://tally.so/r/wMANzl

# 📑 Sections

This module is divided into Four major sections. Each section has a single area of focus and is aimed at helping you master the topics covered.

1. Section One:  Building a MERN App with TypeScript 💻
2. Section Two: Nest JS 🐥
3. Section Three: Testing 🔧
4. Section Four: Agile and Lean Methodologies 🏎️


## 💡 Topic: Building a MERN App with TypeScript 💻

After mastering the fundamentals of TypeScript and exploring its integration with React, it's time to bring it all together by building a MERN app with TypeScript. Having previously learned the MERN stack—MongoDB, Express.js, React, and Node.js—you already have a solid foundation. Now, you'll enhance your skills by incorporating TypeScript into your full-stack applications. In this section, you'll work on a series of hands-on exercises that will guide you through the process of building a robust and scalable MERN app with TypeScript. You'll learn how to leverage TypeScript's powerful features to create type-safe APIs, manage state, and build dynamic user interfaces. By the end of this section, you'll have a fully functional MERN app and a deeper understanding of how TypeScript can improve your development workflow. Let's dive in and build something amazing!


# 📋 Instructions
1. **Step One**:  Follow the link below and take the "MERN Stack with TypeScript Tutorial"

    🔗 **Youtube Link:** https://www.youtube.com/watch?v=4H_nQgKJpf4

# 🧠 Exercise / Project
1. Create GitHub repositories containing all the projects you have built and get ready for a peer review activity coming up next.
# 📔 Additional Resources
- [MERN TypeScript Setup Guide](https://medium.com/@brailyguzman/mern-typescript-setup-guide-af1500100d4b)

- [Setup | React TypeScript Cheatsheets](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup)

- [Advanced TypeScript Types cheat sheet (with examples)](https://www.ibrahima-ndaw.com/blog/advanced-typescript-cheat-sheet/)

- [TypeScript Cheatsheets](https://github.com/typescript-cheatsheets)
---

Section One:  Building a MERN App with TypeScript 💻          

## Peer Review Activity: Building a Library Management System Project using MERN and TypeScript


Welcome to the peer review activity for the Library Management System project using MERN (MongoDB, Express, React, Node.js) and TypeScript! This activity is designed to provide constructive feedback on your implementation of a library management system. The goal is to evaluate the functionality, code quality, user interface, and overall performance of your library management application.

In this peer review activity, you will collaborate with a peer to assess each other's library management projects. The focus will be on evaluating the functionality of the application, the quality of the TypeScript code, the design and usability of the user interface, and the integration of the MERN stack for data management and backend services. Through this review process, you'll identify strengths, areas for improvement, and potential enhancements to the library management system.

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/16VYCiE6siJyudI3IJcxqVWs_FFW54k8JMnXT82ycSDI/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including TypeScript files, HTML, CSS, and any additional resources, with your partner.

- User Interface:
    - Showcase the design and usability of the user interface.
    - Explain the use of CSS for styling and enhancing the visual appeal of the application.
- MERN Stack Integration:
    - Explain how MongoDB, Express, React, and Node.js are integrated for seamless data management and backend services.
    - Describe the methods used to save and retrieve data from MongoDB.
- Event Handling:
    - Discuss the implementation of event listeners for library management operations (e.g., adding, editing, deleting books).
- Highlight any challenges faced and how they were overcome.

- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission: Library Management System Project using MERN and TypeScript rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Library Management System Project using MERN and TypeScript rubric Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Library Management System
1. Create a GitHub repository containing the passenger counter app you just created.
2. Submit the link to your repository under the Library Management System App assignment using this link: https://tally.so/r/3xpbgG

- How to Download Scrimba Projects: https://www.loom.com/share/bec2f1167bf0447a9b1b87d55ebce4f5


----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




Peer Review: Building a MERN App with TypeScript

# 💡 Topic: Unit Testing
So far you have been writing a lot of code, and one thing that always bothers you as a developer is having a bug in your code. Some bugs are code-breaking, making them easy to detect, while others might be more hidden. Imagine that you are the king or queen of a magnificent castle, with towering walls, majestic towers, and a bustling community within. Your castle is a symbol of power, strength, and resilience, and it must be protected at all costs.

In the same way, your JavaScript code is like a castle that needs to be fortified against bugs, errors, and unexpected behavior. Just like a castle has walls and gates to keep enemies out, your code needs testing to keep errors out. This is where unit testing comes in.

Unit testing is like sending out your scouts and soldiers to check the walls, gates, and defenses of your castle. It is a method of testing small, isolated pieces of code to ensure that they are functioning as expected. Unit testing allows you to catch errors and bugs early in the development process before they cause major problems down the line.

In this section, we will be using a powerful tool for unit testing in JavaScript: Jest. Jest is like your army of guards who constantly patrol your castle walls and gates to ensure that they are secure. They are highly organized and equipped with the latest tools and technologies to catch any intruder. They also work closely with the townspeople to gather intelligence and anticipate threats.

## 📋 Instructions
1. **Step One**: follow the link below and take the “Introduction to testing in JavaScript with Jest course”

🔗 **Youtube Video**:https://youtu.be/x6NUZ8dc9Qg

2. **Step Two**: follow the link below and take the “JavaScript Testing with Jest – Crash Course”

🔗 **Youtube Video**: https://youtu.be/IPiUDhwnZxA

### ⭐️ Contents⭐️
- [ ] [00:00 - Intro](https://www.youtube.com/watch?v=IPiUDhwnZxA&t=0s)
- [ ] [00:45 - Setting Up Jest](https://www.youtube.com/watch?v=IPiUDhwnZxA&t=45s)
- [ ] [06:22 - Basic Concepts In Jest](https://www.youtube.com/watch?v=IPiUDhwnZxA&t=382s)
- [ ] [15:31 - Matchers](https://www.youtube.com/watch?v=IPiUDhwnZxA&t=931s)
- [ ] [33:21 - Testing Asynchronous Code](https://www.youtube.com/watch?v=IPiUDhwnZxA&t=2001s)
- [ ] [49:48 - Mock Functions and Spies](https://www.youtube.com/watch?v=IPiUDhwnZxA&t=2988s)
- [ ] [1:00:20 - Outro](https://www.youtube.com/watch?v=IPiUDhwnZxA&t=3620s)


## 🧠 Exercise: Fortifying Your JavaScript Castle with Jest


**Objective:** Apply your knowledge by writing unit tests for a sample JavaScript function.

---

### **Steps:**

### 1. Create a Sample JavaScript Function

**Objective:** Write a simple JavaScript function to test.

**Instructions:**

1. **Create a New File for Your Function:**
   - Create a file named `calculator.js`.

2. **Write the Functions:**
   - Implement the `add` and `subtract` functions in `calculator.js`:
     ```javascript
     // calculator.js
     function add(a, b) {
         return a + b;
     }

     function subtract(a, b) {
         return a - b;
     }

     module.exports = { add, subtract };
     ```

### 2. Write Unit Tests Using Jest

**Objective:** Write tests for the sample functions using Jest.

**Instructions:**

1. **Create a New File for Your Tests:**
   - Create a file named `calculator.test.js`.

2. **Write the Tests:**
   - Implement the tests for `add` and `subtract` functions in `calculator.test.js`:
     ```javascript
     // calculator.test.js
     const { add, subtract } = require('./calculator');

     test('adds 1 + 2 to equal 3', () => {
         expect(add(1, 2)).toBe(3);
     });

     test('subtracts 5 - 2 to equal 3', () => {
         expect(subtract(5, 2)).toBe(3);
     });
     ```

### 3. Run Your Tests

**Objective:** Execute the tests to ensure they pass.

**Instructions:**

1. **Run Jest:**
   - Open your terminal.
   - Navigate to your project directory.
   - Run the tests using the following command:
     ```bash
     npx jest
     ```

2. **Verify the Results:**
   - Ensure all tests pass without errors.

### 4. Document Your Process

**Objective:** Write a brief document explaining your setup process, the functions you wrote, and the tests you created.

**Instructions:**

1. **Create a Documentation File:**
   - Create a file named `documentation.md`.

2. **Document the Setup Process:**
   - Describe how you set up Jest and created your project.

3. **Explain the Functions and Tests:**
   - Provide a brief explanation of the `add` and `subtract` functions.
   - Describe the purpose of each test.

4. **Include Test Results:**
   - Add a screenshot or log of the test results showing all tests passing.

**Example:**
```markdown
# Jest Unit Testing

## Setup Process
1. Initialized a new project using `npm init -y`.
2. Installed Jest using `npm install jest --save-dev`.
3. Created `calculator.js` and `calculator.test.js` files.

## Functions
- **add(a, b):** Returns the sum of `a` and `b`.
- **subtract(a, b):** Returns the difference between `a` and `b`.

## Tests
- **add(1, 2):** Expects the result to be `3`.
- **subtract(5, 2):** Expects the result to be `3`.

## Test Results
![Test Results](path/to/screenshot.png)
```

---

### **End of Exercise Deliverables:**

1. **JavaScript Function:** `calculator.js`
2. **Unit Tests:** `calculator.test.js`
3. **Documentation:** `documentation.md`

---

### **Evaluation Criteria:**

1. **Setup and Configuration:**
   - Jest is correctly set up and configured in the project.

2. **Function Implementation:**
   - Sample JavaScript functions are correctly implemented and exported.

3. **Test Coverage:**
   - Unit tests cover different scenarios for the `add` and `subtract` functions.
   - Tests are clear, concise, and use appropriate matchers.

4. **Documentation:**
   - Documentation clearly explains the setup process, the functions written, and the tests created.
   - Includes a screenshot or log of successful test results.

By completing this exercise, you will gain hands-on experience with Jest, improve your ability to write robust unit tests, and ensure your JavaScript code is fortified against bugs and errors.
## 📔 Additional Resources

-  Jest Documentation: https://jestjs.io/

---

### Another section completed!!!!!





Section Two: Introduction to writing tests : Unit Testing

## Peer Review Activity: Fortifying Your JavaScript Castle with Jest


Welcome to the peer review activity for the "Fortifying Your JavaScript Castle with Jest" exercise! This activity is designed to provide constructive feedback on your implementation of unit tests for a sample JavaScript function using Jest. The goal is to evaluate the setup, function implementation, test coverage, and documentation of your Jest testing project.

In this peer review activity, you will collaborate with a peer to assess each other's Jest testing projects. The focus will be on evaluating the setup and configuration of Jest, the implementation of JavaScript functions, the coverage and clarity of unit tests, and the quality of the documentation. Through this review process, you'll identify strengths, areas for improvement, and potential enhancements to your unit testing approach.

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1GBecBx0IE7vhh8Fy2WPXSYoBtzJTa-K-zlcT6aA2Ojc/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your setup process, the implementation of the JavaScript functions, and the unit tests you created.
- Share your project codebase, including calculator.js, calculator.test.js, and any additional resources, with your partner.

- Demonstrate how you run the tests using Jest and show the test results.

- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission: Jest Exercise Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Jest Exercise Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Jest Exercise 
1. Create a GitHub repository containing the code you wrote during the exercise.
2. Submit the link to your repository under the Jest Exercise assignment using this link: https://tally.so/r/3xpbgG



----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




Peer Review: Fortifying Your JavaScript Castle with Jest

# 💡 Topic: Playwright

After building a MERN app with TypeScript and mastering JavaScript testing with Jest, it's time to take your testing skills to the next level with Playwright. In this section, you'll learn how to perform end-to-end (E2E) tests, ensuring that your entire application works seamlessly from the user interface down to the backend.

Imagine you've developed a feature-rich social app using the MERN stack. With Playwright, you can simulate user interactions like logging in, posting content, and interacting with other users, verifying that everything functions as expected. Playwright provides a robust framework for writing and running tests that cover real-world scenarios, helping you catch bugs and ensure a smooth user experience.

## 📋 Instructions
1. **Step One**: Follow the link below and take the Playwright course.

🔗 **Youtube Playlist**: https://www.youtube.com/playlist?list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8

2. Follow the following link and learn how to Test modern web apps with Playwright and VS Code

🔗 **Youtube Video**: https://www.youtube.com/watch?v=dLj0U6BgWuw
### ⭐️ Contents ⭐️

- [ ] [Playwright Beginner Tutorial 1 | What is Playwright](https://www.youtube.com/watch?v=4_m3HsaNwOE&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=1&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 2 | How to install](https://www.youtube.com/watch?v=IB2P1FBXjcQ&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=2&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 3 | How to run tests](https://www.youtube.com/watch?v=LTwg0kqdK4I&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=3&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 4 | How to write 1st Test](https://www.youtube.com/watch?v=wuWLpsRwB5o&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=4&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 5 | How To Record Tests](https://www.youtube.com/watch?v=-F0eCZK_vxE&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=5&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 6 | How to use Trace Viewer](https://www.youtube.com/watch?v=Ea4aZB0Zlsw&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=6&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 7 | How To Find Web Objects](https://www.youtube.com/watch?v=wmy1Nu3X8l0&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=7&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 8 | Demo Login Test](https://www.youtube.com/watch?v=KSzmCo9xxVs&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=8&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 9 | Assertions](https://www.youtube.com/watch?v=hYNOFle3zic&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=9&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 10 | Slow Motion and Video Recording](https://www.youtube.com/watch?v=ETFS_RMt4go&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=10&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 11 | Hooks & Groups](https://www.youtube.com/watch?v=S3NVJo0ySwE&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=11&pp=iAQB)
- [ ] [Playwright Beginner Tutorial 12 | Annotation & Tags](https://www.youtube.com/watch?v=9dSRZ-oswlM&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=12&pp=iAQB)
- [ ] [Easiest way | Playwright Page Object Model | Step by Step DEMO](https://www.youtube.com/watch?v=rAec3mZFhF0&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=13&pp=iAQB)
- [ ] [Playwright API Testing Demo for Beginners](https://www.youtube.com/watch?v=EEjyLfp6DoQ&list=PLhW3qG5bs-L9sJKoT1LC5grGT77sfW0Z8&index=14&pp=iAQB)

### 🧠 **Exercise: E2E Testing for Your Module 4 Assessment Project**

#### **Objective:**
Apply end-to-end (E2E) testing using Playwright to ensure your Module 4 assessment project functions seamlessly from the user interface down to the backend.

---

### **Steps:**

### 1. Set Up Your Environment

**Objective:** Set up Playwright in your existing Module 4 project.

**Instructions:**

1. **Install Playwright:**
   - Open your terminal.
   - Navigate to your project directory.
   - Run the following command to install Playwright:
     ```bash
     npm init playwright@latest
     ```
   - Follow the prompts to configure Playwright.

2. **Install Additional Dependencies:**
   - Ensure you have TypeScript and Jest installed in your project. If not, install them using:
     ```bash
     npm install typescript jest
     ```

### 2. Write Your First Test

**Objective:** Create a basic test script to verify Playwright setup.

**Instructions:**

1. **Create a Test File:**
   - In your `tests` directory, create a file named `example.test.ts`.

2. **Write a Simple Test:**
   - Add the following code to `example.test.ts`:
     ```typescript
     import { test, expect } from '@playwright/test';

     test('basic test', async ({ page }) => {
         await page.goto('https://example.com');
         const title = await page.title();
         expect(title).toBe('Example Domain');
     });
     ```

3. **Run the Test:**
   - In your terminal, run the following command to execute the test:
     ```bash
     npx playwright test
     ```

### 3. Develop End-to-End Tests for Your Project

**Objective:** Create E2E tests for key functionalities in your Module 4 assessment project.

**Instructions:**

1. **Identify Key Functionalities:**
   - Review the project criteria and identify key functionalities to test, such as user authentication, blog post creation, and interaction with AI blog helper.

2. **Write Tests for Identified Functionalities:**
   - **Example: Login Test**
     - In your `tests` directory, create a file named `login.test.ts`.
     - Add the following code to `login.test.ts`:
       ```typescript
       import { test, expect } from '@playwright/test';

       test('user login', async ({ page }) => {
           await page.goto('http://localhost:3000/login'); // Adjust URL as needed
           await page.fill('input[name="username"]', 'testuser');
           await page.fill('input[name="password"]', 'password123');
           await page.click('button[type="submit"]');
           const loggedInText = await page.textContent('.welcome-message');
           expect(loggedInText).toBe('Welcome, testuser!');
       });
       ```

   - **Example: Blog Post Creation Test**
     - In your `tests` directory, create a file named `post.test.ts`.
     - Add the following code to `post.test.ts`:
       ```typescript
       import { test, expect } from '@playwright/test';

       test('create a new post', async ({ page }) => {
           await page.goto('http://localhost:3000/login');
           await page.fill('input[name="username"]', 'testuser');
           await page.fill('input[name="password"]', 'password123');
           await page.click('button[type="submit"]');
           await page.click('a[href="/create-post"]'); // Navigate to create post page
           await page.fill('textarea[name="post-content"]', 'This is a test post!');
           await page.click('button[type="submit"]');
           const postContent = await page.textContent('.post-content');
           expect(postContent).toBe('This is a test post!');
       });
       ```

   - **Example: AI Blog Helper Interaction Test**
     - In your `tests` directory, create a file named `aiHelper.test.ts`.
     - Add the following code to `aiHelper.test.ts`:
       ```typescript
       import { test, expect } from '@playwright/test';

       test('AI blog helper interaction', async ({ page }) => {
           await page.goto('http://localhost:3000/login');
           await page.fill('input[name="username"]', 'testuser');
           await page.fill('input[name="password"]', 'password123');
           await page.click('button[type="submit"]');
           await page.click('a[href="/ai-helper"]'); // Navigate to AI Helper page
           await page.fill('textarea[name="blog-content"]', 'Need help with this blog post.');
           await page.click('button[type="submit"]');
           const aiResponse = await page.textContent('.ai-response');
           expect(aiResponse).toContain('Here is some help for your blog post.');
       });
       ```

3. **Run Your E2E Tests:**
   - In your terminal, run the following command to execute all tests:
     ```bash
     npx playwright test
     ```

### 4. Document Your Process

**Objective:** Write a brief document explaining your setup process, the tests you wrote, and how to run them.

**Instructions:**

1. **Create a Documentation File:**
   - Create a file named `documentation.md`.

2. **Document the Setup Process:**
   - Describe how you set up Playwright and created your test environment.

3. **Explain the Tests:**
   - Provide a brief explanation of each test written (login, blog post creation, AI helper interaction).
   - Describe the purpose of each test.

4. **Include Test Results:**
   - Add a screenshot or log of the test results showing all tests passing.

**Example:**
```markdown
# Playwright E2E Testing

## Setup Process
1. Installed Playwright using `npm init playwright@latest`.
2. Configured Playwright according to prompts.
3. Installed TypeScript and Jest using `npm install typescript jest`.

## Tests
### Login Test
- **Purpose:** Verify user login functionality.
- **Script:**
  ```typescript
  test('user login', async ({ page }) => {
      await page.goto('http://localhost:3000/login');
      await page.fill('input[name="username"]', 'testuser');
      await page.fill('input[name="password"]', 'password123');
      await page.click('button[type="submit"]');
      const loggedInText = await page.textContent('.welcome-message');
      expect(loggedInText).toBe('Welcome, testuser!');
  });
  ```

### Blog Post Creation Test
- **Purpose:** Verify blog post creation functionality.
- **Script:**
  ```typescript
  test('create a new post', async ({ page }) => {
      await page.goto('http://localhost:3000/login');
      await page.fill('input[name="username"]', 'testuser');
      await page.fill('input[name="password"]', 'password123');
      await page.click('button[type="submit"]');
      await page.click('a[href="/create-post"]');
      await page.fill('textarea[name="post-content"]', 'This is a test post!');
      await page.click('button[type="submit"]');
      const postContent = await page.textContent('.post-content');
      expect(postContent).toBe('This is a test post!');
  });
  ```

### AI Blog Helper Interaction Test
- **Purpose:** Verify interaction with AI blog helper.
- **Script:**
  ```typescript
  test('AI blog helper interaction', async ({ page }) => {
      await page.goto('http://localhost:3000/login');
      await page.fill('input[name="username"]', 'testuser');
      await page.fill('input[name="password"]', 'password123');
      await page.click('button[type="submit"]');
      await page.click('a[href="/ai-helper"]');
      await page.fill('textarea[name="blog-content"]', 'Need help with this blog post.');
      await page.click('button[type="submit"]');
      const aiResponse = await page.textContent('.ai-response');
      expect(aiResponse).toContain('Here is some help for your blog post.');
  });
  ```



---

### **End of Exercise Deliverables:**

1. **E2E Test Scripts:** `login.test.ts`, `post.test.ts`, `aiHelper.test.ts`
2. **Documentation:** `documentation.md`

---

### **Evaluation Criteria:**

1. **Setup and Configuration:**
   - Playwright is correctly set up and configured in the project.

2. **Test Coverage:**
   - E2E tests cover key functionalities identified from the project criteria.
   - Tests are clear, concise, and use appropriate assertions.

3. **Documentation:**
   - Documentation clearly explains the setup process and the tests written.
   - Includes a screenshot or log of successful test results.

By completing this exercise, you will gain hands-on experience with Playwright, improve your ability to write robust E2E tests, and ensure your Module 4 assessment project provides a seamless user experience.

## 📔 Additional Resources

-  Playwright Docs: https://playwright.dev/docs/intro

---

### Another section completed!!!!!


Section Three: End To End Testing With PlayWright

## End To End Test Peer Review Activity

Welcome to the peer review activity for the "E2E Testing for Your Module 4 Assessment Project" exercise! This activity is designed to provide constructive feedback on your implementation of end-to-end (E2E) tests using Playwright. The goal is to evaluate the setup, test coverage, clarity, and documentation of your E2E testing project.


In this peer review activity, you will collaborate with a peer to assess each other's E2E testing projects. The focus will be on evaluating the setup and configuration of Playwright, the coverage and clarity of E2E tests, and the quality of the documentation. Through this review process, you'll identify strengths, areas for improvement, and potential enhancements to your E2E testing approach.

## 🧠 Activity Instructions

### 1. Preparation

- Arrange a Zoom / Google Meet call with your assigned peer. (How to use Google Meet:  https://youtu.be/ObR4Z8h6qrQ )
- Ensure that both you and your peer have access to your project files and the rubric. 
- Accessing the rubric link

Rubric Link: https://docs.google.com/spreadsheets/d/1YwuG8THDYTJ5ptf69KESVc1ES-kPFtRL36KVpR6nOjo/edit?usp=sharing

### 2. Introduction

- Start the Zoom call by greeting your peer and briefly introducing yourselves if necessary.
- Explain that you will be conducting a peer review activity where each of you will take turns presenting and evaluating each other's projects.

### 3. Presentation (Presenter):

- The presenter begins by sharing their screen and presenting their project.
- Walk through each section of your project, explaining your implementation choices and highlighting key features.
- Share your project codebase, including TypeScript files, HTML, CSS, and any additional resources, with your partner.
- Demonstrate how the task management application works, including adding, editing, and deleting tasks, and how tasks are saved to and retrieved from local storage.
- Encourage your peer to ask questions or seek clarification as needed.

### 4. Evaluation (Evaluator):

- As the evaluator, pay close attention to the presenter's project.
- Use the rubric provided to assess each criterion based on the presenter's implementation.
- Take notes on areas where the presenter excelled and areas for improvement.

### 5. Feedback (Evaluator):

- After the presenter has finished presenting, provide constructive feedback based on your evaluation.
- Highlight areas where the presenter did well and commend their efforts.
- Offer suggestions for improvement in areas where the project may have fallen short, referencing specific criteria from the rubric.

### 6. Switch Roles:


- Once the evaluation and feedback are complete, switch roles with your peer.
- Share your screen and present your project while your peer acts as the evaluator.

### 7. Repeat Steps 3-5:

- Repeat the presentation, evaluation, and feedback process for your peer's project.
- Ensure that both you and your peer have an opportunity to present and receive feedback.

### 8. Discussion:

- After both presentations and evaluations are complete, engage in a brief discussion with your peer.
- Share your thoughts on the peer review process and any insights gained from evaluating each other's projects.
- Discuss any challenges faced during the project implementation and how they were overcome.

### 9. Closure:


- Thank your peers for their feedback and participation in the peer review activity.
- Exchange contact information if necessary for future collaboration or follow-up discussions.
- End the Zoom call on a positive note, expressing gratitude for the opportunity to learn from each other.
- Please fill in this feedback form at the end of the session (**mandatory**): https://tally.so/r/31l081

### 10. Follow-Up:

- Take the feedback provided by your peer into consideration and use it to improve your project.
- If you have any further questions or need clarification on the feedback received, don't hesitate to reach out to your peer or instructor.

## 📁 Submission: Playwright Rubric
1. Once done please download the Rubric spreadsheet by going to  File > Download > Pdf
2.  Set your pseudonym as the name of the file and submit the rubric file you used to assess one another under the Tasks Playwright Rubric assignment using the following Link: https://tally.so/r/3xpbgG


## 📁 Submission: Playwright Exercise
1. Create a GitHub repository containing the app you just created.
2. Submit the link to your repository under the Playwright Exercise assignment using this link: https://tally.so/r/3xpbgG

----------
Giving you both a double thumbs up for doing a good job!😎

![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXl4NTJneTVidjBjMzBoMjExZWNqMGFyN2RtZ3BhNnQxcWN0ZDFzMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eC73QH5i1hc3SoWszt/giphy.gif)




Peer Review:  PlayWright Exercise

# 💡 Topic: What is DevOps
After mastering end-to-end testing with Cypress, it's time to broaden your skills with DevOps Engineering. This section will introduce you to the essential practices and tools of DevOps, bridging the gap between development and operations to streamline your workflow and enhance your application's reliability and scalability.

Imagine you've built a feature-rich MERN stack application and thoroughly tested it with Cypress. The next step is to ensure that your application can be deployed, monitored, and maintained efficiently. DevOps practices will teach you how to automate deployment pipelines, manage infrastructure as code, monitor application performance, and handle incidents effectively.


## 📋 Instructions
1. **Step One**: Use the link below and take the course on " DevOps Engineering "

🔗 **Youtube Link**: https://youtu.be/j5Zsa_eOXeY

### ⭐️ Course Content: 3 Pillars of DevOps ⭐️

⭐️ Unit 1 - Code Review Automation
- ⌨️ Lesson 1  What is DevOps?
- ⌨️ Lesson 2 - What is Test Driven Development (TDD)?
- ⌨️ Lesson 3 - What is Continuous Integration (CI)? w/ CI setup TUTORIAL
- ⌨️ Lesson 4 - What is code coverage? 
- ⌨️ Lesson 5 - Linting best practices
- ⌨️ Lesson 6 - Ephemeral environments  w/ setup TUTORIAL

⭐️ Unit 2 - Deployment Strategies
- ⌨️ Lesson 7 - Virtual Machines (VMs) vs. Containers 
- ⌨️ Lesson 8 - Rolling deployments  
- ⌨️ Lesson 9 - Blue/green deployments w/ Continuous Deployment setup TUTORIAL
- ⌨️ Lesson 10 - What is autoscaling?
- ⌨️ Lesson 11 - What is service discovery? 
- 

⭐️ Unit 3 - Application Performance Management (APM)

- ⌨️ Lesson 12 - What is log aggregation?
- ⌨️ Lesson 13 - Vital production metrics 

## 📔 Additional Resources
### ⭐️ Course Notes ⭐️

- [ ]  🔗 Lesson 1: [What is DevOps?](https://layerci.com/blog/what-is-devops/)
- [ ] 🔗 Lesson 2: [What is Test-Driven Development?](https://layerci.com/blog/what-is-test-driven-development/)
- [ ]  🔗 Lesson 3: [What is Continuous Integration (CI)?](https://layerci.com/blog/what-is-ci/)
- [ ]  🔗 Lesson 4: [What is Code Coverage?](https://layerci.com/blog/what-is-code-coverage/)
- [ ]  🔗 Lesson 5: [Linting Best Practices](https://layerci.com/blog/linting-best-practices/)
- [ ] 🔗 Lesson 6: [What is an Ephemeral Environment?](https://layerci.com/blog/what-is-an-ephemeral-environment/)
- [ ] 🔗 Lesson 7: [The Difference Between VMs and Containers](https://layerci.com/blog/the-difference-between-vms-and-containers/)
- [ ] 🔗 Lesson 8: [What are Rolling Deployments?](https://layerci.com/blog/what-are-rolling-deployments/)
- [ ] 🔗 Lesson 9: [What is a Blue-Green Deployment?](https://layerci.com/blog/what-is-a-blue-green-deployment/)
- [ ] 🔗 Lesson 10: [What is Autoscaling?](https://layerci.com/blog/what-is-autoscaling/)
- [ ] 🔗 Lesson 11: [Service Discovery](https://layerci.com/blog/service-discovery/)
- [ ] 🔗 Lesson 12: [What is Log Aggregation?](https://layerci.com/blog/what-is-log-aggregation/)
- [ ] 🔗 Lesson 13: [Vital Production Metrics](https://layerci.com/blog/vital-production-metrics/)

---

### Another section completed!!!!!



DevOps Engineering

Dear DirectEd Scholars,

Congratulations on reaching the final stage of your journey with us! 🎉 Your dedication and hard work have brought you to this pivotal moment where you get to showcase everything you've learned. To help you get started on your graduating project, we've included screenshots of some of the fantastic designs and websites you've created so far. Remember when you first joined DirectEd Bootcamp? You were like this:

![Untitled](https://i.ibb.co/879Brpr/Untitled-25.png)

It's been a wild ride since then, filled with challenges and triumphs. Now, look at you, ready to graduate, transformed and accomplished:

![Untitled](https://i.ibb.co/F4D4cnk/Untitled.jpg)

You've grown immensely as designers, web developers, and Generative AI specialists. It's time to prove just how much you've evolved. Show us the depth of your knowledge, creativity, and problem-solving skills. There’s an internship seat with your name on it, waiting for you to claim it with your outstanding project. 🚀

To access the instructions for your graduating assessment, please use the following link:

🔗 [Graduating Assessment Instructions](https://www.notion.so/Graduating-Project-3142e8c8a1c24adfb32a103aa324b223?pvs=21)

Let's see how far you've come and celebrate your incredible growth and potential! 🌟

Good luck, and we can't wait to see what you create! 💪

Graduating Project 🎓

Module 6: Module 6: Next.js Testing and Building a MERN Web App with TypeScript

![](https://wepik.com/api/image/ai/9ba6a2f6-e61f-4b1d-823e-b5aad4ff856d)

Welcome, future coding superheroes! Are you ready to take on the challenge of DirectEd's main boot camp? 

Now, we're not going to sugarcoat it - this is going to be tough. But just like Iron Man once said, "Sometimes you gotta run before you can walk." And with consistency and perseverance, you'll be soaring through the coding challenges in no time.

Our main goal here is to prepare you for an exciting six-month graduate program filled with real-world projects, internships, and even potential job opportunities. So, buckle up and get ready to code your way to success!

The boot camp is divided into Six Modules, each lasting two weeks (Kenyan students) or four weeks (Ethiopian students). Think of it like leveling up in a video game - each module brings you closer to becoming a master coder.

A web development course ready for DirectEd Scholars.

DirectEd's Main Bootcamp

Course Details

Level:

Lessons:

Time:

Ratings:

Public Price:

Holder Price:

Public Price:

Holder Price:

NFT Token Gated Policy ID: