# Foundational bootcamp (12 weeks) 🫡
https://discord.gg/N2mj7tjP
## Introduction

The focus for the upcoming twelve weeks is on individual work to enhance familiarity with development tools and broaden our collective knowledge base. This approach aims to make future pairing sessions more productive by reducing time spent on basic tool usage and leveraging a diverse set of skills and insights acquired through reading the multiple(optional) resources.

## Weekly Structure Overview

- **Individual Focus:** Each participant will work independently to better understand the tools, aiming for more efficient collaboration in future projects.
- **Daily Check-ins:**
- **Check-in (5-10 min):** Discuss daily goals and planned tasks.
- **Check-out (5-10 min):** BRIEFLY reflect on the day's work, mention learnings, and any obstacles encountered.

### Reminder

Allocate 15-60 minutes daily for additional learning using your preferred resources.

## Asking for Help

Developing problem-solving and debugging skills is crucial. Relying too heavily on others for solutions can hinder your growth.

### Guidelines

- Give yourself 15 minutes to tackle a problem before seeking help.
- If stuck, discuss the issue with peers (if they are available).
- If still unresolved, then seek my assistance.

### How to Ask for Help

For each question you should do the following:
**Describe the Issue**: Often, articulating the problem can lead to a solution.
**Detail Your Approach**: Share the steps you've taken and where you suspect the issue might lie.
**Share the live server link of your code**: You should have the live server extension installed

If no one is online:
**Images**: If it's UI related
**Upload your code to GitHub**: Share the link to the relevant snippet

