Showing preview only (703K chars total). Download the full file or copy to clipboard to get everything.
Repository: CodeWithHarry/Sigma-Web-Dev-Course
Branch: main
Commit: b0acb01fa88a
Files: 697
Total size: 572.1 KB
Directory structure:
gitextract_ht69og37/
├── .gitattributes
├── .gitignore
├── README.md
├── Video 01/
│ ├── index.html
│ └── this.txt
├── Video 02/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── Video 03/
│ ├── .vscode/
│ │ └── settings.json
│ ├── index.html
│ ├── script.js
│ └── style.css
├── Video 04/
│ ├── bookmarkmanager.html
│ ├── index.html
│ ├── script.js
│ └── style.css
├── Video 05/
│ ├── index.html
│ └── style.css
├── Video 06/
│ └── index.html
├── Video 07/
│ └── index.html
├── Video 08/
│ ├── Comprehensive List.txt
│ ├── index.html
│ └── style.css
├── Video 09/
│ ├── index.html
│ └── style.css
├── Video 10/
│ └── index.html
├── Video 100/
│ └── index.html
├── Video 101/
│ ├── css/
│ │ ├── input.css
│ │ └── output.css
│ ├── index.html
│ ├── package.json
│ └── tailwind.config.js
├── Video 102/
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── input.css
│ │ └── output.css
│ └── tailwind.config.js
├── Video 103/
│ ├── Readme.md
│ ├── index.html
│ ├── package.json
│ └── src/
│ └── index.js
├── Video 104/
│ ├── Readme.md
│ ├── index.js
│ └── package.json
├── Video 105/
│ ├── Readme.md
│ ├── index.html
│ ├── with-react/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── harry.txt
│ │ │ ├── index.html
│ │ │ ├── manifest.json
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── components/
│ │ │ ├── Footer.js
│ │ │ └── Navbar.js
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── reportWebVitals.js
│ │ └── setupTests.js
│ └── withoutreact.html
├── Video 106/
│ └── first-app/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── Card.css
│ │ │ ├── Card.jsx
│ │ │ ├── Footer.css
│ │ │ ├── Footer.jsx
│ │ │ ├── Navbar.css
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 107/
│ └── state-intro/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── Component.js
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 108/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 109/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── App_1.jsx
│ │ ├── Todo.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 11/
│ └── index.html
├── Video 110/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── Video 111/
│ └── Readme.md
├── Video 112/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 113/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── Readme.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 114/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── Video 115/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── About.jsx
│ │ │ ├── Home.jsx
│ │ │ ├── Login.jsx
│ │ │ ├── Navbar.jsx
│ │ │ └── User.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 116/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── our app.md
│ ├── package.json
│ ├── public/
│ │ └── without_context_api/
│ │ ├── App.jsx
│ │ └── components/
│ │ ├── Button.jsx
│ │ ├── Component1.jsx
│ │ └── Navbar.jsx
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── Button.jsx
│ │ │ ├── Component1.jsx
│ │ │ └── Navbar.jsx
│ │ ├── context/
│ │ │ └── context.js
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 118/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 119/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── backend/
│ │ └── server.js
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 12/
│ └── index.html
├── Video 120/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ ├── main.jsx
│ │ └── redux/
│ │ ├── counter/
│ │ │ └── counterSlice.js
│ │ └── store.js
│ └── vite.config.js
├── Video 121/
│ └── first/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── contact/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── component/
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 122/
│ └── my-app/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ └── Navbar.js
│ ├── data.json
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 123/
│ ├── comps/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── about/
│ │ │ │ └── page.js
│ │ │ ├── contact/
│ │ │ │ └── page.js
│ │ │ ├── footer/
│ │ │ │ └── page.js
│ │ │ ├── globals.css
│ │ │ ├── layout.js
│ │ │ └── page.js
│ │ ├── components/
│ │ │ └── Navbar.js
│ │ ├── jsconfig.json
│ │ ├── next.config.mjs
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ └── tailwind.config.js
│ └── website/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── contact/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ ├── Footer.js
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 124/
│ └── api-routes/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── api/
│ │ │ └── add/
│ │ │ └── route.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 125/
│ └── server-actions/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── actions/
│ │ └── form.js
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── harry.txt
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 126/
│ └── middleware/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── middleware.js
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 127/
│ └── nextauth-demo/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── api/
│ │ │ └── auth/
│ │ │ └── [...nextauth]/
│ │ │ └── route.js
│ │ ├── component/
│ │ │ └── SessionWrapper.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 128/
│ └── dynamic-routes/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── [...val]/
│ │ │ └── page.js
│ │ ├── blog/
│ │ │ └── page.js
│ │ ├── blogpost/
│ │ │ └── [slug]/
│ │ │ └── page.js
│ │ ├── error.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ ├── not-found.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 129/
│ └── layouts/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── (admin)/
│ │ │ ├── admincomments/
│ │ │ │ └── page.js
│ │ │ ├── adminlogin/
│ │ │ │ └── page.js
│ │ │ ├── adminlogout/
│ │ │ │ ├── layout.js
│ │ │ │ └── page.js
│ │ │ └── layout.js
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ ├── Footer.js
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 13/
│ └── index.html
├── Video 130/
│ ├── passop/
│ │ ├── .eslintrc.cjs
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.jsx
│ │ │ ├── components/
│ │ │ │ ├── Footer.jsx
│ │ │ │ ├── Manager.jsx
│ │ │ │ └── Navbar.jsx
│ │ │ ├── index.css
│ │ │ └── main.jsx
│ │ ├── tailwind.config.js
│ │ └── vite.config.js
│ └── passop-mongo/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── backend/
│ │ ├── package.json
│ │ └── server.js
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── Footer.jsx
│ │ │ ├── Manager.jsx
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── Video 131/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── actions/
│ │ └── useractions.js
│ ├── app/
│ │ ├── [username]/
│ │ │ └── page.js
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── api/
│ │ │ ├── auth/
│ │ │ │ └── [...nextauth]/
│ │ │ │ └── route.js
│ │ │ └── razorpay/
│ │ │ └── route.js
│ │ ├── dashboard/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ ├── login/
│ │ │ └── page.js
│ │ └── page.js
│ ├── components/
│ │ ├── Dashboard.js
│ │ ├── Footer.js
│ │ ├── Navbar.js
│ │ ├── PaymentPage.js
│ │ └── SessionWrapper.js
│ ├── db/
│ │ └── connectDb.js
│ ├── jsconfig.json
│ ├── models/
│ │ ├── Payment.js
│ │ └── User.js
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 132/
│ └── next-navigation-tutorial/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── blogpost/
│ │ │ └── [slug]/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 133/
│ └── ssr-ssg-isr/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 134/
│ └── environment-variables/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 135/
│ └── styles-in-nextjs/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ ├── styles/
│ │ └── Home.module.css
│ └── tailwind.config.js
├── Video 136/
│ └── bitlinks/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── BitLinks.postman_collection.json
│ ├── README.md
│ ├── app/
│ │ ├── [shorturl]/
│ │ │ └── page.js
│ │ ├── api/
│ │ │ └── generate/
│ │ │ └── route.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ ├── page.js
│ │ └── shorten/
│ │ └── page.js
│ ├── components/
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── lib/
│ │ └── mongodb.js
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 137/
│ └── linktree-clone/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── [handle]/
│ │ │ └── page.js
│ │ ├── api/
│ │ │ └── add/
│ │ │ └── route.js
│ │ ├── generate/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── lib/
│ │ └── mongodb.js
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 14/
│ └── index.html
├── Video 15/
│ ├── index.html
│ └── style.css
├── Video 16/
│ └── index.html
├── Video 17/
│ └── index.html
├── Video 18/
│ └── index.html
├── Video 19/
│ ├── colors.html
│ └── index.html
├── Video 20/
│ └── index.html
├── Video 21/
│ └── index.html
├── Video 22/
│ └── index.html
├── Video 23/
│ └── index.html
├── Video 24/
│ └── index.html
├── Video 25/
│ └── index.html
├── Video 26/
│ └── index.html
├── Video 27/
│ └── index.html
├── Video 28/
│ └── index.html
├── Video 29/
│ └── index.html
├── Video 30/
│ └── index.html
├── Video 31/
│ └── index.html
├── Video 32/
│ └── index.html
├── Video 33/
│ └── index.html
├── Video 34/
│ └── index.html
├── Video 35/
│ └── index.html
├── Video 36/
│ └── index.html
├── Video 38/
│ └── index.html
├── Video 39/
│ ├── grid-1.html
│ └── grid-2.html
├── Video 40/
│ └── index.html
├── Video 41/
│ └── index.html
├── Video 42/
│ ├── Demo.html
│ ├── index.html
│ └── style.css
├── Video 43/
│ └── index.html
├── Video 44/
│ └── index.html
├── Video 45/
│ └── index.html
├── Video 46/
│ └── index.html
├── Video 47/
│ ├── index.html
│ └── style.css
├── Video 48/
│ └── index.html
├── Video 49/
│ └── index.html
├── Video 50/
│ └── index.html
├── Video 51/
│ └── index.html
├── Video 52/
│ └── index.html
├── Video 53/
│ ├── assets/
│ │ └── videos/
│ │ └── video1.m4v
│ ├── index.html
│ └── style.css
├── Video 54/
│ ├── index.html
│ ├── new.js
│ └── script.js
├── Video 55/
│ ├── index.html
│ └── script.js
├── Video 56/
│ └── index.js
├── Video 57/
│ └── index.js
├── Video 58/
│ └── index.js
├── Video 59/
│ └── index.js
├── Video 60/
│ └── index.js
├── Video 61/
│ ├── index.html
│ └── index.js
├── Video 62/
│ └── index.js
├── Video 63/
│ ├── index.html
│ ├── index.js
│ ├── loops.js
│ └── mfr.js
├── Video 64/
│ └── index.html
├── Video 65/
│ └── index.html
├── Video 66/
│ └── index.html
├── Video 67/
│ ├── index.html
│ └── script.js
├── Video 68/
│ ├── index.html
│ └── script.js
├── Video 69/
│ ├── index.html
│ └── script.js
├── Video 70/
│ └── index.html
├── Video 71/
│ └── index.html
├── Video 72/
│ ├── index.html
│ └── script.js
├── Video 73/
│ ├── index.html
│ └── script.js
├── Video 74/
│ ├── eventBubbling.html
│ ├── index.html
│ └── script.js
├── Video 75/
│ ├── index.html
│ ├── promise.js
│ └── script.js
├── Video 76/
│ ├── index.html
│ └── script.js
├── Video 77/
│ ├── index.html
│ └── script.js
├── Video 78/
│ └── index.html
├── Video 79/
│ ├── index.html
│ └── script.js
├── Video 80/
│ ├── gs.js
│ ├── index.html
│ └── script.js
├── Video 81/
│ └── index.html
├── Video 82/
│ ├── index.html
│ └── script.js
├── Video 83/
│ ├── Problems.md
│ └── Solutions/
│ ├── 01_houses.js
│ └── 07_localStorage.html
├── Video 84 - Project 2 - Spotify Clone/
│ ├── css/
│ │ ├── style.css
│ │ └── utility.css
│ ├── index.html
│ ├── js/
│ │ └── script.js
│ └── songs/
│ ├── .htaccess
│ ├── Angry_(mood)/
│ │ └── info.json
│ ├── Bright_(mood)/
│ │ └── info.json
│ ├── Chill_(mood)/
│ │ └── info.json
│ ├── Dark_(mood)/
│ │ └── info.json
│ ├── Diljit/
│ │ └── info.json
│ ├── Funky_(mood)/
│ │ └── info.json
│ ├── Love_(mood)/
│ │ └── info.json
│ ├── Uplifting_(mood)/
│ │ └── info.json
│ ├── cs/
│ │ └── info.json
│ ├── karan aujla/
│ │ └── info.json
│ └── ncs/
│ └── info.json
├── Video 85/
│ ├── myserver.js
│ ├── package.json
│ └── server.js
├── Video 86/
│ ├── index.html
│ ├── main.js
│ ├── mymodule.js
│ ├── mymodule2.js
│ └── package.json
├── Video 87/
│ ├── aboutpath.js
│ ├── harry
│ ├── harry.txt
│ ├── harry2.txt
│ ├── main.js
│ ├── mainpromise.js
│ └── package.json
├── Video 88/
│ ├── Agenda.md
│ ├── main.js
│ ├── package.json
│ └── public/
│ └── harry.txt
├── Video 89/
│ ├── Agenda.md
│ ├── main.js
│ ├── package.json
│ ├── public/
│ │ └── mypage.html
│ ├── routes/
│ │ ├── blog.js
│ │ └── shop.js
│ └── templates/
│ └── index.html
├── Video 90/
│ ├── logs.txt
│ ├── main.js
│ ├── package.json
│ ├── public/
│ │ └── harry.txt
│ └── routes/
│ └── blog.js
├── Video 91/
│ └── index.js
├── Video 92/
│ ├── index.js
│ ├── package.json
│ └── views/
│ ├── index.ejs
│ └── navbar.ejs
├── Video 93/
│ ├── index.js
│ └── package.json
├── Video 94/
│ └── playground1.mongodb.js
├── Video 95/
│ └── crud.mongodb.js
├── Video 96/
│ ├── main.js
│ ├── models/
│ │ └── Todo.js
│ └── package.json
├── Video 97/
│ └── main.js
├── Video 98/
│ ├── index.html
│ ├── package.json
│ ├── setup.md
│ ├── src/
│ │ ├── input.css
│ │ └── output.css
│ └── tailwind.config.js
├── Video 99/
│ ├── main.js
│ ├── models/
│ │ └── Employee.js
│ ├── package.json
│ ├── question.md
│ └── views/
│ └── index.ejs
└── video 117/
├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src/
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
└── vite.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
================================================
FILE: .gitignore
================================================
*.mp3
node_modules
================================================
FILE: README.md
================================================
# Welcome to Sigma's Web Development Course - Hindi Web Development Tutorials! 🚀
## What's Inside:
If you've been itching to dive into the world of web development but feel lost in a sea of English tutorials, you're in the right place! Our course is exclusively in Hindi and is crafted to guide you from being an absolute beginner to a seasoned pro, one step at a time.
## Who Can Benefit?
### This course is a perfect fit for:
1. Beginners eager to start their web development journey
2. Intermediate developers looking to refine their skills
3. Individuals who prefer learning in Hindi
## What You'll Master:
### During this course, you'll delve into:
1. The fundamentals of HTML, CSS, and JavaScript
2. Both front-end and back-end development
3. How to seamlessly integrate databases
4. Real-world project implementation
5. And a whole lot more!
## The Schedule:
We're committed to your growth. Expect fresh source code additions nearly every day. Keep up the pace with our schedule and watch your skills soar! 📅
Get ready to embark on an exciting coding journey! 👨💻🌟
Ready to start? [Click here](https://www.youtube.com/playlist?list=PLu0W_9lII9agq5TrH9XLIKQvv0iaF2X3w) to access the complete YouTube playlist.
================================================
FILE: Video 01/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="video4.mp4" controls></video>
</body>
</html>
================================================
FILE: Video 01/this.txt
================================================
this is thisth8is
================================================
FILE: Video 02/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sigma Web Development Course</title>
</head>
<body>
Hey this is my first website. Sigma Harry bhai ka course achha hai.
and ye sigma course hai
</body>
</html>
================================================
FILE: Video 02/script.js
================================================
alert("Welcome to Sigma Web Development Course")
================================================
FILE: Video 02/style.css
================================================
body{
background-color: red;
color: white;
}
================================================
FILE: Video 03/.vscode/settings.json
================================================
{
"livePreview.portNumber": 3000,
"livePreview.hostIP": "192.168.1.199",
"liveServer.settings.useLocalIp": true,
"liveServer.settings.host": "192.168.1.199",
"livePreview.defaultPreviewPath": "/index.html"
}
================================================
FILE: Video 03/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>title of the page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
content
</body>
</html>
================================================
FILE: Video 03/script.js
================================================
alert("Hello")
================================================
FILE: Video 03/style.css
================================================
body{
background-color: red;
}
================================================
FILE: Video 04/bookmarkmanager.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookmark Manager - CodeWithHarry</title>
</head>
<body>
<h1>My Bookmarks - CodeWithHarry</h1>
<h2>Primary Bookmarks</h2>
<p><a target="_blank" href="https://www.google.com">Open Google</a></p>
<p><a target="_blank" href="https://www.facebook.com">Open Facebook</a></p>
<p><a target="_blank" href="https://www.quora.com">Open Quora</a></p>
<p><a target="_blank" href="https://www.codewithharry.com">Open CodeWithHarry</a></p>
<p><a target="_blank" href="https://www.youtube.com">Open YouTube</a></p>
<h2>Secondary Bookmarks</h2>
<p><a target="_blank" href="https://www.wikipedia.com">Open Wikipedia</a></p>
<p><a target="_blank" href="https://www.stackoverflow.com">Open Stackoverflow</a></p>
</body>
</html>
================================================
FILE: Video 04/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Bookmarks - CodeWithHarry</title>
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
<h1>My Bookmarks - CodeWithHarry using h1</h1>
<h2>Main Bookmarks - CodeWithHarry using h2</h2>
<h3>Main Bookmarks - CodeWithHarry using h3</h3>
<h4>Main Bookmarks - CodeWithHarry using h4</h4>
<h5>Main Bookmarks - CodeWithHarry using h5</h5>
<h6>Main Bookmarks - CodeWithHarry using h6</h6>
<p style="background-color: thistle;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia hic cupiditate maxime, quaerat, iusto nobis porro fuga harum aut laboriosam ab quos animi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit totam maiores, necessitatibus sed nam illum quas, possimus debitis recusandae sunt repellendus, unde officiis corrupti obcaecati aliquam ratione eum voluptates eius. Exercitationem distinctio possimus voluptas? Voluptate laborum autem libero non laudantium a incidunt maiores quas reiciendis illum, beatae quasi hic provident mollitia optio quisquam quod suscipit atque rem! Pariatur excepturi, quo incidunt atque enim reiciendis ullam, voluptatibus laborum quos quas autem, nam a eum eligendi maxime sit deleniti eveniet ea non commodi. Similique laboriosam quos, natus doloribus, excepturi adipisci tenetur, nihil id unde deserunt cupiditate explicabo saepe beatae animi hic et?</p>
</body>
</html>
================================================
FILE: Video 04/script.js
================================================
================================================
FILE: Video 04/style.css
================================================
body{
background-color: rgb(239, 206, 223);
}
================================================
FILE: Video 05/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img height="230" src="image.png" alt="Train image">
<br>
<table>
<caption>Employee Details</caption>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Fav Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>Harry</td>
<td>Programmer</td>
<td>JavaScript</td>
</tr>
<tr>
<td colspan="2">Sam</td>
<td rowspan="2">Java</td>
</tr>
<tr>
<td colspan="2">Sam</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Sam</td>
<td rowspan="2">foot</td>
</tr>
</tfoot>
</table>
<ul type="square">
<li>Harry</li>
<li>Rohan</li>
<li>Shubham</li>
</ul>
<ol type="A">
<li>Harry</li>
<li>Rohan</li>
<li>Shubham</li>
</ol>
</body>
</html>
================================================
FILE: Video 05/style.css
================================================
td{
border: 2px solid black;
}
================================================
FILE: Video 06/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a page which contains description about harry - the sigma">
<title>About Harry - CodeWithHarry</title>
</head>
<body>
<h1>Harry</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, inventore laboriosam? Libero qui, a illo laborum, in aspernatur maxime temporibus quibusdam ullam quia obcaecati culpa iste est odit, voluptate quis explicabo reprehenderit. Autem cum totam laudantium possimus ipsam. Ut voluptates consectetur perferendis amet velit odit.</p>
</body>
</html>
================================================
FILE: Video 07/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms - Lets learn it</title>
</head>
<body>
<h1>Form to apply for Sigma Web Development course - TA </h1>
<form action="post">
<div>
<label for="username">Enter your Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username" autofocus>
</div>
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
</div>
<div>
<label for="comment">Enter your comment</label>
<br>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea>
</div>
<div>
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
</div>
</form>
</body>
</html>
================================================
FILE: Video 08/Comprehensive List.txt
================================================
Block Elements (Most Commonly Used First)
<div>: A generic container for flow content.
<p>: Paragraph.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings.
<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.
<form>: A section containing form controls.
<table>: Table.
<section>: A standalone section of a document.
<header>: A container for introductory content or a set of navigational links.
<footer>: Footer of a section or page.
<nav>: A section of a page that contains navigation links.
<article>: A self-contained composition in a document.
<aside>: A section of a page that contains information indirectly related to the main content.
<main>: The main content of a document.
<fieldset>: A set of form controls grouped under a common name.
<blockquote>: A block of text that is a quotation from another source.
<pre>: Preformatted text.
<canvas>: A container used to draw graphics via JavaScript.
<dl>: Description list.
<dt>: Term in a description list.
<dd>: Description in a description list.
<figure>: Any content that is referenced from the main content.
<figcaption>: A caption for a <figure> element.
<address>: Contact information for the author or owner of the document.
<hr>: A thematic break or a horizontal rule.
<tfoot>: Footer of a table.
Inline Elements (Most Commonly Used First)
<a>: Anchor or hyperlink.
<img>: Image.
<span>: Generic inline container.
<input>: Input field.
<label>: Label for a form element.
<strong>: Strong emphasis.
<em>: Emphasized text.
<br>: Line break.
<code>: Code snippet.
<b>: Bold text.
<i>: Italic text.
<u>: Underlined text.
<small>: Smaller text.
<sub>: Subscript.
<sup>: Superscript.
<mark>: Marked or highlighted text.
<q>: Short inline quotation.
<cite>: Citation.
<kbd>: Keyboard input.
<samp>: Sample output.
<var>: Variable in a mathematical expression or programming context.
<time>: Time.
<abbr>: Abbreviation.
<data>: Machine-readable translation of content.
<acronym>: Acronym (Not supported in HTML5).
================================================
FILE: Video 08/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline and Block Elements - HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hey I am a para</p>
<a href="https://google.com">Google</a>
<div> I am a block element</div>
<span>I am span and I am inline</span>
<a href="">yes he is inline</a>
<!-- Quick Quiz:
Without using br tag, write a vertically aligned form asking for name, city and pincode of a user.
Everyone must comment -->
</body>
</html>
================================================
FILE: Video 08/style.css
================================================
p{
background-color: aquamarine;
}
a{
background-color: rgb(242, 160, 122);
}
div{
background-color: yellow;
}
span{
background-color: rgb(198, 165, 230);
}
================================================
FILE: Video 09/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID and Classes in HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="firstdiv" class="red bg-yellow">First</div>
<div id="seconddiv">Second</div>
<span class="red"></span>
</body>
</html>
================================================
FILE: Video 09/style.css
================================================
.red{
color: red;
}
.bg-yellow{
background-color: yellow;
}
#firstdiv{
/* background-color: red; */
}
================================================
FILE: Video 10/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="video.mp4" height="255" controls loop muted poster="download.jpg"></video>
<audio src="sachin.mp3" controls autoplay loop muted></audio>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<img src="img.svg" alt="My Svg Image">
<!-- <iframe src="https://www.codewithharry.com/tutorial/html-iframes/" width="322" height="444"></iframe> -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/tVzUXW6siu0?si=NuQZuYqrMHn7Pg-i&start=739" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<!-- Quick Quiz -->
<!-- Create a website which shows videos of different category and audios of different categories.
You can use YouTube videos in an iframe using YouTube's embedding feature -->
</body>
</html>
================================================
FILE: Video 100/index.html
================================================
<!-- Design layout.png using node.js and tailwind css -->
================================================
FILE: Video 101/css/input.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: Video 101/css/output.css
================================================
/*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.bottom-0 {
bottom: 0px;
}
.left-\[19\%\] {
left: 19%;
}
.top-0 {
top: 0px;
}
.top-\[50vh\] {
top: 50vh;
}
.top-\[100vh\] {
top: 100vh;
}
.top-\[70vh\] {
top: 70vh;
}
.top-\[90vh\] {
top: 90vh;
}
.top-\[80vh\] {
top: 80vh;
}
.top-\[84vh\] {
top: 84vh;
}
.z-10 {
z-index: 10;
}
.m-2 {
margin: 0.5rem;
}
.m-3 {
margin: 0.75rem;
}
.m-4 {
margin: 1rem;
}
.m-auto {
margin: auto;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.my-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.mx-7 {
margin-left: 1.75rem;
margin-right: 1.75rem;
}
.mx-10 {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
.ml-0 {
margin-left: 0px;
}
.mr-4 {
margin-right: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-60 {
margin-top: 15rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-24 {
margin-top: 6rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.flex {
display: flex;
}
.hidden {
display: none;
}
.h-1 {
height: 0.25rem;
}
.h-7 {
height: 1.75rem;
}
.h-\[0\.2px\] {
height: 0.2px;
}
.h-\[1px\] {
height: 1px;
}
.h-6 {
height: 1.5rem;
}
.h-16 {
height: 4rem;
}
.h-12 {
height: 3rem;
}
.w-1\/2 {
width: 50%;
}
.w-16 {
width: 4rem;
}
.w-8 {
width: 2rem;
}
.w-\[90\%\] {
width: 90%;
}
.w-full {
width: 100%;
}
.w-6 {
width: 1.5rem;
}
.w-12 {
width: 3rem;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.cursor-pointer {
cursor: pointer;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.self-start {
align-self: flex-start;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-xl {
border-radius: 0.75rem;
}
.border-\[1px\] {
border-width: 1px;
}
.border-x-0 {
border-left-width: 0px;
border-right-width: 0px;
}
.border-x-gray-600 {
--tw-border-opacity: 1;
border-left-color: rgb(75 85 99 / var(--tw-border-opacity));
border-right-color: rgb(75 85 99 / var(--tw-border-opacity));
}
.border-y-black {
--tw-border-opacity: 1;
border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-y-gray-600 {
--tw-border-opacity: 1;
border-top-color: rgb(75 85 99 / var(--tw-border-opacity));
border-bottom-color: rgb(75 85 99 / var(--tw-border-opacity));
}
.bg-\[\#16181c\] {
--tw-bg-opacity: 1;
background-color: rgb(22 24 28 / var(--tw-bg-opacity));
}
.bg-\[\#1d9bf0\] {
--tw-bg-opacity: 1;
background-color: rgb(29 155 240 / var(--tw-bg-opacity));
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.p-1 {
padding: 0.25rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.text-center {
text-align: center;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.text-blue-400 {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity));
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
.opacity-15 {
opacity: 0.15;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-80 {
opacity: 0.8;
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.invert {
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-lg {
--tw-backdrop-blur: blur(16px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-2xl {
--tw-backdrop-blur: blur(40px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-3xl {
--tw-backdrop-blur: blur(64px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
@media (min-width: 768px) {
.md\:container {
width: 100%;
}
@media (min-width: 640px) {
.md\:container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.md\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.md\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.md\:container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.md\:container {
max-width: 1536px;
}
}
}
.hover\:cursor-pointer:hover {
cursor: pointer;
}
.hover\:rounded-full:hover {
border-radius: 9999px;
}
.hover\:bg-gray-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.hover\:bg-gray-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.hover\:text-blue-500:hover {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.hover\:text-green-500:hover {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.hover\:text-pink-500:hover {
--tw-text-opacity: 1;
color: rgb(236 72 153 / var(--tw-text-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
@media (min-width: 768px) {
.md\:mx-16 {
margin-left: 4rem;
margin-right: 4rem;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:w-\[70\%\] {
width: 70%;
}
.md\:w-fit {
width: -moz-fit-content;
width: fit-content;
}
.md\:items-end {
align-items: flex-end;
}
.md\:justify-start {
justify-content: flex-start;
}
.md\:px-11 {
padding-left: 2.75rem;
padding-right: 2.75rem;
}
.md\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.md\:py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
}
================================================
FILE: Video 101/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home/X</title>
<link rel="shortcut icon" href="https://abs.twimg.com/favicons/twitter-pip.3.ico">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link rel="stylesheet" href="./css/output.css">
</head>
<body class=" bg-black text-white">
<div class="flex md:container mx-auto my-4">
<div class="first w-16 md:w-[70%]">
<div class="sidebar flex md:items-end flex-col sticky top-0">
<div class="logo invert my-4 self-start mx-2 md:mx-16">
<svg viewBox="0 0 24 24" aria-hidden="true"
class="w-8 m-auto r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp r-1nao33i r-16y2uox r-8kz0gk">
<g>
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z">
</path>
</g>
</svg>
</div>
<ul class="flex flex-col text-2xl space-y-3 md:px-11 font-bold w-full ">
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> home </span> <span
class="hidden md:block">Home</span>
</li>
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> search </span><span
class="hidden md:block">Explore</span>
</li>
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> notifications </span><span
class="hidden md:block">Notifications</span>
</li>
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> message </span><span
class="hidden md:block">Grok</span>
</li>
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> lists </span><span
class="hidden md:block">Lists</span>
</li>
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> bookmarks </span><span
class="hidden md:block">Bookmarks</span>
</li>
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> Group </span><span
class="hidden md:block">Communities</span>
</li>
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> box </span><span
class="hidden md:block">Premium</span>
</li>
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> person </span><span
class="hidden md:block">Profile</span>
</li>
<li
class="flex md:justify-start items-center gap-3 justify-center mr-4 md:w-fit hover:bg-gray-900 hover:cursor-pointer px-5 py-3 hover:rounded-full">
<span class="text-3xl material-symbols-outlined"> pending </span><span
class="hidden md:block">More</span>
</li>
<li>
<div class="button w-full text-center my-4">
<button
class="hidden md:block bg-[#1d9bf0] px-20 text-xl rounded-full py-3 text-white">Post</button>
<button class="md:hidden bg-[#1d9bf0] px-2 md:px-4 text-xl rounded-full py-1 md:py-3 text-white">
<span class="material-symbols-outlined">
edit
</span>
</button>
</div>
</li>
</ul>
<div class="userprofile w-full mt-10 justify-end mx-10 hidden md:flex">
<div
class="item p-3 items-center gap-5 justify-end mx-5 flex hover:bg-gray-800 cursor-pointer rounded-full w-fit">
<div class="p1"><img class="w-12 h-12"
src="https://pbs.twimg.com/profile_images/1522060025854066688/IZs_lylH_bigger.png"
alt="vercel"></div>
<div class="p2 ">
<div>Haris Ali Khan</div>
<div class="text-gray-500">@CodeWithHarry</div>
</div>
<div class="p3 text-2xl">
...
</div>
</div>
</div>
</div>
</div>
<div class="second w-full border-[1px] border-x-gray-600 border-y-black ">
<div class="top flex p-3 sticky top-0 bg-black backdrop-blur-3xl opacity-80">
<div class="absolute w-16 h-1 rounded-full bg-blue-500 bottom-0 left-[19%] z-10"></div>
<div class="left bg-red-3001 w-1/2 flex justify-center font-bold text-lg">For You</div>
<div class="right bg-green-3001 w-1/2 flex justify-center font-bold text-lg">Following</div>
<div class="settings mx-2"><span class="material-symbols-outlined">
settings
</span></div>
</div>
<div class="h-[1px] w-full bg-gray-700"></div>
<div class="whatishapp flex gap-4 my-3">
<div class="img m-2 w-16">
<img src="https://pbs.twimg.com/profile_images/1522060025854066688/IZs_lylH_bigger.png" alt="">
</div>
<div class="w-full">
<input class="w-full h-7 my-2 text-xl bg-black outline-none text-white" type="text"
placeholder="What is happening?!">
<div class="text-blue-400 flex items-center gap-1 w-full my-4">
<span class="material-symbols-outlined ">
globe_asia
</span>
<span class="font-bold">Everyone can reply</span>
</div>
<div class="w-[90%] h-[0.2px] bg-gray-700 my-3"></div>
<div class="flex justify-between">
<div class="blueicons flex gap-2 text-blue-400 items-center">
<span class="material-symbols-outlined cursor-pointer">
image
</span>
<span class="material-symbols-outlined cursor-pointer">
gif
</span>
<span class="material-symbols-outlined cursor-pointer">
ballot
</span>
<span class="material-symbols-outlined cursor-pointer">
sentiment_satisfied
</span>
<span class="material-symbols-outlined cursor-pointer">
calendar_month
</span>
<span class="material-symbols-outlined cursor-pointer">
pin_drop
</span>
</div>
<div class="postbtn">
<button
class="bg-[#1d9bf0] px-6 mx-5 text-sm rounded-full py-2 text-white font-bold">Post</button>
</div>
</div>
</div>
</div>
<div class="posts">
<div class="post border-[1px] border-y-gray-600 border-x-0 ">
<div class="flex">
<div class="image m-4">
<img class="w-16"
src="https://pbs.twimg.com/profile_images/1697299503198646273/GTnwCVUC_x96.jpg" alt="">
</div>
<div class="content my-3">
<span class="font-bold hover:underline cursor-pointer text-white">Elon Musk</span> <span
class="text-gray-500">@ElonMusk · 6h </span>
<div class="postimg m-2 ml-0"> I spent $44 billion for this app and now Lizard boy just
decided to hit copy and paste.
It’s personal now.
See you in the cage, Zuck.
</div>
<div class="icons flex justify-between mx-4 my-4 text-sm text-gray-600">
<div
class="icon flex items-center justify-center hover:text-blue-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
chat_bubble
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-green-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
repeat
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-pink-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
Favorite
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-blue-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
bar_chart
</span> 1k
</div>
</div>
</div>
</div>
</div>
<div class="post">
<div class="flex">
<div class="image m-4">
<img class="w-16"
src="https://pbs.twimg.com/profile_images/1522060025854066688/IZs_lylH_bigger.png"
alt="">
</div>
<div class="content my-3">
<span class="font-bold hover:underline cursor-pointer text-white">CodeWithHarry</span> <span
class="text-gray-500">@CodeWithHarry · 6h </span>
<div>Living legend</div>
<div class="postimg m-4 ml-0">
<img class="rounded-xl"
src="https://pbs.twimg.com/media/GEGqnodacAAoyCO?format=jpg&name=900x900" alt="">
</div>
<div class="icons flex justify-between mx-4 my-4 text-sm text-gray-600">
<div
class="icon flex items-center justify-center hover:text-blue-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
chat_bubble
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-green-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
repeat
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-pink-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
Favorite
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-blue-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
bar_chart
</span> 1k
</div>
</div>
</div>
</div>
</div>
<div class="post">
<div class="flex">
<div class="image m-4">
<img class="w-8"
src="https://pbs.twimg.com/profile_images/1724504100136439808/J8k8HnSD_bigger.png"
alt="">
</div>
<div class="content my-3">
<span class="font-bold hover:underline cursor-pointer text-white"> non aesthetic
things</span> <span class="text-gray-500">@CodeMeme · 6h </span>
<div>This is amazing coding meme</div>
<div class="postimg m-4 ml-0">
<img class="rounded-xl w-full"
src="https://s3.amazonaws.com/rails-camp-tutorials/blog/programming+memes/works-doesnt-work.jpg"
alt="">
</div>
<div class="icons flex justify-between mx-4 my-4 text-sm text-gray-600">
<div
class="icon flex items-center justify-center hover:text-blue-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
chat_bubble
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-green-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
repeat
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-pink-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
Favorite
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-blue-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
bar_chart
</span> 1k
</div>
</div>
</div>
</div>
</div>
<div class="post">
<div class="flex">
<div class="image m-4">
<img class="w-16"
src="https://pbs.twimg.com/profile_images/1522060025854066688/IZs_lylH_bigger.png"
alt="">
</div>
<div class="content my-3">
<span class="font-bold hover:underline cursor-pointer text-white"> non aesthetic
things</span> <span class="text-gray-500">@PicturesFoIder · 6h </span>
<div>legend</div>
<div class="postimg m-4 ml-0">
<img class="rounded-xl"
src="https://pbs.twimg.com/media/GEGqnodacAAoyCO?format=jpg&name=900x900" alt="">
</div>
<div class="icons flex justify-between mx-4 my-4 text-sm text-gray-600">
<div
class="icon flex items-center justify-center hover:text-blue-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
chat_bubble
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-green-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
repeat
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-pink-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
Favorite
</span> 1k
</div>
<div
class="icon flex items-center justify-center hover:text-blue-500 hover:bg-gray-900 hover:rounded-full p-1 hover:cursor-pointer">
<span class="material-symbols-outlined">
bar_chart
</span> 1k
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="third w-full bg-red-5044 hidden md:block">
<div class="search m-3">
<input type="text" class="w-1/2 rounded-full bg-[#16181c] text-white px-4 py-2" placeholder="Search">
</div>
<div class="whats sticky top-0 m-3 bg-[#16181c] w-1/2 py-5 rounded-xl space-y-3">
<h1 class="text-xl font-bold px-3">Whats Happening</h1>
<div class="item p-3 hover:bg-gray-800 cursor-pointer px-3">
<div class="text-sm text-gray-200">Trending in India</div>
<div class="font-bold">#Orry</div>
<div class="text-sm text-gray-200">40.2k Posts</div>
</div>
<div class="item p-3 hover:bg-gray-800 cursor-pointer px-3">
<div class="text-sm text-gray-200">Trending in India</div>
<div class="font-bold">#Harry</div>
<div class="text-sm text-gray-200">40.2k Posts</div>
</div>
<div class="item p-3 hover:bg-gray-800 cursor-pointer px-3">
<div class="text-sm text-gray-200">Trending in India</div>
<div class="font-bold">#Sigma Course</div>
<div class="text-sm text-gray-200">40.2k Posts</div>
</div>
<div class="item p-3 hover:bg-gray-800 cursor-pointer px-3">
<div class="text-sm text-gray-200">Trending in India</div>
<div class="font-bold">#CodeWithHarry</div>
<div class="text-sm text-gray-200">40.2k Posts</div>
</div>
</div>
<div class="who sticky top-[50vh] m-3 bg-[#16181c] w-1/2 py-5 rounded-xl space-y-1">
<h1 class="text-xl font-bold px-3">Who To Follow</h1>
<div class="item p-3 items-center gap-2 flex justify-between hover:bg-gray-800 cursor-pointer">
<div class="flex gap-3">
<div class="p1"><img class="w-12 h-12"
src="https://pbs.twimg.com/profile_images/1652878800311427073/j0-3owJd_bigger.jpg"
alt="vercel"></div>
<div class="p2 ">
<div>Vercel</div>
<div class="text-gray-500">@vercel</div>
</div>
</div>
<div class="p3">
<button class="bg-white text-black px-5 py-2 rounded-full font-bold">Follow</button>
</div>
</div>
<div class="item p-3 items-center gap-2 flex justify-between hover:bg-gray-800 cursor-pointer">
<div class="flex gap-3">
<div class="p1"><img class="w-12 h-12"
src="https://pbs.twimg.com/profile_images/446356636710363136/OYIaJ1KK_bigger.png"
alt="vercel"></div>
<div class="p2 ">
<div>React</div>
<div class="text-gray-500">@react</div>
</div>
</div>
<div class="p3">
<button class="bg-white text-black px-5 py-2 rounded-full font-bold">Follow</button>
</div>
</div>
<div class="item p-3 items-center gap-2 flex justify-between hover:bg-gray-800 cursor-pointer">
<div class="flex gap-3">
<div class="p1"><img class="w-12 h-12"
src="https://pbs.twimg.com/profile_images/989513875124117504/UNMIb20k_bigger.jpg"
alt="vercel"></div>
<div class="p2 ">
<div>Shad.js</div>
<div class="text-gray-500">@shad</div>
</div>
</div>
<div class="p3">
<button class="bg-white text-black px-5 py-2 rounded-full font-bold">Follow</button>
</div>
</div>
<div class="text-blue-600 px-3 cursor-pointer hover:underline my-5">Show More</div>
</div>
<div class="terms sticky top-[84vh] m-3 text-xs text-gray-500 px-3 w-1/2 py-5 space-y-1">
<span class="hover:underline cursor-pointer mr-2">Terms of Service</span>
<span class="hover:underline cursor-pointer mr-2">Privacy Policy</span>
<span class="hover:underline cursor-pointer mr-2">Cookie Policy</span>
<span class="hover:underline cursor-pointer mr-2">Accessibility</span>
<span class="hover:underline cursor-pointer mr-2">Ads info</span>
<span class="hover:underline cursor-pointer mr-2">More</span>
<span class="hover:underline cursor-pointer mr-2">© 2024 X Corp.</span>
</div>
</div>
</div>
</body>
</html>
================================================
FILE: Video 101/package.json
================================================
{
"name": "video-101",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx tailwindcss -i ./css/input.css -o ./css/output.css --watch",
"dev": "vite"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.4.1"
},
"dependencies": {
"vite": "^5.0.11"
}
}
================================================
FILE: Video 101/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*html"],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: Video 102/index.html
================================================
<!-- Design layout.png using node.js and tailwind css -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="src/output.css">
</head>
<body class="bg-black text-white">
<nav class="flex bg-slate-950 text-white py-4">
<ul class="flex gap-4">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<main>
<div class="container mx-auto my-6">
<div class="card flex">
<div class="img">
<img src="https://i.ytimg.com/vi/tVzUXW6siu0/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLACwWOixJVrKLFindK92kYMgTcQbw"
alt="">
</div>
<div class="text flex flex-col">
<h1 class="font-bold text-2xl mx-4">Installing VS Code & How websites work | Sigma Web dev course #1
</h1>
<div class="text-lg my-4 mx-4 text-gray-400"> CodeWithHarry • 297K views • 3 months ago</div>
</div>
</div>
</div>
</main>
</body>
</html>
================================================
FILE: Video 102/package.json
================================================
{
"name": "design-the-layout",
"version": "1.0.0",
"description": "This is the solution for sigma exercise number 17",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vite"
},
"keywords": [
"cwh",
"sigma",
"javascript",
"tailwind"
],
"author": "Harry",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.4.1"
},
"dependencies": {
"vite": "^5.0.12"
}
}
================================================
FILE: Video 102/src/input.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: Video 102/src/output.css
================================================
/*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.gap-4 {
gap: 1rem;
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-slate-950 {
--tw-bg-opacity: 1;
background-color: rgb(2 6 23 / var(--tw-bg-opacity));
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.py-9 {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
================================================
FILE: Video 102/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*.html"],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: Video 103/Readme.md
================================================
Types of Hosting:
1. Shared Hosting
2. Dedicated Hosting
3. Managed Hosting
Linux Tutorial: https://www.youtube.com/watch?v=_tCY-c-sPZc
================================================
FILE: Video 103/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first hosted website</title>
<style>
body{
background-color: rgb(11, 103, 232);
color: white;
}
</style>
</head>
<body>
<div class="container">
This is my first hosted website
</div>
</body>
</html>
================================================
FILE: Video 103/package.json
================================================
{
"name": "video-103",
"version": "1.0.0",
"description": "Types of Hosting:\r 1. Shared Hosting\r 2. Dedicated Hosting\r 3. Managed Hosting",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^16.4.0",
"express": "^4.18.2"
}
}
================================================
FILE: Video 103/src/index.js
================================================
const express = require('express')
require('dotenv').config()
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
================================================
FILE: Video 104/Readme.md
================================================
## How to host Node.js apps on Ubuntu
### Step 1 - Installing Node.js & build essentials
```
curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
```
Now install build essentials
```
sudo apt-get install build-essential
```
### Step 2 - Create a sample Node.js app
You can also use your own app if you want to host it. Otherwise if you are just trying out, you can use a sample app.
### Step 3 - Install pm2 & launch your app
Install pm2 package which is a process manager for Node.js applications
```
sudo npm install -g pm2
```
Now launch your app using this command
```
pm2 start index.js
```
### Step 4 - Install nginx
Nginx is a web server which we will be using as a proxy
```
sudo apt install nginx
```
Now edit the file at /etc/nginx/sites-available/default using following command
```
sudo nano /etc/nginx/sites-available/default
```
We want this file to look like this:
```
. . .
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
...
```
### Step 5 - Test and restart nginx
Test and restart nginx using following commands
```
sudo nginx -t
```
Now restart using:
```
sudo systemctl restart nginx
```
================================================
FILE: Video 104/index.js
================================================
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
================================================
FILE: Video 104/package.json
================================================
{
"name": "hosting-node.js-apps",
"version": "1.0.0",
"description": "```\r curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash - &&\\\r sudo apt-get install -y nodejs\r ```\r Now install build essentials\r ```\r sudo apt-get install build-essential\r ```",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
}
}
================================================
FILE: Video 105/Readme.md
================================================
# Why React?
- We can use states which means that once we update the state variable, it changes across the page
- We can split our app into multiple components and reuse those components
- React uses a virtual DOM to efficiently update the UI which is better than updating content using DOM Manipulation
- Debugging and maintainance is easy
================================================
FILE: Video 105/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why React?</title>
<style>
.box{
color: red;
height: 121px;
width: 121px;
border: 2px solid black;
padding: 3px;
}
</style>
</head>
<body>
<script>
let box1 = "I am box 1";
let box2 = "I am box 2";
let box3 = "I am box 3";
</script>
<div class="box box1">1</div>
<div class="box box2">I am box 2</div>
<div class="box box3">I am box 3</div>
<button>click me</button>
<script>
setTimeout(() => {
document.querySelector(".box1").innerHTML = "Hey"
}, 1000);
setTimeout(() => {
document.querySelector(".box2").innerHTML = "Hi"
}, 2000);
setTimeout(() => {
document.querySelector(".box3").innerHTML = "Hello"
}, 3000);
</script>
</body>
</html>
================================================
FILE: Video 105/with-react/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: Video 105/with-react/README.md
================================================
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
================================================
FILE: Video 105/with-react/package.json
================================================
{
"name": "with-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: Video 105/with-react/public/harry.txt
================================================
Hey harry
================================================
FILE: Video 105/with-react/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
================================================
FILE: Video 105/with-react/public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: Video 105/with-react/public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: Video 105/with-react/src/App.css
================================================
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
================================================
FILE: Video 105/with-react/src/App.js
================================================
import logo from './logo.svg';
import { useState } from 'react';
import "./App.css"
import Navbar from './components/Navbar';
import Footer from './components/Footer';
function App() {
const [value, setValue] = useState(0)
return (
<div className="App">
<Navbar logoText="CodeWithCWHHarry"/>
<div className='value'> {value}</div>
<button onClick={()=>{setValue(value + 1)}}>Click me</button>
<Footer/>
</div>
);
}
export default App;
================================================
FILE: Video 105/with-react/src/App.test.js
================================================
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
================================================
FILE: Video 105/with-react/src/components/Footer.js
================================================
import React from 'react'
const Footer = () => {
return (
<div>
I am a footer2
</div>
)
}
export default Footer
================================================
FILE: Video 105/with-react/src/components/Navbar.js
================================================
import React from 'react'
import Footer from './Footer'
const Navbar = (props) => {
return (
<div>
<div className="logo">{props.logoText}</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
<Footer/>
</div>
)
}
export default Navbar
================================================
FILE: Video 105/with-react/src/index.css
================================================
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
================================================
FILE: Video 105/with-react/src/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
================================================
FILE: Video 105/with-react/src/reportWebVitals.js
================================================
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
================================================
FILE: Video 105/with-react/src/setupTests.js
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
================================================
FILE: Video 105/withoutreact.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="counter">0</div>
<button id="btn">Click me</button>
<script>
document.getElementById("btn").addEventListener("click", ()=>{
let num = parseInt(document.getElementById("counter").innerHTML)
document.getElementById("counter").innerHTML = num + 1;
})
</script>
</body>
</html>
================================================
FILE: Video 106/first-app/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 106/first-app/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 106/first-app/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 106/first-app/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 106/first-app/package.json
================================================
{
"name": "first-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.0.8"
}
}
================================================
FILE: Video 106/first-app/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 106/first-app/src/App.jsx
================================================
import Footer from "./components/Footer"
import Navbar from "./components/Navbar"
import Card from "./components/Card"
function App() {
return (
<>
<Navbar />
<div className="cards">
<Card title="card 1" description="card 1 desc" />
<Card title="card 2" description="card 2 desc" />
<Card title="card 3" description="card 3 desc" />
<Card title="card 4" description="card 4 desc" />
</div>
<Footer />
</>
)
}
export default App
================================================
FILE: Video 106/first-app/src/components/Card.css
================================================
.card{
width: 20vw;
border: 2px solid black;
margin: 34px;
height: 300px;
}
================================================
FILE: Video 106/first-app/src/components/Card.jsx
================================================
import React from 'react'
import "./Card.css"
const Card = (props) => {
return (
<div className='card' style={{overflow: "hidden" }}>
<img src="https://cdn.shopify.com/s/files/1/0306/6419/6141/articles/coding_languages.png?v=1619126283" alt="" width={333} style={{border: "2px solid black"}} />
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
)
}
export default Card
================================================
FILE: Video 106/first-app/src/components/Footer.css
================================================
.footer{
text-align: center;
background-color: rgb(41, 38, 38);
color: white;
width: 100%;
position: fixed;
bottom: 0;
}
================================================
FILE: Video 106/first-app/src/components/Footer.jsx
================================================
import React from 'react'
import "./Footer.css"
const Footer = () => {
return (
<div className='footer'>
Copyright © www.codewithharry.com | All rights reserved
</div>
)
}
export default Footer
================================================
FILE: Video 106/first-app/src/components/Navbar.css
================================================
nav, ul{
display: flex;
}
li{
list-style-type: none;
}
ul{
gap: 34px;
}
nav{
background-color: beige;
padding: 23px;
}
================================================
FILE: Video 106/first-app/src/components/Navbar.jsx
================================================
import React from 'react'
import "./Navbar.css"
const Navbar = () => {
return (
<div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
)
}
export default Navbar
================================================
FILE: Video 106/first-app/src/index.css
================================================
*{
padding: 0;
margin: 0;
}
.cards{
display: flex;
}
================================================
FILE: Video 106/first-app/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: Video 106/first-app/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 107/state-intro/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 107/state-intro/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 107/state-intro/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 107/state-intro/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo List</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 107/state-intro/package.json
================================================
{
"name": "state-intro",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.0.8"
}
}
================================================
FILE: Video 107/state-intro/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 107/state-intro/src/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>The count is {count}</div>
<button onClick={()=>{setCount(count + 1)}}>Update count</button>
</>
)
}
export default App
================================================
FILE: Video 107/state-intro/src/Component.js
================================================
import React from 'react'
const Component = () => {
return (
<div>
<div className="container flex">
<div className="item">Harry</div>
<div className="item">Rohan</div>
<div className="item">Izhan</div>
<div className="item">Harshita</div>
</div>
<div className="itemcontainer">
<div className="item this">
j
</div>
</div>
</div>
)
}
export default Component
================================================
FILE: Video 107/state-intro/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: Video 107/state-intro/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: Video 107/state-intro/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 108/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 108/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 108/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 108/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 108/package.json
================================================
{
"name": "video-108",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.0.8"
}
}
================================================
FILE: Video 108/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 108/src/App.jsx
================================================
import { useState, useEffect } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Navbar from './components/Navbar'
function App() {
const [count, setCount] = useState(0)
const [first, setFirst] = useState(0)
const [color, setColor] = useState(0)
useEffect(() => {
alert("Count was changed")
setColor(color + 1)
}, [count])
return (
<>
{/* <Navbar color={"navy " + "blue" + color} /> */}
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
================================================
FILE: Video 108/src/components/Navbar.jsx
================================================
import React, { useEffect } from 'react'
const Navbar = ({ color }) => {
// Case 1: Run on every render
useEffect(() => {
alert("Hey I will run on every render")
})
// Case 2: Run only on first render
useEffect(() => {
alert("Hey welcome to my page. This is the first render")
}, [])
// Case 3: Run only when certain values change
useEffect(() => {
alert("Hey I am running because color was changed")
}, [color])
// Example of Cleanup function
useEffect(() => {
alert("Hey welcome to my page. This is the first render of app.jsx")
return () => {
alert("component was unmounted")
}
}, [])
return (
<div>
I am navbar of {color} color hehe..
</div>
)
}
export default Navbar
================================================
FILE: Video 108/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: Video 108/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
// <React.StrictMode>
<App />
// </React.StrictMode>,
)
================================================
FILE: Video 108/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 109/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 109/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 109/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 109/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 109/package.json
================================================
{
"name": "video-109",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.0.8"
}
}
================================================
FILE: Video 109/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 109/src/App.jsx
================================================
import { useState, useEffect, useRef } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
const btnRef = useRef()
useEffect(() => {
console.log(`First rendering..`)
btnRef.current.style.backgroundColor = "red"
}, []);
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button ref={btnRef} onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
<button onClick={()=>{btnRef.current.style.display = "none"}}>Change me</button>
</>
)
}
export default App
================================================
FILE: Video 109/src/App_1.jsx
================================================
import { useState, useEffect, useRef } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
const a = useRef(0)
useEffect(() => {
a.current = a.current + 1
console.log(`rerendering and the value of a is ${a.current}..`)
});
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
================================================
FILE: Video 109/src/Todo.jsx
================================================
import React from 'react'
const Todo = () => {
let todo = {
title: "This is todo title",
desc: "Hey this is a todo description"
}
return (
<div>
<div className="flex">
<div className="item">
<h1>{todo.desc}</h1>
<p>This is a demo paragraph</p>
<p>This is a demo Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore nulla amet similique nostrum voluptates officia, dolorum atque maxime aperiam eos veniam cupiditate dignissimos, magnam aliquid pariatur non. Dolorum ea officiis ex rerum.</p>
<div className="flex">
</div>
</div>
</div>
</div>
)
}
export default Todo
================================================
FILE: Video 109/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: Video 109/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
// <React.StrictMode>
<App />
// </React.StrictMode>,
)
================================================
FILE: Video 109/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 11/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Tags</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<h1>What are Semantic Tags</h1>
</main>
<footer>
Copyright CWH | All rights reserved
</footer>
<!-- <img src="semantic-tags.png" alt=""> -->
</body>
</html>
================================================
FILE: Video 110/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 110/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 110/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 110/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 110/package.json
================================================
{
"name": "video-110",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.17",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.33",
"tailwindcss": "^3.4.1",
"vite": "^5.0.8"
}
}
================================================
FILE: Video 110/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: Video 110/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 110/src/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
const [showbtn, setshowbtn] = useState(false)
const [todos, setTodos] = useState([
{
title: "Hey",
desc: "I am a good todo"
},
{
title: "Hey Another todo",
desc: "I am a good todo too"
},
{
title: "Hey I am grocery todo",
desc: "I am a good todo but I am grocery todo"
},
])
// const Todo = ({todo}) => {
// return (<>
// <div className="m-4 border border-1 border-purple-400">
// <div className="todo">{todo.title}</div>
// <div className="todo">{todo.desc}</div>
// </div>
// </>)
// }
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
{showbtn ? <button>showbtn is true</button> : <button>showbtn is false</button>}
{/* {showbtn && <button>showbtn is true</button>} */}
{todos.map(todo => {
// return <Todo key={todo.title} todo={todo}/>
return <div key={todo.title} className="m-4 border border-1 border-purple-400">
<div className="todo">{todo.title}</div>
<div className="todo">{todo.desc}</div>
</div>
})}
<div className="card">
<button onClick={() => setshowbtn(!showbtn)}>
Toggle showbtn
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
================================================
FILE: Video 110/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: Video 110/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: Video 110/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: Video 110/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 111/Readme.md
================================================
You have to use an api and display the data in the form of a card under a container. All the data points returned by the API should be converted to a card
Use this API: https://jsonplaceholder.typicode.com/posts
Hint:
Create a state for the data which will be fetched using the Json Placeholder API
Inside useEffect, use fetch to populate that state and then use map to render the cards from that state
================================================
FILE: Video 112/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 112/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 112/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 112/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 112/package.json
================================================
{
"name": "video-112",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.0.8"
}
}
================================================
FILE: Video 112/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 112/src/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
// const [name, setName] = useState("Harry")
const [form, setForm] = useState({})
const handleClick = () => {
alert("Hey I am clicked")
}
const handleMouseOver = () => {
alert("Hey I am a mouse over")
}
const handleChange = (e) => {
// setName(e.target.value)
setForm({...form, [e.target.name]:e.target.value})
console.log(form)
}
return (
<>
<div className="button">
<button onClick={handleClick}>Click me</button>
</div>
{/* <div className="red" onMouseOver={handleMouseOver}>
I am a red div
</div> */}
<input type="text" name='email' value={form.email?form.email:"" } onChange={handleChange} />
<input type="text" name='phone' value={form.phone?form.phone:"" } onChange={handleChange} />
</>
)
}
export default App
================================================
FILE: Video 112/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.red{
background-color: red;
color: white;
height: 233px;
width: 344px;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: Video 112/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: Video 112/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 113/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 113/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 113/Readme.md
================================================
You have to use an api and display the data in the form of a card under a container. All the data points returned by the API should be converted to a card
Use this API: https://jsonplaceholder.typicode.com/posts
Hint:
Create a state for the data which will be fetched using the Json Placeholder API
Inside useEffect, use fetch to populate that state and then use map to render the cards from that state
================================================
FILE: Video 113/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 113/package.json
================================================
{
"name": "video-113",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.0"
}
}
================================================
FILE: Video 113/src/App.css
================================================
================================================
FILE: Video 113/src/App.jsx
================================================
import { useState, useEffect } from 'react'
import Navbar from './components/Navbar'
import './App.css'
function App() {
const [cards, setCards] = useState([])
const fetchData = async () => {
let a = await fetch("https://jsonplaceholder.typicode.com/posts")
let data = await a.json()
setCards(data)
console.log(data)
}
useEffect(() => {
fetchData()
}, [])
return (
<>
<Navbar/>
<div className="container">
{cards.map((card)=>{
return <div key={card.id} className="card">
<h1>{card.title}</h1>
<p>{card.body}</p>
<span>By: UserId: {card.userId} </span>
</div>
})}
</div>
</>
)
}
export default App
================================================
FILE: Video 113/src/components/Navbar.jsx
================================================
import React from 'react'
const Navbar = () => {
return (
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
)
}
export default Navbar
================================================
FILE: Video 113/src/index.css
================================================
.card{
border: 2px solid black;
max-width: 23vw;
}
.container{
display: flex;
gap: 34px;
flex-wrap: wrap;
}
*{
margin: 0;
padding: 0;
}
nav, ul{
display: flex;
gap: 14px;
padding: 12px 3px;
background-color: rgb(46, 46, 44);
margin-bottom: 9px;
color: white;
}
li{
list-style: none;
}
================================================
FILE: Video 113/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: Video 113/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 114/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 114/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 114/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 114/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iTask - Your Task Planner</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 114/package.json
================================================
{
"name": "video-114",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"uuid": "^9.0.1"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.17",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"vite": "^5.1.0"
}
}
================================================
FILE: Video 114/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: Video 114/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 114/src/App.jsx
================================================
import { useState, useEffect } from 'react'
import Navbar from './components/Navbar'
import { FaEdit } from "react-icons/fa";
import { AiFillDelete } from "react-icons/ai";
import { v4 as uuidv4 } from 'uuid';
function App() {
const [todo, setTodo] = useState("")
const [todos, setTodos] = useState([])
const [showFinished, setshowFinished] = useState(true)
useEffect(() => {
let todoString = localStorage.getItem("todos")
if(todoString){
let todos = JSON.parse(localStorage.getItem("todos"))
setTodos(todos)
}
}, [])
const saveToLS = (params) => {
localStorage.setItem("todos", JSON.stringify(todos))
}
const toggleFinished = (e) => {
setshowFinished(!showFinished)
}
const handleEdit = (e, id)=>{
let t = todos.filter(i=>i.id === id)
setTodo(t[0].todo)
let newTodos = todos.filter(item=>{
return item.id!==id
});
setTodos(newTodos)
saveToLS()
}
const handleDelete= (e, id)=>{
let newTodos = todos.filter(item=>{
return item.id!==id
});
setTodos(newTodos)
saveToLS()
}
const handleAdd= ()=>{
setTodos([...todos, {id: uuidv4(), todo, isCompleted: false}])
setTodo("")
saveToLS()
}
const handleChange= (e)=>{
setTodo(e.target.value)
}
const handleCheckbox = (e) => {
let id = e.target.name;
let index = todos.findIndex(item=>{
return item.id === id;
})
let newTodos = [...todos];
newTodos[index].isCompleted = !newTodos[index].isCompleted;
setTodos(newTodos)
saveToLS()
}
return (
< >
<Navbar/>
<div className="mx-3 md:container md:mx-auto my-5 rounded-xl p-5 bg-violet-100 min-h-[80vh] md:w-[35%]">
<h1 className='font-bold text-center text-3xl'>iTask - Manage your todos at one place</h1>
<div className="addTodo my-5 flex flex-col gap-4">
<h2 className='text-2xl font-bold'>Add a Todo</h2>
<div className="flex">
<input onChange={handleChange} value={todo} type="text" className='w-full rounded-full px-5 py-1' />
<button onClick={handleAdd} disabled={todo.length<=3} className='bg-violet-800 mx-2 rounded-full hover:bg-violet-950 disabled:bg-violet-500 p-4 py-2 text-sm font-bold text-white'>Save</button>
</div>
</div>
<input className='my-4' id='show' onChange={toggleFinished} type="checkbox" checked={showFinished} />
<label className='mx-2' htmlFor="show">Show Finished</label>
<div className='h-[1px] bg-black opacity-15 w-[90%] mx-auto my-2'></div>
<h2 className='text-2xl font-bold'>Your Todos</h2>
<div className="todos">
{todos.length ===0 && <div className='m-5'>No Todos to display</div> }
{todos.map(item=>{
return (showFinished || !item.isCompleted) && <div key={item.id} className={"todo flex my-3 justify-between"}>
<div className='flex gap-5'>
<input name={item.id} onChange={handleCheckbox} type="checkbox" checked={item.isCompleted} id="" />
<div className={item.isCompleted?"line-through":""}>{item.todo}</div>
</div>
<div className="buttons flex h-full">
<button onClick={(e)=>handleEdit(e, item.id)} className='bg-violet-800 hover:bg-violet-950 p-2 py-1 text-sm font-bold text-white rounded-md mx-1'><FaEdit /></button>
<button onClick={(e)=>{handleDelete(e, item.id)}} className='bg-violet-800 hover:bg-violet-950 p-2 py-1 text-sm font-bold text-white rounded-md mx-1'><AiFillDelete /></button>
</div>
</div>
})}
</div>
</div>
</>
)
}
export default App
================================================
FILE: Video 114/src/components/Navbar.jsx
================================================
import React from 'react'
const Navbar = () => {
return (
<nav className='flex justify-around bg-indigo-900 text-white py-2'>
<div className="logo">
<span className='font-bold text-xl mx-8'>iTask</span>
</div>
<ul className="flex gap-8 mx-9">
<li className='cursor-pointer hover:font-bold transition-all'>Home</li>
<li className='cursor-pointer hover:font-bold transition-all'>Your Tasks</li>
</ul>
</nav>
)
}
export default Navbar
================================================
FILE: Video 114/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
body{
--tw-bg-opacity: 1;
background-color: rgb(226, 223, 239)
}
================================================
FILE: Video 114/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: Video 114/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: Video 114/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 115/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 115/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 115/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 115/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 115/package.json
================================================
{
"name": "video-115",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.0"
}
}
================================================
FILE: Video 115/src/App.css
================================================
================================================
FILE: Video 115/src/App.jsx
================================================
import './App.css'
import Navbar from './components/Navbar'
import Home from './components/Home'
import Login from './components/Login'
import About from './components/About'
import User from './components/User'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
function App() {
const router = createBrowserRouter([
{
path: "/",
element: <><Navbar /><Home /></>
},
{
path: "/login",
element: <><Navbar /><Login /></>
},
{
path: "/about",
element: <><Navbar /><About /></>
},
{
path: "/user/:username",
element: <><Navbar /><User /></>
},
])
return (
<>
<RouterProvider router={router} />
</>
)
}
export default App
================================================
FILE: Video 115/src/components/About.jsx
================================================
import React from 'react'
const About = () => {
return (
<div>
About
</div>
)
}
export default About
================================================
FILE: Video 115/src/components/Home.jsx
================================================
import React from 'react'
const Home = () => {
return (
<div>
I am Home
</div>
)
}
export default Home
================================================
FILE: Video 115/src/components/Login.jsx
================================================
import React from 'react'
const Login = () => {
return (
<div>
Login
</div>
)
}
export default Login
================================================
FILE: Video 115/src/components/Navbar.jsx
================================================
import React from 'react'
import { NavLink } from 'react-router-dom'
const Navbar = () => {
return (
<div>
<nav>
<NavLink className={(e)=>{return e.isActive?"red": "" }} to="/"><li>Home</li></NavLink>
<NavLink className={(e)=>{return e.isActive?"red": "" }} to="/about"><li>About</li></NavLink>
<NavLink className={(e)=>{return e.isActive?"red": "" }} to="/login"><li>Login</li></NavLink>
</nav>
</div>
)
}
export default Navbar
================================================
FILE: Video 115/src/components/User.jsx
================================================
import React from 'react'
import { useParams } from 'react-router-dom'
const User = () => {
const params = useParams()
return (
<div>
I am user {params.username}
</div>
)
}
export default User
================================================
FILE: Video 115/src/index.css
================================================
nav{
display: flex;
gap: 34px;
background-color: black;
color: white;
}
li{
list-style: none;
padding: 23px;
}
a li {
color: white;
}
*{
padding: 0;
margin: 0;
}
.red{
background-color: red;
color: white
}
================================================
FILE: Video 115/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: Video 115/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 116/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 116/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 116/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 116/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 116/our app.md
================================================
App.jsx
Navbar.jsx
Button.jsx
Component1.jsx
================================================
FILE: Video 116/package.json
================================================
{
"name": "video-116",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.0"
}
}
================================================
FILE: Video 116/public/without_context_api/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Navbar from './components/Navbar'
function App() {
const [count, setCount] = useState(0)
return (
<>
<Navbar count={count}/>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
================================================
FILE: Video 116/public/without_context_api/components/Button.jsx
================================================
import React from 'react'
import Component1 from './Component1'
const Button = ({count}) => {
return (
<div>
<button><span><Component1 count={count}/></span>I am a button</button>
</div>
)
}
export default Button
================================================
FILE: Video 116/public/without_context_api/components/Component1.jsx
================================================
import React from 'react'
const Component1 = ({count}) => {
return (
<div>
{count}
</div>
)
}
export default Component1
================================================
FILE: Video 116/public/without_context_api/components/Navbar.jsx
================================================
import React from 'react'
import Button from './Button'
const Navbar = ({count}) => {
return (
<>
<div>
Navbar
</div>
<Button count={count}/>
</>
)
}
export default Navbar
================================================
FILE: Video 116/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 116/src/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Navbar from './components/Navbar'
import { counterContext } from './context/context'
function App() {
const [count, setCount] = useState(0)
return (
<>
<counterContext.Provider value={{count, setCount}}>
<Navbar/>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</counterContext.Provider>
</>
)
}
export default App
================================================
FILE: Video 116/src/components/Button.jsx
================================================
import React, {useContext} from 'react'
import Component1 from './Component1'
import { counterContext } from '../context/context'
const Button = () => {
const value = useContext(counterContext)
return (
<div>
<button onClick={() => value.setCount((count) => count + 1)}><span><Component1/></span>I am a button</button>
</div>
)
}
export default Button
================================================
FILE: Video 116/src/components/Component1.jsx
================================================
import React, { useContext } from 'react'
import { counterContext } from '../context/context'
const Component1 = () => {
const value = useContext(counterContext)
return (
<div>
{value.count}
</div>
)
}
export default Component1
================================================
FILE: Video 116/src/components/Navbar.jsx
================================================
import React from 'react'
import Button from './Button'
const Navbar = () => {
return (
<>
<div>
Navbar
</div>
<Button/>
</>
)
}
export default Navbar
================================================
FILE: Video 116/src/context/context.js
================================================
import { createContext } from "react";
export const counterContext = createContext(0)
================================================
FILE: Video 116/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: Video 116/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: Video 116/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 118/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 118/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 118/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 118/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 118/package.json
================================================
{
"name": "video-118",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.0"
}
}
================================================
FILE: Video 118/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 118/src/App.jsx
================================================
import { useState, useCallback } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Navbar from './components/Navbar'
function App() {
const [count, setCount] = useState(0)
const [count2, setCount2] = useState(0)
const [adjective, setAdjective] = useState("good")
// const getAdjective = () => {
// return "another" + count
// }
const getAdjective = useCallback(() => {
return "another" + count
},[count] )
return (
<>
<Navbar adjective={"good"} getAdjective={getAdjective} />
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
================================================
FILE: Video 118/src/components/Navbar.jsx
================================================
import React from 'react'
import { memo } from 'react'
const Navbar = ({adjective, getAdjective}) => {
console.log("Navbar is rendered")
return (
<div>
I am a {adjective} Navbar
<button onClick={()=>{getAdjective()}}>{getAdjective()}</button>
</div>
)
}
export default memo(Navbar)
================================================
FILE: Video 118/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: Video 118/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<App />
)
================================================
FILE: Video 118/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 119/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 119/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 119/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 119/backend/server.js
================================================
import express from "express"
import cors from "cors"
import bodyParser from "body-parser"
const app = express()
const port = 3000
app.use(cors())
app.use(bodyParser.json())
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.post('/', (req, res) => {
console.log(req.body)
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
================================================
FILE: Video 119/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 119/package.json
================================================
{
"name": "video-119",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"body-parser": "^1.20.2",
"cors": "^2.8.5",
"express": "^4.18.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.50.1"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.0"
}
}
================================================
FILE: Video 119/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.red{
color: red;
font-size: 12px;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 119/src/App.jsx
================================================
import { useState } from 'react'
import './App.css'
import { useForm } from "react-hook-form"
function App() {
const {
register,
handleSubmit,
setError,
formState: { errors, isSubmitting },
} = useForm();
const delay = (d)=>{
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve()
}, d * 1000);
})
}
const onSubmit = async (data) => {
// await delay(2) // simulating network delay
let r = await fetch("http://localhost:3000/", {method: "POST", headers: {
"Content-Type": "application/json",
}, body: JSON.stringify(data)})
let res = await r.text()
console.log(data, res)
// if(data.username !== "shubham"){
// setError("myform", {message: "Your form is not in good order because credentials are invalid"})
// }
// if(data.username === "rohan"){
// setError("blocked", {message: "Sorry this user is blocked"})
// }
}
return (
<>
{isSubmitting && <div>Loading...</div>}
<div className="container">
<form action="" onSubmit={handleSubmit(onSubmit)}>
<input placeholder='username' {...register("username", { required: {value: true, message: "This field is required"}, minLength: {value: 3, message: "Min length is 3"}, maxLength: {value: 8, message: "Max length is 8"} })} type="text" />
{errors.username && <div className='red'>{errors.username.message}</div>}
<br />
<input placeholder='password' {...register("password", {minLength: {value: 7, message: "Min length of password is 7"},})} type="password"/>
{errors.password && <div className='red'>{errors.password.message}</div>}
<br />
<input disabled={isSubmitting} type="submit" value="Submit" />
{errors.myform && <div className='red'>{errors.myform.message}</div>}
{errors.blocked && <div className='red'>{errors.blocked.message}</div>}
</form>
</div>
</>
)
}
export default App
================================================
FILE: Video 119/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: Video 119/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: Video 119/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: Video 12/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- You are given 12 files; 6 audio and 6 video.
Design a website using HTML only which shows these 12 files.
1.mp3, 2.mp3 .... 6.mp3
1.mp4, 2.mp4 .... 6.mp4 -->
</body>
</html>
================================================
FILE: Video 120/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: Video 120/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: Video 120/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: Video 120/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: Video 120/package.json
================================================
{
"name": "video-120",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@reduxjs/toolkit": "^2.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.0"
},
"devDependencies": {
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.4"
}
}
================================================
FILE: Video 120/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: Video 120/src/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Navbar from './components/Navbar'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment, multiply } from './redux/counter/counterSlice'
function App() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (
<>
<Navbar />
<div>
<button onClick={() => dispatch(decrement())}>-</button>
Currently count is {count}
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(multiply())}>*</button>
</div>
</>
)
}
export default App
================================================
FILE: Video 120/src/components/Navbar.jsx
================================================
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
const Navbar = () => {
const count = useSelector((state) => state.counter.value)
return (
<div>
I am a navbar and counter is {count}
</div>
)
}
export default Navbar
================================================
FILE: Video 120/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
gitextract_ht69og37/
├── .gitattributes
├── .gitignore
├── README.md
├── Video 01/
│ ├── index.html
│ └── this.txt
├── Video 02/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── Video 03/
│ ├── .vscode/
│ │ └── settings.json
│ ├── index.html
│ ├── script.js
│ └── style.css
├── Video 04/
│ ├── bookmarkmanager.html
│ ├── index.html
│ ├── script.js
│ └── style.css
├── Video 05/
│ ├── index.html
│ └── style.css
├── Video 06/
│ └── index.html
├── Video 07/
│ └── index.html
├── Video 08/
│ ├── Comprehensive List.txt
│ ├── index.html
│ └── style.css
├── Video 09/
│ ├── index.html
│ └── style.css
├── Video 10/
│ └── index.html
├── Video 100/
│ └── index.html
├── Video 101/
│ ├── css/
│ │ ├── input.css
│ │ └── output.css
│ ├── index.html
│ ├── package.json
│ └── tailwind.config.js
├── Video 102/
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── input.css
│ │ └── output.css
│ └── tailwind.config.js
├── Video 103/
│ ├── Readme.md
│ ├── index.html
│ ├── package.json
│ └── src/
│ └── index.js
├── Video 104/
│ ├── Readme.md
│ ├── index.js
│ └── package.json
├── Video 105/
│ ├── Readme.md
│ ├── index.html
│ ├── with-react/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── harry.txt
│ │ │ ├── index.html
│ │ │ ├── manifest.json
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── components/
│ │ │ ├── Footer.js
│ │ │ └── Navbar.js
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── reportWebVitals.js
│ │ └── setupTests.js
│ └── withoutreact.html
├── Video 106/
│ └── first-app/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── Card.css
│ │ │ ├── Card.jsx
│ │ │ ├── Footer.css
│ │ │ ├── Footer.jsx
│ │ │ ├── Navbar.css
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 107/
│ └── state-intro/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── Component.js
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 108/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 109/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── App_1.jsx
│ │ ├── Todo.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 11/
│ └── index.html
├── Video 110/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── Video 111/
│ └── Readme.md
├── Video 112/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 113/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── Readme.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 114/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── Video 115/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── About.jsx
│ │ │ ├── Home.jsx
│ │ │ ├── Login.jsx
│ │ │ ├── Navbar.jsx
│ │ │ └── User.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 116/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── our app.md
│ ├── package.json
│ ├── public/
│ │ └── without_context_api/
│ │ ├── App.jsx
│ │ └── components/
│ │ ├── Button.jsx
│ │ ├── Component1.jsx
│ │ └── Navbar.jsx
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── Button.jsx
│ │ │ ├── Component1.jsx
│ │ │ └── Navbar.jsx
│ │ ├── context/
│ │ │ └── context.js
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 118/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 119/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── backend/
│ │ └── server.js
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── Video 12/
│ └── index.html
├── Video 120/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ ├── main.jsx
│ │ └── redux/
│ │ ├── counter/
│ │ │ └── counterSlice.js
│ │ └── store.js
│ └── vite.config.js
├── Video 121/
│ └── first/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── contact/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── component/
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 122/
│ └── my-app/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ └── Navbar.js
│ ├── data.json
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 123/
│ ├── comps/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── about/
│ │ │ │ └── page.js
│ │ │ ├── contact/
│ │ │ │ └── page.js
│ │ │ ├── footer/
│ │ │ │ └── page.js
│ │ │ ├── globals.css
│ │ │ ├── layout.js
│ │ │ └── page.js
│ │ ├── components/
│ │ │ └── Navbar.js
│ │ ├── jsconfig.json
│ │ ├── next.config.mjs
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ └── tailwind.config.js
│ └── website/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── contact/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ ├── Footer.js
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 124/
│ └── api-routes/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── api/
│ │ │ └── add/
│ │ │ └── route.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 125/
│ └── server-actions/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── actions/
│ │ └── form.js
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── harry.txt
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 126/
│ └── middleware/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── middleware.js
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 127/
│ └── nextauth-demo/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── api/
│ │ │ └── auth/
│ │ │ └── [...nextauth]/
│ │ │ └── route.js
│ │ ├── component/
│ │ │ └── SessionWrapper.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 128/
│ └── dynamic-routes/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── [...val]/
│ │ │ └── page.js
│ │ ├── blog/
│ │ │ └── page.js
│ │ ├── blogpost/
│ │ │ └── [slug]/
│ │ │ └── page.js
│ │ ├── error.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ ├── not-found.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 129/
│ └── layouts/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── (admin)/
│ │ │ ├── admincomments/
│ │ │ │ └── page.js
│ │ │ ├── adminlogin/
│ │ │ │ └── page.js
│ │ │ ├── adminlogout/
│ │ │ │ ├── layout.js
│ │ │ │ └── page.js
│ │ │ └── layout.js
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ ├── Footer.js
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 13/
│ └── index.html
├── Video 130/
│ ├── passop/
│ │ ├── .eslintrc.cjs
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.jsx
│ │ │ ├── components/
│ │ │ │ ├── Footer.jsx
│ │ │ │ ├── Manager.jsx
│ │ │ │ └── Navbar.jsx
│ │ │ ├── index.css
│ │ │ └── main.jsx
│ │ ├── tailwind.config.js
│ │ └── vite.config.js
│ └── passop-mongo/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── backend/
│ │ ├── package.json
│ │ └── server.js
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── Footer.jsx
│ │ │ ├── Manager.jsx
│ │ │ └── Navbar.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── Video 131/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── actions/
│ │ └── useractions.js
│ ├── app/
│ │ ├── [username]/
│ │ │ └── page.js
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── api/
│ │ │ ├── auth/
│ │ │ │ └── [...nextauth]/
│ │ │ │ └── route.js
│ │ │ └── razorpay/
│ │ │ └── route.js
│ │ ├── dashboard/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ ├── login/
│ │ │ └── page.js
│ │ └── page.js
│ ├── components/
│ │ ├── Dashboard.js
│ │ ├── Footer.js
│ │ ├── Navbar.js
│ │ ├── PaymentPage.js
│ │ └── SessionWrapper.js
│ ├── db/
│ │ └── connectDb.js
│ ├── jsconfig.json
│ ├── models/
│ │ ├── Payment.js
│ │ └── User.js
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
├── Video 132/
│ └── next-navigation-tutorial/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── blogpost/
│ │ │ └── [slug]/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 133/
│ └── ssr-ssg-isr/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 134/
│ └── environment-variables/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 135/
│ └── styles-in-nextjs/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── jsconfig.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ ├── styles/
│ │ └── Home.module.css
│ └── tailwind.config.js
├── Video 136/
│ └── bitlinks/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── BitLinks.postman_collection.json
│ ├── README.md
│ ├── app/
│ │ ├── [shorturl]/
│ │ │ └── page.js
│ │ ├── api/
│ │ │ └── generate/
│ │ │ └── route.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ ├── page.js
│ │ └── shorten/
│ │ └── page.js
│ ├── components/
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── lib/
│ │ └── mongodb.js
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 137/
│ └── linktree-clone/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app/
│ │ ├── [handle]/
│ │ │ └── page.js
│ │ ├── api/
│ │ │ └── add/
│ │ │ └── route.js
│ │ ├── generate/
│ │ │ └── page.js
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
│ ├── components/
│ │ └── Navbar.js
│ ├── jsconfig.json
│ ├── lib/
│ │ └── mongodb.js
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tailwind.config.js
├── Video 14/
│ └── index.html
├── Video 15/
│ ├── index.html
│ └── style.css
├── Video 16/
│ └── index.html
├── Video 17/
│ └── index.html
├── Video 18/
│ └── index.html
├── Video 19/
│ ├── colors.html
│ └── index.html
├── Video 20/
│ └── index.html
├── Video 21/
│ └── index.html
├── Video 22/
│ └── index.html
├── Video 23/
│ └── index.html
├── Video 24/
│ └── index.html
├── Video 25/
│ └── index.html
├── Video 26/
│ └── index.html
├── Video 27/
│ └── index.html
├── Video 28/
│ └── index.html
├── Video 29/
│ └── index.html
├── Video 30/
│ └── index.html
├── Video 31/
│ └── index.html
├── Video 32/
│ └── index.html
├── Video 33/
│ └── index.html
├── Video 34/
│ └── index.html
├── Video 35/
│ └── index.html
├── Video 36/
│ └── index.html
├── Video 38/
│ └── index.html
├── Video 39/
│ ├── grid-1.html
│ └── grid-2.html
├── Video 40/
│ └── index.html
├── Video 41/
│ └── index.html
├── Video 42/
│ ├── Demo.html
│ ├── index.html
│ └── style.css
├── Video 43/
│ └── index.html
├── Video 44/
│ └── index.html
├── Video 45/
│ └── index.html
├── Video 46/
│ └── index.html
├── Video 47/
│ ├── index.html
│ └── style.css
├── Video 48/
│ └── index.html
├── Video 49/
│ └── index.html
├── Video 50/
│ └── index.html
├── Video 51/
│ └── index.html
├── Video 52/
│ └── index.html
├── Video 53/
│ ├── assets/
│ │ └── videos/
│ │ └── video1.m4v
│ ├── index.html
│ └── style.css
├── Video 54/
│ ├── index.html
│ ├── new.js
│ └── script.js
├── Video 55/
│ ├── index.html
│ └── script.js
├── Video 56/
│ └── index.js
├── Video 57/
│ └── index.js
├── Video 58/
│ └── index.js
├── Video 59/
│ └── index.js
├── Video 60/
│ └── index.js
├── Video 61/
│ ├── index.html
│ └── index.js
├── Video 62/
│ └── index.js
├── Video 63/
│ ├── index.html
│ ├── index.js
│ ├── loops.js
│ └── mfr.js
├── Video 64/
│ └── index.html
├── Video 65/
│ └── index.html
├── Video 66/
│ └── index.html
├── Video 67/
│ ├── index.html
│ └── script.js
├── Video 68/
│ ├── index.html
│ └── script.js
├── Video 69/
│ ├── index.html
│ └── script.js
├── Video 70/
│ └── index.html
├── Video 71/
│ └── index.html
├── Video 72/
│ ├── index.html
│ └── script.js
├── Video 73/
│ ├── index.html
│ └── script.js
├── Video 74/
│ ├── eventBubbling.html
│ ├── index.html
│ └── script.js
├── Video 75/
│ ├── index.html
│ ├── promise.js
│ └── script.js
├── Video 76/
│ ├── index.html
│ └── script.js
├── Video 77/
│ ├── index.html
│ └── script.js
├── Video 78/
│ └── index.html
├── Video 79/
│ ├── index.html
│ └── script.js
├── Video 80/
│ ├── gs.js
│ ├── index.html
│ └── script.js
├── Video 81/
│ └── index.html
├── Video 82/
│ ├── index.html
│ └── script.js
├── Video 83/
│ ├── Problems.md
│ └── Solutions/
│ ├── 01_houses.js
│ └── 07_localStorage.html
├── Video 84 - Project 2 - Spotify Clone/
│ ├── css/
│ │ ├── style.css
│ │ └── utility.css
│ ├── index.html
│ ├── js/
│ │ └── script.js
│ └── songs/
│ ├── .htaccess
│ ├── Angry_(mood)/
│ │ └── info.json
│ ├── Bright_(mood)/
│ │ └── info.json
│ ├── Chill_(mood)/
│ │ └── info.json
│ ├── Dark_(mood)/
│ │ └── info.json
│ ├── Diljit/
│ │ └── info.json
│ ├── Funky_(mood)/
│ │ └── info.json
│ ├── Love_(mood)/
│ │ └── info.json
│ ├── Uplifting_(mood)/
│ │ └── info.json
│ ├── cs/
│ │ └── info.json
│ ├── karan aujla/
│ │ └── info.json
│ └── ncs/
│ └── info.json
├── Video 85/
│ ├── myserver.js
│ ├── package.json
│ └── server.js
├── Video 86/
│ ├── index.html
│ ├── main.js
│ ├── mymodule.js
│ ├── mymodule2.js
│ └── package.json
├── Video 87/
│ ├── aboutpath.js
│ ├── harry
│ ├── harry.txt
│ ├── harry2.txt
│ ├── main.js
│ ├── mainpromise.js
│ └── package.json
├── Video 88/
│ ├── Agenda.md
│ ├── main.js
│ ├── package.json
│ └── public/
│ └── harry.txt
├── Video 89/
│ ├── Agenda.md
│ ├── main.js
│ ├── package.json
│ ├── public/
│ │ └── mypage.html
│ ├── routes/
│ │ ├── blog.js
│ │ └── shop.js
│ └── templates/
│ └── index.html
├── Video 90/
│ ├── logs.txt
│ ├── main.js
│ ├── package.json
│ ├── public/
│ │ └── harry.txt
│ └── routes/
│ └── blog.js
├── Video 91/
│ └── index.js
├── Video 92/
│ ├── index.js
│ ├── package.json
│ └── views/
│ ├── index.ejs
│ └── navbar.ejs
├── Video 93/
│ ├── index.js
│ └── package.json
├── Video 94/
│ └── playground1.mongodb.js
├── Video 95/
│ └── crud.mongodb.js
├── Video 96/
│ ├── main.js
│ ├── models/
│ │ └── Todo.js
│ └── package.json
├── Video 97/
│ └── main.js
├── Video 98/
│ ├── index.html
│ ├── package.json
│ ├── setup.md
│ ├── src/
│ │ ├── input.css
│ │ └── output.css
│ └── tailwind.config.js
├── Video 99/
│ ├── main.js
│ ├── models/
│ │ └── Employee.js
│ ├── package.json
│ ├── question.md
│ └── views/
│ └── index.ejs
└── video 117/
├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src/
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
└── vite.config.js
SYMBOL INDEX (94 symbols across 78 files)
FILE: Video 105/with-react/src/App.js
function App (line 8) | function App() {
FILE: Video 106/first-app/src/App.jsx
function App (line 5) | function App() {
FILE: Video 107/state-intro/src/App.jsx
function App (line 6) | function App() {
FILE: Video 108/src/App.jsx
function App (line 7) | function App() {
FILE: Video 109/src/App.jsx
function App (line 6) | function App() {
FILE: Video 109/src/App_1.jsx
function App (line 6) | function App() {
FILE: Video 110/src/App.jsx
function App (line 6) | function App() {
FILE: Video 112/src/App.jsx
function App (line 6) | function App() {
FILE: Video 113/src/App.jsx
function App (line 5) | function App() {
FILE: Video 114/src/App.jsx
function App (line 7) | function App() {
FILE: Video 115/src/App.jsx
function App (line 9) | function App() {
FILE: Video 116/public/without_context_api/App.jsx
function App (line 7) | function App() {
FILE: Video 116/src/App.jsx
function App (line 8) | function App() {
FILE: Video 118/src/App.jsx
function App (line 7) | function App() {
FILE: Video 119/src/App.jsx
function App (line 7) | function App() {
FILE: Video 120/src/App.jsx
function App (line 9) | function App() {
FILE: Video 121/first/app/layout.js
function RootLayout (line 12) | function RootLayout({ children }) {
FILE: Video 122/my-app/app/layout.js
function RootLayout (line 11) | function RootLayout({ children }) {
FILE: Video 122/my-app/app/page.js
function Home (line 5) | function Home() {
FILE: Video 123/comps/app/layout.js
function RootLayout (line 13) | function RootLayout({ children }) {
FILE: Video 123/comps/app/page.js
function Home (line 4) | function Home() {
FILE: Video 123/website/app/layout.js
function RootLayout (line 13) | function RootLayout({ children }) {
FILE: Video 123/website/app/page.js
function Home (line 3) | function Home() {
FILE: Video 124/api-routes/app/api/add/route.js
function POST (line 3) | async function POST(request) {
FILE: Video 124/api-routes/app/layout.js
function RootLayout (line 11) | function RootLayout({ children }) {
FILE: Video 124/api-routes/app/page.js
function Home (line 4) | function Home() {
FILE: Video 125/server-actions/app/layout.js
function RootLayout (line 11) | function RootLayout({ children }) {
FILE: Video 125/server-actions/app/page.js
function Home (line 5) | function Home() {
FILE: Video 126/middleware/app/layout.js
function RootLayout (line 11) | function RootLayout({ children }) {
FILE: Video 126/middleware/app/page.js
function Home (line 3) | function Home() {
FILE: Video 126/middleware/middleware.js
function middleware (line 17) | function middleware(request) {
FILE: Video 127/nextauth-demo/app/layout.js
function RootLayout (line 12) | function RootLayout({ children }) {
FILE: Video 127/nextauth-demo/app/page.js
function Component (line 4) | function Component() {
FILE: Video 128/dynamic-routes/app/about/[...val]/page.js
function Page (line 1) | function Page({ params }) {
FILE: Video 128/dynamic-routes/app/blogpost/[slug]/page.js
function Page (line 1) | function Page({ params }) {
FILE: Video 128/dynamic-routes/app/error.js
function Error (line 5) | function Error({ error, reset }) {
FILE: Video 128/dynamic-routes/app/layout.js
function RootLayout (line 11) | function RootLayout({ children }) {
FILE: Video 128/dynamic-routes/app/not-found.js
function NotFound (line 3) | function NotFound() {
FILE: Video 128/dynamic-routes/app/page.js
function Home (line 3) | function Home() {
FILE: Video 129/layouts/app/(admin)/adminlogin/page.js
function generateMetadata (line 16) | async function generateMetadata({ params }) {
FILE: Video 129/layouts/app/(admin)/adminlogout/layout.js
function AdminLayout (line 12) | function AdminLayout({ children }) {
FILE: Video 129/layouts/app/(admin)/layout.js
function AdminLayout (line 12) | function AdminLayout({ children }) {
FILE: Video 129/layouts/app/layout.js
function RootLayout (line 13) | function RootLayout({ children }) {
FILE: Video 129/layouts/app/page.js
function Home (line 3) | function Home() {
FILE: Video 130/passop-mongo/src/App.jsx
function App (line 7) | function App() {
FILE: Video 130/passop/src/App.jsx
function App (line 7) | function App() {
FILE: Video 131/app/[username]/page.js
function generateMetadata (line 29) | async function generateMetadata({ params }) {
FILE: Video 131/app/api/auth/[...nextauth]/route.js
method signIn (line 39) | async signIn({ user, account, profile, email, credentials }) {
method session (line 55) | async session({ session, user, token }) {
FILE: Video 131/app/layout.js
function RootLayout (line 14) | function RootLayout({ children }) {
FILE: Video 131/app/page.js
function Home (line 4) | function Home() {
FILE: Video 131/components/SessionWrapper.js
function SessionWrapper (line 4) | function SessionWrapper({children}) {
FILE: Video 132/next-navigation-tutorial/app/layout.js
function RootLayout (line 21) | function RootLayout({ children }) {
FILE: Video 132/next-navigation-tutorial/app/page.js
function Home (line 6) | function Home() {
FILE: Video 133/ssr-ssg-isr/app/layout.js
function RootLayout (line 20) | function RootLayout({ children }) {
FILE: Video 133/ssr-ssg-isr/app/page.js
function Home (line 3) | async function Home() {
FILE: Video 134/environment-variables/app/layout.js
function RootLayout (line 20) | function RootLayout({ children }) {
FILE: Video 134/environment-variables/app/page.js
function Home (line 3) | function Home() {
FILE: Video 135/styles-in-nextjs/app/layout.js
function RootLayout (line 20) | function RootLayout({ children }) {
FILE: Video 135/styles-in-nextjs/app/page.js
function Home (line 4) | function Home() {
FILE: Video 136/bitlinks/app/[shorturl]/page.js
function Page (line 5) | async function Page({ params }) {
FILE: Video 136/bitlinks/app/api/generate/route.js
function POST (line 4) | async function POST(request) {
FILE: Video 136/bitlinks/app/layout.js
function RootLayout (line 22) | function RootLayout({ children }) {
FILE: Video 136/bitlinks/app/page.js
function Home (line 13) | function Home() {
FILE: Video 137/linktree-clone/app/[handle]/page.js
function Page (line 5) | async function Page({ params }) {
FILE: Video 137/linktree-clone/app/api/add/route.js
function POST (line 4) | async function POST(request) {
FILE: Video 137/linktree-clone/app/layout.js
function RootLayout (line 24) | function RootLayout({ children }) {
FILE: Video 137/linktree-clone/app/page.js
function Home (line 6) | function Home() {
FILE: Video 58/index.js
function nice (line 1) | function nice(name) {
function sum (line 8) | function sum(a, b, c = 3) {
FILE: Video 69/script.js
function factorial (line 3) | function factorial(number){
function facFor (line 10) | function facFor(number){
FILE: Video 72/script.js
function getRandomColor (line 6) | function getRandomColor(){
FILE: Video 73/script.js
function createCard (line 1) | function createCard(title, cName, views, monthsOld, duration, thumbnail){
FILE: Video 76/script.js
function getData (line 14) | async function getData() {
function main (line 33) | async function main(){
FILE: Video 77/script.js
function createCard (line 1) | function createCard(title, cName, views, monthsOld, duration, thumbnail) {
FILE: Video 79/script.js
function main (line 10) | function main(){
FILE: Video 80/gs.js
class User (line 1) | class User {
method constructor (line 3) | constructor(name) {
method name (line 8) | get name() {
method name (line 12) | set name(value) {
FILE: Video 80/script.js
class Animal (line 18) | class Animal{
method constructor (line 19) | constructor(name){
method eats (line 24) | eats(){
method jumps (line 27) | jumps(){
class Lion (line 33) | class Lion extends Animal {
method constructor (line 34) | constructor(name){
method eats (line 39) | eats(){
FILE: Video 84 - Project 2 - Spotify Clone/js/script.js
function secondsToMinutesSeconds (line 6) | function secondsToMinutesSeconds(seconds) {
function getSongs (line 20) | async function getSongs(folder) {
function displayAlbums (line 75) | async function displayAlbums() {
function main (line 118) | async function main() {
FILE: video 117/src/App.jsx
function App (line 15) | function App() {
Condensed preview — 697 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (662K chars).
[
{
"path": ".gitattributes",
"chars": 66,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n"
},
{
"path": ".gitignore",
"chars": 18,
"preview": "*.mp3\nnode_modules"
},
{
"path": "README.md",
"chars": 1228,
"preview": "# Welcome to Sigma's Web Development Course - Hindi Web Development Tutorials! 🚀\n\n## What's Inside:\n\nIf you've been itch"
},
{
"path": "Video 01/index.html",
"chars": 246,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 01/this.txt",
"chars": 17,
"preview": "this is thisth8is"
},
{
"path": "Video 02/index.html",
"chars": 324,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 02/script.js",
"chars": 48,
"preview": "alert(\"Welcome to Sigma Web Development Course\")"
},
{
"path": "Video 02/style.css",
"chars": 52,
"preview": "body{\n background-color: red;\n color: white;\n}"
},
{
"path": "Video 03/.vscode/settings.json",
"chars": 227,
"preview": "{\n \"livePreview.portNumber\": 3000,\n \"livePreview.hostIP\": \"192.168.1.199\",\n \"liveServer.settings.useLocalIp\": t"
},
{
"path": "Video 03/index.html",
"chars": 313,
"preview": "<!DOCTYPE html>\n\n\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-wi"
},
{
"path": "Video 03/script.js",
"chars": 14,
"preview": "alert(\"Hello\")"
},
{
"path": "Video 03/style.css",
"chars": 34,
"preview": "body{\n background-color: red;\n}"
},
{
"path": "Video 04/bookmarkmanager.html",
"chars": 905,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 04/index.html",
"chars": 1561,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 04/script.js",
"chars": 0,
"preview": ""
},
{
"path": "Video 04/style.css",
"chars": 49,
"preview": "body{\n background-color: rgb(239, 206, 223);\n}"
},
{
"path": "Video 05/index.html",
"chars": 1279,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-widt"
},
{
"path": "Video 05/style.css",
"chars": 34,
"preview": "td{\n border: 2px solid black;\n}"
},
{
"path": "Video 06/index.html",
"chars": 694,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 07/index.html",
"chars": 1391,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-widt"
},
{
"path": "Video 08/Comprehensive List.txt",
"chars": 1971,
"preview": "Block Elements (Most Commonly Used First)\n\n<div>: A generic container for flow content.\n<p>: Paragraph.\n<h1>, <h2>, <h3>"
},
{
"path": "Video 08/index.html",
"chars": 615,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-widt"
},
{
"path": "Video 08/style.css",
"chars": 175,
"preview": "p{\n background-color: aquamarine;\n}\n\na{\n background-color: rgb(242, 160, 122);\n}\n\ndiv{\n background-color: yello"
},
{
"path": "Video 09/index.html",
"chars": 383,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 09/style.css",
"chars": 112,
"preview": ".red{\n color: red;\n}\n\n.bg-yellow{\n background-color: yellow;\n}\n\n#firstdiv{\n /* background-color: red; */\n}"
},
{
"path": "Video 10/index.html",
"chars": 1163,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 100/index.html",
"chars": 57,
"preview": "<!-- Design layout.png using node.js and tailwind css -->"
},
{
"path": "Video 101/css/input.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities; "
},
{
"path": "Video 101/css/output.css",
"chars": 21481,
"preview": "/*\n! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting elem"
},
{
"path": "Video 101/index.html",
"chars": 26310,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-widt"
},
{
"path": "Video 101/package.json",
"chars": 425,
"preview": "{\n \"name\": \"video-101\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"ec"
},
{
"path": "Video 101/tailwind.config.js",
"chars": 135,
"preview": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"*html\"],\n theme: {\n extend: {},\n },\n p"
},
{
"path": "Video 102/index.html",
"chars": 1262,
"preview": "<!-- Design layout.png using node.js and tailwind css -->\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UT"
},
{
"path": "Video 102/package.json",
"chars": 467,
"preview": "{\n \"name\": \"design-the-layout\",\n \"version\": \"1.0.0\",\n \"description\": \"This is the solution for sigma exercise number "
},
{
"path": "Video 102/src/input.css",
"chars": 58,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "Video 102/src/output.css",
"chars": 11762,
"preview": "/*\n! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting elem"
},
{
"path": "Video 102/tailwind.config.js",
"chars": 136,
"preview": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"*.html\"],\n theme: {\n extend: {},\n },\n "
},
{
"path": "Video 103/Readme.md",
"chars": 136,
"preview": "Types of Hosting:\n1. Shared Hosting\n2. Dedicated Hosting\n3. Managed Hosting\n\nLinux Tutorial: https://www.youtube.com/wat"
},
{
"path": "Video 103/index.html",
"chars": 418,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 103/package.json",
"chars": 379,
"preview": "{\n \"name\": \"video-103\",\n \"version\": \"1.0.0\",\n \"description\": \"Types of Hosting:\\r 1. Shared Hosting\\r 2. Dedicated Ho"
},
{
"path": "Video 103/src/index.js",
"chars": 246,
"preview": "const express = require('express')\nrequire('dotenv').config()\nconst app = express()\nconst port = 3000\n\n\napp.get('/', (re"
},
{
"path": "Video 104/Readme.md",
"chars": 1390,
"preview": "## How to host Node.js apps on Ubuntu\n\n### Step 1 - Installing Node.js & build essentials\n```\ncurl -fsSL https://deb.nod"
},
{
"path": "Video 104/index.js",
"chars": 218,
"preview": "const express = require('express')\nconst app = express()\nconst port = 3000\n\napp.get('/', (req, res) => {\n res.send('Hel"
},
{
"path": "Video 104/package.json",
"chars": 481,
"preview": "{\n \"name\": \"hosting-node.js-apps\",\n \"version\": \"1.0.0\",\n \"description\": \"```\\r curl -fsSL https://deb.nodesource.com/"
},
{
"path": "Video 105/Readme.md",
"chars": 341,
"preview": "# Why React?\n- We can use states which means that once we update the state variable, it changes across the page\n- We can"
},
{
"path": "Video 105/index.html",
"chars": 1030,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 105/with-react/.gitignore",
"chars": 310,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "Video 105/with-react/README.md",
"chars": 3359,
"preview": "# Getting Started with Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebo"
},
{
"path": "Video 105/with-react/package.json",
"chars": 813,
"preview": "{\n \"name\": \"with-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": "
},
{
"path": "Video 105/with-react/public/harry.txt",
"chars": 9,
"preview": "Hey harry"
},
{
"path": "Video 105/with-react/public/index.html",
"chars": 1721,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.i"
},
{
"path": "Video 105/with-react/public/manifest.json",
"chars": 492,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "Video 105/with-react/public/robots.txt",
"chars": 67,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "Video 105/with-react/src/App.css",
"chars": 564,
"preview": ".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion:"
},
{
"path": "Video 105/with-react/src/App.js",
"chars": 474,
"preview": "import logo from './logo.svg';\nimport { useState } from 'react';\nimport \"./App.css\"\nimport Navbar from './components/Nav"
},
{
"path": "Video 105/with-react/src/App.test.js",
"chars": 246,
"preview": "import { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () ="
},
{
"path": "Video 105/with-react/src/components/Footer.js",
"chars": 139,
"preview": "import React from 'react'\n\nconst Footer = () => {\n return (\n <div>\n I am a footer2\n \n </div>\n )\n}\n\nexp"
},
{
"path": "Video 105/with-react/src/components/Navbar.js",
"chars": 327,
"preview": "import React from 'react'\nimport Footer from './Footer'\n\nconst Navbar = (props) => {\n return (\n <div>\n <div cla"
},
{
"path": "Video 105/with-react/src/index.css",
"chars": 366,
"preview": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Can"
},
{
"path": "Video 105/with-react/src/index.js",
"chars": 535,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimpor"
},
{
"path": "Video 105/with-react/src/reportWebVitals.js",
"chars": 362,
"preview": "const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals'"
},
{
"path": "Video 105/with-react/src/setupTests.js",
"chars": 241,
"preview": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).to"
},
{
"path": "Video 105/withoutreact.html",
"chars": 523,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 106/first-app/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 106/first-app/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 106/first-app/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 106/first-app/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 106/first-app/package.json",
"chars": 654,
"preview": "{\n \"name\": \"first-app\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "Video 106/first-app/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "Video 106/first-app/src/App.jsx",
"chars": 499,
"preview": "import Footer from \"./components/Footer\"\nimport Navbar from \"./components/Navbar\"\nimport Card from \"./components/Card\"\n\n"
},
{
"path": "Video 106/first-app/src/components/Card.css",
"chars": 92,
"preview": ".card{\n width: 20vw;\n border: 2px solid black;\n margin: 34px;\n height: 300px; \n}"
},
{
"path": "Video 106/first-app/src/components/Card.jsx",
"chars": 421,
"preview": "import React from 'react'\nimport \"./Card.css\"\n\nconst Card = (props) => {\n return (\n <div className='card' style={{ov"
},
{
"path": "Video 106/first-app/src/components/Footer.css",
"chars": 146,
"preview": ".footer{\n text-align: center; \n background-color: rgb(41, 38, 38);\n color: white;\n width: 100%;\n position"
},
{
"path": "Video 106/first-app/src/components/Footer.jsx",
"chars": 218,
"preview": "import React from 'react'\nimport \"./Footer.css\"\nconst Footer = () => {\n return (\n <div className='footer'>\n Cop"
},
{
"path": "Video 106/first-app/src/components/Navbar.css",
"chars": 142,
"preview": "nav, ul{\n display: flex;\n}\n\n\nli{\n list-style-type: none;\n}\n\nul{\n gap: 34px;\n}\n\nnav{\n background-color: beige"
},
{
"path": "Video 106/first-app/src/components/Navbar.jsx",
"chars": 268,
"preview": "import React from 'react'\nimport \"./Navbar.css\"\n\n\nconst Navbar = () => {\n return (\n <div>\n <nav>\n <ul>\n "
},
{
"path": "Video 106/first-app/src/index.css",
"chars": 59,
"preview": "*{\n padding: 0;\n margin: 0;\n}\n\n.cards{\n display: flex;\n}"
},
{
"path": "Video 106/first-app/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 106/first-app/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 107/state-intro/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 107/state-intro/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 107/state-intro/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 107/state-intro/index.html",
"chars": 358,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 107/state-intro/package.json",
"chars": 656,
"preview": "{\n \"name\": \"state-intro\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\""
},
{
"path": "Video 107/state-intro/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "Video 107/state-intro/src/App.jsx",
"chars": 349,
"preview": "import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './A"
},
{
"path": "Video 107/state-intro/src/Component.js",
"chars": 442,
"preview": "import React from 'react'\n\nconst Component = () => {\n return (\n <div>\n <div className=\"container flex\">\n <di"
},
{
"path": "Video 107/state-intro/src/index.css",
"chars": 1161,
"preview": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n"
},
{
"path": "Video 107/state-intro/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 107/state-intro/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 108/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 108/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 108/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 108/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 108/package.json",
"chars": 654,
"preview": "{\n \"name\": \"video-108\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "Video 108/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "Video 108/src/App.jsx",
"chars": 1187,
"preview": "import { useState, useEffect } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\n"
},
{
"path": "Video 108/src/components/Navbar.jsx",
"chars": 753,
"preview": "import React, { useEffect } from 'react'\n\nconst Navbar = ({ color }) => {\n // Case 1: Run on every render \n useEffect("
},
{
"path": "Video 108/src/index.css",
"chars": 1161,
"preview": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n"
},
{
"path": "Video 108/src/main.jsx",
"chars": 241,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 108/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 109/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 109/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 109/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 109/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 109/package.json",
"chars": 654,
"preview": "{\n \"name\": \"video-109\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "Video 109/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "Video 109/src/App.jsx",
"chars": 1172,
"preview": "import { useState, useEffect, useRef } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vi"
},
{
"path": "Video 109/src/App_1.jsx",
"chars": 1075,
"preview": "import { useState, useEffect, useRef } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vi"
},
{
"path": "Video 109/src/Todo.jsx",
"chars": 731,
"preview": "import React from 'react'\n\nconst Todo = () => {\n let todo = {\n title: \"This is todo title\",\n desc: \"Hey"
},
{
"path": "Video 109/src/index.css",
"chars": 1161,
"preview": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n"
},
{
"path": "Video 109/src/main.jsx",
"chars": 241,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 109/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 11/index.html",
"chars": 590,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "Video 110/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 110/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 110/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 110/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 110/package.json",
"chars": 741,
"preview": "{\n \"name\": \"video-110\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "Video 110/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "Video 110/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "Video 110/src/App.jsx",
"chars": 1929,
"preview": "import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './A"
},
{
"path": "Video 110/src/index.css",
"chars": 1221,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n font-family: Inter, system-ui, Avenir, Helvetica, "
},
{
"path": "Video 110/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 110/tailwind.config.js",
"chars": 181,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "Video 110/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 111/Readme.md",
"chars": 404,
"preview": "You have to use an api and display the data in the form of a card under a container. All the data points returned by the"
},
{
"path": "Video 112/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 112/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 112/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 112/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 112/package.json",
"chars": 654,
"preview": "{\n \"name\": \"video-112\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "Video 112/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "Video 112/src/App.jsx",
"chars": 1012,
"preview": "import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './A"
},
{
"path": "Video 112/src/index.css",
"chars": 1244,
"preview": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n"
},
{
"path": "Video 112/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 112/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 113/.eslintrc.cjs",
"chars": 566,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 113/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 113/Readme.md",
"chars": 404,
"preview": "You have to use an api and display the data in the form of a card under a container. All the data points returned by the"
},
{
"path": "Video 113/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 113/package.json",
"chars": 654,
"preview": "{\n \"name\": \"video-113\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "Video 113/src/App.css",
"chars": 0,
"preview": ""
},
{
"path": "Video 113/src/App.jsx",
"chars": 733,
"preview": "import { useState, useEffect } from 'react'\nimport Navbar from './components/Navbar'\nimport './App.css'\n\nfunction App() "
},
{
"path": "Video 113/src/components/Navbar.jsx",
"chars": 223,
"preview": "import React from 'react'\n\nconst Navbar = () => {\n return (\n <nav>\n <ul>\n <li>Home</li>\n "
},
{
"path": "Video 113/src/index.css",
"chars": 318,
"preview": ".card{\n border: 2px solid black;\n max-width: 23vw;\n}\n\n.container{\n display: flex;\n gap: 34px;\n flex-wrap: wrap;\n}\n\n"
},
{
"path": "Video 113/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 113/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 114/.eslintrc.cjs",
"chars": 566,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 114/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 114/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 114/index.html",
"chars": 374,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 114/package.json",
"chars": 792,
"preview": "{\n \"name\": \"video-114\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "Video 114/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "Video 114/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "Video 114/src/App.jsx",
"chars": 3723,
"preview": "import { useState, useEffect } from 'react'\nimport Navbar from './components/Navbar'\nimport { FaEdit } from \"react-icons"
},
{
"path": "Video 114/src/components/Navbar.jsx",
"chars": 502,
"preview": "import React from 'react'\n\nconst Navbar = () => {\n return (\n <nav className='flex justify-around bg-indigo-900 text-"
},
{
"path": "Video 114/src/index.css",
"chars": 133,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\nbody{\n --tw-bg-opacity: 1;\n background-color: rgb(226"
},
{
"path": "Video 114/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 114/tailwind.config.js",
"chars": 181,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "Video 114/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 115/.eslintrc.cjs",
"chars": 566,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 115/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 115/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 115/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 115/package.json",
"chars": 689,
"preview": "{\n \"name\": \"video-115\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "Video 115/src/App.css",
"chars": 0,
"preview": ""
},
{
"path": "Video 115/src/App.jsx",
"chars": 748,
"preview": "import './App.css'\nimport Navbar from './components/Navbar'\nimport Home from './components/Home'\nimport Login from './co"
},
{
"path": "Video 115/src/components/About.jsx",
"chars": 121,
"preview": "import React from 'react'\n\nconst About = () => {\n return (\n <div>\n About\n </div>\n )\n}\n\nexport default About"
},
{
"path": "Video 115/src/components/Home.jsx",
"chars": 123,
"preview": "import React from 'react'\n\nconst Home = () => {\n return (\n <div>\n I am Home\n </div>\n )\n}\n\nexport default Ho"
},
{
"path": "Video 115/src/components/Login.jsx",
"chars": 121,
"preview": "import React from 'react'\n\nconst Login = () => {\n return (\n <div>\n Login\n </div>\n )\n}\n\nexport default Login"
},
{
"path": "Video 115/src/components/Navbar.jsx",
"chars": 484,
"preview": "import React from 'react'\nimport { NavLink } from 'react-router-dom'\n\nconst Navbar = () => {\n \n return (\n <div>\n "
},
{
"path": "Video 115/src/components/User.jsx",
"chars": 217,
"preview": "import React from 'react'\nimport { useParams } from 'react-router-dom'\n\nconst User = () => {\n const params = useParam"
},
{
"path": "Video 115/src/index.css",
"chars": 231,
"preview": "nav{\n display: flex;\n gap: 34px;\n background-color: black;\n color: white;\n}\n\nli{\n list-style: none;\n padding: 23px"
},
{
"path": "Video 115/src/main.jsx",
"chars": 238,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 115/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 116/.eslintrc.cjs",
"chars": 566,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 116/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 116/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 116/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 116/our app.md",
"chars": 70,
"preview": "App.jsx\n Navbar.jsx \n Button.jsx\n Component1.jsx"
},
{
"path": "Video 116/package.json",
"chars": 654,
"preview": "{\n \"name\": \"video-116\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "Video 116/public/without_context_api/App.jsx",
"chars": 974,
"preview": "import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './A"
},
{
"path": "Video 116/public/without_context_api/components/Button.jsx",
"chars": 232,
"preview": "import React from 'react'\nimport Component1 from './Component1'\nconst Button = ({count}) => {\n return (\n <div>\n "
},
{
"path": "Video 116/public/without_context_api/components/Component1.jsx",
"chars": 139,
"preview": "import React from 'react'\n\nconst Component1 = ({count}) => {\n return (\n <div>\n {count}\n </div>\n )\n}\n\nexport "
},
{
"path": "Video 116/public/without_context_api/components/Navbar.jsx",
"chars": 204,
"preview": "import React from 'react'\nimport Button from './Button'\n\nconst Navbar = ({count}) => {\n return (\n <>\n <div>\n "
},
{
"path": "Video 116/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "Video 116/src/App.jsx",
"chars": 1100,
"preview": "import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './A"
},
{
"path": "Video 116/src/components/Button.jsx",
"chars": 374,
"preview": "import React, {useContext} from 'react'\nimport Component1 from './Component1'\nimport { counterContext } from '../context"
},
{
"path": "Video 116/src/components/Component1.jsx",
"chars": 249,
"preview": "import React, { useContext } from 'react'\nimport { counterContext } from '../context/context'\n\n\nconst Component1 = () =>"
},
{
"path": "Video 116/src/components/Navbar.jsx",
"chars": 183,
"preview": "import React from 'react'\nimport Button from './Button'\n\nconst Navbar = () => {\n return (\n <>\n <div>\n Navbar"
},
{
"path": "Video 116/src/context/context.js",
"chars": 86,
"preview": "import { createContext } from \"react\";\n\nexport const counterContext = createContext(0)"
},
{
"path": "Video 116/src/index.css",
"chars": 1161,
"preview": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n"
},
{
"path": "Video 116/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "Video 116/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "Video 118/.eslintrc.cjs",
"chars": 566,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "Video 118/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "Video 118/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "Video 118/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "Video 118/package.json",
"chars": 654,
"preview": "{\n \"name\": \"video-118\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
}
]
// ... and 497 more files (download for full content)
About this extraction
This page contains the full source code of the CodeWithHarry/Sigma-Web-Dev-Course GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 697 files (572.1 KB), approximately 181.7k tokens, and a symbol index with 94 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.