├── .gitignore ├── crash course ├── cc5 │ ├── src │ │ ├── App.css │ │ ├── index.css │ │ ├── main.jsx │ │ ├── components │ │ │ ├── Demo.jsx │ │ │ └── Card.jsx │ │ ├── assets │ │ │ └── react.svg │ │ └── App.jsx │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── README.md │ ├── eslint.config.js │ └── public │ │ └── vite.svg ├── react-intro │ ├── src │ │ ├── index.css │ │ ├── components │ │ │ ├── Demo.jsx │ │ │ └── Card.jsx │ │ ├── main.jsx │ │ └── App.jsx │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── README.md │ ├── eslint.config.js │ └── public │ │ └── vite.svg ├── .DS_Store ├── cc1 │ ├── notes.js │ └── index.html ├── cc2 │ ├── index.html │ └── app.js ├── cc3 │ ├── index.html │ └── app.js └── crash-course-3 │ ├── index.html │ └── app.js ├── .DS_Store ├── Airbnb resources ├── d1.webp ├── d2.webp ├── d3.webp ├── d4.webp ├── i1.jpeg ├── i2.jpeg ├── i3.jpeg ├── i4.jpeg ├── i5.jpeg ├── i6.jpeg ├── i7.jpeg ├── i8.jpeg ├── i9.jpeg ├── .DS_Store ├── i10.jpeg ├── i11.jpeg ├── svg │ ├── .DS_Store │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-5.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-11.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-8.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-3.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-9.svg │ ├── heart.svg │ ├── start.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-6.svg │ └── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-0.svg └── logo.svg ├── major ├── icon-AppStore_lg30tv.webp ├── instagram-text-icon.webp ├── icon-GooglePlay_1_zixjxl.webp ├── style.css └── index.html ├── js-1 ├── index.html └── app.js ├── js-3 ├── app.js ├── style.css └── index.html ├── tow ├── style.css └── index.html ├── one ├── index.html └── style.css └── untitled folder ├── style.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /crash course/cc5/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /crash course/cc5/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; -------------------------------------------------------------------------------- /crash course/react-intro/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/.DS_Store -------------------------------------------------------------------------------- /crash course/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/crash course/.DS_Store -------------------------------------------------------------------------------- /Airbnb resources/d1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/d1.webp -------------------------------------------------------------------------------- /Airbnb resources/d2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/d2.webp -------------------------------------------------------------------------------- /Airbnb resources/d3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/d3.webp -------------------------------------------------------------------------------- /Airbnb resources/d4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/d4.webp -------------------------------------------------------------------------------- /Airbnb resources/i1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i1.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i2.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i3.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i4.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i5.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i6.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i7.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i8.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i9.jpeg -------------------------------------------------------------------------------- /Airbnb resources/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/.DS_Store -------------------------------------------------------------------------------- /Airbnb resources/i10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i10.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/i11.jpeg -------------------------------------------------------------------------------- /Airbnb resources/svg/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/Airbnb resources/svg/.DS_Store -------------------------------------------------------------------------------- /major/icon-AppStore_lg30tv.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/major/icon-AppStore_lg30tv.webp -------------------------------------------------------------------------------- /major/instagram-text-icon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/major/instagram-text-icon.webp -------------------------------------------------------------------------------- /major/icon-GooglePlay_1_zixjxl.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/HEAD/major/icon-GooglePlay_1_zixjxl.webp -------------------------------------------------------------------------------- /crash course/cc1/notes.js: -------------------------------------------------------------------------------- 1 | // box model 2 | // p => padding 3 | // m=> margin => mx and my 4 | // colors 5 | // flex 6 | // positions 7 | // responsive design -------------------------------------------------------------------------------- /crash course/react-intro/src/components/Demo.jsx: -------------------------------------------------------------------------------- 1 | function Demo(abc){ 2 | return( 3 | <> 4 |

{abc.title}

5 | 6 | ) 7 | } 8 | export default Demo; -------------------------------------------------------------------------------- /crash course/cc5/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from '@tailwindcss/vite' 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react(), tailwindcss()], 7 | }) 8 | -------------------------------------------------------------------------------- /js-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /crash course/cc5/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /crash course/react-intro/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import tailwindcss from '@tailwindcss/vite' 3 | import react from '@vitejs/plugin-react' 4 | 5 | // https://vite.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(), tailwindcss()], 8 | 9 | }) 10 | -------------------------------------------------------------------------------- /crash course/cc2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /crash course/cc3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /crash course/react-intro/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /crash course/crash-course-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /crash course/cc5/src/components/Demo.jsx: -------------------------------------------------------------------------------- 1 | function Demo(){ 2 | return( 3 |
4 |

This is a demo component

5 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, earum!

