css:
/* Applies to {{c1::all four sides}} */
padding: 1em;
/* Applies to {{c1::vertical, horizontal}} */
padding: 5% 10%;
/* Applies to {{c1::top, horizontal, bottom}} */
padding: 1em 2em 2em;
/* Applies to {{c1::top, right, bottom, left}} */
padding: 5px 1em 0 2em;css: An element’s {{c1::Padding}} controls the {{c2::amount of space between its content and border}}
css: An element’s {{c1::Margin}} controls the {{c2::amount of space between its border and surrounding elements}}
css: If an element has two classes that style the same property, {{c1::the last one declared in the stylesheet}} has the priority
css: If an element has an id and a class that style the same property, {{c1::the id}} style has the priority
css: If an element has an id and an inline style that style the same property, the {{c1::inline}} style has the priority
css: In a stylesheet, override all the possible styles by {{c1::suffixing the property with
!important}}
css: CSS Variables are defined by {{c1::prefixing the property with --}} and are accessed by using
{{c1::var()}}
css: :hover is called a {{c1::Pseudo-Class}}
css: With {{c1::relative positioning}} an element can be {{c2::shifted away from its original position}}
css: With {{c1::relative}} positioning the original space the object would take {{c2::is}} preserved
css: With {{c1::absolute positioning}} an element can be {{c2::fixed to an absolute position relative to its parent container}}
css: With {{c1::absolute}} positioning the original space the object would take {{c2::isn’t}} preserved
css: The difference between Absolute and Fixed positioning is that Absolute {{c1::will scroll away from the view}}
css: {{c1::Change the z-order of overlapping elements}} with {{c2::z-index}}
css: Set {{c1::margin to auto}} to center a block element
css: Set {{c1:: background to linear-gradient(DEGREES, COLOR1, COLOR2, ...) }} to create a
linear gradient on an element
css: {{c1::Rotate, scale, skew, or translate an element}} with {{c2::transform}}
html: best practice: Add an alt attribute to all non-decorative img tags (or set it to “”)
html: best practice: Use main, header, footer, nav, article, and section tags
html: best practice: Use the figure and figcaption tags
html: In the following example “for” is linked to {{c1::id of the input}}. “name” controls the {{c1::name in the name/value pair of the submitted data}}.
<label for="name">Name:</label>
<input type="text" id="name" name="name">html: best practice: Wrap radio buttons inside a fieldset tag and add a legend tag
html: best practice: Use the time tag
css: Have a contrast of at least 4.5:1 (as recommended by the WCAG)
css: {{c1::Apply different rules to different device sizes}} with {{c2::Media Queries}}
css: Make images responsive with the following css:
{{c1::
img {
max-width: 100%;
height: auto;
}}}
css: Make typography responsive by using one of the following units: {{c1::vw, vh, vmin or vmax}}
css: flex: {{c1::Set the layout (row or column) of flex items}} with {{c2::flex-direction}}
css: flex: {{c1::Allow items to wrap into a new row or column}} with {{c2::flex-wrap}}
css: flex: {{c1::Increase or decrease the size of items in a container according to its size}} with {{c2::flex-grow}} or {{c2::flex-shrink}}
css: flex: {{c1::Set the initial size of an item}} with {{c2::flex-basis}}
css: flex: grid: {{c1::Set the order of the items}} with {{c2::order}}
css: grid: {{c1::Set a gap between the rows and columns}} with {{c2::grid-gap}}
js:
Add an element at the end of an array: {{c1::ARRAY.push()}}
Remove the last element of an array: {{c1::ARRAY.pop()}}
Add an element at the beginning of an array: {{c1::ARRAY.unshift()}}
Remove the first element of an array: {{c1::ARRAY.shift()}}
Concatenate two arrays: {{c1::ARRAY1.concat(ARRAY2)}}
Convert an array to a list of arguments: {{c1::FUNC(…ARRAY)}}
Get the index of an element: {{c1::ARRAY.indexOf(ELEMENT)}}
js: Access the property of an object with {{c1::OBJECT.PROPERTY}} or {{c1::OBJECT[PROPERTY]}}
js: Remove a property from an object: {{c1::delete OBJECT.PROPERTY}}
js: best practice: Use let or const when possible
js: Forbid any changes on an object: {{c1::Object.freeze(OBJECT)}}
js:
const person = { name: "Jody", age: 27 }
const user = { jody: { name: "Jody", age: 27 } }
const array = [1, 2, 3, 4, 5]Destructure person into two variables, name and age: {{c1:: let { name, age } = person }}
Destructure person into two variables, myName and myAge: {{c1:: let { name: myName, age: myAge } = person }}
Destructure user into two variables name and age: {{c1:: let { jody: { name, age } } = user }}
Destructure array into its first and second values and the rest: {{c1:: let [first, second, ...rest] = array }}
js: Export functions: {{c1:: export { FUNC1, FUNC2 } }}
js: Import functions: {{c1:: import * as myModule from './FILE.js' }}
js: Check that a property exists in an object with {{c1::OBJECT.hasOwnProperty(PROPERTY)}} or {{c1::PROPERTY in OBJECT}}
js: Loop through the keys of an object: {{c1:: for (let key in OBJECT) {...} }}