<p> - Paragraph tag. Tells HTML where a paragraph is.
<a> - Link tag. Use "href" to tell HTML where the link goes.
<b> - Bold tag. Makes text bold.
<i> - Italicise tag. Makes text slanted.
<u> - Underline tag. Underlines text.
<h1-6> - Header tag. It's bold text going from least(big)-greatest(small).
<hr> - Inserts a line. DOESN'T need a closing tag.
<br> - Line break. DOESN'T need a closing tag.
<img> - Uses "src" to get the image. DOESN'T need a closing tag.
Use the alt="" attribute to add a description.
<ul> - Defines an unordered list (bullet points) (can be nested)
<ol> - Defines an ordered list (numbered) (can be nested)
<li> - Defines a list item in a list
<table> - Container for all table data. border= attribute adds border
<tr> - Container for a single row. border attribute works here.
<th> - Single table header element
<td> - Single table data element
style - The style attribute. Use this for style! Size, color.
<style> - The style tag. CSS goes in between these.
class - The class attribute will "group" an element to make CSS easier.
Class names can't have spaces, or a number as the first character.
id - The ID attribute is like class, but more specific. ONE ID PER TAG.
ID names can't have spaces, or a number as the first character.
<meta> - This tag will add a short description to your site with the
name="description" and the content="" attributes.
<iframe> - This tag lets you add another HTML site to yours using the
src attribute.
<link> - This tag allows you to link a whole bunch of stuff, like CSS files
and favicons! rel="" allows you to define what it is (stylesheet, icon), type="" tells
HTML what it is (text/css, image/x-icon), and finally, href="" lets you tell HTML where it
is.
<div> - This tag allows you to separate block content on your page. It's like
a p tag, without making the contents a paragraph, allowing you to add whatever style you like!
<span> - This tag is like div, but it doesn't create line breaks, which means
you can put inline style!
<button> - This tag creates a button, which the user can click. When paired with
javascript, buttons can be a helpful part in making your website interactive.
<script> - This tag allows you to add javascript to HTML sites. You can either code
in between the tags, or use src to link a .js file to your site.
<Semantic Tags> - These tags can include header, main, footer, etc. They are to
separate content for web browsers, and they can format the page in certain ways.
onclick="function();" - Use this in a tag (usually button) to execute the function within
the quotes when the element is clicked.
<form> - When used with the onsubmit attribute, and input tags, and Javascript, data from
the user can be collected and used.
<input> - When used with the type and name attributes, the form tag can actually collect data.
<label> - Typically used before an input tag. Using the 'for' attribute (which should contain the
name of the input tag the label is 'for') allows you to tell the user what an input tag is for.
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
<style> put css here </style>
<script> put js here </script>
</head>
<body>
<!--Inside the body tag is where you put all the cool stuff
you want on your page!-->
</body>
</html>
In some cases, you can use the raw symbols instead of
the shortcuts. Like, "", - and & were typed without
the shortcut just now. But, when they interfere
with code, like how < > do, they need the
shortcut. For example, let's say I want to show
the br tag. If I typed the < > without the
shortcuts, HTML would think it's real code. We don't
want that, so we use the shortcuts: <br>
CSS rules are easy. However they were written in the style= attribute,
that's how you do it in pure CSS. Here's an example rule:
selector {
color:red;
}
Now, just replace h1 with any HTML element, and it will apply to that
element. Same goes for the actual properties. Background color, text align,
and all of the others that were learned. Maybe one day I'll put 'em here.
TAGS (Least Specific): Selector looks like: h1
CLASS (Middle specific): Selector looks like: .class OR tag.class
ID (Most specific): Selector looks like: #ID
The Cascade of CSS introduces a new rule: !important. This rule will override
every single selector. Also, if both rules have the same specific-ness,
the later rule will be applied.
The cascade's order is Importance > Specificity > Order.
We can use combinators to combine CSS elements.
A space is a descendant selector, which is everything inside an element.
> is a child selector, which is everything one level in an element.
+ is a next sibling selector, which will select ONLY the next element in the same parent.
:hover :link :visited and :active are all pseudo-classes. These classes can select an element
when it is in a certain state. For example, hover will only apply the style if the element is
being hovered over by the cursor. To use them: selector:pseudo-class
Pseudo elements can also be used. These are before, after, first-letter, first-line, and selection.
The way you use them is element::pseudo. NOTICE THE TWO COLONS. Before/after use the content: "";
attribute to add content to put before or after an element. First-letter/line will style the first
letter or line. Selection will style the content that the user selects.
The visibility attribute can change if an element is visible or not. It will still take up space,
though. The display attribute can change if an element is shown or not, so it will not take up space
if it's not, unlike visibility. Opacity works in a similar way, taking a value from 0-1.
The CSS grid layout, which can be achieved with display:grid; and the grid-template-columns: attributes,
allows you to have a grid on your website.
console.log(); - This command will print something to the console for the programmer to see,
to make debugging easier.
prompt(); - This command will send the user a prompt dialog from their browser.
alert(); - This command will send the user an alert dialog from their browser.
document. (); - This command allows you to access the contents of an HTML element
by putting said element between the . and the (. The problem is, it cannot access elements
like p, div, or h. So, we can use the next two commands to do so.
document.getElementByID(); - This command will allow you alter an element by ID, so you
can alter the website itself.
document.getElementsByTagName(); - This command is like the above, but it targets a much
broader scope of elements. It will return a list of all elements, which is annoying, so we can
index it by using the command and storing it into a var. Then, we can use console.log(); followed
by [#], with # being the index of the tag we want to access.
document.innerHTML = "" - This allows you to change the innards of an HTML
element, & is usually used with .getElementByID or .getElementsByName
document.createElement(); - This function creates new elements on your page.
document.node.appendChild(); - This function will add the element within the () as the
last child of the given node (like body, or head)
document.node.insertBefore(newelement, existingelement); - This function will add the
new element before the existing element.
.firstElementChild(); - This function returns the first child of an element.
.lastElementChild(); - This function returns the last child of an element.
.parentElement(); - This function returns the parent of an element.
.children(); - This returns a list of all children of an element.
.setAttribute(att, value) - This will set the attribute's value.
.hasAttribute(); - This checks if an element has the attribute within the parenthesis.
.removeAttribute(); - This will remove the attribute within the parenthesis.
.getAttribute(); - This will return the value of said attribute.
.attributes - This will return a list of all attributes.
element.addEventListener('event', function) - This allows you to add an event to any element.
this keyword - It will reference the tag that caused an event to occur.
localStorage keyword - Using this keyword allows you to access local storage using a key/data system,
like this: localStorage.setItem("key", "value"); To get the value back, localStorage.getItem("key"); or
localStorage.key will return the value. If there is no value, getItem() returns null and .key returns undefined.
events: keydown & keyup - These events will be triggered when the keyboard is pressed down or up
respectively. Using .key will return the character of the pressed key, and using .code will return the
actual key pressed.
JSON.stringify(); - This function will stringify a data structure (like a list) to be stored in localStorage.
JSON.parse(); - This will un-stringify data.
event.preventDefault(); - Prevents a form submission from refresing the page.
window.location.href = "" - Sends the user to another page.
Objects - Similar to a Python dictionary, not a Java object. Uses {}, and stores key/value pairs. Can be indexed
using [] too, and .value will get just the value of an index without the key.
$(selector).on("event", function) - Adds an event listener.
$(selector).click(function) - Adds a click event. Also works with other events.
$(selector).append(new-element) - Appends a new element to the selected element.
$(selector).each(function(){}) - Iterates through a group of selected elements (e.g. 'p'). each also has
index and el parameters; index being the number of element, and el being the element itself (function(index, el))
$(selector).animate({"css-attr": value}, "fast OR slow") - Changes CSS property either quickly or slowly.
$(selector).hide("fast OR slow") - Hides an element at the chosen speed.
$(selector).show("fast OR slow") - Shows an element at the chosen speed.
$(selector).toggle("fast OR slow") - Toggles between hiding and showing.
$('form').serializeArray() - Turns a form's data into an object.
$(selector).html(" ") - Similar to .innerHTML, this sets the inner html of a selected element.
firebase.initialize() - Create a new node in Firebase. Takes an object as a parameter.
firebase.database().ref() - Retrieves the current data node from Firebase. It's typically stored in a
variable, since it needs to be referenced a lot. You can also argue a key in the 'ref' function to create a child
node for even more data to be stored (.ref("newKey")) using .set()! Even better, you can use a slash to go further
in the filesystem ("newKey/newKeyValue").
firebase.database().ref().set() - Sets the value of the current data node in Firebase.
firebase.database().ref().on('value', function(data)) - Retrieves the value of the current
data node in Firebase.
.container - This class needs to be put into the entire content of the site. It puts the site
into a container that will be adjusted every few viewport changing intervals.
.container-fluid - Same idea as above, but the container is as wide as the viewport, and it always
adjusts.
.text-start - This class puts the text at the right of the page.
.text-center - This class puts the text in the middle of the page.
.text-end - This class puts the text at the end of the page.
.row - This specifies grid rows, though it doesn't really 'need' to be used if items use .col attributes.
.col-# - This class will put said columns side-by-side on extra small devices (phones) and above.
.col-sm-# - This class will put # columns side-by-side on small devices (tablets) and above.
.col-md-# - This class will put # columns side-by-side on medium devices (laptops) and above.
.col-lg-# - This class will put # columns side-by-side on large devices (desktops) only.
.btn - This class indicates to Bootstrap that an a or button tag is a button.
.btn-group (-vertical) - This class will group buttons together, vertically too!
.table - - Adds basic table style to the table tag
.table-striped - Stripes every other row
.table-bordered - Adds borders between cells
.table-hover - Darkens a row that's being hovered over
.table-responsive - Adds a horizontal scrollbar on XS devices
.img-thumbnail - When used in an image that's inside of an 'a' tag, will turn the link into
a thumbnailed link.