6 |
7 | ) 8 | } 9 | export default Demo; -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-11.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-8.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /crash course/cc5/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /crash course/react-intro/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-9.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/start.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /crash course/cc5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /crash course/react-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-6.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /crash course/cc5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cc5", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@tailwindcss/vite": "^4.1.13", 14 | "react": "^19.1.1", 15 | "react-dom": "^19.1.1", 16 | "tailwindcss": "^4.1.13" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.33.0", 20 | "@types/react": "^19.1.10", 21 | "@types/react-dom": "^19.1.7", 22 | "@vitejs/plugin-react": "^5.0.0", 23 | "eslint": "^9.33.0", 24 | "eslint-plugin-react-hooks": "^5.2.0", 25 | "eslint-plugin-react-refresh": "^0.4.20", 26 | "globals": "^16.3.0", 27 | "vite": "^7.1.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /crash course/react-intro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-intro", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@tailwindcss/vite": "^4.1.12", 14 | "react": "^19.1.1", 15 | "react-dom": "^19.1.1", 16 | "tailwindcss": "^4.1.12" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.33.0", 20 | "@types/react": "^19.1.10", 21 | "@types/react-dom": "^19.1.7", 22 | "@vitejs/plugin-react": "^5.0.0", 23 | "eslint": "^9.33.0", 24 | "eslint-plugin-react-hooks": "^5.2.0", 25 | "eslint-plugin-react-refresh": "^0.4.20", 26 | "globals": "^16.3.0", 27 | "vite": "^7.1.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /js-3/app.js: -------------------------------------------------------------------------------- 1 | function test(){ 2 | let heading = document.getElementById('heading'); 3 | heading.innerText = 'Thanks for sharing the feedback!'; 4 | let btn = document.getElementById('btn'); 5 | btn.style.backgroundColor = 'blueviolet'; 6 | // btn.style.display = 'none'; 7 | } 8 | function register(){ 9 | let name = document.getElementById('nameInput'); 10 | console.log(name.value) 11 | let alert = document.getElementById('alert'); 12 | let msg = 'Registration Succesful for ' + name.value; 13 | alert.innerText = msg 14 | } 15 | 16 | splitBill=()=>{ 17 | let amount = document.getElementById('amount'); 18 | let persons = document.getElementById('persons'); 19 | 20 | let result = amount.value / persons.value; 21 | document.getElementById('bill').innerText = result 22 | 23 | 24 | } 25 | -------------------------------------------------------------------------------- /crash course/cc5/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. 13 | -------------------------------------------------------------------------------- /crash course/cc5/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import { defineConfig, globalIgnores } from 'eslint/config' 6 | 7 | export default defineConfig([ 8 | globalIgnores(['dist']), 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | extends: [ 12 | js.configs.recommended, 13 | reactHooks.configs['recommended-latest'], 14 | reactRefresh.configs.vite, 15 | ], 16 | languageOptions: { 17 | ecmaVersion: 2020, 18 | globals: globals.browser, 19 | parserOptions: { 20 | ecmaVersion: 'latest', 21 | ecmaFeatures: { jsx: true }, 22 | sourceType: 'module', 23 | }, 24 | }, 25 | rules: { 26 | 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], 27 | }, 28 | }, 29 | ]) 30 | -------------------------------------------------------------------------------- /crash course/react-intro/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. 13 | -------------------------------------------------------------------------------- /crash course/react-intro/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import { defineConfig, globalIgnores } from 'eslint/config' 6 | 7 | export default defineConfig([ 8 | globalIgnores(['dist']), 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | extends: [ 12 | js.configs.recommended, 13 | reactHooks.configs['recommended-latest'], 14 | reactRefresh.configs.vite, 15 | ], 16 | languageOptions: { 17 | ecmaVersion: 2020, 18 | globals: globals.browser, 19 | parserOptions: { 20 | ecmaVersion: 'latest', 21 | ecmaFeatures: { jsx: true }, 22 | sourceType: 'module', 23 | }, 24 | }, 25 | rules: { 26 | 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], 27 | }, 28 | }, 29 | ]) 30 | -------------------------------------------------------------------------------- /tow/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | videos are on 3 | do not write the code 4 | not bw able to see others chat 5 | */ 6 | 7 | /* box model => border, padding and margins */ 8 | 9 | body{ 10 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 11 | } 12 | .card{ 13 | border: 1px solid lightgray; 14 | width: 248px; 15 | border-radius: 26px; 16 | padding: 10px; 17 | } 18 | .card-img{ 19 | width: 100%; 20 | border-radius: 16px; 21 | } 22 | .parent{ 23 | display: flex; 24 | gap: 16px; 25 | justify-content: center; 26 | flex-wrap: wrap; 27 | } 28 | .flex{ 29 | display:flex; 30 | justify-content: space-between; 31 | align-items: center ; 32 | } 33 | 34 | /* align-items is used to move the flex elements vertically */ 35 | /* justify-content: is used to move the flex elements horizontally */ -------------------------------------------------------------------------------- /crash course/cc5/src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | function Card(props){ 2 | function orderHandler(){ 3 | console.log(props.title); 4 | if(props.price > 199){ 5 | console.log("Free Delivery!") 6 | } 7 | else{ 8 | console.log('Amount Payable', props.price + " Rs 49 Chargers!") 9 | } 10 | } 11 | return( 12 | 13 | <> 14 |
15 |
16 | 17 | { 18 | props.ratings>4.5 ?
Must Try
: "" 19 | } 20 | 21 |
22 |

{props.title}

23 |

{props.desc}

24 |
25 | 26 | ) 27 | } 28 | 29 | export default Card; -------------------------------------------------------------------------------- /crash course/react-intro/src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | function Card(props){ 2 | return( 3 | <> 4 |
{ 5 | console.log('food ordered!', props.title) 6 | if(props.price>149){ 7 | console.log('Free Delivery!') 8 | } 9 | else{ 10 | console.log("price" + props.price + "Rs 50 Delivery charge") 11 | } 12 | }}> 13 |
14 | 15 |
4.5 ? "" : "hidden"}> 16 |

Must try

17 |
18 |
19 |
20 |

{props.title}

21 |

Rs {props.price}

22 |
23 |

{props.desc}

24 |
25 | 26 | ) 27 | } 28 | export default Card; -------------------------------------------------------------------------------- /one/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 | 21 |

Login Now

22 |

Lorem ipsum dolor sit amet consectetur adipisicing elit.

23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /js-3/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | .container{ 5 | width: 360px; 6 | margin: 70px auto; 7 | } 8 | .btn{ 9 | background-color: black; 10 | color: white; 11 | padding: 13px 30px; 12 | border: none; 13 | font-size: 16px; 14 | border-radius: 8px; 15 | cursor: pointer; 16 | 17 | } 18 | #nameInput{ 19 | width: 100%; 20 | border: 1px solid lightgray; 21 | padding: 12px; 22 | font-size: 16px; 23 | box-sizing: border-box; 24 | border-radius: 8px; 25 | font-size: 16px; 26 | margin-bottom: 10px; 27 | } 28 | .billSplit{ 29 | width: 366px; 30 | margin: 90px auto; 31 | text-align: center; 32 | } 33 | .input{ 34 | width: 50%; 35 | padding: 12px; 36 | font-size: 16px; 37 | border: 1px solid lightgray; 38 | border-radius: 8px; 39 | box-sizing: border-box; 40 | } 41 | .flex{ 42 | display: flex; 43 | gap: 8px; 44 | } 45 | .split-btn{ 46 | background-color: black; 47 | color: white; 48 | padding: 13px; 49 | border: none; 50 | font-size: 16px; 51 | border-radius: 8px; 52 | cursor: pointer; 53 | width: 100%; 54 | box-sizing: border-box; 55 | margin-top: 8px; 56 | 57 | } -------------------------------------------------------------------------------- /js-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | 23 | 24 |
25 |

⛱️🍿🚘

26 |

Split the bill among your freinds!

27 |

A simple js application that can be used to split the bill among the friends!

