Basic Html and HTML5

Term	Description
main	most content in the page. Contains the body. does not contain Header, footer, navigation.
a tags that go places in the page	set the href to "#elementid" to link them
target	target is an anchor tag attribute that specifies to open the link in a new tab.
dead links	replace the href with a #. This is useful when manipulating the link using Javascript
input elements	Input types: Text Required, just add required in plaintext no quotes to the tag
label elements	use a label when nesting radio elements (input type = radio) can add the for attribute to associate it with the id of a nested input tag. For is used by screen readers.
checked	just add checked inside a checkbox element to make it checked by default
DOCTYPE for HTML5	Looks like `<!DOCTYPE html>`

Basic CSS

Term	Description
CSS Classes	```.example-class{}``
backup fonts	`font-family: lobster, monospace` will cause the font to be monospace if lobster is not found
ID Selector	`#idbeingselected`
clockwise notation	`padding:toppx, rightpx, bottompx, leftpx`
type attribute selector	`[type='radio']`
class hierarchy	the order of the classes in the html tag is what deTermines which class has priority
Short hex Codes	only 4,000 possiblities. EX `FFF0000` can be shortened to `#F00`
RGB Values	`rgb(0,0,0)`
:Root Element	Used for declaring variables in css. its a pseudo class selector. This means that variables will be available globally if they are created in the root.
media Queries	`@media (max-width:350px){}` defines other variables to use for mobile devices

Variables

declaration: --IAMVARIABLE usage: background-color: var(--penguin-skin, fallbackvalue);

:root {
    --red-color: red;
  }

locally declared variables take precidence over root declared variables

Media Queries

Hierarchy of style declaraton

!important
inline style
id
class
2nd class listed

Basic CSS: Units

Applied Visual Design

Term	Description
hr Tag	Makes a horizontal line -- Useful!
rgba	like RGB, But the a is for opacity.
box-shadow	takes values for: offset-x, offset-y, blur-radius, spread-radius, color(in that order)
opacity	a useful tag
text-transform	takes args: uppercase, lowercase, capitalize, initial, inherit, none.
line-height	changes the height of each line in the paragraph
Offsets	DO NOT USE Offset-left, just say `left:10px;` and this will move it 10px to the right
position:fixed	wont move when the user scrolls
Float	Can float :left and right for a two column layout or Content::sidebar layout. Quite useful
linear-gradient	`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));` can also be a `repeating-linear-gradient`
set background as photo	simply use url(urlgoeshere)
scale	increases the size of the element by the factor specified, I imagine this would be used for animations
skew	another function of the transorm property. `transform:skewX(32deg)`
Before and After	::Before and ::After are pseudo elements used to add someTerm before or after the selected element. for them to work, a content property must be defined: `.heart::before {content: "";}`
Keyframes	@keyframes name {0%{red} 100%{blue}}
animation-fill-mode:	set this property to forwards to keep an item highlighted when hovering. If this is not set, it might be on a time interval and snap back to its original state after the interval is over
animation-iteration-count	the number of times for the animation to occur. Can be set to infinite
animation-timing=function	deTermines how the animation occurs, can ease in ease out, linear, ease

Applied Accessibility

Term	Description
audio Controls	expose hardware audio control to the browser by adding the attribute: controls to an audio tag.
Audio Embed	`<audio><source src="URLHERE" type="audio/mpeg">`
Figure tags	Used to show figures, like charts 'n Terms
figure caption tag
fieldset tag	a tag surounds a grouping of radio buttons which binds them together for screen readers
legend tag	a tag used to describe the contents of a fieldset radio button array
time tag	a tag used totell a screen reader that the enclosed text is a time takes a datetime attribute which takes the numeric time, as opposed to the one written in plain text in between the tag
sup tag	used to add a super script, common in the 'th' of dates
sr-only class	can make a css class that only shares content with the screen reader (will be hidden on the page). display non and visibility hidden hide content from all users, so you must just move the element very far from the viewport.
accesskey attribute	used for keyboard only users. This is what makes it possible to tab through a webpage.
tabindex attribute	indicates an element can be focused on. if 0 then it can be focused on by the user and is reachable by the keyboard. if set to 1, that element is brought to focus first.

CSS Flexbox and Grid

CSS Flexbox

Term	Description
Flex-basis	Specifies the original size of the item before it is adjusted by css
flex	Shorthand for the flex-grow, flex-shrink, flex-basis, DO not put commas between the attributes when listing them!
order	used to re-arrange elements in a flexbox
Align-self	accepts the same argument as align-items and will override any value set by the align-items property. this allows the adjustment of each items alignment individually as opposed to setting them all at once. This is a useful property because float, clear, and vertical align do not work on flex items

CSS Grid

Term	Description
Display:grid;	creates a grid
grid-template-columns	50px 50px would be a two column grid with columns 50 pixels wide. fr sets the unit to a fraction of the available space. auto sets it to the height of content automatically. % adjusts to the percent width of its container.
grid-template-rows	works the same way as columns.
grid-column-gap	sets the gap in the columns
grid-gap	shorthand for row and column gap. if given one value it sets both as the same, if given two, the first is row and 2nd is column
grid-column	example: `grid-column:1/3;` this creates an item which will use two columns. Think of the numbers as column lines. this item goes from column line 1 to column line 3.
grid-template-areas	groups cells together in an area and then gives them a name. sort of strange looking. Basically a long formatted string. `grid-template-areas: "header header header` usually assigned to a class called a container
grid-area:	places a element in whatever is defined in the grid template areas. can also take the `1/3` lines format as mentioned in the grid columns definition. THe placement is the same. example: `grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;`
: repeat function	`grid-tempalate-row:repeat(100, 50px)` creates a 100 row grid with row heights of 50px. repeat is a function that can be inserted in most places in the grid ecosystem its format is repeat(number of times, attribute)
minmax() function	defines a min, max which gives some scalability to the element
autofill	can be inserted into a repeat function like so: `repeat(auto-fill, minmax(20px, 1fr))`. it inserts as many rows or columns as possible given the desired size( the second argument in the repeat function)
auto-fit	instead of adding more elements, like auto fill, auto-fit will stretch items to fit the container. If all the items do not fit in one row it will move them down to a new one.