HTML Cheat Sheet

HTML starter template:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

Different types of Input:
<input type="text"> <input type="password"> <input type="submit"> <input type="reset"> <input type="radio"> <input type="checkbox"> <input type="button"> <input type="file"> <input type="image"> <input type="color"> <input type="datetime-local"> <input type="email"> <input type="month"> <input type="number"> <input type="url"> <input type="week"> <input type="search"> <input type="tel"> <input type="range">

All meta tags
<head> <meta charset="UTF-8"> <meta name="description" content="This is html cheat sheet"> <meta name="keywords" content="HTML, cheatsheet, codes"> <meta name="author" content="Sagar Sharma"> <meta http-equiv = "refresh" content = "5"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

Sample Paragraph Text
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Est dolor beatae perfer endis expedita accusamus dolorem, rem explicabo aliquam magnam inventore dignissimos harum repellendus voluptates vero quibusdam quas laborum accusantium facilis! Sit labore animi quisquam quod, accusantium ut repudiand ae omnis aspernatur voluptates ducimus, quos, dolorum distinctio beatae explica. Rerum, sint aspernatur fuga est, itaque nulla, dolorem iure fugiat maiores dolor a Quaerat, ab! Deleniti, iure molestiae aliquam eveniet doloribus officia ipsum acc usantium possimus dolor, voluptatem ipsam? Voluptas vero quasi iste nihil. Aliquam pariatur fugit ad nihil iste placeat libero, quibusdam atque? inctio consequatur ad veniam fugiat quos unde ratione velit, expedita dolorum quaerat atque tenetur iure molestias temporibus cupiditate sequi harum itaque officia, omnis officiis m </p>

HTML colors hex codes:
https://sagar-sharma-7.github.io/Color-Palette/
Click Here

CSS Cheat Sheet

Linking CSS file in HTMLfile
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> </body> </html>

Starting with CSS
*{ margin: 0; padding: 0; box-sizing: border-box; }

Getting everything in center and middle
div{ display: flex; justify-content: center; align-items: center; }