28 | 29 | 30 |
31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /crash course/cc5/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /crash course/react-intro/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /one/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 1. videos are on 3 | 2. not write the code 4 | 3. not be able to see others chat 5 | 4. discussion session 6 | */ 7 | 8 | /* h1{} => selector */ 9 | /* .abc => class names always starts with a dot */ 10 | .abc{ 11 | color: red; 12 | } 13 | .center{ 14 | text-align: center; 15 | } 16 | /* div => to apply css to all inner elements in one shot */ 17 | /* box model 18 | border => thickness, style, color 19 | padding => space inside the border 20 | margin => space outside the border 21 | */ 22 | 23 | .box{ 24 | border: 1px solid lightgray; 25 | width: 300px; 26 | padding: 10px; 27 | margin: 60px auto; 28 | border-radius: 24px; 29 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif 30 | } 31 | .box-img{ 32 | width: 100%; 33 | border-radius: 14px; 34 | } 35 | .login{ 36 | text-align: center; 37 | width: 340px; 38 | margin: 220px auto; 39 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 40 | } 41 | .input{ 42 | width: 100%; 43 | margin-bottom: 10px; 44 | padding: 12px; 45 | border: 1px solid gray; 46 | border-radius: 0; 47 | box-sizing: border-box; 48 | font-size: 16px; 49 | } 50 | .btn{ 51 | width: 100%; 52 | box-sizing: border-box; 53 | padding: 12px; 54 | font-size: 16px; 55 | border-radius: 0; 56 | background-color: black; 57 | color: white; 58 | border: 1px solid black; 59 | } 60 | 61 | /* box-sizing: border-box ensures that the content does not go out ofthe parent 62 | element if its going out because of padding. */ 63 | 64 | .logo{ 65 | height: 42px; 66 | } -------------------------------------------------------------------------------- /tow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |

Grilled Sandwitch

15 | 16 |
17 |

Lorem ipsum dolor sit amet consectetur adipisicing elit.

18 |
19 |
20 | 21 |

Grilled Sandwitch

22 |

Lorem ipsum dolor sit amet consectetur adipisicing elit.

23 |
24 |
25 | 26 |

Grilled Sandwitch

27 |

Lorem ipsum dolor sit amet consectetur adipisicing elit.

