Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d38b1f9

Browse files
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")
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)

AltStyle によって変換されたページ (->オリジナル) /