FullStack JavaScript

This repository will contain HTML, CSS, JavaScript files and projects which will be built over time.

My email : madhavsahi16@gmail.com
My LinkedIn - LinkedIn - Madhav Sahi
My GitHub - GitHub - Madhav Sahi
My Twitter - Twitter - Madhav Sahi
My Hashnode - Hashnode - Madhav Sahi

---

Class 1,2

• Learnt about basics of HTML and it's structure.
• Learnt about Emmet and various VS Code extensions.
• Learnt about various tags and it's use cases.
• Built TimeTable using table tag and used iframe tag.
• Class Repo - Repo Link for Class 1,2
  

---

Class 3,4

• Leant about basics of CSS and it's usage.
• Leant how to style elements using inline, internal and external CSS.
• Learnt about various CSS Selectors and their specificity.
• Learnt about margins, paddings, borders.
• Class Repo - Repo Link for Class 3,4

---

Class 5

• Learnt more about CSS positions and flexbox.
• Deep dived more into CSS positions and their use cases.
• Learnt more of FlexBox and it's child and parent properties.
• Class Repo - Repo Link for Class 5

---

Class 6,7

• Learnt about CSS Grid and it's properties.
• Learnt about CSS Media queries and it's use cases.
• Learnt about On Hover effects.
• Learnt how to set width for different size devices.
• Class Repo - Repo Link for Class 6,7

---

Class 8

• Learnt about CSS Framework - Tailwind
• Deep dived into Tailwind and built VS Code Clone Landing Page(non-responsive).
• Class Repo - Repo for Class 8
• GitHub Repo - VS Code Clone Landing page
• Live Link - VS Code Landing Page

---

Class 9

• Learnt about Git, GitHub, Markdown and it's importance.
• Learnt how to configure Git and GitHub.
• Learnt various syntax and how to embed links and images and various other things in "readme.md" file.
• Class Repo - Repo for Class 9

---

Class 10,11

• Learnt about basics of JavaScript.
• Learnt about Variable declaration in JavaScript - var , let , const.
• Learnt about Array and Object declaration.
• Learnt about how to access values inside Arrays and Objects via index.
• Learnt about if-else , Ternary condition, switch-case , loops in JavaScript.
• Learnt about Math and Random.
• Learnt about Date and it's methods.
• Learnt about Round, Min, Max, Floor, Ceil etc.
• Class Repo - Repo for Class 10,11

---

Class 12,13

• Learnt about more of basics of JavaScript.
• Learnt about various array methods and how to use them.
• Learnt about how to declare function, old way and using arrow too.
• Learnt about how to make basic calculator app using js.
• Learnt about definition, calling of function with and without arguments.
• Learnt about array methods - concat, splice, slice, inlcudes, indexOf, map, pop, shift etc.
• Learnt about "for of" loop to access elements of array.
• Learnt about object declaration and how to access keys and values.
• Learnt about "for in" loop to access keys and values of objects.
• Class Repo - Repo for Class 12,13

---

Class 14,15

• Learnt about Objects and how everything in JS is type of an object.
• Learnt about what are Prototypes and their usage.
• Learnt about Prototypal Inheritance and chaining.
• Learnt about how to set prototype to an objet or array or string.
• Leant about how to add our own functions/properties to arrays or objects using prototype.
• Learnt how to inherit properties of 1 object in other object using "___ proto___" and setPrototypeOf method.
• Learnt how prototype chaining works.
• Learnt about when the NULL comes in chaining.
• Class Repo - Repo for Class 14,15
• JavaScript Assignment - Assignment_01_Basics

---

Class 16,17

• Learnt about what is DOM and how to do DOM Manipulation.
• Learnt about difference between window and document object.
• Learnt how to target HTML elements using DOM.
• Learnt how to create new elements using DOM.
• Learnt how to style elements using style property.
• Learnt about eventListener and various browser events.
• Learnt about querySelector, getElementbyId, getElementbyClassName, createElement, appendChild etc.
• Made mini projects - Color Changer, Random text display using eventListener and DOM Manipulation.
• Class Repo - Repo for Class 16,17
• Project Repo - Random Emoji Generator
• Project Repo - Background Color Changer

---

Class 18