28 |
29 | 30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /untitled folder/style.css: -------------------------------------------------------------------------------- 1 | /* box model */ 2 | /* flexbox */ 3 | /* positions */ 4 | body{ 5 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 6 | } 7 | .card{ 8 | width: 270px; 9 | border: 1px solid #e6e6e6; 10 | border-radius: 24px; 11 | padding: 10px; 12 | margin: 10px auto; 13 | } 14 | .card-img{ 15 | width: 100%; 16 | border-radius: 14px; 17 | } 18 | 19 | /* 20 | 1. fixed 21 | 2. sticky 22 | 3. absolute 23 | 4. relative 24 | */ 25 | .help-btn{ 26 | background-color: black; 27 | border: none; 28 | padding: 16px 30px; 29 | border-radius: 80px; 30 | font-size: 16px; 31 | color: white; 32 | position: fixed; 33 | bottom:60px; 34 | right:60px; 35 | } 36 | .banner{ 37 | background-color: #fff; 38 | padding: 16px 10px; 39 | position: sticky; 40 | top: 10px; 41 | } 42 | /* top, bottom, left, right => distance from that direction */ 43 | 44 | .red{ 45 | width: 100px; 46 | height: 100px; 47 | background-color: red; 48 | } 49 | 50 | .black{ 51 | width: 70px; 52 | height: 70px; 53 | background-color:black; 54 | position: absolute; 55 | top: 0; 56 | right: 0; 57 | } 58 | 59 | 60 | .blue{ 61 | width: 100px; 62 | height: 100px; 63 | background-color: blue; 64 | } 65 | 66 | 67 | .bg{ 68 | width: 620px; 69 | margin:80px auto; 70 | position: relative; 71 | } 72 | .bg-img{ 73 | width: 100%; 74 | border-radius: 24px; 75 | } 76 | .content{ 77 | position: absolute; 78 | bottom: 100px; 79 | left: 0; 80 | padding: 0 60px; 81 | color: white; 82 | } 83 | .btn{ 84 | background-color: #fff; 85 | padding: 16px 30px; 86 | border-radius: 60px; 87 | font-size: 16px; 88 | border: none; 89 | } 90 | 91 | 92 | .profile{ 93 | width: 600px; 94 | margin: 0 auto; 95 | position: relative; 96 | } 97 | .cover{ 98 | width: 100%; 99 | } 100 | .user{ 101 | width: 120px; 102 | height: 120px; 103 | border-radius: 50%; 104 | position: absolute; 105 | left: 60px; 106 | bottom: -60px; 107 | border: 4px solid white; 108 | } -------------------------------------------------------------------------------- /js-1/app.js: -------------------------------------------------------------------------------- 1 | // keywords, variables, datatypes 2 | // arrays and objects 3 | // conditionals 4 | // loop and functions 5 | 6 | 7 | // interaction 8 | 9 | // apple, coffee, hulili, dsjksadjask 10 | // let, if, for, else, 11 | // let and const , var 12 | 13 | // let name = "yash"; 14 | // let age = 24; 15 | // let isUserAlive = false; 16 | 17 | 18 | 19 | 20 | // data types 21 | 22 | // console.log(typeof isUserAlive) 23 | 24 | 25 | // const bride = 'nidhi'; 26 | // const groom = 'kunal' 27 | // bride = 'ramya' 28 | 29 | // console.log(bride, ' weds ', groom) 30 | 31 | 32 | // arrays and objects 33 | 34 | let items = ['bread', 'coffee', 'butter']; 35 | // index => read, update, delete 36 | // items[1] = 'apple'; 37 | // items.push('milk', 'jam'); 38 | items.test = 'dsajdjkajds' 39 | // console.log(items); 40 | 41 | 42 | // let user = ['sayed', 'sayed@gmail.com', 67000, 200334, 9876543210] 43 | 44 | let user = { 45 | name: 'naved', 46 | email: 'naveed@gmail.com', 47 | inhand: 67000, 48 | pinCode: 211998, 49 | } 50 | user.name = 'sayed Naveed'; 51 | user.address = 'New Delhi'; 52 | delete user.pinCode; 53 | // console.log(typeof user) 54 | 55 | 56 | 57 | // conditionals 58 | let name = 'arpit'; 59 | let age = 2; 60 | 61 | // anything that is either true or false or that gets converted to true or false 62 | // if(0){ 63 | // console.log('statement is true') 64 | // } 65 | // else{ 66 | // console.log('statement is false') 67 | // } 68 | // truthy and falsy 69 | // falsy => 0 -0 "" '' undefined null 70 | 71 | 72 | // if(age>18){ 73 | // console.log('you are eligible to vote in bihar') 74 | // } 75 | // else{ 76 | // console.log('not eligible to vote') 77 | // } 78 | 79 | 80 | 81 | // array of objects 82 | 83 | let a = [1,2,3,4,5] 84 | // let user = {name: 'yash', age: 24, gender: 'male'} 85 | 86 | 87 | let users = [ 88 | {name: 'riya', age: 22, gender: 'female'}, 89 | {name: 'arjun', age: 27, gender: 'male'}, 90 | {name: 'sneha', age: 25, gender: 'female'}, 91 | {name: 'vikas', age: 29, gender: 'male'}, 92 | {name: 'megha', age: 23, gender: 'female'}, 93 | {name: 'karan', age: 30, gender: 'male'}, 94 | {name: 'tina', age: 21, gender: 'female'}, 95 | {name: 'rohit', age: 26, gender: 'male'}, 96 | {name: 'poonam', age: 28, gender: 'female'}, 97 | {name: 'rahul', age: 24, gender: 'male'}, 98 | ] 99 | 100 | console.log(users[2].name) -------------------------------------------------------------------------------- /crash course/cc1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |

Hey, I am Keerthana!

42 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur accusantium amet cumque quae voluptates nesciunt maxime!

43 | 44 |
45 |
46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /untitled folder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 44 | 45 | 53 | 54 | 55 | 56 |
57 | 58 | 59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /crash course/cc3/app.js: -------------------------------------------------------------------------------- 1 | // variables, data types, arrays and objects 2 | // conditionals, functions, ES6 => arrow functions, array map and filters 3 | 4 | let name = 'mayank'; 5 | let age = 2; 6 | 7 | // conditionals => any condition that is either true of false 8 | // or gets converted to true or false 9 | 10 | // if (age > 18) 11 | // console.log('eligible to vote') 12 | // else 13 | // console.log('not eligible to vote') 14 | 15 | // truthy and falsy => 16 | // falsy => 0 -0 "" '' undefined null 17 | 18 | 19 | 20 | // functions 21 | 22 | // function grinder(items){ 23 | // console.log('grinding...', items) 24 | // } 25 | 26 | // grinder('tomatoes'); 27 | // grinder('milk, sugar and icecream'); 28 | 29 | 30 | 31 | function sum(a,b){ 32 | console.log(a+b) 33 | } 34 | 35 | // sum(2,3) 36 | // sum(12,45) 37 | 38 | 39 | // ES6 => arrow functions 40 | // nameOfFunction=()=>{} 41 | sqr=(n)=>{console.log(n*n)} 42 | // sqr(4) 43 | 44 | 45 | // array map and filters 46 | let arr = [1,2,3,4,5,6,7,8] 47 | 48 | // let sqrs = arr.map( 49 | // // function for what i want to dos 50 | // ) 51 | 52 | 53 | 54 | // let sqrs = arr.map(function (n){ 55 | // return n*n 56 | // }) 57 | 58 | 59 | // let sqrs = arr.map((n)=>n*n) 60 | // let evens = arr.filter((a)=>a%2 == 0) 61 | // console.log(evens); 62 | 63 | 64 | const users = [ 65 | { firstName: "Aarav", lastName: "Sharma", age: 24, gender: "Male" }, 66 | { firstName: "Isha", lastName: "Verma", age: 22, gender: "Female" }, 67 | { firstName: "Rohan", lastName: "Patel", age: 28, gender: "Male" }, 68 | { firstName: "Kavya", lastName: "Reddy", age: 26, gender: "Female" }, 69 | { firstName: "Arjun", lastName: "Gupta", age: 30, gender: "Male" }, 70 | { firstName: "Meera", lastName: "Nair", age: 25, gender: "Female" }, 71 | { firstName: "Dev", lastName: "Kapoor", age: 27, gender: "Male" }, 72 | { firstName: "Priya", lastName: "Mishra", age: 23, gender: "Female" }, 73 | { firstName: "Siddharth", lastName: "Chopra", age: 29, gender: "Male" }, 74 | { firstName: "Ananya", lastName: "Joshi", age: 21, gender: "Female" }, 75 | { firstName: "Vikram", lastName: "Rao", age: 31, gender: "Male" }, 76 | { firstName: "Riya", lastName: "Singh", age: 24, gender: "Female" }, 77 | { firstName: "Kunal", lastName: "Deshmukh", age: 27, gender: "Male" }, 78 | { firstName: "Pooja", lastName: "Iyer", age: 25, gender: "Female" }, 79 | { firstName: "Aditya", lastName: "Malhotra", age: 28, gender: "Male" }, 80 | { firstName: "Sneha", lastName: "Banerjee", age: 26, gender: "Female" }, 81 | { firstName: "Rahul", lastName: "Yadav", age: 29, gender: "Male" }, 82 | { firstName: "Neha", lastName: "Pillai", age: 23, gender: "Female" }, 83 | { firstName: "Manish", lastName: "Agarwal", age: 32, gender: "Male" }, 84 | { firstName: "Sanya", lastName: "Chatterjee", age: 22, gender: "Female" } 85 | ]; 86 | 87 | 88 | // let names = users.map((user)=>user.firstName + " " + user.lastName) 89 | let males = users.filter((user)=>user.gender == 'Female').map((user)=>user.firstName) 90 | console.log(males) -------------------------------------------------------------------------------- /crash course/cc5/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /crash course/cc2/app.js: -------------------------------------------------------------------------------- 1 | // hello, apple, coffee, lababa, fklsajdfsoa 2 | // the words that the js understands is called keywords 3 | // if let for map function 4 | 5 | 6 | // variables => store data 7 | let user = "dfks dsljflsfkls djfks"; 8 | let age = 25.6; 9 | let email = 'yash@gmail.com' 10 | user = 'yash goel' 11 | let isOnline = "true"; 12 | // console.log(user, age, email) 13 | 14 | 15 | 16 | // data types 17 | // console.log(typeof isOnline) 18 | 19 | 20 | // arrays and objects 21 | // primitive and non-primitive 22 | 23 | let items = ['bread', 'butter', 'milk', 45, ['diary', 'pen']] 24 | // console.log(items) 25 | // items[0] = 'brown bread' 26 | // items[3] = 'coffee' 27 | // items.push('banana', 'coffee') 28 | // items.pop(); 29 | // items.pop(); 30 | // items.splice() => index, delete count, new values 31 | // items.splice(0, 1, 'rice', 'apple') 32 | // items.splice(0, 2) 33 | items.splice(1, 0, 'maggie') 34 | // console.log(items) 35 | 36 | 37 | 38 | 39 | // objects 40 | 41 | let student = { 42 | name: 'yash', 43 | age: 30, 44 | mobile: 9876543210, 45 | pinCode: 211009, 46 | } 47 | student.name = 'yash goel' 48 | delete student.pinCode 49 | student.email = 'yash@gmail.com' 50 | // console.log(student) 51 | 52 | 53 | // primitive => strings, boolean and numbers 54 | // non-primitive => arrays and objects 55 | 56 | let a = 5; 57 | let b = a; 58 | b = b+10 59 | 60 | // console.log(a,b) 61 | 62 | let arr = [1,2,3,4,5] 63 | let arr1 = arr; 64 | arr1.pop() 65 | 66 | // console.log(arr, arr1) 67 | 68 | // const name = 'codekaro' 69 | // name = 'ashish' 70 | // console.log(name) 71 | 72 | 73 | // const boy = 'one' 74 | // const girl = 'two' 75 | 76 | // console.log(boy + ' weds ' + girl) 77 | 78 | // lucky winner program 79 | 80 | const users = [ 81 | { name: "Aarav Sharma", email: "aarav.sharma@example.com" }, 82 | { name: "Priya Verma", email: "priya.verma@example.com" }, 83 | { name: "Rohan Mehta", email: "rohan.mehta@example.com" }, 84 | { name: "Ananya Gupta", email: "ananya.gupta@example.com" }, 85 | { name: "Kunal Patel", email: "kunal.patel@example.com" }, 86 | { name: "Sneha Iyer", email: "sneha.iyer@example.com" }, 87 | { name: "Vikram Singh", email: "vikram.singh@example.com" }, 88 | { name: "Neha Nair", email: "neha.nair@example.com" }, 89 | { name: "Aditya Joshi", email: "aditya.joshi@example.com" }, 90 | { name: "Simran Kaur", email: "simran.kaur@example.com" }, 91 | { name: "Rahul Deshmukh", email: "rahul.deshmukh@example.com" }, 92 | { name: "Pooja Reddy", email: "pooja.reddy@example.com" }, 93 | { name: "Arjun Choudhary", email: "arjun.choudhary@example.com" }, 94 | { name: "Divya Bhatia", email: "divya.bhatia@example.com" }, 95 | { name: "Siddharth Malhotra", email: "siddharth.malhotra@example.com" }, 96 | { name: "Meera Pillai", email: "meera.pillai@example.com" }, 97 | { name: "Nikhil Kapoor", email: "nikhil.kapoor@example.com" }, 98 | { name: "Shreya Das", email: "shreya.das@example.com" }, 99 | { name: "Manish Yadav", email: "manish.yadav@example.com" }, 100 | { name: "Ritika Saxena", email: "ritika.saxena@example.com" }, 101 | { name: "Amit Tiwari", email: "amit.tiwari@example.com" }, 102 | { name: "Ishita Ghosh", email: "ishita.ghosh@example.com" }, 103 | { name: "Varun Khanna", email: "varun.khanna@example.com" }, 104 | { name: "Kritika Jain", email: "kritika.jain@example.com" }, 105 | { name: "Harsh Chauhan", email: "harsh.chauhan@example.com" }, 106 | { name: "Tanvi Kulkarni", email: "tanvi.kulkarni@example.com" }, 107 | { name: "Deepak Sinha", email: "deepak.sinha@example.com" }, 108 | { name: "Mansi Agarwal", email: "mansi.agarwal@example.com" }, 109 | { name: "Rajesh Kumar", email: "rajesh.kumar@example.com" }, 110 | { name: "Aditi Mishra", email: "aditi.mishra@example.com" } 111 | ]; 112 | 113 | 114 | let winnerIndex = Math.floor(Math.random()*users.length) 115 | console.log(users[winnerIndex].name) 116 | 117 | 118 | 119 | // console.log(x) 120 | // var x = 5; -------------------------------------------------------------------------------- /major/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | box model 3 | flexbox 4 | positions 5 | media queries and animations 6 | */ 7 | 8 | body { 9 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 10 | } 11 | @media (min-width: 990px) { 12 | .container { 13 | width: 990px; 14 | margin: 60px auto; 15 | display: flex; 16 | gap: 40px; 17 | } 18 | .feed { 19 | width: 560px; 20 | margin: 0; 21 | padding: 10px; 22 | border-radius: 14px; 23 | border: 1px solid lightgray; 24 | margin-bottom: 20px; 25 | } 26 | .feed-img { 27 | width: 100%; 28 | border-radius: 14px; 29 | } 30 | .profile { 31 | display: flex; 32 | margin-bottom: 16px; 33 | gap: 8px; 34 | align-items: center; 35 | } 36 | .user { 37 | width: 50px; 38 | height: 50px; 39 | object-fit: cover; 40 | border-radius: 50%; 41 | } 42 | .bi { 43 | font-size: 24px; 44 | } 45 | .reactions { 46 | display: flex; 47 | justify-content: space-between; 48 | } 49 | .reactions-left { 50 | display: flex; 51 | gap: 16px; 52 | } 53 | .sidebar-title { 54 | margin-top: 0; 55 | } 56 | .links { 57 | display: flex; 58 | gap: 8px; 59 | } 60 | .link { 61 | height: 42px; 62 | } 63 | .story-container { 64 | display: flex; 65 | gap: 16px; 66 | width: 990px; 67 | margin: 60px auto; 68 | } 69 | .story-img { 70 | width: 90px; 71 | height: 90px; 72 | object-fit: cover; 73 | border-radius: 50%; 74 | } 75 | .story { 76 | font-size: 14px; 77 | text-align: center; 78 | } 79 | .navbar { 80 | display: flex; 81 | justify-content: space-between; 82 | align-items: center; 83 | width: 990px; 84 | margin: 10px auto; 85 | } 86 | .logo { 87 | height: 36px; 88 | } 89 | .btn { 90 | background-color: #fff; 91 | border: 1px solid lightgray; 92 | border-radius: 8px; 93 | padding: 12px 18px; 94 | font-size: 16px; 95 | } 96 | } 97 | 98 | /* small screens */ 99 | 100 | @media (max-width: 989px) { 101 | .container { 102 | 103 | margin: 60px auto; 104 | 105 | } 106 | .feed { 107 | 108 | margin: 0; 109 | padding: 10px; 110 | border-radius: 14px; 111 | border: 1px solid rgb(233, 233, 233); 112 | margin-bottom: 20px; 113 | } 114 | .feed-img { 115 | width: 100%; 116 | border-radius: 14px; 117 | } 118 | .profile { 119 | display: flex; 120 | margin-bottom: 16px; 121 | gap: 8px; 122 | align-items: center; 123 | } 124 | .user { 125 | width: 50px; 126 | height: 50px; 127 | object-fit: cover; 128 | border-radius: 50%; 129 | } 130 | .bi { 131 | font-size: 24px; 132 | } 133 | .reactions { 134 | display: flex; 135 | justify-content: space-between; 136 | } 137 | .reactions-left { 138 | display: flex; 139 | gap: 16px; 140 | } 141 | .sidebar{ 142 | text-align: center; 143 | } 144 | .sidebar-title { 145 | margin-top: 0; 146 | font-size: 20px; 147 | } 148 | .links { 149 | display: flex; 150 | gap: 8px; 151 | justify-content: center; 152 | } 153 | .link { 154 | height: 42px; 155 | } 156 | .story-container { 157 | display: flex; 158 | gap: 16px; 159 | width: 100%; 160 | margin: 60px auto; 161 | overflow-x:scroll ; 162 | } 163 | .story-img { 164 | width: 70px; 165 | height: 70px; 166 | object-fit: cover; 167 | border-radius: 50%; 168 | } 169 | .story { 170 | font-size: 14px; 171 | text-align: center; 172 | } 173 | .navbar { 174 | display: flex; 175 | justify-content: space-between; 176 | align-items: center; 177 | margin: 10px auto; 178 | } 179 | .logo { 180 | height: 36px; 181 | } 182 | .btn { 183 | background-color: #fff; 184 | border: 1px solid lightgray; 185 | border-radius: 80px; 186 | padding: 10px 16px; 187 | font-size: 16px; 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /crash course/crash-course-3/app.js: -------------------------------------------------------------------------------- 1 | // es6 => ecma script 6 2 | // functions => are tools to create similir task when we need 3 | // arrow functions 4 | // array map 5 | // array filters 6 | 7 | function grinder(items){ 8 | console.log('grinding...', items) 9 | } 10 | // grinder('tomatoes'); 11 | // grinder('onions'); 12 | 13 | 14 | // function add(a,b){ 15 | // console.log(a+b) 16 | // } 17 | // add(2,3) 18 | // add(6,9) 19 | 20 | 21 | // demo=()=>{console.log('arrow function')} 22 | // demo() 23 | 24 | 25 | // array map 26 | let arr = [1,2,3,4,5,6,7,8]; 27 | // let sqrs = arr.map((n)=>n*n) 28 | // let sqrs = arr.map(function(n){ 29 | // return n*n 30 | // }) 31 | // console.log(sqrs) 32 | 33 | 34 | // let even = arr.filter((n)=>n%2==0) 35 | // console.log(even) 36 | 37 | // chaining 38 | 39 | // let sqrs = arr.map((n)=>n*n).filter((n)=>n%2 == 0) 40 | // console.log(sqrs) 41 | 42 | 43 | const people = [ 44 | { name: "Nishith Chatterjee", email: "krishnamurthyadvika@varkey.com", age: 32 }, 45 | { name: "Kimaya Lal", email: "ayeshabuch@yahoo.com", age: 18 }, 46 | { name: "Prerak Batra", email: "laganbala@chaudry.org", age: 41 }, 47 | { name: "Mahika Rao", email: "vohralakshit@hotmail.com", age: 27 }, 48 | { name: "Stuvan D’Alia", email: "kashvichar@gmail.com", age: 12 }, 49 | { name: "Ojas Mangal", email: "arhaan66@vora.biz", age: 24 }, 50 | { name: "Adira Amble", email: "tusharbakshi@boase.biz", age: 7 }, 51 | { name: "Yakshit Datta", email: "advika50@bansal.org", age: 36 }, 52 | { name: "Nikhil Bawa", email: "sanjaychaudhari@wanadoo.fr", age: 20 }, 53 | { name: "Gauri D’Souza", email: "alokpant@wanadoo.fr", age: 42 }, 54 | { name: "Rajeev Pathak", email: "jhaaryan@nair.info", age: 9 }, 55 | { name: "Anvika Kapoor", email: "harshitabhattacharya@bhatt.org", age: 33 }, 56 | { name: "Tanishi Khatri", email: "priyankajoshi@raman.com", age: 15 }, 57 | { name: "Kartikeya Vohra", email: "rajendrajoshi@chaudry.biz", age: 28 }, 58 | { name: "Harsha Mahajan", email: "rekhamahajan@yahoo.com", age: 40 }, 59 | { name: "Aryaman Jain", email: "meghaarora@hotmail.com", age: 17 }, 60 | { name: "Tanvi Raghavan", email: "sunitashah@parikh.com", age: 22 }, 61 | { name: "Shanaya Pillai", email: "rajeshkapoor@anand.biz", age: 10 }, 62 | { name: "Aarav Banerjee", email: "shivkapoor@pinto.org", age: 44 }, 63 | { name: "Vanya Iyer", email: "goyaljash@wanadoo.fr", age: 26 }, 64 | { name: "Kiaan Shetty", email: "rajatpatel@bansal.biz", age: 14 }, 65 | { name: "Samaira Sinha", email: "kapoorriya@patel.org", age: 19 }, 66 | { name: "Vivaan Bhagat", email: "shivakumar@wanadoo.fr", age: 31 }, 67 | { name: "Rhea Chawla", email: "joshiashish@chaudry.org", age: 4 }, 68 | { name: "Atharv Ghosh", email: "manishbhat@yahoo.com", age: 30 }, 69 | { name: "Ishika Nair", email: "sunilparikh@gmail.com", age: 21 }, 70 | { name: "Keshav Malhotra", email: "soniakapoor@sharma.biz", age: 8 }, 71 | { name: "Aanya Mehta", email: "agarwalvihaan@patel.info", age: 23 }, 72 | { name: "Rudra Khanna", email: "arorakian@gupta.biz", age: 37 }, 73 | { name: "Diya Saxena", email: "rajibhat@yahoo.com", age: 29 }, 74 | { name: "Arnav Rathi", email: "manishkashyap@chaudry.com", age: 16 }, 75 | { name: "Meera Joshi", email: "ajaygoyal@raman.org", age: 27 }, 76 | { name: "Parth Sharma", email: "pandayanish@chaudry.org", age: 13 }, 77 | { name: "Saanvi Agarwal", email: "bhattmohan@yahoo.com", age: 6 }, 78 | { name: "Krishna Desai", email: "rekhamalhotra@chaudry.biz", age: 43 }, 79 | { name: "Reyansh Menon", email: "chowdhuryvaani@gmail.com", age: 25 }, 80 | { name: "Ananya Verma", email: "anushakamath@gupta.com", age: 11 }, 81 | { name: "Vihaan Bhandari", email: "shikhaagarwal@hotmail.com", age: 39 }, 82 | { name: "Navya Gupta", email: "abhishekjain@vohra.org", age: 2 }, 83 | { name: "Arya Reddy", email: "joshipalak@gupta.biz", age: 35 }, 84 | { name: "Advait Kulkarni", email: "sharmasameer@parikh.com", age: 18 }, 85 | { name: "Myra Chopra", email: "soniasharma@bansal.com", age: 41 }, 86 | { name: "Rohan Mishra", email: "kaurpranav@chaudry.org", age: 7 }, 87 | { name: "Aadhya Basu", email: "rajkumarpatel@vora.org", age: 28 }, 88 | { name: "Dhruv Pandey", email: "arorapranav@patel.com", age: 34 }, 89 | { name: "Kiara Gill", email: "kapoorarjun@yahoo.com", age: 9 }, 90 | { name: "Ira Sengupta", email: "pandeyanvi@gupta.biz", age: 19 }, 91 | { name: "Yash Dubey", email: "sharmasaurabh@chaudry.org", age: 38 }, 92 | { name: "Siddhi Joshi", email: "kavitanayar@patel.com", age: 12 }, 93 | { name: "Manan Trivedi", email: "rekhapatel@parikh.biz", age: 20 } 94 | ]; 95 | 96 | let users = people.filter((user)=>user.age > 18).map( 97 | (user)=> user.name 98 | ) 99 | console.log(users) -------------------------------------------------------------------------------- /crash course/cc5/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Card from './components/Card'; 2 | const items = [ 3 | { 4 | title: "Paneer Butter Masala", 5 | desc: "Creamy tomato gravy with paneer, flavored with Indian spices.", 6 | price: 249, 7 | img: "https://images.unsplash.com/photo-1631452180539-96aca7d48617?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGFuZWVyfGVufDB8MHwwfHx8Mg%3D%3D", 8 | ratings: 4.2, 9 | votes: 2345, 10 | }, 11 | { 12 | title: "Vegetable Biryani", 13 | desc: "Aromatic basmati rice layered with mixed vegetables and mild spices.", 14 | price: 219, 15 | img: "https://images.unsplash.com/photo-1630409346824-4f0e7b080087?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmlyaXlhbml8ZW58MHwwfDB8fHwy", // sample direct Unsplash URL 16 | ratings: 4.6, 17 | votes: 3120, 18 | }, 19 | { 20 | title: "Margherita Pizza", 21 | desc: "Classic Italian pizza topped with fresh mozzarella and basil.", 22 | price: 299, 23 | img: "https://images.unsplash.com/photo-1576458088443-04a19bb13da6?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGl6emF8ZW58MHwwfDB8fHwy", 24 | ratings: 4.7, 25 | votes: 4278, 26 | }, 27 | { 28 | title: "Chole Bhature", 29 | desc: "Fluffy bhature served with spicy chickpea curry.", 30 | price: 159, 31 | img: "https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Zm9vZHxlbnwwfDB8MHx8fDI%3D", 32 | ratings: 4.5, 33 | votes: 1876, 34 | }, 35 | { 36 | title: "Masala Dosa", 37 | desc: "Crispy South Indian dosa filled with spiced potato stuffing.", 38 | price: 129, 39 | img: "https://images.unsplash.com/photo-1643268972535-a2b100ff3632?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZG9zYXxlbnwwfDB8MHx8fDI%3D", 40 | ratings: 4.3, 41 | votes: 2210, 42 | }, 43 | { 44 | title: "Pav Bhaji", 45 | desc: "Buttery pav served with spiced mashed vegetable curry.", 46 | price: 99, 47 | img: "https://images.unsplash.com/photo-1626132647523-66f5bf380027?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8UGF2JTIwQmhhaml8ZW58MHwwfDB8fHwy", 48 | ratings: 4.2, 49 | votes: 3421, 50 | }, 51 | { 52 | title: "Dal Makhani", 53 | desc: "Slow-cooked black lentils in a rich, buttery gravy.", 54 | price: 179, 55 | img: "https://images.unsplash.com/photo-1626500155537-93690c24099e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8RGFsfGVufDB8MHwwfHx8Mg%3D%3D", 56 | ratings: 4.6, 57 | votes: 2908, 58 | }, 59 | { 60 | title: "Spring Rolls", 61 | desc: "Crispy fried rolls stuffed with fresh veggies and noodles.", 62 | price: 149, 63 | img: "https://images.unsplash.com/photo-1606525437679-037aca74a3e9?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8U3ByaW5nJTIwUm9sbHN8ZW58MHwwfDB8fHwy", 64 | ratings: 4.1, 65 | votes: 1320, 66 | }, 67 | { 68 | title: "Chocolate Brownie", 69 | desc: "Moist chocolate brownie topped with a scoop of vanilla ice cream.", 70 | price: 129, 71 | img: "https://images.unsplash.com/photo-1672867458764-2a04080005fe?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Q2hvY29sYXRlJTIwQnJvd25pZXxlbnwwfDB8MHx8fDI%3D", 72 | ratings: 4.8, 73 | votes: 1875, 74 | }, 75 | { 76 | title: "Gulab Jamun", 77 | desc: "Soft milk-solid dumplings soaked in sugar syrup.", 78 | price: 89, 79 | img: "https://images.unsplash.com/photo-1666190092159-3171cf0fbb12?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8R3VsYWIlMjBKYW11bnxlbnwwfDB8MHx8fDI%3D", 80 | ratings: 4.7, 81 | votes: 2530, 82 | }, 83 | { 84 | title: "Chicken Tikka", 85 | desc: "Tender chicken chunks marinated in spices and grilled to perfection.", 86 | price: 299, 87 | img: "https://images.unsplash.com/photo-1603894584373-5ac82b2ae398?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Q2hpY2tlbiUyMFRpa2thfGVufDB8MHwwfHx8Mg%3D%3D", 88 | ratings: 4.6, 89 | votes: 2980, 90 | }, 91 | { 92 | title: "Mango Lassi", 93 | desc: "Creamy yogurt blended with ripe mangoes and a hint of cardamom.", 94 | price: 99, 95 | img: "https://images.unsplash.com/photo-1527406619566-0159590b8540?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8TGFzc2l8ZW58MHwwfDB8fHwy", 96 | ratings: 4.4, 97 | votes: 1960, 98 | }, 99 | ]; 100 | function App() { 101 | 102 | return ( 103 | <> 104 | 105 | 106 |
107 | { 108 | items.map((item)=> ) 109 | } 110 |
111 | 112 | 113 | ) 114 | } 115 | 116 | export default App; 117 | -------------------------------------------------------------------------------- /crash course/react-intro/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Card from './components/Card' 2 | const items = [ 3 | { 4 | title: "Paneer Butter Masala", 5 | desc: "Creamy tomato gravy with soft paneer cubes, flavored with Indian spices.", 6 | price: 249, 7 | img: "https://images.unsplash.com/photo-1631452180539-96aca7d48617?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGFuZWVyfGVufDB8MHwwfHx8Mg%3D%3D", 8 | ratings: 4.6, 9 | votes: 2345, 10 | }, 11 | { 12 | title: "Vegetable Biryani", 13 | desc: "Aromatic basmati rice layered with mixed vegetables and mild spices.", 14 | price: 219, 15 | img: "https://images.unsplash.com/photo-1630409346824-4f0e7b080087?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmlyaXlhbml8ZW58MHwwfDB8fHwy", // sample direct Unsplash URL 16 | ratings: 4.5, 17 | votes: 3120, 18 | }, 19 | { 20 | title: "Margherita Pizza", 21 | desc: "Classic Italian pizza topped with fresh mozzarella and basil.", 22 | price: 299, 23 | img: "https://images.unsplash.com/photo-1576458088443-04a19bb13da6?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGl6emF8ZW58MHwwfDB8fHwy", 24 | ratings: 4.7, 25 | votes: 4278, 26 | }, 27 | { 28 | title: "Chole Bhature", 29 | desc: "Fluffy bhature served with spicy chickpea curry.", 30 | price: 159, 31 | img: "https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Zm9vZHxlbnwwfDB8MHx8fDI%3D", 32 | ratings: 4.5, 33 | votes: 1876, 34 | }, 35 | { 36 | title: "Masala Dosa", 37 | desc: "Crispy South Indian dosa filled with spiced potato stuffing.", 38 | price: 129, 39 | img: "https://images.unsplash.com/photo-1643268972535-a2b100ff3632?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZG9zYXxlbnwwfDB8MHx8fDI%3D", 40 | ratings: 4.3, 41 | votes: 2210, 42 | }, 43 | { 44 | title: "Pav Bhaji", 45 | desc: "Buttery pav served with spiced mashed vegetable curry.", 46 | price: 99, 47 | img: "https://images.unsplash.com/photo-1626132647523-66f5bf380027?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8UGF2JTIwQmhhaml8ZW58MHwwfDB8fHwy", 48 | ratings: 4.2, 49 | votes: 3421, 50 | }, 51 | { 52 | title: "Dal Makhani", 53 | desc: "Slow-cooked black lentils in a rich, buttery gravy.", 54 | price: 179, 55 | img: "https://images.unsplash.com/photo-1626500155537-93690c24099e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8RGFsfGVufDB8MHwwfHx8Mg%3D%3D", 56 | ratings: 4.6, 57 | votes: 2908, 58 | }, 59 | { 60 | title: "Spring Rolls", 61 | desc: "Crispy fried rolls stuffed with fresh veggies and noodles.", 62 | price: 149, 63 | img: "https://images.unsplash.com/photo-1606525437679-037aca74a3e9?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8U3ByaW5nJTIwUm9sbHN8ZW58MHwwfDB8fHwy", 64 | ratings: 4.1, 65 | votes: 1320, 66 | }, 67 | { 68 | title: "Chocolate Brownie", 69 | desc: "Moist chocolate brownie topped with a scoop of vanilla ice cream.", 70 | price: 129, 71 | img: "https://images.unsplash.com/photo-1672867458764-2a04080005fe?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Q2hvY29sYXRlJTIwQnJvd25pZXxlbnwwfDB8MHx8fDI%3D", 72 | ratings: 4.8, 73 | votes: 1875, 74 | }, 75 | { 76 | title: "Gulab Jamun", 77 | desc: "Soft milk-solid dumplings soaked in sugar syrup.", 78 | price: 89, 79 | img: "https://images.unsplash.com/photo-1666190092159-3171cf0fbb12?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8R3VsYWIlMjBKYW11bnxlbnwwfDB8MHx8fDI%3D", 80 | ratings: 4.7, 81 | votes: 2530, 82 | }, 83 | { 84 | title: "Chicken Tikka", 85 | desc: "Tender chicken chunks marinated in spices and grilled to perfection.", 86 | price: 299, 87 | img: "https://images.unsplash.com/photo-1603894584373-5ac82b2ae398?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Q2hpY2tlbiUyMFRpa2thfGVufDB8MHwwfHx8Mg%3D%3D", 88 | ratings: 4.6, 89 | votes: 2980, 90 | }, 91 | { 92 | title: "Mango Lassi", 93 | desc: "Creamy yogurt blended with ripe mangoes and a hint of cardamom.", 94 | price: 99, 95 | img: "https://images.unsplash.com/photo-1527406619566-0159590b8540?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8TGFzc2l8ZW58MHwwfDB8fHwy", 96 | ratings: 4.4, 97 | votes: 1960, 98 | }, 99 | ]; 100 | 101 | function App() { 102 | return ( 103 | <> 104 | {/*

Welcome to react js! {Math.floor(Math.random()*100)}

*/} 105 |
106 | { 107 | items.map((item)=>{ 108 | return 109 | }) 110 | } 111 |
112 | 113 | 114 | 115 | 116 | ) 117 | } 118 | 119 | export default App 120 | -------------------------------------------------------------------------------- /major/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 |
17 |
18 | 19 |
Varun
20 |
21 |
22 | 23 |
Navneeth
24 |
25 |
26 | 27 |
Namrata
28 |
29 |
30 | 31 |
Keerthana
32 |
33 |
34 | 35 |
Kumar
36 |
37 |
38 | 39 |
Nikita
40 |
41 |
42 | 43 |
Prateek
44 |
45 |
46 | 47 |
Dibya
48 |
49 |
50 | 51 |
Rushit
52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 | 60 |
61 |
Yash Goel
62 |
@yashgoel
63 |
64 |
65 | 66 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptate quasi pariatur commodi fugit.

67 |
68 |
69 | 70 | 71 | 72 |
73 | 74 |
75 |
76 | 77 | 78 |
79 |
80 | 81 |
82 |
Nidhi
83 |
@iamnidhi
84 |
85 |
86 | 87 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptate quasi pariatur commodi fugit.

88 |
89 |
90 | 91 | 92 | 93 |
94 | 95 |
96 |
97 | 98 | 99 | 100 |
101 |
102 | 103 |
104 |
Nithin
105 |
@iamnithin
106 |
107 |
108 | 109 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptate quasi pariatur commodi fugit.

110 |
111 |
112 | 113 | 114 | 115 |
116 | 117 |
118 |
119 |
120 |
121 |

Download the mobile app for the best user experience!

122 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius, possimus! Cupiditate saepe nostrum sit vitae officiis.

123 |
124 | 125 | 126 |
127 |
128 |
129 | 130 | -------------------------------------------------------------------------------- /Airbnb resources/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-0.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------