HTML5

Head tags (title, style, meta, link, script, base)

Formatting tags (physical vs. logical)

Headings

*Paragraph (br & hr)

Phrase tags

*Anchor tag (target)

*Image tag (alt)

*Lists (description list, ol: type & reversed)

*Tables (<caption> vs. <th>,<thead>, <tbody>, <tfoot> <colgroup><col></colgroup>)

Form tags (fieldset, legend; label; 9+10 input types)

#<input list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist> How to use datalist

Layout tags (header, nav, section, article, aside, footer, details, summary)

Html entities (&name or #nº;)

Iframes

Best Practices

1 – Use semantic elements instead of non-semantic

2–

3 – Don’t nest block-elements on inline-elements, but the opposite is true

CSS3

Selectors (type, universal, descendant, class, id, child, attribute; grouped)

Backgrounds (color, image, repeat, attachment, position; size)

Fonts (style, variant, weight, size, family; stretch, font-size-adjust)

Texts (direction, letter-spacing, word-spacing, text-indent, text-align, text-decoration, text-transform,
white-space, text-shadow, text-overflow, word-break, line-height)

Images (border, height, width, -moz-opacity mozilla ou filter:alpha(opacity=nº)IE ou opacity)

Links (a:link/visited/hover/active{color:})

Tables (border-collapse, border-spacing, caption-side, empty-cells, table-layout*)

Borders (border-width, border-color, border-style; can specify the side; border-image: source slice
round)

Margins & Paddings (-top, -right, -bottom, -left)

Lists (list-style-type/position/image, marker-offset*)

Cursor

Outline (outline-width/style/color)

Display ()

Dimensions of boxes/elements (height, width, line-height, *max-height, min-height, max/min-width)

Scrollbars (overflow: visible/hidden/scroll/auto)  if box content ain’t fit

Flexboxes (display, flex-direction, justify-content, align-items, flex-wrap, align-content, flex-flow, order,

align-self, flex)

*display: flex/inline-flex  the way the flex items’ll be shown, block or inline

*flex-direction: row-reverse/column or column-reverse  stacked horizontally or vertically

*justify-content:  aligns items, when they do not use all available space on the main-axis or container

#flex-start ou flex-end/center

#space-around (deixa um xpaço no fim) vs. space-between (n deixa)

*align-items: stretch*/center/flex-start ou flex-end onde os items ficam no eixo transversal

*align-self  para sobrepor o align-items do container, definida num item

*flex-wrap: wrap  para quebra d linha dos items, qdo sobrepõem os containers

*flex: nº px  definir o width de um item do container, pode levar 2 nºs o 1º, d proporção sem unidade

(shortcut for flex-grow, flex-shrink e flex-basis)

*flex-flow: flex-direction flex-wrap  shortcut for those props

*order: nº  aplicado num item, para qto maior, ele aparecerá no fim e o oposto é válido.
Background: linear/radial/repeat-gradient  for gradients

@font-face{font-family, src: url()}  add web fonts

media=””  for style or link tag, which devices’ll use these styles

max-width: %  for responsive images

font-size: vw  for responsive text-size

media queries

Build a responsive grid-view

*{border-sizing: border-box}

@media screen and (condition){

//whatever CSS u want

}  to write media queries

Screen >=720px  (min-wdth: 720px)

Screen <=480px

Orientation: portrait/landscape 

min-device-  to check devices size and not the browser’s

Logical sections:

General styling (body, p, h1-h6, ul n ol, tables, links, etc.)

Utility classes (for styles applying to many different elements: .nobullets)

Sitewide (all used along the site, basic page layout: header, nav, logo, etc.)
*Break down by context/page or component they’re used on

Tiny modifications are done with an extra class on the element

OOCSS (Object Oriented CSS)

 Separate your CSS into reusable objects, reusable anywhere you need on ur site.

BEM (Block Element Modifier)

 Block, a stand-alone entity (.btn). Element, item of the block (.btn__send). Modifier, flag
changing style or behavior (on a block or element)(example, .btn--orange)

Validation

HTML  pattern?

CSS 

:disabled  selects the elements with “disabled” attr

:invalid  with invalid values

:optional  with no “required” attr

:required / :valid

Display: grid

Grid-template-columns: 100px 40 px …;

grid-template-rows: 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;

grid-gap: 10px | 10px 50px;

justify-items  to align all items at once horizontally

align-items 
grid-template-areas:
"header header header"
"advert content content"
"advert footer footer";

.item1 {
grid-area: header;
}

grid-column: 1 / 3;
grid-row: 1 / 3;

justify-self property on a grid item. By default, this property has a value

of stretch, which will make the content fill the whole width of the cell.

start: aligns the content at the left of the cell,

center: aligns the content in the center of the cell,

end: aligns the content at the right of the cell.

align-self  to align the item vertically

Javascript

Async  in <script> to execute it non dependent of other present js files

Defer to execute it after the Html n CSS’re loaded

Events (form, select, focus, mouse, window)

Changes HTML: content, attributes, style

DOM
document  the document object, represents the HTML doc. Used to access all the page elements

document.anchors  returns all <a> els that’ve a name attr

baseURI  returns the absolute URI of the page

body / cookie / doctype / documentElement (the <html> el) / documentMode (the mode used by the
browser) / domain / forms / head / images (all the <img>) / implementation (the DOM
implementation) /

inputEncoding  the charset

lastModified  date the page was last updated

links  all <area> n <a> that’ve a href attr

readyState  the loading status the page’s

referrer (the referrer’s page URI) / scripts / strictErrorChecking / title / URL

HTML elements = objects with:

Properties (changeable values)

Changing HTML content

*innerHTML
*innerText

Changing the Value of an Attr

*attributeName  to change or access any HTML attribute

Changing Style

*style.propertyName  to change or access any CSS property

Adding Events Handlers

*eventName = theFunction

Navigating between nodes

*parentNode / firstChild / lastChild / nextSibling / previousSibling

*childNodes[index]  returns an array

*nodeValue  to get or set the text node of any other node

*nodeName  to get the name of a node (). Is read-only

*nodeType  to get the type of a node (element, attr, text, comment or doc)

Methods to access all HTML elements (actions)

Find Elements

*getElementById()

*getElementsByClassName() / getElementsByTagName()  return an array or null

*querySelectorAll(any css selector type)  return an array or null

*anyObjectCollection[“id or class or etc.”]  return an array or null (document.forms[“frm1”])

#anchors, body, documentElement, embeds, forms, head, images, links, scripts, title.

Change elements

*setAttribute(attr, val)

Adding and Deleting

*createElement()  to create a new HTML element in the page

*removeChild() / appendChild()

*replaceChild (new, old)

*write()  write into the HTML output stream

Adding/Removing Events Handlers

*addEventListener(event, function)  to add an event handler to an element

*removeEventListener(same parameters)

Creating new HTML elements (Nodes)

*createElement()

*createTextNode()

*appendChild() / removeChild()

*insertBefore(new,old) / replaceChild()

Events for all HTML elements (used with functions or any JS code)
*onload, onUnload  practically to check browser version n so load the proper site version, store
cookies when user enters or leaves the page

*onfocus, onblur, onchange  used for form field validation

*onsubmit  to validate all the form fields b4 submiting

*onmouseover, onmouseout  to create animated buttons

*.preventDefault()  stop default event behavior

BOM
window  the window object, represents the browser’s window

**HTML elements = objects with: **

Properties
Window Size

*innerHeight / innerWidth  to get the size of the browser’s window

*clientHeight or clientWidth  used with document properties, not window’s

*screen.width/height/availWidth or Height/colorDepth/pixelDepth  with/out window.

Window Location
*location.href/hostname/pathname/protocol  with/out window.

Window Navigator

*navigator.appName/appCodeName/platform  info about the navigator. With/out window.

*cookieEnabled  returns true if cookies’re enabled, no, false.

*product the engine name of the browser

*appVersion or userAgent  return the browser’s version

*language  browser’s lang

Methods
*open() / close() / moveTo() / resizeTo()

Window Location

*location.assign(newURL)  loads a new doc. With/out window.

Window History

*history.back() / history.forward()

Window Navigator

*javaEnabled() returns true if Java is enabled, no, false.

Window Popup Alerts

*alert()

*confirm()  returns true if OK clicked, false if Cancel

*prompt(msg, anyDefaultText)  for user input, returns the input or null

Events for all HTML elements (used with any JS code)

*onload, onUnload  practically to check browser version n so load the proper site version, store
cookies when user enters or leaves the page

Timing events

*setTimeout(function, milliseconds)  waits for that milliseconds, then runs the function once With/out
window.

*setInterval()  same, but repeats the process continuously

*clearTimeout(timeoutVar) ou clearInterval()  to stop the setTimeout or setInterval execution.

Cookie
*to remember info about the user. Deleted when browser’s closed

Set and Change cookies

*document.cookie = “name=value;name2=value2”

Read cookies

let k = document.cookie  returns the cookie as a string

*path=/  the cookie belongs to which page? By default, the current page
*expires=Thu, 18 Dec 2013 12:00:00 UTC  to set expiry date

Delete a cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";  set expires to a past date