{"id":14957064,"url":"https://github.com/lucky-kashyap/front-end-domination-create-anything-with-code","last_synced_at":"2025-05-06T20:03:03.581Z","repository":{"id":207216711,"uuid":"718706617","full_name":"Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code","owner":"Lucky-Kashyap","description":"Start with Front-End Journey with Sheryians Coding School (Front-End Domination: Create-Anything-with-Code)","archived":false,"fork":false,"pushed_at":"2024-09-10T16:40:29.000Z","size":57036,"stargazers_count":104,"open_issues_count":0,"forks_count":56,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-10T01:15:19.360Z","etag":null,"topics":["advance-javascript","api","context-api","css","css-animation","css-flexbox","css-grid-layout","framer-","gsap","gsap-react","html","javascript","javascript-dom-manipulation","locomotive","react-hooks","react-js","react-router-dom","responsive-web-design","scrolltrigger","tailwind-css"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lucky-Kashyap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-14T16:27:19.000Z","updated_at":"2025-02-27T22:16:09.000Z","dependencies_parsed_at":"2023-12-19T10:27:34.683Z","dependency_job_id":"1b455455-bef5-43f8-b439-745b20348b1d","html_url":"https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code","commit_stats":{"total_commits":258,"total_committers":2,"mean_commits":129.0,"dds":"0.11627906976744184","last_synced_commit":"38a4ab30039db6ba96e4894eebf564110b698496"},"previous_names":["lucky-kashyap/front-end-domination-create-anything-with-code"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucky-Kashyap%2FFront-End-Domination-Create-Anything-with-Code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucky-Kashyap%2FFront-End-Domination-Create-Anything-with-Code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucky-Kashyap%2FFront-End-Domination-Create-Anything-with-Code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucky-Kashyap%2FFront-End-Domination-Create-Anything-with-Code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lucky-Kashyap","download_url":"https://codeload.github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243565416,"owners_count":20311704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["advance-javascript","api","context-api","css","css-animation","css-flexbox","css-grid-layout","framer-","gsap","gsap-react","html","javascript","javascript-dom-manipulation","locomotive","react-hooks","react-js","react-router-dom","responsive-web-design","scrolltrigger","tailwind-css"],"created_at":"2024-09-24T13:14:01.985Z","updated_at":"2025-03-14T11:06:34.741Z","avatar_url":"https://github.com/Lucky-Kashyap.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front-End-Domination-Create-Anything-with-Code\n\nStart with Front-End Journey with Sheryians Coding School (Front-End Domination: Create-Anything-with-Code)\n\n### Essentials - So you don;t fail\n\nEmbark on an insightful journey as we unravel the intricacies of our learning platform. Navigate uncertainties with proven techniques, ensuring a smooth learning experience. This video serves as your guide, equipping you to confidently resolve doubts and make the most of your educational adventure.\n\n### Getting Started With Basics | Installation Guides\n\nDive into the essentials! This video serves as your gateway to the world of programming. From laying the foundation with basics to providing a step-by-step installation guide, it's your go-to resource for a smooth start on your coding journey.\n\n### HTML - Making Architecture\n\nEmbark on the HTML adventure! This video introduces you to the building blocks of web development. Uncover the power of HTML as we demystify its essentials, setting the stage for your journey into the fascinating world of coding.\n\n- HTMl level 1\n  Craft a robust coding foundation with HTML! This video guides you through the essentials, ensuring you build a sturdy base for your web development journey. From tags to structure, master the art of creating solid HTML structures.\n- HTML Level 2\n  Dive into HTML mastery! This video breaks down the magic of HTML tags. Unlock the power of these building blocks, understanding how each tag contributes to the creation of dynamic and structured web content.\n\n### HTML-5: Semantic\n\nDemystifying HTML5 Semantic Elements! Learn what they are and how to wield them effectively. This video offers insights into utilizing HTML5 Semantic Elements to enhance website  \n structure and accessibility.\n\n### CSS Basics - Styling things UP\n\nCSS, or Cascading Style Sheets, is the language used to control the presentation and layout of web pages. It allows you to define the visual style of HTML elements, including fonts, colors, spacing, and more.\n\n### CSS Grid Layout\n\nUncover the power of layout design! Dive into 'CSS Grid: A Complete Guide to CSS Grid' and master the art of creating dynamic, responsive layouts. Explore the versatility of CSS Grid for modern web design.\n\nCreate Navbar Using CSS Grid :\n\n![screencapture-127-0-0-1-5500-index-html-2023-12-01-15_25_39](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/b7253a10-5895-449b-bdca-e8237d7059a5)\n\nBlock Create Using Grid:\n\nhtml code :\n\n       \u003cdiv class=\"main\"\u003e\n          \u003cdiv class=\"elem elem1\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"elem elem2\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"elem\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"elem\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"elem\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"elem\"\u003e\u003c/div\u003e\n          \u003c!-- \u003cdiv class=\"left\"\u003e\u003c/div\u003e\n\n          \u003cdiv class=\"right\"\u003e\u003c/div\u003e --\u003e\n        \u003c/div\u003e\n\nCSS Code:\n\n    .main {\n      width: 100%;\n      height: 100%;\n      background-color: #ededed;\n      display: grid;\n      grid-template-columns: 20% 20% 20% 20% 20% 20%;\n      grid-template-rows: 20% 20% 20% 20% 20% 20%;\n    }\n    .elem {\n      border: 3px solid #000;\n      background-color: crimson;\n    }\n    .elem1 {\n      background-color: violet;\n      /* grid-column-start: 1;\n      grid-column-end: 4;\n      grid-row-start: 1;\n      grid-row-end: 3; */\n      grid-column: 1/4;\n      grid-row: 1/3;\n    }\n\nCSS Grid: Making Project Using CSS Grid:\n\nDesktop UI:\n\n![screencapture-127-0-0-1-5500-index-html-2023-12-01-16_51_36](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/21b4f725-d660-4a0f-9d8e-e78a75ce0fd5)\n\n![ezgif com-video-to-gif](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/f9abcc80-2179-48ce-9be2-dae9aa71c261)\n\nMobile UI:\n\n![screencapture-127-0-0-1-5500-index-html-2023-12-01-16_52_16](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/9d7d8eb4-edca-443c-80a4-8111249bf75a)\n\n### CSS Projects: Elevate Your Design Skills\n\nThis section introduces you to practical CSS projects. You'll apply your CSS skills to create real-world designs and layouts. These projects will put your knowledge to the test and help you gain hands-on experience in using CSS for web development.\n\n-Project 1 Design link : https://pin.it/5QrO8cz\n\n![screencapture-file-D-Sheryians-FrontEnd-Domination-CSS-Projects-Elevate-Your-Design-Skills-project-1-practice-index-html-2023-11-29-21_02_51](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/fbf1ed7f-b35c-4524-8e54-a76decb61f81)\n\n-Source Code link : https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/tree/main/CSS%20Projects%20-%20Elevate%20Your%20Design%20Skills/Project%201\n\n-Project 2 Design link : https://pin.it/5jlUvw1\n\n![screencapture-file-D-Sheryians-FrontEnd-Domination-CSS-Projects-Elevate-Your-Design-Skills-project-2-cotton-weave-index-html-2023-11-29-21_03_03](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/3f607285-cda4-467a-9512-5938eca2a37b)\n\n-Source Code link : https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/tree/main/CSS%20Projects%20-%20Elevate%20Your%20Design%20Skills/project%202%20cotton%20weave\n\n-Project 3 Design link : https://pin.it/6tU5NgO\n\n![screencapture-file-D-Sheryians-FrontEnd-Domination-CSS-Projects-Elevate-Your-Design-Skills-project-3-trendline-index-html-2023-11-29-21_03_30](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/5ecef9b3-65ce-43e0-a691-fdd91bdc358a)\n\n-Source Code link : https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/tree/main/CSS%20Projects%20-%20Elevate%20Your%20Design%20Skills/project%203%20trendline\n\n### Responsive Web Development\n\nResponsive web development is all about creating websites that adapt to various screen sizes and devices. In this topic, you'll get a fundamental introduction to the principles and techniques behind building web pages that look great on everything from large desktop monitors to tiny mobile screens.\n\nResponsive website using HTML and CSS\n\n--\u003e Understanding Units - px - % - vw,vh - vmax,vmin - em,rem\n\n--\u003e Layout of website - absolute vs flex\n\n--\u003e flexbox - Display flex - aligning items in x and y axis - flex direction - flex wrap\n\n--\u003e CSS Media Queries - min height, min width - min width, max width\n\n--\u003e Key points to keep in mind to make website responsive\n\n1. CSS flexbox\n2. CSS Units\n3. Responsive Typography\n4. Mobile-First Approach\n5. Flexible Images and Media\n\nPractice! Practice! Practice!\n\n### CSS Animations : Styling things Up\n\nUnlock the world of captivating web design! Dive into 'Introduction to CSS Animations' and discover the magic of breathing life into your websites. Learn the basics of CSS animations, from transitions to keyframes, and embark on a journey to create visually stunning and dynamic web experiences!\n\nReal Life Use Case :\n\n![ezgif com-video-to-gif](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/83b7a9fa-9ef5-415a-ac62-558b9a55d25e)\n\n-Before \u0026 After psuedo Selector\n\nMaster the art of CSS wizardry! Delve into 'CSS Animations: Enhancing Design with ::before and ::after' to wield the power of pseudo-elements. Learn to craft captivating designs and elevate your web creations using these versatile tools in CSS animation.\n\nBringing Websites to life:\n\n![ezgif com-video-to-gif (1)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/a3272a30-f79e-4bce-9fe9-a51ec629061d)\n\nLearn Advanced Animation:\n\n![ezgif com-video-to-gif (2)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/69d610be-0177-48d2-8afb-31aee9e68503)\n\n### CSS Responsive Project\n\nThe CSS Responsive Project is a hands-on exploration of creating a responsive web project. In this introduction, you'll get an overview of what to expect in this project and the importance of making web content adaptable to various screen sizes.\n\nUse Marquee Tag for Scrolling images in horizontal or vertical direction\n\nAnother way to scroll images in vertical direction : use animation for scrolling :\n\n      @keyframes anime {\n          from {\n            transform: translateX(0);\n          }\n\n          to {\n            transform: translateX(-100%);\n          }\n      }\n\n-Project ScreenShot:\n\n![screencapture-127-0-0-1-5500-index-html-2023-11-29-22_20_59](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/b4801c89-650c-4631-8a5b-902f1d057a75)\n\n![screencapture-127-0-0-1-5500-2023-11-30-18_06_45](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/257b0a48-7fe3-4da1-9dae-7ba8e71c90fd)\n\n-Project Design link : https://www.pinterest.ca/pin/650559108696368140/\n\n### CSS Bonus Project\n\nUnlock creativity in action! Discover 'Introduction to CSS Bonus Project' and embark on a hands-on journey. Elevate your skills by diving into this project, applying foundational CSS knowledge to create a captivating web masterpiece.\n\n-Project : https://dribbble.com/\n\n### JavaScript: Every about JavaScript\n\nJavaScript is a versatile and essential programming language for web development. This topic serves as your entry point into the world of JavaScript, providing an overview of its role in web development and its significance in creating interactive web pages.\n\n-JS the language\n\n-JS Developer - breiden eich\n\n-Managed by ECMA\n\n-JS the DOM - creating\n\n-Basics\n\n-Error check in console\n\n-Inbult features\n\n-variables constants\n\n-compilers \u0026 interpreters\n\n-window\ntypes\n\n-conditionals\nloops\n\n-functions\nreturn\n\n-undefined not defined null\n\n-arrays\nobjects\nquestions\n\n-prototypes\nprototypal inheritance\n\n-asynchronous synchronous js\n\n-es6 climax\n-questions\n\n-miscellaneous switch case and ternary do-while forin forof\n\n-interview prep\n\n-call apply bind\nthis\nprototypal inheritance\n\n### Advance JavaScript : God Level JavaScript\n\nMaster advanced JavaScript concepts in a single session! Dive into an intensive guide covering the breadth of advanced JavaScript topics. Elevate your skills and deepen your understanding of complex JavaScript functionalities.\n\n-Prototypal Inheritance\n\n-Closures\n\n-Event Delegation\n\n-Higher-Order Functions\n\n-Error Handling (try...catch blocks)\n\n-Custom Events\n\n-Understanding this\n\n-call apply bind\n\n### Asynchronous JavaScript\n\nUnlocking Asynchronous JavaScript: Navigate the world of async programming. Understand promises, async/await, and callbacks, mastering the art of handling asynchronous tasks in JavaScript.\n\n- ASYNC JS\n- setTimeout\n\n      setTimeout(() =\u003e {\n      console.log(\"Timeout runs !!!\");\n\n  }, 1000);\n\n- setInterval\n\n      setInterval(() =\u003e {\n      console.log(\"Interval runs !!!\");\n\n  }, 1000);\n\n- Fetch API (AJAX API request)\n\n      fetch(\"https://randomuser.me/api\")\n      .then((data) =\u003e data.json())\n      .then((res) =\u003e console.log(res));\n\n- Axios (or other HTTP libraries)\n\n  - use CDN for using axios\n\n        axios\n        .get(\"https://randomuser.me/api\")\n        .then((res) =\u003e console.log(res.data.results[0]));\n\n- callbacks\n\n      function abcd(a, b) {\n        b();\n      }\n\n      abcd(1, function () {\n        console.log(\"abcd runs\");\n      });\n\n- Promises\n\n      const promise1 = new Promise(function (resolve, reject) {\n        let a = 10;\n\n        if (a == 10) {\n          resolve(\"value match\");\n        } else {\n          reject(\"value does not match\");\n        }\n      });\n\n      promise1\n        .then((result) =\u003e {\n          console.log(result);\n        })\n        .catch((err) =\u003e {\n          console.log(err);\n        });\n\n- Async/Await\n\n      async function abcd() {\n        const data = await fetch(`https://randomuser.me/api`);\n\n        const result = await data.json();\n\n        console.log(result.results[0]);\n\n        console.log(result.results[0].name.first);\n      }\n\n      abcd();\n\n- Event Loop : It checks whether main stack is empty or not and perform asynchronous tasks according to it\n\n  #### These terms store aysnc task\n\n  - callback Queue\n  - Microtask Queue\n  - Web APIs\n\n- Callbacks vs Promises vs Async/Await\n\n  #### Question: https://randomuser.me/api is url se data lekar aao and usey console par show karo\n\n  - using callback\n\n        function dataFetch(url, callback) {\n          fetch(url)\n            .then((res) =\u003e res.json())\n            .then((result) =\u003e {\n              callback(result);\n            });\n        }\n\n        dataFetch(`https://randomuser.me/api`, function (data) {\n          console.log(data);\n        });\n\n  - using promises\n\n        function dataFetch(url) {\n          const data = new Promise((resolve, reject) =\u003e {\n            fetch(url)\n              .then((raw) =\u003e raw.json())\n              .then((res) =\u003e resolve(res));\n          });\n          return data;\n        }\n\n        dataFetch(`https://randomuser.me/api`).then((res) =\u003e console.log(res));\n\n  - using async await\n\n        async function dataFetch(url) {\n          const data = await fetch(url);\n\n          const result = await data.json();\n\n          return result;\n        }\n\n        async function dataPrint(url) {\n          const data = await dataFetch(url);\n\n          console.log(data);\n        }\n\n        dataPrint(`https://randomuser.me/api`);\n\n- Generators\n\n      // aap program ke flow ko pause kr skte ho (execution) and bol sakte ab agla step karo\n\n      // function* printNum() {\n      //   console.log(\"started\");\n      //   yield 1;\n      //   console.log(\"pehle chl chuka hai\");\n      //   yield 2;\n      //   console.log(\"dusra chl chuka\");\n      //   yield 3;\n      //   console.log(\"chotha chl chuka\");\n      //   yield 4;\n      // }\n\n      // const ans = printNum();\n\n      // console.log(ans.next().value);\n      // console.log(ans.next().value);\n      // console.log(ans.next().value);\n\n  - question - 10print\n\n        function* allNums() {\n          for (let i = 1; i \u003c 11; i++) {\n            yield i;\n          }\n        }\n\n        // allNums().next();\n        // console.log(allNums().next().value);\n\n        const gen = allNums();\n\n        console.log(gen.next());\n        console.log(gen.next());\n\n- Error Handling in Asynchronous Code (try,catch,finally)\n\n- Web Workers\n\n  - usually humara code single thead par chlta hai par kai baar kuchh bade calculations perform karne pad jate hai jiski wajah se aapka main thread busy ho jaata hai yaa fir wo kaafi jaada loaded ho jaata hai aur aapke baki tasks ki performance kam ho jaati hai\n\n  - ap chaaho to apna koi task web worker ko bhej sakte ho jo ki doosre thread mein usko perform karega and aapka main thread efficiently baaki cheejo ko handle kar paayega\n\n  - aap apni main js file se data send kr skte ho and aap worker file data accept karoge and jo perform karna hai karoge and waha se data waapis main file bhejoge and main file main waapis accept kroge\n\n        // add numbers\n\n        const nums = Array.from({ length: 10000 }, (_, b) =\u003e b + 1);\n\n        const worker = new Worker(\"worker.js\");\n\n        // data send\n\n        worker.postMessage(nums);\n\n        worker.onmessage = function (data) {\n          console.log(data.data);\n        };\n\n  - worker.js file\n\n        onmessage = function (data) {\n        // console.log(data.data);\n\n        const sum = data.data.reduce((acc, item) =\u003e item + acc, 0);\n\n        // console.log(sum);\n\n        postMessage(sum);\n\n    };\n\n### JS Animations - DOM Functionality Adding Interactivity\n\nJavaScript animations are a dynamic way to bring life and interactivity to your web projects. This topic serves as your introduction to the world of JavaScript animations, explaining their importance and how they can enhance user experiences on your website.\n\n-content\n\n-DOM\n\n-DOM Manipulation\n\n-Accessing Elements:\n\n     document.querySelector()\n\n-Modifying Elements:\n\n     innerHTMl, textContent\n\n-Manipulating Styles and Classes:\n\n      style\n      classList\n\n-Creating and Deleting Elements:\n\n    createElement()\n    appendChild()\n    removeChild()\n\n-Event Handling:\n\n    addEventListener()\n\n-Event Object\n\n### JS Tasks - Mastering practical development challenges\n\nEmbark on mastery! Join 'Introduction to JS Practice Like Hell Series' to dive into intense JavaScript practice sessions. Level up your skills with hands-on challenges, solidifying your expertise in JavaScript programming.\n\n1. Create an HTML page with a button. When the button is clicked, change the text of a paragraph element.\n\n![ezgif com-video-to-gif](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/46c90887-f663-4ae2-aaa7-a8d6c1af4415)\n\n2. Create a page with two images and a button. When the button is clicked, swap the source attribute of the images.\n\n![ezgif com-video-to-gif (1)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/4cd74d3e-294b-4cd9-affb-cae83938d2c1)\n\n3. Create a form with input fields and a submit button. Use JavaScript to validate the form and display an error message if the input is invalid.\n\n![ezgif com-video-to-gif (2)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/0f789aee-a54c-403b-acdf-4058e7bfe604)\n\n4. Create an unordered list. Allow users to add and remove list items dynamically using buttons.\n\n![ezgif com-video-to-gif (3)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/f6a80fa3-7dab-4398-b0c1-e2b14ec69d6e)\n\n5. Build a countdown timer that starts when a button is clicked and updates the display in real-time.\n\n![ezgif com-video-to-gif (4)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/b25d549c-f960-4d60-8d01-a2a86d969ecd)\n\n6. Create a tabbed interface where clicking on tabs displays different content sections without page reload.\n\n![ezgif com-video-to-gif (5)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/0bc7f509-66a8-455e-a108-602e22913696)\n\n7. Display a progress bar that updates in real-time, showing the progress of a task, download, or form submission.\n\n![ezgif com-video-to-gif (6)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/782cbe27-31a5-4f1e-804d-41b087d470ed)\n\n8. Create a search bar that displays live search results as users type, updating the results without requiring a full page reload.\n\n![ezgif com-video-to-gif](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/a8509be6-df05-44d0-be3c-403075eefd46)\n\n9. Build a character counter for a text area or input field, which updates real-time as the user types and enforces a character limit.\n\n![ezgif com-video-to-gif (8)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/18b38019-ae94-4a91-adae-2f70847ae44e)\n\n10. Show a progress bar which shows how much page has been scrolled.\n\n![ezgif com-video-to-gif (9)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/b18db4d6-4b20-4428-ba28-f919aa5253e8)\n\n### Real Life Developer Problems\n\n- Developer Problems: Problem 1\n\n  - DEVELOPER PROBLEMS\n\n  - Debugging a TypeError: Cannot read property 'X' of undefined:\n\n        let obj = {};\n\n        obj.name; // no error\n        obj.name.age;  // error\n\n        // Uncaught TypeError: Cannot read properties of undefined (reading 'age')\n\n  - Use optional chaining\n\n        obj?.name;\n        obj?.name?.age;\n\n- Developer Problems: Problem 2\n\n  - Working with Local Storage\n\n  - local Storage ek aisa space hai browser ke pass jismein tum data store kardo to data stored hi rehta hai, aap chaahe to browser band krdo, refresh krdo ya kuchh bhi karo aapka data stored rahega jab tak aap khud usey delete naa kar de\n\n  - local storage poore browser ka hota hai ya website ka, ls hota to browser ka part hai par data store ye website ke naam se karta hai\n\n        localStorage.setItem(\"name\", \"Lucky Kashyap\");\n\n        localStorage.setItem(\"age\", 23);\n\n        localStorage.setItem('block',true);\n\n  - web site open or not if block true or false\n\n  - ek button banao jisse aap user block kardo ab jab bhi wo website khole use screen par blocked dikhey, nahi to website show ho and ek button jisse wo unblock ho\n\n- Developer Problems: Problem 3\n\n  - Handling Asynchronous Operations\n  - ek button banao and us button ke click par aapko ek user lekar aana hai random tareeke se and usey add karna hai DOM mein\n\n        call Api\n        // random user api\n\n\n        function getNewCard() {\n          fetch(`https://randomuser.me/api`)\n            .then((raw) =\u003e raw.json())\n            .then((result) =\u003e {\n              // console.log(result.results[0]);\n              const { name, email, gender, picture } = result.results[0];\n\n              // console.log(name, email, gender);\n\n              document.querySelector(\n                \"#parent\"\n              ).innerHTML += ` \u003cdiv class=\"card w-60 p-4 rounded-md bg-zinc-600\"\u003e\n            \u003cdiv class=\"w-20 h-20 bg-zinc-500 rounded-2xl mb-3\"\u003e\n              \u003cimg class='w-full h-full fit-cover' src=${picture.large} alt='card-image'/\u003e\n            \u003c/div\u003e\n            \u003ch3 class=\"font-semibold text-2xl\"\u003e${name.first}\u003c/h3\u003e\n            \u003ch5 class=\"text-sm font-semibold opacity-60\"\u003e${gender}\u003c/h5\u003e\n            \u003ch6 class=\"text-sm opacity-40\"\u003e${email}\u003c/h6\u003e\n            \u003cp class=\"mt-5 text-xs font-semibold opacity-80\"\u003eLorem ipsum dolor sit amet consectetur, adipisicing elit.\n              Repellat voluptates omnis doloribus perferendis?\u003c/p\u003e\n          \u003c/div\u003e`;\n\n              // return result;\n            });\n        }\n\n        document.querySelector(\"button\").addEventListener(\"click\", () =\u003e {\n          getNewCard();\n        });\n\n- Developer Problems: Problem 4\n\n  - blocking scroll until something happens\n\n        document.querySelector(\"#hide\").addEventListener(\"click\", () =\u003e {\n          document.body.classList.toggle(\"overflow-hidden\");\n        });\n\n- Developer Problems: Problem 5\n\n  - custom tooltip\n\n            document.querySelector(\"#hide\").addEventListener(\"mouseenter\", () =\u003e {\n          document.querySelector(\".tooltip\").style.display = \"initial\";\n        });\n\n        document.querySelector(\"#hide\").addEventListener(\"mouseleave\", () =\u003e {\n          document.querySelector(\".tooltip\").style.display = \"none\";\n        });\n\n### GSAP, ScrollTrigger, Locomotive - Fun Stuff\n\nThis introductory topic sets the stage for an exciting journey into advanced web animation techniques. GSAP (GreenSock Animation Platform), ScrollTrigger, Locomotive, and other tools are introduced as powerful resources for creating dynamic and engaging web animations.\n\n-GSAP Basics:\n\n![ezgif com-video-to-gif (3)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/1ce64067-7d66-436e-a13e-3f8b30353814)\n\nGSAP Project :\n\n![screencapture-file-D-Sheryians-FrontEnd-Domination-GSAP-ScrollTrigger-Locomotive-Fun-Stuff-GSAP-Project-index-html-2023-11-29-21_03_52](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/a4c285b1-90fc-4e0b-9f42-039c23e768aa)\n\n![ezgif com-video-to-gif (4)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/e2262de6-02c2-4f91-a70b-dc24ffbd625c)\n\nInclude GSAP Using CDN link\n\n    gsap.to('selector',{properties})\n\n    gsap.from(\".nav h3\", {y: -50, opacity: 0,duration: 1,delay: 0.5,stagger: 1,});\n\nScrollTrigger UseCase :\n\n![ezgif com-video-to-gif (5)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/54f1157c-96d7-4823-aa08-98d0136237c4)\n\n### GSAP - Understanding Pin Property in ScrollTrigger\n\n    gsap.to(\".page2 img\", {\n      width: \"100%\",\n      scrollTrigger: {\n        trigger: \".page2\",\n        scroller: \"body\",\n        markers: true,\n        start: \"top 0\",\n        end: \"top -100%\",\n        scrub: 2,\n        pin:true\n      },\n    });\n\nProject ShowCase :\n\n![ezgif com-optimize](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/a07de365-5e8c-421d-9cf4-5cb715a559aa)\n\n- Text Scroll Effect\n\n      gsap.to(\".page2 h1\", {\n        transform: \"translateX(-125%)\",\n        scrollTrigger: {\n          trigger: \".page2\",\n          scroller: \"body\",\n          scrub: 2,\n          pin: true,\n          start: \"top 0\",\n          end: \"top -100%\",\n        },\n      });\n\nProject ShowCase:\n\n![ezgif com-video-to-gif-converted (2)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/8d0a1dc2-1241-463a-9b03-827bd7b2aa56)\n\n### Locomotive- All in One Video\n\n- Learning Smooth Scrolling Effects\n- Include CDN links to index.html file\n\n      // CSS file\n\n      \u003clink\n          rel=\"stylesheet\"\n          href=\"https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css\"\n        /\u003e\n\n      // locomotive JS File\n\n      \u003cscript\n        src=\"https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js\"\n        defer\n      \u003e\u003c/script\u003e\n\n- In script.js file :\n\n      // locomotive scrolling\n\n      import LocomotiveScroll from \"locomotive-scroll\";\n\n      const scroll = new LocomotiveScroll({\n        el: document.querySelector(\".main\"),\n        smooth: true,\n      });\n\n- It applies smooth scrolling\n\n### GSAP, ScrollTrigger, Locomotive Configure\n\nInclude CDN Links :\n\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css\"\n    /\u003e\n\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js\"\n      defer\n    \u003e\u003c/script\u003e\n    \u003cscript\n      src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js\"\n      integrity=\"sha512-7Au1ULjlT8PP1Ygs6mDZh9NuQD0A5prSrAUiPHMXpU6g3UMd8qesVnhug5X4RoDr35x5upNpx0A6Sisz1LSTXA==\"\n      crossorigin=\"anonymous\"\n      referrerpolicy=\"no-referrer\"\n      defer\n    \u003e\u003c/script\u003e\n    \u003cscript\n      src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js\"\n      integrity=\"sha512-LQQDtPAueBcmGXKdOBcMkrhrtqM7xR2bVrnMtYZ8ImAZhFlIb5xrMqQ6uZviyeSB+4mYj89ta8niiCIQM1Gj0w==\"\n      crossorigin=\"anonymous\"\n      referrerpolicy=\"no-referrer\"\n      defer\n    \u003e\u003c/script\u003e\n\n- To Apply Locomotive Don't give width \u0026 height to wrapper/container\n\n- Locomotive Smooth Scrolling :\n\n![ezgif com-video-to-gif-converted (4)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/7c0f1ee0-1624-4bc0-96f5-0aa51970b4a3)\n\n- To use scrolltrigger with locomotive you need include some JS Code\n\n      gsap.registerPlugin(ScrollTrigger);\n\n      // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll\n\n      const locoScroll = new LocomotiveScroll({\n        el: document.querySelector(\".main\"),\n        smooth: true,\n      });\n      // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)\n      locoScroll.on(\"scroll\", ScrollTrigger.update);\n\n      // tell ScrollTrigger to use these proxy methods for the \".main\" element since Locomotive Scroll is hijacking things\n      ScrollTrigger.scrollerProxy(\".main\", {\n        scrollTop(value) {\n          return arguments.length\n            ? locoScroll.scrollTo(value, 0, 0)\n            : locoScroll.scroll.instance.scroll.y;\n        }, // we don't have to define a scrollLeft because we're only scrolling vertically.\n        getBoundingClientRect() {\n          return {\n            top: 0,\n            left: 0,\n            width: window.innerWidth,\n            height: window.innerHeight,\n          };\n        },\n        // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).\n        pinType: document.querySelector(\".main\").style.transform\n          ? \"transform\"\n          : \"fixed\",\n      });\n\n      // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.\n      ScrollTrigger.addEventListener(\"refresh\", () =\u003e locoScroll.update());\n\n      // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.\n      ScrollTrigger.refresh();\n\n      gsap.from(\".page1 .box\", {\n        scale: 0,\n        duration: 1,\n        delay: 1,\n        opacity: 0,\n        rotate: 360,\n      });\n\n      gsap.from(\".page2 .box\", {\n        scale: 0,\n        duration: 1,\n        // delay: 1,\n        opacity: 0,\n        rotate: 360,\n        scrollTrigger: {\n          trigger: \".page2 .box\",\n          scroller: \".main\",\n          start: \"top 50%\",\n          markers: true,\n        },\n      });\n\nUse Locomotive \u0026 GSAP ScrollTrigger Both:\n\n![ezgif com-video-to-gif-converted (3)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/ead1266b-a0c0-4c81-8f9e-f50678b1f24b)\n\n### GSAP: Bonus Project!!\n\nUnlock GSAP's Potential: Delve into the 'Bonus Project' and explore the extra dimensions of GSAP. Unleash creativity and mastery as you apply advanced techniques to create captivating animations and interactions.\n\n- Text Scrolling Effect From (Hotel Odesej Website) [[https://hotelodisej.com/]]\n- Apply Smooth Scrolling\n\n      // function to split text\n\n      let headings = document.querySelectorAll(\".page2 h1\");\n\n      function textSplitting() {\n        headings.forEach((elem) =\u003e {\n          let clutter = \"\";\n          let h1Text = elem.textContent;\n\n          let splitedText = h1Text.split(\"\");\n\n          splitedText.forEach((e) =\u003e {\n            clutter += `\u003cspan\u003e${e}\u003c/span\u003e`;\n          });\n          // console.log(h1Text);\n\n          elem.innerHTML = clutter;\n\n          // console.log(elem);\n        });\n      }\n\n- Apply GSAP, ScrollTrigger \u0026 Locomotive\n\n      function gsapAnimation() {\n        gsap.to(\".page2 h1 span\", {\n          color: \"#e3e3c4\",\n          stagger: 0.1,\n          // opacity: 0.5,\n          scrollTrigger: {\n            trigger: \".page2 h1\",\n            scroller: \".main\",\n            markers: true,\n            start: \"top 50%\",\n            end: \"top -15%\",\n            scrub: 3,\n          },\n        });\n      }\n\nText Effect on Scroll :\n\n![ezgif com-video-to-gif-converted (5)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/536a9603-6e77-49c8-9071-bdd41fc21624)\n\n### Final Project - Obys Agency Clone\n\nEmbark on our final project—a polished clone of obys.agency, showcasing everything you've learned in the course. We've poured our hearts into making the website and videos as simple as possible, a testament to our dedication and hard work. This website isn't just visually appealing; it's a showcase of seamless design and captivating animations. Dive into six engaging videos, each offering a glimpse behind the scenes. The introduction video sets the tone, giving you a sneak peek into the inspiration. Join me in celebrating the beauty of simplicity and skill in this front-end development masterpiece! 🚀✨\n\n# Tailwind CSS\n\n### Learn Tailwind CSS in One Video\n\nMaster Tailwind CSS in a single session! Dive into a comprehensive guide covering the entire spectrum of Tailwind CSS. Elevate your skills and streamline your workflow with this powerful utility-first framework.\n\n## create Landing Page Using Tailwind CSS:\n\n![Screenshot (3247)](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/ffdfb37c-1419-4a04-bf2d-9d30568de40f)\n\n# React JS\n\n- JavaScript Library for creating user interfaces.\n\n### Introduction To React JS\n\nEmbark on the React JS journey! Discover the essentials in 'Introduction to React JS'. Uncover the basics and get started with this popular JavaScript library for building user interfaces.\n\n- UI Library\n- for solving the real time problem (facebook build this cool library)\n- for notification update on real time basically (2013).\n\n### React JS Theory \u0026 History\n\nUnderstanding React JS: Delve into its theory and historical roots. Explore the foundational aspects and historical development of React JS\n\n- react -\u003e lang X\n- react -\u003e framework X\n- react -\u003e technology X\n\n- react -\u003e library\n\n- facebook - 2013\n\n- 2015 - open source\n\n#### Virtual DOM\n\n- Copy of real DOM\n\njab websites par khhob sare change hote hai to khoob saara repaint hota hai wo bhi wo elements jo badle bhi nahi, aur ye website ko slow down kar deta hai, is cheej se bhi bachne ke liyein facebook ne react create ki gyi\n\n- likes count, notification count side by side (change/update)\n\n- when ever there is change in UI the DOM repaint or rerender things\n- This is not the case with virtual DOM or with React. React solves this problem of not repaint Those part which was not updated or changed only re render things which are updated.\n\n### React JS - Essentials - Everything you need to learn\n\nCore Foundations of React JS: 'Essentials - Everything You Need to Learn'. Delve into essential components, foundational concepts, and crucial skills required to master React JS in this comprehensive guide\n\n- array objects destructuring import and export\n\n- map filter arrow fncs (implicit return) spread operator\n\n- Copy array using spread operator\n\n        let arr = [1, 2, 3, 4];\n\n        // real copy\n\n        let arr2 = [...arr];\n\n        arr.pop();\n\n        console.log(arr, arr2);\n\n\n        // object copy\n\n        let state = { name: \"lucky\", age: 23 };\n\n        let stateCopy = { ...state };\n\n        state.name = \"HArsh\";\n\n        console.log(state, stateCopy);\n\n- Object Destructuring\n\n      let obj = { name: \"lucky\", age: 23 };\n\n      let { name, age } = obj;\n\n      console.log(name);\n      console.log(age);\n\n- Array Destructuring\n\n        let arr = [12, function () {}];\n\n        let [first, sec] = arr;\n\n        console.log(first);\n        console.log(sec);\n\n- import export\n\n- hum log component banaate hai, component matlab page ka hissaa\n\n- navbar sidebar cart home landing page second page, ab dikkat yeh aati hai har hissa alag alag component hai aur components ko hum log alag alag files mein rakhte hai, to inko last mein jodna bhi padta hai, jodne ke liyein use hota hai import \u0026 export\n\n- navbar - export\n\n- sidebar - export\n\n- cart - import navbar sidebar\n\n- main - import navbar\n\n       function Cart() {}\n\n       export default Cart;\n\n       export function Cart(){\n\n       }\n\n        import Cart from \"./script\";\n        import { Cart } from \".script.js\";\n\n- arrow functions\n\n      let sum = (a, b) =\u003e a + b;\n\n      console.log(sum(10, 12));\n\n- impicit return\n\n        let value = val=\u003eval+10;\n\n        console.log(value(20));\n\n- map filter\n\n- dono hi array pe chlte hai, aur dono kaa kaam hai array par kuchh perform krna hand \"ek naya array return karna\"\n\n      let arr = [1, 2, 3, 4, 5];\n\n- map - har element par kuch karo aur naye array mein rakho\n\n      let arr2 = arr.map((item) =\u003e item * 10);\n\n      console.log(arr2);\n\n      let state = [11, 22, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14];\n\n      let greaterFive = state.map((elem) =\u003e (elem \u003e 5 ? elem + 5 : elem));\n\n      console.log(greaterFive);\n\n- map filter mein ek hi farak hai, map saare bande lautata hai matlab ki count kam nahi hoga, filter bando ko kam kar skta hai\n\n- ek array mein sabhi nums jo ki 5 se bade hai unmein 10 add kro\n\n- jab originl array ka size kam naa hona ho waha map use hota hai\n\n- jab original array ka size kam krna ho toh wha filter use hota hai\n\n- ek array mein se saare wo nums hata do jo ki 5 se chhote hai\n\n- filter\n\n      let arr = [1, 2, 3, 4, 5, 6];\n\n      let filterArr = arr.filter((elem) =\u003e elem \u003e 5);\n\n      console.log(filterArr);\n\n### Section 1: System Setup and Basics\n\nExtensions:\n\n- tabnine\n- prettier\n\nDownload :\n\n- node js\n- use vite vs create react app\n\n      npm create vite@latest\n\n      vite project : setup\n\n      cd setup\n      npm i\n      npm run dev\n\n#### Understanding JSX\n\n- jsx -\u003e jsx is actually a very similar looking structure like HTMl but with super powers\n\n- jsx sirf dikhta hai HTML ki trah par hota nhi\n\n- It converted into React.createElement\n\n- jsx is very similar to HTML but with superpowers\n\n- conversion to javascript\n\n      \u003ch1\u003e{login ? 'profile':'login'}\u003c/h1\u003e\n\n\n      \u003ch1\u003eHey  {2 + 2}\u003c/h1\u003e\n\n      // output Hey 4\n\n#### Making App\n\n- Component\n\n- React \"react\" when changes occurs\n\n        function App(){\n\n          return (\n            \u003cdiv\u003e\n            \u003ch1\u003eApp Component\u003c/h1\u003e\n            \u003c/div\u003e\n          )\n        }\n\n- Component is a reusable code\n\n### Section 2: Building Components\n\n- Header\n\n      import React from \"react\";\n\n        const Header = () =\u003e {\n          return (\n            \u003cdiv\u003e\n              \u003ch1\u003eHeader\u003c/h1\u003e\n              \u003cul\u003e\n                \u003cli\u003e\n                  \u003ca href=\"#\"\u003eHome\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                  \u003ca href=\"#\"\u003eContact\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                  \u003ca href=\"#\"\u003eSkills\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                  \u003ca href=\"#\"\u003eAbout\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                  \u003ca href=\"#\"\u003eServices\u003c/a\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/div\u003e\n          );\n        };\n\n        export default Header;\n\n- Configure Tailwind CSS\n\n- Creating Card Component\n\n### Section 3: Reusable Components\n\n- Use Array map method.\n\n        const data = [\"ajay\", \"rahul\", \"sachin\", \"udesh\"];\n\n\n        {data.map((item, index) =\u003e (\n        \u003ch1 key={index}\u003e{item}\u003c/h1\u003e\n      ))}\n\n- Showing Card With Data\n\n- Create Array of data\n\n      const data = [\n        {\n          image:'',\n          name:'',\n          desc:''\n        }\n      ]\n\n- and use map method to use different data with card.\n\n#### React Fragments\n\n- unnecessary div creation stop\n- Enclosed all elements in one wrapper without creating div or other element use React Fragment\n\n          \u003c\u003e\n          \u003c/\u003e\n\n        \u003cReact.Fragment\u003e\n\n        \u003c/React.Fragment\u003e\n\n### Section 4: Conditional Rendering\n\n- Instock Check\n\n      {item.inStock ? \"InStock\" : \"Out Of Stock\"}\n\n- Handling Events:\n\n        \u003cbutton\n            onClick={() =\u003e console.log(\"download song\")}\n          \u003e\n            Download Now\n          \u003c/button\u003e\n\n\n\n            // seperatae function\n\n           const handleClick = () =\u003e {\n\n  console.log(\"mouse over event\");\n  };\n\n### Section 5: Managing State and Understanding the State Hook\n\n- state variable takes care of react updation\n\n- It will take care of react changes\n\n- state ek data hota hai, react is data ka khayaal rkhta hai, jab bhi ye data change hota hai react page ko update karta hai\n\n- state koi bhi data ho skta hai, jaise ki score = 0\n\n      const [score,setScore] = useState(0);\n\n\n      // onClick par apply krdo\n\n       const handleScore = () =\u003e {\n\n          setScore(score + 1);\n       };\n\n- Based on Previous Value\n\n      onClick={() =\u003e setVal((prev) =\u003e prev + 1)}\n\n- Use object data in useState\n\n        const [data,setData] = useState({name:'Lucky',isBanned:false});\n\n\n        onClick={() =\u003e setData({ name: \"Divyanshu\", isBanned: true })}\n\n        onClick={() =\u003e setData({ ...data, isBanned: !data.isBanned })}\n\n#### Section 6 : Mastering the useState() hook\n\n- useState not update synchronously\n\n- add object property to useState\n\n- useState state ko turant update nahi karta, wo useState state ko update karta hai apne hisaab se function completion ke baad to fix performance issue\n\n      const [val, setVal] = useState({ name: \"lucky\",age: 23 });\n\n      \u003ch1\u003eName : {val.name}\u003c/h1\u003e\n      \u003ch2\u003eAge : {val.age}\u003c/h2\u003e\n      \u003ch3\u003eRole : {val.gender}\u003c/h3\u003e\n\n      \u003cbutton\n        className=\"px-3 py-1 mt-3 bg-red-500 text-md rounded-full\"\n        onClick={() =\u003e {setVal({ ...val, gender: \"Male\" })\n\n        console.log(val);\n        }\n\n        }\n      \u003e\n        Click\n      \u003c/button\u003e\n\n- Use Array in useState\n\n      {val.map((item, index) =\u003e (\n        \u003ch1 key={index}\u003e{item}\u003c/h1\u003e\n      ))}\n\n      \u003cbutton\n        onClick={() =\u003e setVal(() =\u003e val.filter((item, index) =\u003e index != 2))}\n        // onClick={() =\u003e\n        //   setVal(() =\u003e {\n        //     return val.filter((item, index) =\u003e index != val.length - 1);\n        //   })\n        // }\n        className=\"px-3 py-1 text-md bg-blue-500 rounded-full text-white\"\n      \u003e\n        Change\n      \u003c/button\u003e\n\n- Remove even values from an Array\n\n      onClick={() =\u003e\n          setVal(() =\u003e val.filter((item, index) =\u003e item % 2 !== 0))\n        }\n\n- Arrays Addition\n\n      onClick={() =\u003e setVal([...val, 10])}\n\n- Change array of an object\n\n         const [val, setVal] = useState([\n\n            { name: \"lucky\", age: 23 },\n            { name: \"Shivam\", age: 34 },\n            { name: \"golu\", age: 25 },\n        ]);\n\n        onClick={() =\u003e\n          setVal(() =\u003e\n            val.map((item, index) =\u003e\n              item.name === \"Shivam\" ? { name: \"Shivam\", age: 55 } : item\n            )\n          )\n        }\n\n#### Section 7 : useState() Hooks\n\n- Solve small-small questions\n\n- print bahar jaao if val is false and print mat jao iv val is true\n\n        \u003cp\u003e{data === false ? \"BAHAR JAO\" : \"MAT JAO\"}\u003c/p\u003e\n\n- Use React icons\n\n      npm i react-icons --save\n\n- switch Images:\n\n      \u003cdiv className=\"w-60 relative h-32 flex bg-zinc-500 rounded-md overflow-hidden\"\u003e\n        \u003cimg\n          className={`w-full h-full ${\n            val === false ? \"-translate-x-[0%]\" : \"-translate-x-[100%]\"\n          } transition-transform ease-out duration-300 object-cover shrink-0`}\n          src=\"https://images.unsplash.com/photo-1682685797743-3a7b6b8d8149?q=80\u0026w=1470\u0026auto=format\u0026fit=crop\u0026ixlib=rb-4.0.3\u0026ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"card\"\n        /\u003e\n        \u003cimg\n          className={`w-full h-full transition-transform ease-out duration-300 ${\n            val === false ? \"-translate-x-[0%]\" : \"-translate-x-[100%]\"\n          } object-cover shrink-0`}\n          src=\"https://images.unsplash.com/photo-1702234867439-bec43ed4e369?q=80\u0026w=1472\u0026auto=format\u0026fit=crop\u0026ixlib=rb-4.0.3\u0026ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"card\"\n        /\u003e\n        \u003cspan\n          onClick={() =\u003e setVal(() =\u003e !val)}\n          className=\"w-10 h-10 bg-[#dadada8b] flex items-center justify-center rounded-full absolute bottom-[0%] left-1/2 -translate-x-[50%] -translate-y-[50%]\"\n        \u003e\n          \u003cFaArrowRight size={\"1em\"} /\u003e\n        \u003c/span\u003e\n      \u003c/div\u003e\n\n#### Section 8 : Passing Data via Props\n\n- Pass Data via prop\n\n- props use hote hai aapke components ko reuable bnane ke liyein consider karo aapke pass ek button hai and aapko us button ko alag alag jagah daalna hai app mein, to aap ek button ek mein baaneyin aur uska data hard coded karne ki jagah parent component se send karde and child component par use kar le\n\n      \u003cProps btn={\"Know More\"} color=\"bg-blue-600\" /\u003e\n      \u003cProps btn={\"Learn More\"} color=\"bg-red-600\" /\u003e\n\n      \u003cbutton\n        className={`px-3 py-1 ${color} text-zinc-100 text-xs rounded m-2`}\n      \u003e\n        {btn}\n      \u003c/button\u003e\n\n- Array of object change via props functions\n\n       const handleFriendsBtn = (index) =\u003e {\n          setRealData((prev) =\u003e {\n            return prev.map((item, ind) =\u003e {\n              if (ind === index) {\n                return { ...item, friends: !item.friends };\n              }\n              return item;\n            });\n          });\n        };\n\n- Dynamic class change\n\n        \u003cbutton\n          onClick={() =\u003e handleFriendsBtn(index)}\n          className={`px-3 mt-4 py-1 text-sm text-white ${\n            friends ? \"bg-green-600\" : \"bg-blue-500\"\n          } font-semibold rounded-md`}\n        \u003e\n          {friends ? \"Add Friend\" : \"Friend\"}\n          {/* {friends ? \"ADD FRIEND\" : \"Friends\"} */}\n        \u003c/button\u003e\n\n#### Section 9 : Props and State Exercise\n\n- Create card add build feature Add To favourites\n\n         const [song, setSong] = useState(data);\n         const [favouritesCount, setFavouritesCount] = useState(0);\n\n          const handleFavourites = (index) =\u003e {\n            setSong((prev) =\u003e {\n              return prev.map((item, indx) =\u003e {\n                if (indx === index) {\n                  return { ...item, favourites: !item.favourites };\n                }\n\n                return item;\n              });\n            });\n\n            setFavouritesCount((prev) =\u003e prev + 1);\n          };\n\n       \u003cdiv className=\"p-10\"\u003e\n      \u003cHeader\n        favouritesCount={favouritesCount}\n        setFavouritesCount={setFavouritesCount}\n      /\u003e\n      \u003cdiv className=\"w-full h-52 flex gap-20 flex-wrap mt-10 justify-between\"\u003e\n        {song.map((item, indx) =\u003e (\n          \u003cCard song={item} handleFavourites={handleFavourites} index={indx} /\u003e\n        ))}\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n\n##### React Styled Componnets\n\n- CSS Modules - jismein aap kabhi kisi website ka code dekhte ho aur wha par aapko css classes ka naam bada aada teda dikhta hai\n\n- UI library- tailwind css, material UI,bootstrap,Chakra UI\n\n- create file style.module.css\n\n        .a{\n          color:'red';\n        }\n\n#### Section : 10 Form Handling\n\n- Form Handling\n- form basic nature or we can say default nature is to get submmitted but react says no page reload\n- website submit ho jaati hai form submit krne par.\n\n- How react handle things in Form\n- React prevents Form Submission\n\n- use Ref - is trike mein hum har input ko select kar lete hai and unki value tab nikaalte hai jab form submit hota hai\n\n- use ref ke through html input ko select kar skte hai\n\n      const name = useRef(null);\n\n      const password = useRef(null);\n\n      const handleSubmit = (e) =\u003e {\n          e.preventDefault();\n          console.log(name.current.value,\n             password.current.value);\n\n      };\n\n- controlled components\n\n          const [username, setName] = useState({ name: \"\", age: \"\" });\n\n\n          const handleSubmit = (e) =\u003e {\n            e.preventDefault();\n\n            console.log(username);\n          };\n\n          \u003cform action=\"\" onSubmit={handleSubmit}\u003e\n            \u003cinput\n              type=\"text\"\n              placeholder=\"name\"\n              onChange={(e) =\u003e setName({ ...username, name: e.target.value })}\n            /\u003e\n            \u003cinput\n              type=\"text\"\n              placeholder=\"age\"\n              onChange={(e) =\u003e setName({ ...username, age: e.target.value })}\n            /\u003e\n            \u003cinput type=\"submit\" /\u003e\n          \u003c/form\u003e\n\n- react hook form\n\n- install react-form-hook package\n\n      npm i react-hook-form\n\n      import React from \"react\";\n      import { useForm } from \"react-hook-form\";\n\n      const ReactForm = () =\u003e {\n        const { register, handleSubmit } = useForm();\n\n        // console.log(register());\n        return (\n          \u003cdiv\u003e\n            \u003cform action=\"\" onSubmit={handleSubmit((data) =\u003e console.log(data))}\u003e\n              \u003cinput\n                className=\"px-3 mt-2 border-2\"\n                {...register(\"name\")}\n                type=\"text\"\n                placeholder=\"name\"\n              /\u003e{\" \"}\n              \u003cbr /\u003e\n              \u003cinput\n                className=\"px-3 mt-2 border-2\"\n                {...register(\"email\")}\n                type=\"email\"\n                placeholder=\"email\"\n              /\u003e{\" \"}\n              \u003cbr /\u003e\n              \u003cinput\n                className=\"px-3 mt-2 border-2\"\n                {...register(\"age\")}\n                type=\"text\"\n                placeholder=\"name\"\n              /\u003e{\" \"}\n              \u003cbr /\u003e\n              \u003cinput\n                className=\"px-3 mt-2 border-2\"\n                {...register(\"color\")}\n                type=\"color\"\n                placeholder=\"email\"\n              /\u003e{\" \"}\n              \u003cbr /\u003e\n              \u003cinput\n                className=\"px-3 mt-2 border-2\"\n                {...register(\"password\")}\n                type=\"password\"\n                placeholder=\"name\"\n              /\u003e{\" \"}\n              \u003cbr /\u003e \u003cbr /\u003e\n              \u003ctextarea\n                className=\"px-3 mt-2 border-2\"\n                name=\"comment\"\n                {...register(\"comment\")}\n                placeholder=\"Write your feedback\"\n                cols=\"30\"\n                rows=\"10\"\n              \u003e\u003c/textarea\u003e{\" \"}\n              \u003cbr /\u003e \u003cbr /\u003e\n              \u003cinput type=\"submit\" /\u003e\n            \u003c/form\u003e\n          \u003c/div\u003e\n        );\n      };\n\n      export default ReactForm;\n\n#### Section 11 : Form Handling Exercise\n\n- Form Handle Exercise\n\n- App - Cards - Card - Form\n\n- Add form Data into Card component\n\n        const [users, setUsers] = useState([]);\n\n        const addFormData = (data) =\u003e {\n            setUsers([...users, data]);\n        };\n\n- Reset Input Values\n\n        // provided by react-hook-form\n\n        reset()\n\n- Remove Elements From Card\n\n        const handleRemove = (id) =\u003e {\n          setUsers(() =\u003e users.filter((item, index) =\u003e index != id));\n        };\n\n#### Section 12 : React JS Routing and Beyond\n\n- Configure react router to use react-routing\n\n- React Uses single page approach in application i.e. no page reload after page changes, for this we use react routing.\n\n- To move From one Page to another without reloading the website, so that website is called Web Application (for not reloading whole page).\n\n      npm i react-router-dom\n\n- Wrap Main Container main.jsx\n\n      \u003cBrowserRouter\u003e\n            \u003cApp/\u003e\n      \u003c/BrowserRouter\u003e\n\n- Create Navbar\n\n       \u003cnav\u003e\n        \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\n        \u003cLink to=\"/user\"\u003eUser\u003c/Link\u003e\n        \u003cLink to=\"/about\"\u003eHome\u003c/Link\u003e\n        \u003cLink to=\"/services\"\u003eservices\u003c/Link\u003e\n      \u003c/nav\u003e\n\n      // Implement Routing\n\n      \u003cRoutes\u003e\n        \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n        \u003cRoute path=\"/about\" element={\u003cAbout /\u003e} /\u003e\n        \u003cRoute path=\"/user\" element={\u003cUser /\u003e} /\u003e\n        \u003cRoute path=\"/services\" element={\u003cServices /\u003e} /\u003e\n      \u003c/Routes\u003e\n\n- Use navigate hook for back to particular route\n\n        const navigate = useNavigate();\n\n        const back = () =\u003e {\n            navigate(\"/\");\n            // console.log(\"hey\");\n        };\n\n- Use NavLink to active \u0026 de-Activate class\n\n      \u003cNavLink\n        style={(e) =\u003e {\n          console.log(e);\n        }}\n        to=\"/\"\n      \u003e\n        Home\n      \u003c/NavLink\u003e\n\n- Change color three ways :\n\n  - through style\n\n    style={(e) =\u003e {\n    return { color: e.isActive ? \"tomato\" : \"\" };\n    }}\n\n  - Through className :\n\n        \u003cNavLink\n        className={(e) =\u003e {\n          return [\n            e.isActive ? \"text-red-300\" : \"\",\n            e.isActive ? \"font-semibold text-xl\" : \"\",\n          ].join(\" \");\n        }}\n        to=\"/about\"\n\n        \u003e\n\n        About\n\n      \u003c/NavLink\u003e\n\n- Inside Child Component\n\n      \u003cNavLink to=\"/user\"\u003e\n        {(e) =\u003e {\n          return (\n            \u003cspan\n              className={[\n                e.isActive ? \"text-red-300\" : \"\",\n                e.isActive ? \"font-semibold text-xl\" : \"\",\n              ].join(\" \")}\n            \u003e\n              User\n            \u003c/span\u003e\n          );\n        }}\n        {/* \u003cspan\u003eUser\u003c/span\u003e */}\n      \u003c/NavLink\u003e\n\n### Section 14 : How to integrate API in REACT JS\n\n- The concept for connecting frontEnd With Backend is called AJAX (Asynchronous JavaScript XML) \u0026 which implements this communication is through fetch/axois.\n\n- API is an communication medium to build relation\n\n- API allow the communication with each other using requests and responses.\n\n- Using FETCH/AXIOS Method we can access third party API.\n\n- Connect frontEnd with Backend through an API\n\n        import axios from \"axios\";\n        import \"./App.css\";\n        import { useState } from \"react\";\n\n        function App() {\n          const [products, setProducts] = useState([]);\n\n          const getProducts = () =\u003e {\n            const api = \"https://fakestoreapi.com/products\";\n\n            axios\n              .get(api)\n              .then((products) =\u003e {\n                // console.log(products);\n                setProducts(products.data);\n              })\n              .catch((err) =\u003e console.log(err.message));\n          };\n\n          const addProducts = () =\u003e {\n            const api = \"https://fakestoreapi.com/products\";\n\n            axios\n              .post(api, {\n                title: \"test product\",\n                price: 13.5,\n                description: \"lorem ipsum set\",\n                image: \"https://i.pravatar.cc\",\n                category: \"electronic\",\n              })\n              .then((products) =\u003e {\n                console.log(products);\n              })\n              .catch((err) =\u003e console.log(err.message));\n          };\n          return (\n            \u003cdiv className=\"p-4\"\u003e\n              \u003ch1\u003eApp\u003c/h1\u003e\n\n              \u003cbutton\n                onClick={getProducts}\n                className=\"px-3 py-2 bg-orange-500 mt-4 rounded-sm text-white text-sm\"\n              \u003e\n                Get Products\n              \u003c/button\u003e\n              \u003cbutton\n                onClick={addProducts}\n                className=\"px-3 py-2 mx-10 bg-orange-500 mt-4 rounded-sm text-white text-sm\"\n              \u003e\n                Add Products\n              \u003c/button\u003e\n\n              \u003chr className=\"my-10\" /\u003e\n              \u003cul\u003e\n                {products.length \u003e 0\n                  ? products.map((item, index) =\u003e (\n                      \u003cli key={index} className=\"rounded p-5 mb-2 bg-orange-300\"\u003e\n                        Product Name: {item.title}\n                      \u003c/li\u003e\n                    ))\n                  : \"Loading....!!\"}\n              \u003c/ul\u003e\n            \u003c/div\u003e\n          );\n        }\n\n        export default App;\n\n- LifeCycle Method name useEffect in functional Component:(Three Types of LifeCycle Methods)\n\n      - Component Mounting - creation\n      - Component Updating - updation (when useState is Changed or changes in view)\n      - Component UnMounting - deletion/destroy\n\n- Component Creation\n\n      useEffect(()=\u003e{\n        console.log('Component Creation');\n\n        return ()=\u003e{\n          console.log('Component Deletion From DOM');\n        }\n      })\n\n      useEffect(() =\u003e {\n        console.log(\"SErvices Run\");\n\n        return () =\u003e {\n          console.log(\"SErvice Destroyed\");\n        };\n      });\n\n#### Section 15 : useEffect() on State Change\n\n- Hook - useEffect() on state change\n\n- Refresh : Component Deletion + Component Updation\n\n- Update : Component Deletion + Component Creation\n\n         const [first, setFirst] = useState(\"This is normal data\");\n         const [second, setSecond] = useState(\"This is very Large Data\");\n\n          useEffect(() =\u003e {\n            console.log(\"SErvices Run\");\n\n            return () =\u003e {\n              console.log(\"SErvice Destroyed\");\n            };\n          }, [second]);\n\n- Call API When component is loaded using useEffect HOOk we call it.\n\n        useEffect(() =\u003e {\n          const api = \"https://fakestoreapi.com/products\";\n\n          axios\n            .get(api)\n            .then((products) =\u003e {\n              // console.log(products);\n              setProducts(products.data);\n            })\n            .catch((err) =\u003e console.log(err.message));\n        }, []);\n\n- OutSourcing the Code\n\n- writing import axois from 'axios' causes sometimes problem \u0026 write this line in 10 20 30 40 .. components is lengthy \u0026 create issue for Us\n\n- While requesting to the API - the Header information, cookies,authorization,token, many things generated \u0026 for this we have to take of this to not to call an API when other component is added\n\n- Login - profile, timeline , chats enabled\n\n- Call one time \u0026 reference call everytime (create one time object).\n\n- Not call axios everytime.\n\n        import axios from \"axios\";\n\n        // export { axios };\n\n        const instance = axios.create({\n          baseURL: \"https://fakestoreapi.com\",\n        });\n\n        axios\n        .get(\"/users\")\n        .then((users) =\u003e {\n          console.log(users);\n          // setProducts(users.address);\n        })\n        .catch((err) =\u003e console.log(err.message));\n\n        export default instance;\n\n#### Section 16 : React Context API\n\n- It solves Prop Drilling Problem\n\n- Prop Drilling means sharing data between one component to another \u0026 another to another means parent to child to son\n\n- From Parent to Child Data Pass only .\n\n- Wrap Application via context\n\n- create context \u0026 create UserContext\n\n        import React, { createContext, useState } from \"react\";\n\n        export const UserContext = createContext();\n\n        const Context = (props) =\u003e {\n          // console.log(props);\n\n          const [users, setUser] = useState([\n            {\n              id: 0,\n              username: \"John Doe\",\n              city: \"USA\",\n            },\n            {\n              id: 1,\n              username: \"Lucky\",\n              city: \"Delhi\",\n            },\n            {\n              id: 2,\n              username: \"Harsh\",\n              city: \"Bhopal\",\n            },\n          ]);\n\n          return (\n            \u003c\u003e\n              \u003cUserContext.Provider value={{ users, setUser }}\u003e\n                {props.children}\n              \u003c/UserContext.Provider\u003e\n            \u003c/\u003e\n          );\n        };\n\n        export default Context;\n\n- use data via components\n\n        const { users, setUser } = useContext(UserContext);\n\n- use navigate hook for go back\n\n        const navigate= useNavigate();\n\n        // apply on go back button\n\n        const handleBack =()=\u003e{\n          navigate('/user');\n        }\n\n#### React JS: Project 1\n\n- Building Basic CRUD with ReactJS: Engage in a project integrating CRUD functionality and Context API. Learn to create, read, update, and delete operations within a ReactJS project using Context API for seamless data management.\n\n#### React JS: Project - Refokus Clone\n\n- Replicating Refokus: Dive into 'ReactJS: Project 2 Refokus Clone' and explore the creation of a Refokus-like project using ReactJS. Apply your skills to build a similar platform, honing your abilities in the process.\n\n##### Component Structure:\n\n- App\n\n  - Navbar\n    - button component\n  - Work\n  - Stripes\n\n    - Stripe\n\n  - Products\n    - Product\n  - Marquee\n  - Blocks\n    - Block\n  - Footer\n\n  ### Design Navbar :\n\n  ![screencapture-localhost-5173-2024-04-12-23_02_32](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/564c6d0d-fb1c-468e-bf05-ed5c3edffdf0)\n\n  ### Stripes Component :\n\n  ![screencapture-localhost-5173-2024-04-13-22_19_50](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/12accfe6-3eef-4328-836a-cf131ecd945a)\n\n  ### Products Component :\n\n  ![screencapture-localhost-5173-2024-04-14-13_28_12v](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/c1b8bf7f-41dd-416e-9171-694e1a8a1296)\n\n  ### Marquees Component :\n\n  ![Capture](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/f0043705-32c3-46c1-8d46-a4a96160415d)\n\n  ### Cards Component :\n\n  ![screencapture-localhost-5173-2024-04-14-14_55_48](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/c8f4342e-6330-480f-b715-5e08c8ccbf35)\n\n  ### Footer Component :\n\n  ![foo](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/c7a44e91-6292-48b6-b9e4-b010f3e87821)\n\n## Refokus UI :\n\n![screencapture-localhost-5173-2024-04-14-15_33_50](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/4974dd27-1cac-47f4-b54e-7c3b752dfd4a)\n\n##### Use Locomotive JS\n\n- Handle smoothness via locomotive js\n\n#### Use Framer motion\n\n- Animation of work component\n- For Scrolling Work component images appears\n\n#### Redux\n\n##### Everything you Need to Know About Redux\n\n- Essential Redux Insights: Gain a comprehensive understanding of Redux. This guide covers everything you need to know about Redux, offering key insights into state management for robust React applications.\n\n## ExoApe - Let's Build it: [[https://www.exoape.com/]]\n\n- UI project with scrolling animations\n\n#### GSAP X Reactjs\n\n##### Introduction and Setup: GSAP X React.js for Stunning Animations\n\n- Install neccessary packages\n\n      npm i gsap\n      npm i @gsap/react\n\n- Two ways to create GSAP Animation\n\n  - useRef()\n  - useGSAP(()=\u003e{\n    gsap.to(selector,{}) })\n\n- using useRef:\n\n      const boxRef = useRef();\n\n      useGSAP(() =\u003e {\n          gsap.to(boxRef.current, {\n            x: 600,\n            y: 200,\n          });\n      });\n\n      \u003cdiv ref={boxRef} className=\"box\"\u003e\u003c/div\u003e\n      \u003cdiv className=\"box box1\"\u003e\u003c/div\u003e\n      \u003cdiv className=\"box box2\"\u003e\u003c/div\u003e\n\n- Using normal useGSAP \u0026 pass selector\n\n      useGSAP(() =\u003e {\n        gsap.to(\".box\", {\n          x: 1000,\n          delay: 1,\n          duration: 2,\n          rotate: 360,\n          backgroundColor: \"blue\",\n        });\n      });\n\n##### IMAGE PREVIEW:\n\n![ViteReact-GoogleChrome2024-06-1512-58-10-ezgif com-video-to-gif-converter](https://github.com/Lucky-Kashyap/Front-End-Domination-Create-Anything-with-Code/assets/88204554/439d2bca-634e-4252-8a48-3a8046354b40)\n\n##### GSAP Timeline: Animate Like a Pro\n\n- define timeline\n\n      const tl = gsap.timeline();\n      useGSAP(() =\u003e {\n\n        tl.to(boxRef.current, {\n          x: 1200,\n          rotate: 360,\n          borderRadius: \"50%\",\n          duration: 2,\n          delay: 1,\n        });\n        tl.to(circleRef.current, {\n          x: 1200,\n          rotate: 360,\n          borderRadius: \"10px\",\n          duration: 2,\n        });\n      });\n\n        useGSAP(\n            () =\u003e {\n              gsap.to(\".box\", {\n                rotate: 360,\n                duration: 1.5,\n                delay: 1,\n              });\n            },\n            { scope: \".container1\" }\n          );\n\n##### IMAGE PREVIEW:\n\n![ViteReact-GoogleChrome2024-09-1021-51-51-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/4b53a7ab-2df2-451a-ad7e-7ae62538f2ce)\n![ViteReact-GoogleChrome2024-09-1022-01-53-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/283a2310-7ea8-47df-abd4-cbbaf9a78291)\n\n\n# FrontEnd Domination\n\nEmbarking on a journey to become a proficient frontend developer is an exciting and rewarding endeavor.\n\n# Thanks to Sheryians Coding School For bringing this Course\n\n# Mentor : Harsh Sharma\n\nHappy Learning! ✨\n\nMade with ☕️ by Divyanshu Kashyap\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucky-kashyap%2Ffront-end-domination-create-anything-with-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucky-kashyap%2Ffront-end-domination-create-anything-with-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucky-kashyap%2Ffront-end-domination-create-anything-with-code/lists"}