Zach Tong
HTML
- <head></head> metadata, <body></body> content
- <h1-6></h1-6> headers
- <p></p> default styling: margins, new line (block)
- <b>, <i>, <u>, <sup>, <sub>
- <br>, <hr> line break, horizontal line
- <div></div> default styling: no margins, new line (block)
- <ul></ul>, <ol></ol> for lists; <li></li> within for list items, or ul/ol again for nested list
- within <details> will be within drop-down menu; menu title within <summary> within <details>
- table
- Link: <a href="page.html">link text</a>
- href="folder/page.html"
- linked image or other element via <img> within <a> tags
- pdf files
- Image: <img src="image.png">
- Video:
- Youtube: <iframe src="https://www.youtube.com/embed/lc1FHZtsDVc">, </iframe> **Replace "embed" in link**
- <video controls> <source src="video.mp4" type="video/mp4"> </video>
- Favicon: <link rel="icon" href="favicon.png">
- CSS: <link rel="stylesheet" href="style.css"> in a separate file, or within <style></style> tags, or style="property:value;property:value;" attribute
- JS: within <script></script> tags, or <script src="main.js"></script> in a separate file
- Attributes:
- class="class1 class2" many elements per class, CSS: .class1, JS: var var1 = document.querySelector(".class1");
- id="id1 id2" only one element per id, CSS: #id1, JS: var var1 = document.querySelector("#qcounter");
- height, width
- href=""
- Events:
- onclick="function1()", good with <button>
- onmouseover, onmouseout, onsubmit (for forms)
- <input></input>, (attribute) type=""
- checkbox
checked is an attribute.
var input1 = document.querySelector(".input1");
if (input1.checked == true) {}
- text
var input1 = document.querySelector(".input1");
var answer1 = document.querySelector(".answer1");
if (input1.value==answer1.textContent) {}
CSS
- color, font-size, font-family, background-color, text-align
- display:
- block: new line
- inline: same line, after previous element
- inline-block: same line, after previous element
- grid:
- none: invisible & size=0
- margin: margin-left, etc
- padding:
- position:
- static: default document flow
- relative: element removed from document flow, static position reserved; adjust position relative to static position using right/left/top/bottom
- absolute: element removed from document flow, static position removed; adjust position relative to parent position using right/left/top/bottom. (parent cannot be statically positioned)
JS
- Declaring variables (scope)
- Define/Call Function
function function1() {}
function1();
- setTimeOut(function1, 1000); wait 1000 ms, then call function
- setInterval(function1, 1000); call function repeatedly every 1000 ms
- Add/Remove/Replace Class:
var var1 = document.querySelector(".class1");
var1.classList.add("class1");
- Check Class
var var1 = document.querySelector(".class1");
if (var1.classList.contains("class2")==true) {}
- Check if Key is Pressed:
document.addEventListener('keydown', function1);
function function1() {
if (event.key === 'Enter') {}
}
- For Loop: for (let i = 0; i <= 5; i++) {}
- Randomize Array: array1.sort(() => Math.random() - 0.5);
- Play Audio:
var audio1 = new Audio("audio1.mp3");
audio1.play();
Git
-
$ git add -A
$ git commit -m "commit message"
$ git push -u origin main