• Learnt about what is HOF and Callback.
• Learnt about setInterval() and setTimeout() HOFs and their uses.
• Learnt about reduce,filter,map,sort,some,every and other HOFs.
• Learnt about when to use "()=>{}" and when to use "()=>".
• Learnt about what is Destructuring in JS and a bit of Spread and Rest operators.
• 1st is for when we need to return a statement and 2nd is when we don't want to write return.
• Class Repo - Repo for Class 18
• JavaScript DOM Assignment - Assignment_02_DOM

---

Class 19

• Learnt about Spread and Rest operators and their use cases.
• Learnt about Try Catch Block and how to use it.
• Learnt about Promises in JS.
• Learnt about Eventloop concept of JS.
• Learnt about async await.
• Learnt about Error types in JS.
• Class Repo - Repo for Class 19
• JavaScript DOM Assignment - Assignment_02_DOM

---

Class 20,21

• Revised basics of JS.
• Learnt about difference between let, var, const.
• Learnt about lexical scope, scope chaining, closure, temporal dead zone,execution context.
• Learnt about difference in where to use ()=>() and ()=>{}.
• Learnt about fetch method and the 2 then and catch blocks.
• It returns a promise that resolves to a Response object.
• Learnt about fetch().then().then().catch().
• Learnt about async await await when we have to do API call.
• Class Repo - Repo for Class 20,21

---

Class 22

• Made a project using JavaScript - Weather APP.
• Used basics of HTML,CSS to make the web app.
• Used DOM manipulation to target HTML elements.
• Used publicweather API to get the data about city.
• Used fetch method along with async await await to get the data from API.
• Learnt about event.preventDefault() and importance of async await.
• Project/Class Repo Repo - Repo for Class 22
• Live Link - Weather APP using JavaScript

---

Class 23

---

• Learnt about history and basics of REACT.
• Leant about what is Babel and JSX.
• Learnt about how to use REACT via CDN Links.
• Learnt about difference between npm and npx.
• Learnt about create-react-app.
• Learnt about how to install REACT globally and locally.
• Learnt about folder structure of REACT and the necessary files required to run REACT app.
• Learnt about how to run react app on localhost.
• Class Repo - Repo for Class 23

---

Class 24

---

• Learnt about React States and Hooks and what problem do they solve.
• Made a basic counter App using states.
• Learnt about useState.
• Class Repo - Repo for Class 24

---

Class 25

• Learnt more of React States and Hooks and used them.
• Learnt about props.
• Learnt about major differences between class based and function based components in React.
• Learnt about Axios and used it.
• Learnt about API calling uing Axios.
• Made web request and captured data from API.
• Learnt about useEffect hook.
• Learnt about how the component mounts and unmounts and when the component renders and re-renders.
• Learnt about rules of hooks.
• Learnt about React.StrictMode and it's pros and cons.
• Made a basic Tic-Tac-Toe App as homework to get more handson and practice of states.
• Explored more of react from official documentation.
• Class Repo - Repo for Class 25

---

Class 26,27

• Revision of React JS.
• Revised basic concepts about React JS.
• Learnt about Local Storage.
• Learnt about how we can set,get,delete,clear items in Local Storage.
• Learnt about JSON.parse() and JSON.stringify() methods.
• Learnt how to use useEffect hook along with Local Storage
• Made a ToDo App using Local Storage concept.
• Folder Repo - ToDo App using LocalStorage

---

Class 28,29

• Learnt about Prop Drilling and what problem it creates when dealing with multiple components.
• Learnt about State Management and it's importance.
• Learnt about how various ways are there to do State Management.
• Learnt about 1 of the way to handle State Management - ContextAPI.
• Learnt about how variables, States can be sent from a component to other multiple components using ContextAPI.
• Learnt about how to install Tailwind using npm and how to do basic setup.
• Learnt about basics of React-Router v6.
• Learnt about BrowserRouter,Routes,Route properties of React-Router.
• Learnt about Outlet module and how nesting routing works.
• Learnt about Link To and NavLink To and differences between them.
• Learnt about useParams , useLocation , useNavigate hooks.
• Class Repo - Repo for Class 28,29
• Topic Repo - React ContextAPI
• Topic Repo- React Router

---

Class 30,31

• Learnt about State Management and it's importance.
• Learnt about various ways of handling State Management.
• Various ways discussed were - REDUX, REDUX ToolKit, Context API, React Query, ZUSTAND, FLUX.
• Learnt about REDUX in Depth.
• Leart about Store, Action Function, Reducer, RootReducer, Slice, Immer Library.
• Learnt about how we can pass any input number and use it through Action.Payload and change the state.
• Learnt about Action.Type, Action.Payload.
• Made 2 projects using REDUX - Counter App and ToDo App using REDUX.
• Class Repo - Repo for Class 30,31
• Topic Repo - Counter App using REDUX
• Topic Repo- ToDo App using REDUX

