HTML Cheat Sheet
|
Tag/Concept |
Description |
Syntax |
Example |
|
<!DOCTYPE> |
Declaration of document type |
<!DOCTYPE html> |
<!DOCTYPE html> |
|
<html> |
Root element of an HTML document |
<html>...</html> |
<html> <head>...</head> <body>...</body> </html> |
|
<head> |
Metadata about the document |
<head>...</head> |
<head> <title>My Title</title> </head> |
|
<title> |
Title of the document in browser |
<title>...</title> |
<title>Page Title</title> |
|
<meta> |
Metadata information (charset, viewport, etc.) |
<meta> |
<meta charset="UTF-8"> |
|
<link> |
Link external resources (CSS, icons) |
<link href="..." rel="..." /> |
<link rel="stylesheet" href="styles.css"> |
|
<script> |
Embed or reference JavaScript |
<script src="..."></script> |
<script src="app.js"></script> |
|
<style> |
Inline CSS styles |
<style>...</style> |
<style> body { color: red; } </style> |
|
<body> |
Main document content |
<body>...</body> |
<body> <p>Hello</p> </body> |
|
<header> |
Introductory content or navigation |
<header>...</header> |
<header> <h1>Site Title</h1> </header> |
|
<footer> |
Footer for contact info, copyright, etc. |
<footer>...</footer> |
<footer> © 2024 My Company </footer> |
|
<nav> |
Navigation links |
<nav>...</nav> |
<nav> <a href="#home">Home</a> <a href="#contact">Contact</a> </nav> |
|
<article> |
Self-contained content |
<article>...</article> |
<article> <h2>Blog Post</h2> <p>Content...</p> </article> |
|
<section> |
Grouping of content |
<section>...</section> |
<section> <h2>Section Title</h2> <p>Details...</p> </section> |
|
<aside> |
Side content or advertisements |
<aside>...</aside> |
<aside> Related Links </aside> |
|
<div> |
Generic container for content |
<div>...</div> |
<div> This is a container </div> |
|
<span> |
Inline container for text |
<span>...</span> |
<span style="color: red;">Red Text</span> |
|
<input> |
User input field |
<input type="..." /> |
<input type="text" name="name" /> |
|
<form> |
Form for user input |
<form>...</form> |
<form action="/submit" method="POST">...</form> |
|
<button> |
Clickable button |
<button>...</button> |
<button type="submit">Submit</button> |
|
<select> |
Drop-down list |
<select><option>...</option></select> |
<select><option>Option 1</option><option>Option 2</option></select> |
|
<textarea> |
Multiline text input |
<textarea>...</textarea> |
<textarea rows="4" cols="50">Enter text here...</textarea> |
|
<audio> |
Embed audio content |
<audio src="..." controls></audio> |
<audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio> |
|
<video> |
Embed video content |
<video src="..." controls></video> |
<video controls> <source src="movie.mp4" type="video/mp4"> </video> |
|
<iframe> |
Embed another HTML page |
<iframe src="..."></iframe> |
<iframe src="https://example.com"></iframe> |
CSS Cheat Sheet
|
Property |
Description |
Syntax |
Example |
|
color |
Text color |
color: value; |
color: blue; |
|
background-color |
Background color of an element |
background-color: value; |
background-color: #f0f0f0; |
|
background-image |
Background image |
background-image: url('image.jpg'); |
background-image: url('background.jpg'); |
|
font-family |
Font type |
font-family: value; |
font-family: Arial, sans-serif; |
|
font-size |
Size of the text |
font-size: value; |
font-size: 16px; |
|
text-align |
Horizontal text alignment |
text-align: value; |
text-align: center; |
|
padding |
Space inside an element |
padding: value; |
padding: 10px 20px; |
|
margin |
Space outside an element |
margin: value; |
margin: 20px; |
|
border |
Border around an element |
border: value; |
border: 2px solid black; |
|
border-radius |
Rounded corners |
border-radius: value; |
border-radius: 10px; |
|
width |
Width of an element |
width: value; |
width: 100px; |
|
height |
Height of an element |
height: value; |
height: 50px; |
|
display |
How the element is displayed |
display: value; |
display: block; |
|
position |
Positioning of an element |
position: value; |
position: relative; |
|
z-index |
Stack order of elements |
z-index: value; |
z-index: 10; |
|
overflow |
Handle overflowed content |
overflow: value; |
overflow: hidden; |
|
float |
Floats element left or right |
float: value; |
float: left; |
|
grid |
CSS Grid layout |
display: grid; grid-template-columns: ...; |
display: grid; grid-template-columns: repeat(3, 1fr); |
|
flexbox |
Flexbox layout |
display: flex; justify-content: ...; |
display: flex; justify-content: space-between; |
JavaScript Cheat Sheet
|
Concept |
Description |
Syntax |
Example |
|
Variables |
Declaration of variables |
var/let/const name = value; |
let x = 5; |
|
Functions |
Function definition |
function name() { ... } |
function greet() { alert('Hello!'); } |
|
Arrow Functions |
Shorthand for functions |
const name = () => { ... } |
const sum = (a, b) => a + b; |
|
If-Else Statements |
Conditional logic |
if (condition) { ... } else { ... } |
if (x > 5) { alert('Greater'); } else { alert('Smaller'); } |
|
Switch Statements |
Conditional based on value |
switch(expression) { case value: ... } |
switch(day) { case 1: alert('Monday'); break; } |
|
For Loop |
Loop through a block of code |
for (let i=0; i<length; i++) { ... } |
for (let i=0; i<10; i++) { console.log(i); } |
|
While Loop |
Repeat a block of code as long as condition is true |
while (condition) { ... } |
while (x < 10) { x++; } |
|
Objects |
Storing data in key-value pairs |
let obj = {key: value}; |
`let car = {model: 'Toyota |
Comments
Post a Comment