Web 🌐

Introduction to GSAP GSAP(Greensock Animation Platform) is a powerful JavaScript animation library that allows you to create high-performance animations for web applications. It is widely used for animating elements with precision and smoothness. 2. Installing GSAP You can use GSAP in multiple ways: CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> 3. Basic GSAP Syntax GSAP uses the .to(), .from(), and .fromTo() methods to animate elements. gsap.to() → Animates from the current state to a new state. gsap.to(".box", { x: 200, duration: 1 }); gsap.from() → Animates from a given state to the current state. gsap.from(".box", { opacity: 0, y: -50, duration: 1 }); gsap.fromTo() → Specifies both the start and end states explicitly. gsap.fromTo(".box", { x: 0 }, { x: 300, duration: 1 }); 4. Key Properties x, y → Move horizontally/vertically scale, scaleX, scaleY → Scale size rotation, rotate → Rotate element opacity → Change transparency skewX, skewY → Skew transformation stagger → Create a delay between multiple elements Example ...

DOM Manipulation in JavaScript DOM (Document Object Model) Manipulation in JavaScript refers to modifying HTML elements dynamically using JavaScript. This includes selecting, modifying, adding, or removing elements from the webpage. Selecting Elements in the DOM Before modifying elements, we need to select them. Here are the different ways: Method Description Example document.getElementById(id) Selects an element by its ID document.getElementById("myDiv") document.getElementsByClassName(className) Selects elements by class name (returns an HTMLCollection) document.getElementsByClassName("myClass") document.getElementsByTagName(tagName) Selects elements by tag name (returns an HTMLCollection) document.getElementsByTagName("p") document.querySelector(selector) Selects the first element that matches the CSS selector document.querySelector(".myClass") document.querySelectorAll(selector) Selects all elements that match the CSS selector (returns a NodeList) document.querySelectorAll("div") Examples of Selection Methods 1. Selecting an Element by ID let title = document.getElementById("main-title"); console.log(title.innerText); // Logs the text inside the element 2. Selecting Elements by Class Name let items = document.getElementsByClassName("item"); console.log(items[0].innerText); // Logs the first element's text 3. Selecting Elements by Tag Name let paragraphs = document.getElementsByTagName("p"); console.log(paragraphs.length); // Logs the number of <p> elements 4. Selecting an Element Using querySelector() Returns only the first matching element. ...

Arrays Objects allow you to store keyed collections of values. That’s fine. But quite often we find that we need an ordered collection, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc. It is not convenient to use an object here, because it provides no methods to manage the order of elements. We can’t insert a new property “between” the existing ones. Objects are just not meant for such use. ...

Synchronous vs Asynchronous JavaScript JavaScript is single-threaded, meaning it executes one operation at a time in a sequential manner. However, JavaScript provides mechanisms to handle tasks asynchronously, allowing it to perform operations without blocking the main execution thread. 1. Synchronous JavaScript In synchronous execution, tasks run one after another, meaning JavaScript waits for one operation to complete before moving to the next. This can cause delays if a task takes a long time (e.g., reading a large file or making a network request). ...

JavaScript was originally created to bring static web pages to life, enabling them to respond dynamically to user interactions. Its code, known as scripts, is directly embedded within HTML documents and executed by the browser as soon as the page loads. Because these scripts are delivered and interpreted as plain text, they bypass the need for a separate compilation process—this makes development swift and flexible. This interpretive nature is a key characteristic of JavaScript and distinguishes it from compiled languages like Java. Whereas Java requires a compile step to transform code into bytecode before execution, JavaScript’s immediate execution model facilitates rapid testing and iterative development. Over time, JavaScript has evolved from a simple tool for adding interactivity to a robust language capable of handling complex web applications, manipulating the Document Object Model (DOM), and even running on servers through environments like Node.js. ...

