FrontendFreaks · Vishal-raj-1 · Apr 9, 2023 · Apr 4, 2023 · Apr 5, 2023 · Apr 5, 2023
diff --git a/Assets/gameMusic.mp3 b/Assets/gameMusic.mp3
diff --git a/CheatSheets/CSS Flexbox-Cheatsheet.md b/CheatSheets/CSS Flexbox-Cheatsheet.md
@@ -126,4 +126,5 @@
 
 ## Learn More about CSS Flexbox from here:
 
-https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+[![Learn More about CSS Flexbox from here:](https://css-tricks.com/wp-json/social-image-generator/v1/image/21059)](https://youtu.be/3nLglJtUHjA "CSS Flexbox Tutorial for Beginners")
diff --git a/CSS-CheatSheet.md → CheatSheets/CSS Grid-CheatSheet.md b/CSS-CheatSheet.md → CheatSheets/CSS Grid-CheatSheet.md
@@ -1,154 +1,141 @@
-# CSS Grid CheatSheet
-
-## ****1. Grid container properties****
-
-### Display
-
-```css
-/* Sets the element to a grid container. */
-.container {
-  display: grid;
-}
-```
-
-### Grid Template Columns
-
-```css
-/* Defines the columns of the grid. */
-.container {
-  grid-template-columns: 100px 100px 100px;
-}
-```
-
-### Grid Template Rows
-
-```css
-/* Defines the rows of the grid. */
-.container {
-  grid-template-rows: 100px 100px;
-}
-```
-
-### Grid Template Areas
-
-```css
-/* Defines the areas of the grid. */
-.container {
-  grid-template-areas: 
-    "header header"
-    "sidebar content"
-    "footer footer";
-}
-```
-
-### Gap
-
-```css
-/* Specifies the size of the gap between grid items. */
-.container {
-  gap: 10px;
-}
-```
-
-### Justify Items
-
-```css
-/* Aligns items along the inline (row) axis. */
-.container {
-  justify-items: center;
-}
-```
-
-### Align Items
-
-```css
-/* Aligns items along the block (column) axis. */
-.container {
-  align-items: center;
-}
-```
-
-### Justify Content
-
-```css
-/* Aligns the grid along the inline (row) axis. */
-.container {
-  justify-content: center;
-}
-```
-
-### Align Content
-
-```css
-/* Aligns the grid along the block (column) axis. */
-.container {
-  align-content: center;
-}
-```
-
-## 2. Grid Item Properties
-
-### Grid Column Start
-
-```css
-/* Specifies the start position of a grid item along the inline (row) axis. */
-.item {
-  grid-column-start: 1;
-}
-```
-
-### Grid Column End
-
-```css
-/* Specifies the end position of a grid item along the inline (row) axis. */
-.item {
-  grid-column-end: 3;
-}
-```
-
-### Grid Row Start
-
-```css
-/* Specifies the start position of a grid item along the block (column) axis. */
-.item {
-  grid-row-start: 1;
-}
-```
-
-### Grid Row End
-
-```css
-/* Specifies the end position of a grid item along the block (column) axis. */
-.item {
-  grid-row-end: 3;
-}
-```
-
-### Grid Area
-
-```css
-/* Specifies both the start and end positions of a grid item. */
-.item {
-  grid-area: 1 / 1 / 3 / 3;
-}
-```
-
-### Justify Self
-
-```css
-/* Aligns a grid item along the inline (row) axis. */
-.item {
-  justify-self: center;
-}
-```
-
-### Align Self
-```css
-/* Aligns a grid item along the block (column) axis. */
-.item {
-  align-self: center;
-}
-```
-
-Learn More about CSS Grid from here:
-[![Learn CSS Grid in 35 minutes: The Ultimate Crash Course for Beginners]](https://www.youtube.com/embed/ULp7wPJ-rzQ "Learn CSS Grid in 35 minutes: The Ultimate Crash Course for Beginners")
+![CSS logo](https://vishal-raj-1.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F381724cd-61ee-4dda-9317-da3c96afc9c6%2Fcss-3.png?table=block&id=e3ef2276-f491-476f-bbc5-e17bc16074c5&spaceId=2119cbee-b8d9-4533-9b59-63ea95d76e4e&width=250&userId=&cache=v2)
+
+# CSS Grid Cheatsheet
+## 1. Grid container properties
+
+## Display
+```css
+/* Sets the element to a grid container. */
+.container {
+  display: grid;
+}
+```
+
+## Grid Template Columns
+```css
+/* Defines the columns of the grid. */
+.container {
+  grid-template-columns: 100px 100px 100px;
+}
+```
+
+## Grid Template Rows
+```css
+/* Defines the rows of the grid. */
+.container {
+  grid-template-rows: 100px 100px;
+}
+```
+
+## Grid Template Areas
+```css
+/* Defines the areas of the grid. */
+.container {
+  grid-template-areas: 
+    "header header"
+    "sidebar content"
+    "footer footer";
+}
+```
+
+## Gap
+```css
+/* Specifies the size of the gap between grid items. */
+.container {
+  gap: 10px;
+}
+```
+
+## Justify Items
+```css
+/* Aligns items along the inline (row) axis. */
+.container {
+  justify-items: center;
+}
+```
+
+# Align Items
+```css
+/* Aligns items along the block (column) axis. */
+.container {
+  align-items: center;
+}
+```
+
+# Justify Content
+```css
+/* Aligns the grid along the inline (row) axis. */
+.container {
+  justify-content: center;
+}
+```
+
+# Align Content
+```css
+/* Aligns the grid along the block (column) axis. */
+.container {
+  align-content: center;
+}
+```
+
+## 2. Grid Item Properties
+## Grid Column Start
+
+```css
+/* Specifies the start position of a grid item along the inline (row) axis. */
+.item {
+  grid-column-start: 1;
+}
+```
+
+## Grid Column End
+```css 
+/* Specifies the start position of a grid item along the inline (row) axis. */
+.item {
+  grid-column-start: 1;
+}
+```
+
+## Grid Row Start
+```css
+/* Specifies the start position of a grid item along the block (column) axis. */
+.item {
+  grid-row-start: 1;
+}
+```
+
+## Grid Row End
+```css
+/* Specifies the end position of a grid item along the block (column) axis. */
+.item {
+  grid-row-end: 3;
+}
+```
+
+## Grid Area
+```css
+/* Specifies both the start and end positions of a grid item. */
+.item {
+  grid-area: 1 / 1 / 3 / 3;
+}
+```
+
+## Justify Self
+```css
+/* Aligns a grid item along the inline (row) axis. */
+.item {
+  justify-self: center;
+}
+```
+
+## Align Self
+```css
+/* Aligns a grid item along the block (column) axis. */
+.item {
+  align-self: center;
+}
+```
+
+## Learn More about CSS Grid from here:
+https://css-tricks.com/snippets/css/complete-guide-grid/
+[![CSS Grid Tutorial for Beginners](https://i.ytimg.com/vi/ULp7wPJ-rzQ/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAF_KnaTkQYj55zEN0fDGX-74JVKQ)](https://www.youtube.com/watch?v=ULp7wPJ-rzQ&ab_channel=VishalRajput "CSS Grid Tutorial for Beginners")
diff --git a/CheatSheets/Git-Cheatsheet.md b/CheatSheets/Git-Cheatsheet.md
@@ -8,11 +8,11 @@
 | `git config --global user.email "youremail@example.com"` | Set your email for Git.                  |
 | `git config --global color.ui true`                      | Enable color output.                               |
 | `git init`                                               | Initialize a new Git repository.                   |
-| `git clone <repository url>`                             | Clone an existing repository to your local machine.|
+| `git clone <repository url>`                             | Clone an existing repository to your local machine.[either using https or SSH(when you have linked github with your computer using SSH keys) link]                 |
 | `git status`                                             | Show the status of your working directory and staging area.|
 | `git add <file>`                                         | Add a file to the staging area.                     |
 | `git commit -m "Commit message"`                         | Commit changes in the staging area with a message.  |
-| `git branch`                                             | Show a list of all branches in the repository.      |
+| `git branch`                                             | Show a list of all branches in the repository.[your current working branch will be green coloured with * mark before it]      |
 | `git branch <branch name>`                               | Create a new branch with the given name.            |
 | `git checkout <branch name>`                             | Switch to the branch with the given name.           |
 | `git merge <branch name>`                                | Merge changes from the specified branch into the current branch.|

diff --git a/CheatSheets/HTML-CheatSheet.md b/CheatSheets/HTML-CheatSheet.md
@@ -183,7 +183,7 @@
 
 ```html
 
-<audio src="audio_file.mp3" controls></audio>
+<video src="video_file.mp4" controls></video>
 
 ```
 

diff --git a/CheatSheets/JS-CheatSheet.md b/CheatSheets/JS-CheatSheet.md
@@ -210,6 +210,12 @@ const fruits = ['apple', 'banana', 'orange'];
 for (let fruit of fruits) {
   console.log(fruit);
 }
+// There is difference b/w for(let fruit in fruits) vs as shown above
+// `for...in` is used to iterate over properties of objects whereas `for...of` will iterate over values
+
+for(let fruit in fruits){
+  console.log(fruit); // O/P: 0 1 2 
+}
 
 // forEach method for iterating over arrays
 fruits.forEach((fruit, index) => {
@@ -301,6 +307,11 @@ console.log(even); // [2]
 ### Reduce method
 
 **`reduce()`** applies a function to each element of an array, resulting in a single output value.
+```jsx
+const numbers = [1, 2, 3];
+const sum = numbers.reduce((total, num) => total + num, 0);
+console.log(sum); // 6
+```
 
 Learn More about JS from here:
 [![JavaScript Tutorial for Beginners](https://img.youtube.com/vi/9Shi7sbrHqY/sddefault.jpg)](https://www.youtube.com/watch?v=9Shi7sbrHqY&ab_channel=VishalRajput "JavaScript Tutorial for Beginners")
diff --git a/CheatSheets/JavaScript DOM-Cheatsheet.md b/CheatSheets/JavaScript DOM-Cheatsheet.md
@@ -1,3 +1,5 @@
+![JS logo](https://vishal-raj-1.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2ce8ae32-c03f-42db-9865-9a8abc50aa83%2Fjs.png?table=block&id=408271f3-22a5-4395-8ee8-755bc459674e&spaceId=2119cbee-b8d9-4533-9b59-63ea95d76e4e&width=250&userId=&cache=v2)
+
 # JavaScript DOM Cheatsheet
 
 ### What is DOM?
@@ -82,6 +84,6 @@ myButton.addEventListener("click", function() {
 });
 ```
 
-# Learn More about JavaScript DOM from here:
 
-https://youtu.be/85jzHRTVdsc
+## Learn More about JavaScript DOM from here:
+[![JS DOM Tutorial for Beginners](https://i.ytimg.com/vi/85jzHRTVdsc/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDs_B6goLnSFqU6x2aesa56jJmg_Q)](https://www.youtube.com/watch?v=85jzHRTVdsc&t=5s&ab_channel=VishalRajput "JS DOM Tutorial for Beginners")
diff --git a/Projects/NotesApp/notesApp.html b/Projects/NotesApp/notesApp.html
@@ -12,7 +12,7 @@
         <div id="input-box">
             <input type="text" id="addTitle" placeholder="Title">
             <textarea name="" id="addText" cols="30" rows="10" placeholder="Take a note.."></textarea>
-
+            
             <button id="addNote">Add</button>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -183,7 +183,7 @@ @@
     ```html
-    <audio src="audio_file.mp3" controls></audio>
+    <video src="video_file.mp4" controls></video>
     ```
@@ Expand Down @@