---

Class 32,33

• Learnt about basics of Backend.
• Learnt about how request is sent from frontend to backend server and database.
• Learnt about basic Linux commands.
• Learnt about how to decode a URL string.
• Learnt about NodeJS architecture.
• Learnt about EventQueue, EventLoop and ThreadPool.
• Learnt about MVC architecture.
• Learnt about bcrypt and how it used in password hashing.
• Learnt about tools where we can host our backend.
• Learnt about Port and which engine used which port number.
• Class Repo - Repo for Class 32,33

---

Class 34,35

• Learnt about more of basics of Backend.
• Learnt about Schema/Design.
• Learnt about how to make High Level Design for an E-Commerce App.
• Learnt about flow : Project-->1 Database-->Many Tables-->Design/Schema.
• Learnt about Round Robin Algorithm.
• Basics of Normalisation, 1NF, 2NF, 3NF, BCNF(3.5NF)
• Made Database design for E-Commerce and Social Media.
• Learnt about how to store media in Database.
• Learnt about services - Cloudinary, AWS S3 bucket are used to store media(Images, Videos, Audios).
• Learnt about Basic Web Requests - GET,PUT,POST,DELETE.
• Learnt about Status codes.
• Class Repo - Repo for Class 34,35

---

Class 36,37

• Learnt about how to start Backend App.
• Learnt about how to use Express JS.
• Learnt about nodemon.
• Learnt about how to create Backend App.
• Learnt about how to use Postman to send requests and APIs.
• Learnt about how to listen to a Port and how to send request and receive response.
• Learnt about how to add routes and send JSON data.
• Learnt about which status codes to send.
• Learnt about .get , .status and .json
• Learnt about Process.env.Port
• Learnt how to use postman to check localhost:PORT
• Learnt about how to Setup Backend.
• Learnt about steps of how to structure Backend folder.
• Learnt about app.js , server.js , Config , Routes , Controllers , Models , .env
• Learnt about how a basic MERN-CRUD-APP is structured.
• Class Repo - Repo for Class 36,37
• Project Repo : Social Media Routing Project

---

Class 38,39

• Learnt about how to setup Backend for a Big App : E-Commerce.
• Learnt about how to setup database using MongoDB.
• Learnt about how to install MongoDB and Mongosh.
• Learnt about Routing.
• This Project will be built over time. The above points are the topic covered in that particular class for building this Project.
• Class Repo Repo for Class 38,39
• Project Repo (Building...) : E-Commerce Repo

---

Class 40,41

• Class Repo Repo for Class 40,41
• Project Repo (Building...) : E-Commerce Repo

---

HTML , CSS , Tailwind Projects

• Project Repo - VS Code Landing page using Tailwind
• Project Repo - Credit Card Landing Page
• Project Repo - Hosting Site Landing Page
• Project Repo - Gaming Site Landing Page
• Project Repo - Real Estate Landing Page
• Project Repo - Beats Landing Page
• Project Repo - Data Analytics Landing Page
• Project Repo - Digital Marketing Landing Page
• Project Repo - Space Landing Page
• Project Repo - Trend Landing Page
• Project Repo - Headphone Landing Page
• Project Repo - Healthcare Landing Page
• Project Repo - Justice Site Landing Page

---

JavaScript Projects

• Project Repo - Random Emoji Generator
• Project Repo - Background Color Changer
• Project Repo - Weather APP

---

JavaScript Assignments

• JavaScript Assignments - All Assignments
• JavaScript Assignment 7,8 Jan_23 - Assignment_01-Basics
• JavaScript DOM Assignment 28,29 Jan_23 - Assignment_02-DOM

---

React JS Projects

• All React JS Projects - All Projects REPO

• Project Repo - ToDo App
• Project Repo - Rock Paper Scissor App
• Project Repo - The Meal DB
• Project Repo - Pokemon API
• Project Repo - Movie API
• Project Repo - Shopping Cart Project
• Project Repo - GitHub-Firebase Auth Project

---

Express JS Projects

• All Express JS Projects - All Projects REPO

• Project Repo - Social Media Basic Routing App
• Project Repo (Building...) : E-Commerce Repo