Skip to content

Commit a2027d8

Browse files
author
Amit Maurya
committed
first commit
0 parents  commit a2027d8

File tree

5 files changed

+581
-0
lines changed

5 files changed

+581
-0
lines changed

‎index.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>HTML, CSS, JS Cheat Sheet</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Bangers&family=Bree+Serif&family=Calistoga&family=Carter+One&family=DM+Serif+Display:ital@0;1&family=Domine:wght@400..700&family=Lora:ital,wght@0,400..700;1,400..700&family=Noto+Serif+Telugu:wght@100..900&family=Oleo+Script:wght@400;700&family=Rakkas&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik+Wet+Paint&display=swap"
12+
rel="stylesheet">
13+
<link rel="stylesheet" href="prism.css">
14+
<script src="prism.js"></script>
15+
<link rel="stylesheet" href="style.css">
16+
</head>
17+
18+
<body>
19+
20+
<header>
21+
<h1>🔥 Cheat Sheet: HTML, CSS & JavaScript</h1>
22+
<input type="text" id="search" placeholder="Search...">
23+
</header>
24+
25+
26+
27+
<main>
28+
29+
<!-- HTML Basics -->
30+
<section class="cheat-section">
31+
<h2>🛠️ HTML Basics</h2>
32+
<pre class="cheat-box language-html">
33+
<code>&lt;!DOCTYPE html&gt; <!-- Document type declaration --></code>
34+
</pre>
35+
36+
<pre class="cheat-box language-html">
37+
<code>&lt;a href="https://example.com" target="_blank"&gt;Open in New Tab&lt;/a&gt;</code>
38+
</pre>
39+
40+
<pre class="cheat-box language-html">
41+
<code>&lt;img src="image.jpg" alt="Image Description" width="300" height="200"&gt;</code>
42+
</pre>
43+
44+
<pre class="cheat-box language-html">
45+
<code>&lt;table&gt;
46+
&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Age&lt;/th&gt;&lt;/tr&gt;
47+
&lt;tr&gt;&lt;td&gt;Amit&lt;/td&gt;&lt;td&gt;20&lt;/td&gt;&lt;/tr&gt;
48+
&lt;/table&gt;</code>
49+
</pre>
50+
51+
<pre class="cheat-box language-html">
52+
<code>&lt;form action="/submit" method="POST"&gt;
53+
&lt;input type="text" name="username" placeholder="Enter name" required&gt;
54+
&lt;button type="submit"&gt;Submit&lt;/button&gt;
55+
&lt;/form&gt;</code>
56+
</pre>
57+
<pre class="cheat-box language-html">
58+
<code>&lt;a href='url'&gt;Link&lt;/a&gt;</code>
59+
60+
</pre>
61+
</section>
62+
63+
<!-- CSS basics -->
64+
65+
<section class="cheat-section">
66+
<h2>🎨 CSS Basics</h2>
67+
<pre class="cheat-box language-css">
68+
<code>/* Center an element */
69+
div {
70+
display: flex;
71+
justify-content: center;
72+
align-items: center;
73+
}</code>
74+
</pre>
75+
<pre class="cheat-box language-css">
76+
<code>/* Box Shadow */
77+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);</code>
78+
</pre>
79+
80+
<pre class="cheat-box language-css">
81+
<code>/* Gradient Background */
82+
background: linear-gradient(90deg, #ff7e5f, #feb47b);</code>
83+
</pre>
84+
85+
<pre class="cheat-box language-css">
86+
<code>/* Hover Effect */
87+
button:hover {
88+
background: #007bff;
89+
color: #fff;
90+
}</code>
91+
</pre>
92+
93+
<pre class="cheat-box language-css">
94+
<code>/* Media Query */
95+
@media (max-width: 768px) {
96+
body {
97+
background: lightgray;
98+
}
99+
}</code>
100+
</pre>
101+
102+
</section>
103+
104+
<!-- JavaScript basics -->
105+
106+
<section class="cheat-section ">
107+
<h2>⚙️ JavaScript Basics</h2>
108+
<pre class="cheat-box language-js">
109+
<code>// Alert Box
110+
alert("Hello, World!");</code>
111+
</pre>
112+
<pre class="cheat-box language-js">
113+
<code>document.querySelector("p");</code>
114+
115+
</pre>
116+
117+
<pre class="cheat-box language-js">
118+
<code>// DOM Manipulation
119+
document.getElementById("demo").innerText = "Hello!";</code>
120+
</pre>
121+
122+
<pre class="cheat-box language-js">
123+
<code>// Loop Example
124+
for(let i = 0; i < 5; i++) {
125+
console.log(i);
126+
}</code>
127+
</pre>
128+
129+
<pre class="cheat-box language-js">
130+
<code>// Event Listener
131+
document.querySelector("button").addEventListener("click", () => {
132+
alert("Button clicked!");
133+
});</code>
134+
</pre>
135+
<pre class="cheat-box language-js">
136+
<code>// Fetch API Example
137+
fetch("https://api.example.com")
138+
.then(response => response.json())
139+
.then(data => console.log(data));</code>
140+
</pre>
141+
</section>
142+
</main>
143+
144+
<script src="script.js"></script>
145+
</body>
146+
147+
</html>

‎prism.css‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)