Resource Links
WARNING: There are no links back to this page! Use your browser's back button. 😊
Module 1 Mini-Project Module 2 Mini-Project Module 3 Mini-ProjectHTML
<!DOCTYPE html>is used to open the document before the<html>tag to declare the document as an HTML document.- The
<head>element contains information about the webpage. - The
<meta>element is used for multiple items (such ascharset,content&viewport) to help with SEO (Search Engine Optimization). - The
<body>element represents the visible content shown to the user. - Other HTML elements (such as
<header>,<main>,<section>&<footer>) are used to structure specific items on the webpage. Semantic HTML is important! - The
<h1>tag should only be used once per page, and then numerically in order of importance (<h2>,<h3>, etc).
CSS
*is used to apply a style to all elements..is used to apply to a class.#is used to apply to an id.- A margin indicates how much space we want around the outside of an element.
- A padding indicates how much space we want around the content inside an element.
- Image for reference.
- Pseudo-Classes are notated with a
:following the HTML element, class or ID. E.g.:a:hover - Pseudo-Elements are notated with a
::and add an element to a webpage through CSS. - CSS variables are declared with
--and are usually found in the:rootelement.
E.g.:--main-background-color - Media Queries (
@media) in CSS are used for specific device rules. There are media types (screen,print, etc...) and media features. Media queries can also utilize logic operators such asandandor. - A designer or company's base-level custom CSS template is also known as
reset.css. - Since design varies so much across browsers, there is also a tool called
normalize.css.
Git
git clone [url]creates a new git initialized folder with all of a repository's files.git initinitializes a folder as a git repo. We then usegit remote add [alias] [url]to link the repo to an online database.git statuschecks what branch we are currently on and if there are discrepancies.touch [file-name]creates a file, extension must be included.git branch -alists all branches,git branchlists only local branches.git branch [branch-name]creates a new branch.git checkout -b [branch-name]creates a new branch and switches to it.git add -AUsed when we want to commit all files in the working branch, before the commit command.git add .Used to add only the files in the current directory.git commit -m "[comment]"commits to the repository, with-m "comment"adding a comment to the commit.
JavaScript
- A variable is a named container that allows us to store data in our code.
- Variables that should not change use the
constdeclaration. - Variables that can or should change use the
letdeclaration. - Control flow is the order in which a computer executes code in a script.
- The JavaScript can be linked in the
<head>element, in-line, or before the closing<body>tag depending on its usage. - Function declarations are hoisted up automatically and can be used globally.
E.g.:function myFunction() {}; - Function expressions utilize storing a function in a variable. These are not hoisted.
E.g.:const expressedFunction = function() {}; - Similar to a function expression, there is the Arrow function. These are usually meant for a single expression, allowing the omit of
return.
E.g.:const arrowFunction = (x, y) => x + y; - Objects are a collection of key-value pairs. They are created with
{}and can be accessed withobject.keyorobject["key"]. - Arrays are a collection of items. They are created with
[]and can be accessed witharray[index]. - Loops are used to repeat a block of code. The
forloop is the most common, but there are alsowhileanddo...whileloops. - Event listeners are used to listen for events on a webpage. They are added to an element with
element.addEventListener("event", function). - The event object is passed to the event listener function as a parameter. This object contains information about the event that occurred.
- The
thiskeyword refers to the object that the function is a method of. Similar toevent. - for...in and for...each loops are used to iterate over objects and arrays, respectively.