### Debugging resources
[Debugging guide](https://foundersandcoders.notion.site/Debugging-d65ef64195e6497f98cd75fa69de9b96)
[Best Debugging Tips For Beginners](https://www.youtube.com/watch?v=gaminoBsQx0)

# Weeks
## Week 1: Preparation and Fundamentals

### Objective

Focus on learning JavaScript fundamentals and best practices, setting a solid foundation for the project starting in the second week.

### Tasks

- [ ] [Go through these exercises](https://github.com/4GeeksAcademy/javascript-arrays-exercises-tutorial/tree/master)
- [ ] **Reach Kyu 6 on [Codewars](https://www.codewars.com/)**
- [ ] **Daily Reading:** Start with [Clean Code JavaScript concepts](https://github.com/ryanmcdermott/clean-code-javascript) one concept per day.
- [ ] **Refactoring:** [Stop when you reach "Code Smells"](https://refactoring.guru/refactoring/what-is-refactoring).
- [ ] **Build a Simple Calculator** (Use HTML and JS only; no CSS required):
- [ ] Addition
- [ ] Subtraction

- [ ] **Project Board Setup:** Create a Project Board on GitHub and set up the repository for next week's project. Identify project requirements and break down tasks into smaller, manageable activities.

### Resources

- [DOM Introduction](https://oliverjam.es/articles/dom-intro) - Skim through this for a basic review.
- [JavaScript Basic Syntax](https://www.codecademy.com/article/glossary-javascript)
- [JavaScript Lingo Cheat Sheets](https://morioh.com/a/0de5894133a6/javascript-cheatsheet-comprehensive-pdf-included)
- [CSS Cheat Sheet](https://www.lesliefranke.com/files/reference/csscheatsheet.html)
- [W3 Schools - Responsive Web Design](https://www.w3schools.com/Css/css_rwd_intro.asp)
- [How to Write Pseudocode](https://www.wikihow.com/Write-Pseudocode)

## Week 2: Coloors

The objective is to replicate [Coolors](https://coolors.co/93a3b1-7c898b-636564-4c443c-322214) as best you can.

### Required Features

- [ ] Create a README file explaining the project
- [ ] Built using HTML, CSS, & JS
- [ ] Code hosted on GitHub
- [ ] Deployed to GitHub Pages
- [ ] Auto-generate multiple colours
- [ ] Allow users to change each colour
- [ ] Change all colours by pressing space bar
- [ ] Use BEM
> https://getbem.com/introduction/
> https://www.youtube.com/watch?v=er1JEDuPbZQ

### Extra Features

- [ ] Export colour palettes in different formats (e.g., JSON, CSS variables)
- [ ] Generate related colours (e.g., ascending lightness, complementary hues)
- [ ] Save palettes to localStorage

## Week 3:

Decided to extend week 2 due to life events

## Week 4: Asynchronous JavaScript
28/02/2024 to 06/03/2024

### Tasks
- [ ] [Functions, Callbacks & async workshop](https://learn.foundersandcoders.com/workshops/functions-callbacks-async/)
- [ ] [Learn Fetch & Promises workshop](https://learn.foundersandcoders.com/workshops/learn-fetch/)
- [ ] [Real world fetch workshop](https://learn.foundersandcoders.com/workshops/real-world-fetch/)
- [ ] [Promise practice workshop](https://learn.foundersandcoders.com/workshops/promise-practice/)
- [ ] [Node.js & npm workshop](https://learn.foundersandcoders.com/workshops/node-npm-intro/)
- [ ] Catch up on tasks from previous weeks

### Resources
- [HTTP introduction](https://www.youtube.com/watch?v=d_QPZPo2PLc)
- [How DNS works](https://howdns.works/ep1/)
- [HTTP overview](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
- [How functions work](https://oliverjam.es/articles/first-class-functions)
- [Asynchronous concepts](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing)
- [What the heck is the event loop?](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html)
- [User stories](https://www.visual-paradigm.com/guide/agile-software-development/what-is-user-story/)

By the end of the week you should be able to:
### JavaScript

- [ ] Write code that executes asynchronously.
- [ ] Use callbacks to access values that aren’t available synchronously.
- [ ] Use promises to access values that aren’t available synchronously.
- [ ] Use the fetch method to make HTTP requests and receive responses.
- [ ] Configure the options argument of the fetch method to make GET and POST requests.
- [ ] Use the map array method to create a new array containing new values.
- [ ] Use the filter array method to create a new array with certain values removed.

### Node.js

- [ ] Set up a Node.js environment for web development.
- [ ] Use environment variables for managing secrets and sensitive keys in Node.js.
- [ ] Use npm to manage project dependencies and scripts in a Node.js environment.

## Week 5: AI Chatbot
### Project Description:
This week you'll be building a simple interface (Chatbot) to interact with the OpenAI API, practising what you learnt previously about asynchronous JavaScript.

You will also be introduced to user stories. User stories are a tool used in professional software development to outline features from the user's perspective. They help teams focus on delivering value by describing how a feature benefits the user, guiding development towards user-centered solutions.
You are suggested to break these user stories down into multiple tasks that are easier to work through.

Choose one of these themes for the chatbot, or if you have a different idea, reach out to me. We don't want to get stuck thinking about what the project should be.

#### Chatbot themes
- Mindfulness and Meditation Guide Chatbot: A chatbot that offers personalized mindfulness exercises, meditation sessions, and calming conversations based on the user's current mood and preferences.

- Eco-Conscious Lifestyle Chatbot: A chatbot designed to offer advice on living a more sustainable lifestyle, suggesting eco-friendly habits, products, and providing information on environmental impact.

- Space Exploration Guide Chatbot: Users can learn about different celestial bodies, space missions, and astronomic phenomena through conversations with this chatbot, designed to simulate a journey through space.

- Historical Events Reenactment Chatbot: This chatbot lets users experience pivotal moments in history through interactive reenactments, providing a first-person perspective of historical events.

- Mythology Explorer Chatbot: A chatbot that introduces users to myths and legends from various cultures around the world, explaining the stories, characters, and moral lessons behind them.

### User Stories:
- As a user, I want to easily find and interact with the chatbot's input field, so that I can type my queries or responses without any confusion or delay, ensuring a seamless conversational flow.

- As a user, I wish to receive visual feedback when the chatbot is processing my query, such as a typing indicator or a "thinking" animation, so that I know my input has been received and a response is forthcoming, reducing confusion and enhancing the interactive experience.

- As a user, I want the chatbot's responses to be displayed in a way that is easy to read and distinguish from my inputs, perhaps through different colors, speech bubbles, or avatars, so that I can clearly follow the conversation's flow and understand who is "speaking."

- As a user, I expect the UI to be responsive, from desktops to smartphones, ensuring that I can enjoy a consistent and engaging chatbot experience regardless of the device I'm using.

- As a user, I would like the chatbot to occasionally surprise me with interesting facts or challenges related to the theme, to keep the interaction engaging and provide me with unexpected learning opportunities or insights that I might not have sought out on my own.

## Week 12: Review project and quiz

### Review quiz
#### Git/GitHub

- Why do we use Git?
- What’s the difference between Git and GitHub?
- What happens when you clone a repository?
- What happens when we do `git pull origin main`?
- How do we create a new branch on our local machine?
- How do we control which changes will be included in the next commit?
- When might `git add .` be inappropriate?
- How do we make sure our local changes don’t conflict with main?
- What does `git push origin [branch-name]` do?
- Why do we make pull requests instead of just changing `main` directly?
- Why should you review your teammates’ pull requests?

#### HTML

- Why is accessibility important?
- How can you quickly find simple accessibility problems?
- What is semantic HTML?
- Why is it important to use the “correct” semantic element?
- What is the `<form>` element used for?

#### CSS

- How would you use CSS variables to make a reusable colour palette?
- How would you use flexbox to make elements sit on a single line?
- How would you use grid to make a layout that automatically adds columns as the screen gets wider?
- Why is it important to create a responsive design?
- How would you structure your CSS to make it “mobile-first”?

#### Javascript

- Why should we avoid using `var` to define variables?
- How might you make a long, complex chunk of code easier to read?
- What is a “callback”?

#### Array methods

- How would you use `array.map()` to create a new array with transformed values?
- How would you use array.filter() to create a new array with certain values removed?
- How would you use array.find() to get a single value from an array?

#### DOM

- How would you get a reference to a DOM element in your JS?
- How would you get references to multiple DOM elements at once in your JS?
- How would you update properties of a DOM element?
- What’s the difference between a “property” and an “attribute”?
- What are some different ways to add content inside a DOM element?
- When might the `<template>` element be useful?
- What are the different ways to add event handlers to elements?
- Why is addEventListener the safest way to add an event handler?
- How can you access submitted form values in your JS?

#### Debugging

- What process would you take to find out why your code isn’t working?
- What tools do JS/dev tools have to help debug your code?
- At what point should you ask for someone else’s help?

#### Promises & Fetch

- What is a promise?
- How do promises help manage asynchronous code?
- What does a promise’s `.then` method return?
- How could you chain promises together to avoid “callback hell”?
- How would you handle a `fetch` request that failed to get a response from the server?
- How would you handle a fetch request that received a 404 response from the server?

#### HTTP

- What is an HTTP request?
- What kind of request is sent when you click a link in your browser?
- What kind of request is sent when you submit a form in your browser?
- What is an HTTP response?
- What does the status code of an HTTP response tell us?
- What are some common status codes?
- What are HTTP methods for?
- What kind of request should have a GET method?
- What kind of request should have a POST method?
- What kind of request should have a PUT method?
- What kind of request should have a DELETE method?
- What is the “body” of an HTTP request for?

#### Testing

- Why are tests useful?
- What is the difference between unit and integration tests?
- What kind of code is easier to test?
- Why should your tests be isolated from each other?
- What is Test Driven Development (TDD)?
- When might TDD be a useful process to follow?