Anchor Pseudo-classes
/* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ a:hover { color: #FF00FF; } /* selected link */ a:active { color: #0000FF; }

Custom Scrollbar
/* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #000; } /* Handle */ ::-webkit-scrollbar-thumb { background: #fff; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } /* Up and Down Button*/ ::-webkit-scrollbar-button{ background-color: #000; }

Placeholder Color
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: red; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; } ::-ms-input-placeholder { /* Microsoft Edge */ color: red; }

Text Selection Color
::-moz-selection { /* Code for Firefox */ color: red; background: yellow; } ::selection { color: red; background: yellow; }

Change Bullet Color
ul { list-style: none; /* Remove default bullets */ } ul li::before { content: "\2022"; /* Content: \2022 is the CSS Code/unicode for a bullet */ color: red; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ }

Media Query
/* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { }

Keyframes
@keyframes anmation { 0% { } 25% { } 50% { } 75% { } 100% { } }

Bootstrap Cheat Sheet

Bootstrap starter template
<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1>   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>   </body> </html>

Alerts
<div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success" role="alert"> A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-danger" role="alert"> A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-warning" role="alert"> A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-info" role="alert"> A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-light" role="alert"> A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-dark" role="alert"> A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>

Additional content in alert
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p> Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. </p> <hr> <p class="mb-0"> Whenever you need to, be sure to use margin utilities to keep things nice and tidy. </p> </div>

Dismissing alert
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>

Buttons
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>

Outline buttons
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>

Changing size of button
<button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-secondary btn-lg">Large button</button> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-secondary btn-sm">Small button</button>

Block button
<button type="button" class="btn btn-primary btn-block"> Block button </button> <button type="button" class="btn btn-secondary btn-lg btn-block"> Block button </button>

Button group
<div class="btn-group"> <a href="#" class="btn btn-primary active" aria-current="page">Active link</a> <a href="#" class="btn btn-primary">Link</a> <a href="#" class="btn btn-primary">Link</a> </div>

Checkbox button group
<div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked> <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label> <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off"> <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label> <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off"> <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label> </div>

Radio button group
<div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked> <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label> <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off"> <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label> <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off"> <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label> </div>

Button toolbar
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group me-2" role="group" aria-label="First group"> <button type="button" class="btn btn-primary">1</button> <button type="button" class="btn btn-primary">2</button> <button type="button" class="btn btn-primary">3</button> <button type="button" class="btn btn-primary">4</button> </div> <div class="btn-group me-2" role="group" aria-label="Second group"> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">7</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-info">8</button> </div> </div>

Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </div> </div> </div> </nav>

Navbar with search and drop down
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav>

Progress bar
<div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> </div> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

Multiple bars
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>

Striped bars
<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

Animated striped bar
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div>

JavaScript Cheat Sheet

Array of months
let monthsList= [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; let monthsList = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];

Array of days
let daysList = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ]; let daysList = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];

Time
const date = new Date(); let hours = date.getHours(); let min = date.getMinutes(); let sec = date.getSeconds(); let millisec = date.getMilliseconds();

Live time
setInterval(() => { const date = new Date(); let hours = date.getHours(); let min = date.getMinutes(); let sec = date.getSeconds(); let millisec = date.getMilliseconds(); }, 1000);

if else and else if statement
if (condition) { } else if (condition) { } else if (condition) { } else if (condition) { } else if (condition) { } else { }

Switch statement format
let variable; switch (key) { case value: variable = ; break; case value: variable = ; break; case value: variable = ; break; case value: variable = ; break; case value: variable = ; break; }

Day with switch statement
let day; switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; } document.getElementById("demo").innerHTML = "Today is " + day;

Months with switch statement
let month; switch (new Date().getMonth()) { case 0: month = "January"; break; case 1: month = "February"; break; case 2: month = "March"; break; case 3: month = "April"; break; case 4: month = "May"; break; case 5: month = "June"; break; case 6: month = "July"; break; case 7: month = "August"; break; case 8: month = "September"; break; case 9: month = "October"; break; case 10: month = "November"; break; case 11: month = "December"; }

jQuery Cheat Sheet

jQuery CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

jQuery syntax
$(document).ready(function(){ // jQuery methods go here... }); /* The jQuery team has also created an even shorter method for the document ready event:*/ $(function(){ // jQuery methods go here... });

Node.js Cheat Sheet

Modules
const http = require("http"); const fs = require("fs"); const path = require("path"); const os = require("os"); const url = require("url");

Creating http server
const http = require("http"); const port = 8000; const server = http.createServer((req, res) => { // res.writeHead(200, {"Content-type": "text/html"}) res.write("Hello World"); res.end(); }); server.listen(port, "127.0.0.1", () => { console.log("server is live now!!!"); });

Streaming
const http = require("http"); const fs = require("fs"); const port = 8000; const server = http.createServer(); server.on("request", (req, res) => { const fileName = fs.ReadStream(''); fileName.on("data", (chunkData) => { res.write(chunkData); }); fileName.on("end", () => { res.end(); }); fileName.on("error", (err) => { console.log(err); res.end("file not found"); }); }); server.listen(port, "127.0.0.1", () => { console.log("Server is live now!!!"); })

Express.js Cheat Sheet

Creating http server
const express = require("express"); const app = express(); const port = 8000; app.get("/", (req, res) => { res.send("Hello Express") }); app.listen(port, () => { console.log("Server is live now!!!"); });

Template Engine for Dynamic Data
// First install hbs engine using npm in your package.json file const express = require("express"); const app = express(); const port = 8000; // remember that the root dir should be views app.set('view engine', 'hbs'); app.get("/", (req, res) => { res.render('index'); // hbs file name }); app.listen(port , () => { console.log("Server is live now!!!"); });

Changing root file in template engine
// First install hbs engine using npm in your package.json file const express = require("express"); const path = require("path"); const app = express(); const port = 8000; const folderPath = path.join(__dirname , ''); app.set('view engine', 'hbs'); app.set('views', folderPath); app.get("/", (req, res) => { res.render('index'); // hbs file name }); app.listen(port , () => { console.log("Server is live now!!!"); });

Express Middleware for http servers
const express = require("express") const app = express(); const path = require("path"); const port = 8000; const filePath = path.join(__dirname, "./public"); app.use(express.static(filePath)); app.listen(port, () => { console.log("Server is live now!!!"); });

Mongoose Cheat Sheet

Connecting MongoDB with Node.js
const mongoose = require("mongoose"); mongoose.connect("mongodb://localhost:27017/database-name", { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log("Connected to database successfully!")) .catch((err) => console.log(err));