CSS
Link Stylesheet |
<link href="xxx.css" rel="stylesheet" /> |
Font |
font-family: Arial, Verdana, sans-serif; |
Text Decoration |
text-decoration: type (none, underline, overline, line-through) |
Text Transform |
text-transform: type (capitalize, uppercase, lowercase, none) |
Font Variant |
font-variant : type (normal, small-caps) |
CSS
Media Query (Max) |
@media screen and (max-width: 480px) { ... } |
Media Query (Min) |
@media screen and (min-width: 769px) { ... } |
Transformations (2D) |
transform: rotate(30deg) scale(1.2); |
Transitions |
transition: color 1.5s ease-in 0.5s, font-size 2s ease, letter-spacing 2s ease-out, text-shadow 2s cubic-bezier(0.6, 0, 0.8, 0.5); |
Keyframe |
@keyframes spin { 0% {top: 0;} 100% {top: 100px;} } |
Applying Animation |
video { animation: spin 4s linear infinite; } |
Control Animation (checked) |
input#rotateVideo:checked ~ video { animation-play-state: running; } |
Control Animation (not checked) |
input#rotateVideo:not(:checked) ~ video { animation-play-state: paused; } |
HTML1
Linking Files |
<link href="style.css" rel="stylesheet" /> / <script src="script.js" defer></script> |
Links (Email/Phone) |
<a href="mailto:user@mail.com">Email</a> / <a href="tel:+15551234567">Call</a> |
Ordered/Unordered Lists |
<ol><li>item</li></ol> / <ul><li>item</li></ul> |
Definition List |
<dl><dt>Term</dt><dd>Definition</dd></dl> |
Text (Importance/Emphasis) |
<strong>Important</strong> / <em>Emphasized</em> |
Text (Citation/Quote) |
<cite>Title</cite> / <q>Quote</q> |
|
|
HTML2
Table Creation |
<table><tr><th>Header</th><td>Data</td></tr></table> |
Row/Column Span |
<td rowspan="2" colspan="3">Merged Cell</td> |
Table Groups |
<thead>...</thead> / <tbody>...</tbody> / <tfoot>...</tfoot> |
Table Caption |
<caption>All Times Central</caption> |
Multimedia |
<audio controls> <source src="cp_overture.mp3" type="audio/mp3" /> <source src="cp_overture.ogg" type="audio/ogg" /> <p><em>To play this audio clip, your browser needs to support HTML5</em></p> </audio> |
HTML3 (form + input)
Form |
<form action="submit.php" method="post">...</form> |
Input (Text/Email/Tel) |
<input type="text" name="name" placeholder="hint" /> / <input type="email" /> / <input type="tel" /> I |
Input (Number/Range) |
<input type="number" min="0" max="10" step="1" /> / <input type="range" /> |
Input (Radio/Checkbox) |
<input type="radio" name="choice" value="A" checked /> / <input type="checkbox" name="option" /> |
Label + Input |
<label for="visit">Date of visit</label><input name="visitDate" id="visit" type="date" /> |
Field Set |
<fieldset id="custInfo">...</fieldset> |
JavaScript
Strict Mode |
"use strict"; |
Variable Declaration |
var count = 0; / const MAX_VAL = 100; |
Functions |
function calculate(val) { return val * 2; } |
|
|
JavaScript
Date Accessors |
now.toLocaleDateString() / now.toLocaleTimeString() |
Date Setters |
dateObj.setFullYear(2025); |
Math (Floor/Power) |
Math.floor(3.9); / Math.pow(2, 3); (2 to the power of 3) |
Math (Random) |
Math.random(); |
Timed Execution |
setTimeout("updateStatus()", 2000); |
Timed Interval |
setInterval("runClock()", 1000); |
Loop (For Structure) |
for (var i = 0; i < 10; i++) { commands } |
Date Methods |
getMinutes / getHours / getDate / getDay |
Handling Illegal Operations |
isNaN / isFinite |
Sorting an Array |
function ascending(a,b) { return a-b; } |
Finding and Extracting Characters and Substrings |
charAt / charCodeAt / indexOf / subString / replace |
JavaScript - DOM
Javascript HTML DOM Events |
<h2 onclick="changeText(this)">Click to change the text</h2> |
Javascript HTML DOM Events |
<h2 onclick="this.style.color='red'">Click to change the color</h2> |
DOM Write (HTML) |
element.innerHTML = "<strong>New Text</strong>"; |
DOM Write (Text) |
element.textContent = "Plain Text"; |
JavaScript - Event
Onload |
<body onload="welcomeMsgFun()"> |
Onmouseover& Onmouseout |
<h2 id="demo4" onmouseover="function1()" onmouseout="function2()">Click this text</h2> |
EventListener |
document.getElementById("btn").addEventListener("click", displayDate); |
JavaScript - Prompt & Confirm
Prompt |
function func() { var person = prompt("Enter your name"); if (person != null) { document.getElemntById("demo2").textContent = "Hello " + person; } } |
Confirm |
function funcConfirm() { var text = "Press a button either OK or Cancel"; if (confirm(text) === true) { text = "You pressed OK!"; } else { text = "You Cancled!"; } } |
|
Created By
Metadata
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by sally sung