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

Module 3: DOM, Introduction to MERN, React.

![](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:

Modules:

Ratings:

NFT Token Gated Policy ID: