Skip to content

Commit d38b1f9

Browse files
Vishal-raj-1Vishal-raj-1
authored
Merge pull request #18 from rahulraj22/main
Added CSS Grid CheatSheet & JS DOM CheatSheet
2 parents c5e9662 + a94c7f7 commit d38b1f9

File tree

8 files changed

+162
-161
lines changed

8 files changed

+162
-161
lines changed

‎Assets/gameMusic.mp3‎

0 Bytes
Binary file not shown.

‎CheatSheets/CSS Flexbox-Cheatsheet.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,4 +126,5 @@
126126

127127
## Learn More about CSS Flexbox from here:
128128

129-
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
129+
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
130+
[![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")

‎CSS-CheatSheet.md‎ renamed to ‎CheatSheets/CSS Grid-CheatSheet.md‎

Lines changed: 141 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,141 @@
1-
# CSS Grid CheatSheet
2-
3-
## ****1. Grid container properties****
4-
5-
### Display
6-
7-
```css
8-
/* Sets the element to a grid container. */
9-
.container {
10-
display: grid;
11-
}
12-
```
13-
14-
### Grid Template Columns
15-
16-
```css
17-
/* Defines the columns of the grid. */
18-
.container {
19-
grid-template-columns: 100px 100px 100px;
20-
}
21-
```
22-
23-
### Grid Template Rows
24-
25-
```css
26-
/* Defines the rows of the grid. */
27-
.container {
28-
grid-template-rows: 100px 100px;
29-
}
30-
```
31-
32-
### Grid Template Areas
33-
34-
```css
35-
/* Defines the areas of the grid. */
36-
.container {
37-
grid-template-areas:
38-
"header header"
39-
"sidebar content"
40-
"footer footer";
41-
}
42-
```
43-
44-
### Gap
45-
46-
```css
47-
/* Specifies the size of the gap between grid items. */
48-
.container {
49-
gap: 10px;
50-
}
51-
```
52-
53-
### Justify Items
54-
55-
```css
56-
/* Aligns items along the inline (row) axis. */
57-
.container {
58-
justify-items: center;
59-
}
60-
```
61-
62-
### Align Items
63-
64-
```css
65-
/* Aligns items along the block (column) axis. */
66-
.container {
67-
align-items: center;
68-
}
69-
```
70-
71-
### Justify Content
72-
73-
```css
74-
/* Aligns the grid along the inline (row) axis. */
75-
.container {
76-
justify-content: center;
77-
}
78-
```
79-
80-
### Align Content
81-
82-
```css
83-
/* Aligns the grid along the block (column) axis. */
84-
.container {
85-
align-content: center;
86-
}
87-
```
88-
89-
## 2. Grid Item Properties
90-
91-
### Grid Column Start
92-
93-
```css
94-
/* Specifies the start position of a grid item along the inline (row) axis. */
95-
.item {
96-
grid-column-start: 1;
97-
}
98-
```
99-
100-
### Grid Column End
101-
102-
```css
103-
/* Specifies the end position of a grid item along the inline (row) axis. */
104-
.item {
105-
grid-column-end: 3;
106-
}
107-
```
108-
109-
### Grid Row Start
110-
111-
```css
112-
/* Specifies the start position of a grid item along the block (column) axis. */
113-
.item {
114-
grid-row-start: 1;
115-
}
116-
```
117-
118-
### Grid Row End
119-
120-
```css
121-
/* Specifies the end position of a grid item along the block (column) axis. */
122-
.item {
123-
grid-row-end: 3;
124-
}
125-
```
126-
127-
### Grid Area
128-
129-
```css
130-
/* Specifies both the start and end positions of a grid item. */
131-
.item {
132-
grid-area: 1 / 1 / 3 / 3;
133-
}
134-
```
135-
136-
### Justify Self
137-
138-
```css
139-
/* Aligns a grid item along the inline (row) axis. */
140-
.item {
141-
justify-self: center;
142-
}
143-
```
144-
145-
### Align Self
146-
```css
147-
/* Aligns a grid item along the block (column) axis. */
148-
.item {
149-
align-self: center;
150-
}
151-
```
152-
153-
Learn More about CSS Grid from here:
154-
[![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")
1+
![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)
2+
3+
# CSS Grid Cheatsheet
4+
## 1. Grid container properties
5+
6+
## Display
7+
```css
8+
/* Sets the element to a grid container. */
9+
.container {
10+
display: grid;
11+
}
12+
```
13+
14+
## Grid Template Columns
15+
```css
16+
/* Defines the columns of the grid. */
17+
.container {
18+
grid-template-columns: 100px 100px 100px;
19+
}
20+
```
21+
22+
## Grid Template Rows
23+
```css
24+
/* Defines the rows of the grid. */
25+
.container {
26+
grid-template-rows: 100px 100px;
27+
}
28+
```
29+
30+
## Grid Template Areas
31+
```css
32+
/* Defines the areas of the grid. */
33+
.container {
34+
grid-template-areas:
35+
"header header"
36+
"sidebar content"
37+
"footer footer";
38+
}
39+
```
40+
41+
## Gap
42+
```css
43+
/* Specifies the size of the gap between grid items. */
44+
.container {
45+
gap: 10px;
46+
}
47+
```
48+
49+
## Justify Items
50+
```css
51+
/* Aligns items along the inline (row) axis. */
52+
.container {
53+
justify-items: center;
54+
}
55+
```
56+
57+
# Align Items
58+
```css
59+
/* Aligns items along the block (column) axis. */
60+
.container {
61+
align-items: center;
62+
}
63+
```
64+
65+
# Justify Content
66+
```css
67+
/* Aligns the grid along the inline (row) axis. */
68+
.container {
69+
justify-content: center;
70+
}
71+
```
72+
73+
# Align Content
74+
```css
75+
/* Aligns the grid along the block (column) axis. */
76+
.container {
77+
align-content: center;
78+
}
79+
```
80+
81+
## 2. Grid Item Properties
82+
## Grid Column Start
83+
84+
```css
85+
/* Specifies the start position of a grid item along the inline (row) axis. */
86+
.item {
87+
grid-column-start: 1;
88+
}
89+
```
90+
91+
## Grid Column End
92+
```css
93+
/* Specifies the start position of a grid item along the inline (row) axis. */
94+
.item {
95+
grid-column-start: 1;
96+
}
97+
```
98+
99+
## Grid Row Start
100+
```css
101+
/* Specifies the start position of a grid item along the block (column) axis. */
102+
.item {
103+
grid-row-start: 1;
104+
}
105+
```
106+
107+
## Grid Row End
108+
```css
109+
/* Specifies the end position of a grid item along the block (column) axis. */
110+
.item {
111+
grid-row-end: 3;
112+
}
113+
```
114+
115+
## Grid Area
116+
```css
117+
/* Specifies both the start and end positions of a grid item. */
118+
.item {
119+
grid-area: 1 / 1 / 3 / 3;
120+
}
121+
```
122+
123+
## Justify Self
124+
```css
125+
/* Aligns a grid item along the inline (row) axis. */
126+
.item {
127+
justify-self: center;
128+
}
129+
```
130+
131+
## Align Self
132+
```css
133+
/* Aligns a grid item along the block (column) axis. */
134+
.item {
135+
align-self: center;
136+
}
137+
```
138+
139+
## Learn More about CSS Grid from here:
140+
https://css-tricks.com/snippets/css/complete-guide-grid/
141+
[![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")

‎CheatSheets/Git-Cheatsheet.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
| `git config --global user.email "youremail@example.com"` | Set your email for Git. |
99
| `git config --global color.ui true` | Enable color output. |
1010
| `git init` | Initialize a new Git repository. |
11-
| `git clone <repository url>` | Clone an existing repository to your local machine.|
11+
| `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] |
1212
| `git status` | Show the status of your working directory and staging area.|
1313
| `git add <file>` | Add a file to the staging area. |
1414
| `git commit -m "Commit message"` | Commit changes in the staging area with a message. |
15-
| `git branch` | Show a list of all branches in the repository. |
15+
| `git branch` | Show a list of all branches in the repository.[your current working branch will be green coloured with * mark before it] |
1616
| `git branch <branch name>` | Create a new branch with the given name. |
1717
| `git checkout <branch name>` | Switch to the branch with the given name. |
1818
| `git merge <branch name>` | Merge changes from the specified branch into the current branch.|

‎CheatSheets/HTML-CheatSheet.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@
183183

184184
```html
185185

186-
<audio src="audio_file.mp3" controls></audio>
186+
<video src="video_file.mp4" controls></video>
187187

188188
```
189189

‎CheatSheets/JS-CheatSheet.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,12 @@ const fruits = ['apple', 'banana', 'orange'];
210210
for (let fruit of fruits) {
211211
console.log(fruit);
212212
}
213+
// There is difference b/w for(let fruit in fruits) vs as shown above
214+
// `for...in` is used to iterate over properties of objects whereas `for...of` will iterate over values
215+
216+
for(let fruit in fruits){
217+
console.log(fruit); // O/P: 0 1 2
218+
}
213219

214220
// forEach method for iterating over arrays
215221
fruits.forEach((fruit, index) => {
@@ -301,6 +307,11 @@ console.log(even); // [2]
301307
### Reduce method
302308

303309
**`reduce()`** applies a function to each element of an array, resulting in a single output value.
310+
```jsx
311+
const numbers = [1, 2, 3];
312+
const sum = numbers.reduce((total, num) => total + num, 0);
313+
console.log(sum); // 6
314+
```
304315

305316
Learn More about JS from here:
306317
[![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")

‎CheatSheets/JavaScript DOM-Cheatsheet.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
![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)
2+
13
# JavaScript DOM Cheatsheet
24

35
### What is DOM?
@@ -82,6 +84,6 @@ myButton.addEventListener("click", function() {
8284
});
8385
```
8486

85-
# Learn More about JavaScript DOM from here:
8687

87-
https://youtu.be/85jzHRTVdsc
88+
## Learn More about JavaScript DOM from here:
89+
[![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")

‎Projects/NotesApp/notesApp.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div id="input-box">
1313
<input type="text" id="addTitle" placeholder="Title">
1414
<textarea name="" id="addText" cols="30" rows="10" placeholder="Take a note.."></textarea>
15-
15+
1616
<button id="addNote">Add</button>
1717
</div>
1818

0 commit comments

Comments
 (0)