HTML Basics

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Introduction to HTML</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>Begin exploring Hyper Text Markup Language...</p>
  </body>
</html>

HTML Tags

HTML Structure Tags

Tag Description
<!DOCTYPE html> Defines the document type
<html> Root element of an HTML page
<head> Container for metadata
<body> Container for visible content
<main> Container for
<section> Container for sections
<div> Generic container
<span> Inline container
<table> Container for table content
<tr> Table row
<th> Table header cell
<td> Table data cell
<ul> Unordered list
<li> List item
<h1> Heading 1
<p> Paragraph
<br> Line break
<blockquote> Block of quoted text
<cite> Citation
<code> Inline code

HTML Tags for Text

<strong> Bold text
<em> Italic text
<small> Small text
<mark> Highlighted text
<del> Deleted text
<ins> Inserted text

HTML Reference Tags

<a href="url"> Link
<img src="url" alt="description"> Image
<button> Button
<form> Form container

HTML inputs

<input type="text"> Text input
<input type="email"> Email input
<input type="password"> Password input
<input type="number"> Number input
<input type="date"> Date input
<input type="color"> Color input
<input type="file"> File input
<input type="range"> Range input
<input type="submit"> Submit button
<input type="reset"> Reset button

HTML Entities (&)

nbsp; Non-breaking space
amp; HTML entity for &
lt; HTML entity for <
gt; HTML entity for >
quot; HTML entity for "
#39; HTML entity for '
copy; HTML entity for ©
reg; HTML entity for ®
trade; HTML entity for ™

CSS Basics

CSS Selectors

Selector Property
. Select class
# Select ID
* Select all elements
element Select specific element
element, element Select multiple elements
element element Select child elements

CSS Properties

Property Description
background-color Sets background color
font-family Sets font family
font-size Sets font size
text-align Aligns text
border Adds border to element
padding Adds padding to element
margin Adds margin to element
display Sets display type
position Sets position type
flex Sets flex properties
grid Sets grid properties

CSS Events

Event Syntax
onclick element.onclick = function() {}
onmouseover element.onmouseover = function() {}
onmouseout element.onmouseout = function() {}
onchange element.onchange = function() {}
onfocus element.onfocus = function() {}
onblur element.onblur = function() {}
onsubmit element.onsubmit = function() {}
onload window.onload = function() {}
onresize window.onresize = function() {}
onscroll window.onscroll = function() {}

Javascript Basics

Javascript Operators

Description Operator Example
Addition + const sum = a + b;
Subtraction - const difference = a - b;
Multiplication * const product = a * b;
Division / const quotient = a / b;
Modulus % const remainder = a % b;
Exponentiation ** const power = a ** b;
Increment ++ a++;
Decrement -- a--;
Greater Than > a > b;
Less Than < a < b;
Assignment = a = b;
Comparison == a == b;
Strict Comparison === a === b;
Not Equal != a != b;
Greater Than or Equal >= a >= b;
Less Than or Equal <= a <= b;
Logical AND && a && b;
Logical OR || a || b;
Logical NOT ! !a;

Javascript Functions

String Concatenation const fullName = firstName + " " + lastName;
Array Length const length = array.length;
Array Indexing const firstElement = array[0];
Object Property Access const value = object.property;
Function Declaration function myFunction() {}
Function Call myFunction();
Array Iteration array.forEach(item => { });
Object Iteration for (const key in object) { }
JSON Parsing const obj = JSON.parse(jsonString);
JSON Stringify const jsonString = JSON.stringify(object);
Template Literals const message = `Hello, ${name}!`;
Arrow Functions const add = (a, b) => a + b;
Spread Operator const newArray = [...array];
Destructuring Assignment const { property } = object;
Default Parameters function myFunction(param = defaultValue) {}
Promises const promise = new Promise((resolve, reject) => { });
Async/Await async function myFunction() { await promise; }
Event Handling element.addEventListener("click", function() {});
Local Storage localStorage.setItem("key", "value");
Session Storage sessionStorage.setItem("key", "value");
Fetch API fetch("url").then(response => response.json());
XMLHttpRequest const xhr = new XMLHttpRequest();
DOM Manipulation document.getElementById("id").innerHTML = "Text";
CSS Manipulation document.querySelector(".class").style.color = "red";
JSON Parsing const obj = JSON.parse(jsonString);
JSON Stringify const jsonString = JSON.stringify(object);
Template Literals const message = `Hello, ${name}!`;
Arrow Functions const add = (a, b) => a + b;

Javascript Iteration

for loop for (let i = 0; i < 10; i++) {}
while loop while (condition) {}
do while loop do {} while (condition);
forEach array.forEach(item => {});
map const newArray = array.map(item => item * 2);
filter const filteredArray = array.filter(item => item > 5);
reduce const sum = array.reduce((acc, item) => acc + item, 0);
some const hasEven = array.some(item => item % 2 === 0);
every const allEven = array.every(item => item % 2 === 0);
find const foundItem = array.find(item => item > 5);
findIndex const index = array.findIndex(item => item > 5);

Javascript Shorthand

If else statements can be written in shorthand. For example:

Can be written as:

Javascript with HTML

Changing HTML or CSS content with Javascript code

UX/UI Basics

User Experience

User Interface

Design Principles