100xDevs Cohort 3.0 π by Harkirat Singh. This repository contains
live class/lecture codes, lecture assignments, assignment solutions, links to notes/slides link, some good relevant articles/blogs link
for each lecture, and a list of all topics covered in the class, organized lecture-wise to help you.
Write the following commands on your terminal to clone this repository, so that you can run this project locally.
git clone https://github.com/Bharat2044/100xDevs-Cohort3-WebDev-and-Devops.git
π Note:
Click on the arrow sign to expand to see each topics in details with link.
Week 01 - Orientation, HTML/CSS/Basic JS
Topics Covered:
HTML Basic - Tags, Attributes, title, body, div, span, h1-h6, b, i, u, br, a, center, img, input, button... & CSS Basic - inline css, external css, color, background-color, selectors, class, id, font-size, font-weigth, border, padding, margin, flexbox... & Build some part of VS Code Landing Page.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
JavaScript Basic - Interpreted, Compiled Time Language, Dynamically Typed, Single threaded, Multithreading, Garbage collector, JavaScript Synatx, Variables, var, let, const, datatypes, numer, string, boolean, operators, functions, if/else, loops, objects, arrays, array of objects, object of objects, problem solving and solved assignment problems.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Cohort 2 Warmup Videos
Topics Covered
: VS Code Installation & HTML Basic - Tags, Attributes, Heading(h1-h6), div, span, title, body, head, p, img, a, input, button,b, br, center... & CSS Basic - Inline CSS, color, id, class, selector, color, background-color, font-size, font-weight, padding, margin, text-align, border, border-radius, box-shadow, float, flexbox & Build Some Part of Zerodha Landing Page.
Week 02 - Async JS
π Week 02 - Async JS
π» 2.1 - Async JS
Topics Covered:
Synchronous, Asynchronous Code, I/O heavy operations, fs Module, fs.readFile, fs.readFileSync, I/O bound tasks vs CPU bound tasks, Functional Arguments, Callbacks, setTimeout, Call Stack... & Solve Some Problems.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
π» 2.2 - Promises
Topics Covered:
Class and Object, Date & Map Class, Callback, setTimeOut, Promise Class, Creating promisified version of fs.readFile and Solve Some Problems.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 02 - Offline Videos
Topics Covered:
Node.js Installation, Linux Command Basic and Advanced(cd, pwd, ls, touch, mkdir, rm, mv, cat, cp, chmod, echo, head, tail, |, wc, grep, history), Bash Scripting, Vim Editor, How to solve Assignment, Solve Basic CSS Assignment, VSCode Landing Page, Callback Hell, setTimeout(), async/await, Promisified Version of readFile using async/await and Solved Some Problems
- π» 1. Bash and Terminals (Basics)
- π» 2. Bash Advance (Laisha)
- π» 3. Installing Node.js, How to solve an assignment
- π» 4. Solving VSCode Assignment
- π» 5. Callback hell, Rejects and async-await
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
- πCohort 3.0 - GitHub Assignment Repository Link
Week 03 - DOM
π Week 03 - DOM
π» 3.1 - DOM Simple
Topics Covered:
What is DOM, Why DOM, Static HTML, Dynamic HTML, Fetching Elements(querySelector, querySelectorAll, getElementById, getElementByClassName, getElementsByClassName), Updating elements(Create Stop Watch), Deleting elements(removeChild), Adding elements(createElement, appendChild) and Build Simple Todo App.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
π» 3.2 - DOM Advance
Topics Covered:
Complex DOM Manipulation, State Derived Frontends, State Derived Rendering, Component, State variable, render, and Build Simple Todo App with Add, Update and Delete Functionality.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 04 - Node.js and HTTP
Topics Covered:
What is Node.js, V8 Engine, Bun JavaScript Runtime, Node.js Project, npm, chalk module, Internal and External Packages,package.json
&package-lock.json
file & Solved Some Problems.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
π» 4.2 - HTTP Servers
Topics Covered:
HTTP Protocols, Request Response Model, Ports, Methods (GET, POST, PUT, DELETE), Response, Status Code, (2xx, 3xx, 4xx, 5xx), Body, Routes, Headers, Clients (Browser & Postman) and Created our First HTTP Server using Express.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 04 - Offline Videos
Topics Covered:
What and Why express?, Create HTTP Server using Express, Request Methods(GET, POST, PUT, DELETE) Status Code(200, 404, 500, 411, 403), Create Hospital Game Backend. What and Why is Middleware? and Solved Some Problems.
- π» Express and HTTP Server | Postman
- π» Middleware
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π¨βπ» Assignment Solution
Week 05
π Week 05
Topics Covered:
Recap Last Week(Domain name/IP, Port, Methods, Plaintext vs JSON vs HTML response, Status Codes, Body, Routes, Express), Headers, Fetch API in the Browser, Axios, Query params, Creating our own HTTP Server using Express.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
What and Why Middlewares and How it works?, Route specific middlewares, Inline and Global Middlewares, Commonly used middlewares(express.json()
,bodyParser.json()
),CORS
- Cross origin resource sharing, Why CORS? and Solved Some Problems.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 05 - Offline Videos
Topics Covered:
Git & GitHub in details, Arrow Functions, map(), reduce(), fetch API, Axios Library, GET, POST, PUT, DELETE request and solved som problems.
- π» Git and Github
- π» Map, Filter and Arrow fns
- π» Axios vs Fetch
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π¨βπ» Assignment Solution
Week 06
π Week 06
π» 6.1 - HTTP Deep Dive
Topics Covered:
What is authentication?, Auth workflow, Create an express app, Tokens and JWT (JSON Web tokens) based authentication, Tokens vs JWTs, Authorization header.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
Revision of Week 6.1, Auth Middleware, logger request, LocalStorage, Connecting Frontend with Backend for Auth App...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 06 - Offline Videos
Topics Covered:
JWT, Auth, tokens, sign(), decode(), verify() method Error Handling using try/catch block, Input Validation using Zod, MongoDB Installation and Solved Some Problems.
- π» JWT and Auth Recap
- π» Mongo Installation
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π¨βπ» Assignment Solution
Week 07 - MongoDB
π Week 07 - MongoDB
π» 7.1 - MongoDB
Topics Covered:
What is authentication?, Auth workflow, Create an express app, Tokens and JWT (JSON Web tokens) based authentication, Tokens vs JWTs, Authorization header.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
π» 7.2 - Passwords, Zod
Topics Covered:
Recap of Week 7.1, What is Hashing and Why?, Salting, bcrypt algorithm, Error Handling using try-catch, Input Validation using Zod, ans solved signin and signup endpoints.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 08 - Course Selling App
Topics Covered:
Created some backend of aCourse Selling App
, project file structure & explorep5.js-web-editor
github repository.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
Created complete backend of aCourse Selling App
.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 08 - Offline Videos
π» Mongo Deep Dive
Topics Covered:
What and Why databases?, What is MongoDB?, Some good examples, and Created some backend of aCourse Selling Website
.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 09 - React
π Week 09 - React
π» 9.1 - React Basics
Topics Covered:
What and WhyReact
, Components, State, Re-rendering, What is JSX?, useState, CreateCounter-App
using 3 diffenrnt way 1. DOM, 2. state and component and 3. React, Create Simple Todo App using React.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
π» 9.2 - React useState
Topics Covered:
useState and useEffect Hooks, Conditional Rendering, Props, useState Cleanup, Dependency Array, Mounting, Unmounting, Rendering, Create Countdown App...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
Create React project locally, Components, Hooks(useState, useEffect), dependency array, cleanup functions, fetch data from API, re-render, props, conditional-rendering...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
children-props, lists and keys, inline styling, class-based vs functional component, lifecycle methods, error boundary, react fragment and create some small app...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 10
π Week 10
Topics Covered:
Single Page Application, Routing(react-router-dom), Layout, useRef Hook, why we need useRef hook, and Create a Clock with start and stop functionality using useRef.
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
Rolling-up the State, unoptimal re-renders, Prop-Drilling, Context API, Recoils state management library...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 11
π Week 11
π» 11.1 - Custom Hooks
Topics Covered:
Custom Hooks - useCounter, useFetch, useFetch with re-fetching, usePrev, useDebounce...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
π» 11.2 - Recoil
Topics Covered:
Context API, Recoil (State Management Library), Atom & Selectors...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
Recoil (State Management Library), Atom & Selectors...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 12 - Ui/Ux by Keshav
Topics Covered:
Typography(Fonts, Font Weight, Font Size, Leading, Tracking), Colors(RGB, HSL, ...), What and Why UI/UX, User Interface (UI), User Experience (UX), UI/Frontend Designing...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
Reacp Week 12.1, UI/Frontend, Branding, Create, Vimal Pan Masala(Bolo Zubaan Kesari) Website...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 13 - Tailwind
π Week 13 - Tailwind
Topics Covered:
Learn AboutTailwind CSS
with Vite, What and Why Tailwind CSS, Colors, background-colors, fonts, text, border, radius, flexbox, grid and build some projects using react and tailwind...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
Learn about animation in tailwind, Create Sidebar and Projects...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Week 14 - TypeScript
π Week 14 - TypeScript
Topics Covered:
Learn About What and WhyTypeScript
, JavaScript vs TypeScript, TypeScript Compiler,tsconfig.json
file, Basic Data Types, number, string, boolean, null, undefined, Objects, let, const, Functions, Interface, Types...
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution
Topics Covered:
Learn about difference between Types and Interface, Arrays, Objects, Union, Intersection, Class, Abstract Class, Inheritance, extends vs implements, solve some problems
- π¨βπ» Lecture Codes
- π Notes/Slides & Articles/Blogs Link
- π Lecture Assignment
- π₯οΈ Assignment Solution