Tailwind CSS is a utility-first CSS framework designed to allow developers to build custom designs quickly. Instead of writing custom styles, Tailwind provides a collection of utility classes that you can use to style elements directly in the HTML. 1. Installation and Setup How to install Tailwind using CDN For quick prototyping, you can include Tailwind directly in your project with a CDN. Add the following to your HTML <head> tag: ...

CSS (Cascadia Styling Sheet) is the style sheet language that’s use to specify how a document written in HTML or XML should be presented and styled. CSS Boilerplate *{ margin: 0; padding: 0; box-sizing: border-box; } html,body{ width: 100%; height: 100%; } How to Link CSS with HTML Add the line after tittle tag in your html file <link rel="stylesheet" href="style.css"> Tips: We use . dot to target class in CSS We use # hash to target id in CSS Also if you want to target tag we can simply target like h3{} Div: box means div and also when e have more than one element and also when there is rectangle shape, very high change there is div ;). Units in CSS px : It is use to define the measurement in pixels. 1px = 1/96th of inch % : It is used to define the measurement as a percentage that is relative to another value (maybe to their parent element). vh : It is relative to the height of the viewpoint(screen). 1vh = 1% or 1/100 of the height of the viewpoint vw : It is relative to the width of the viewpoint(screen). 1vm or 1/100 of the width of the width of viewpoint em : Relative to the font-size of the element 2em means 2 times the size of the current font rem : Relative to font-size of the root element like html tag. vmin : Relative to 1% of viewport’s* smaller dimension vmax : Relative to 1% of viewport’s* larger dimension Tip: There are mainly two type of fonts sans-serif and serif. The difference is the presence of decorative strokes, or serifs at the beginning and end of letters. ...

HTML(Hyper Text Markup Language) is the standard language use to create and structure content on the web. Why learn html: because we need to create website for that we need html, or because of content. Getting with HTML Tip: type - html:5 / ! - for boilerplate code Boilerplate Code <!DOCTYPE html> <!-- tells that we are using HTML5 --> <html lang="en"> <!--The tag represents the root of an HTML document.--> <head> <!-- head is a container for metadata (data about data)--> <meta charset="UTF-8"> <!--tag defines metadata about an HTML document--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--defines the title of the document.--> </head> <body> <!-- defines the document's body.--> <!-- content added here --> </body> </html> Tags in HTML <h1></h1> - heading tag and Most Importance <h2></h2> - less Importance than h1 <h3></h3> - less Importance than h2 <h4></h4> - less Importance than h3 <h5></h5> - less Importance than h4 <h6></h6> - less Importance than h5 <p></p> - paragraph tag used to add paragraph/text on website <b></b> - used to bold the text <i></i> - used to italic the text  - used for to add super script  - used to add sub script <br></br> - used to break line <hr> - used to add horizontal row <ol></ol> - used to add ordered list <ul></ul> - used to add unordered list <li></li> - used to add items in list <a href ="source"> </a> - used to make text clickable/hyperlink Tip: to open link in new tab use this target="_blank" <img src="source" alt=" "> - used to add image to website <form></form> - used to create the form <label></label> - used to add label to input field <input id ="abc" type="text" placeholder="Name" > - used to add input field <div></div> div is rectangle in his nature with 0 height div is used to combine multiple elements together in html <table></table> - A table in HTML consists of table cells inside rows and columns. <td></td> - Each table cell is defined by a and a tag <tr></tr> - table row starts with a and ends with a tag <th></th> - Defines a header cell in a table Input Types for Input tag text : <input type="text" placeholder="Name"> email : <input type="email" placeholder="Email"> password : <input type="password" placeholder="Password"> checkbox : <input type="checkbox" > radio button : <input type="radio" > Male file : <input type="file" > range : <input type="range" > color: <input type="color" > date : <input type="date" > submit : <input type="submit" > id: id is attribute that is used to assign id to an element. It is very helpful when we have multiple of same type but we need to treat them differently. id must be unique of element. ...