HTML and JavaScript

¡The Document Object Model (DOM) – represents a web page as a tree of objects, allowing CSS & JavaScript to access, manipulate, and modify the content and styling

Specificity - rules that determine which style to apply when an element has multiple conflicting styles

¡The Box Model – responsible for controlling the spacing between elements and their neighboring elements

¡Margin – the space between an element and other elements on the page

¡Border – a perimeter around content which can be customized

¡Padding – the space between the content of an element and the border

¡Content – The actual content of the element - could be text, another element, etc.

¡Static – default position for all elements; Elements flow naturally.

¡Relative – Element is shifted relative to normal position with the top, left, right, and bottom properties.

¡Absolute – Element is positioned relative to its parent with the top, left, right, and bottom properties.

¡Fixed – Element is positioned relative to the viewport; stays in place when scrolling.

¡Sticky – Element is relative until a scroll threshold, then it becomes fixed; requires a top, left, right, or bottom value to work.

Flexbox – is a CSS layout system designed to make it easier to arrange and align elements inside a container.

¡Flex Container – where we apply { display: flex; }

¡Flex Items – The child elements inside the flex container

¡Justify-content property is used to align items on the X-axis when set to row, it will align items on the Y-axis when set to column.

¡Align-items is used to align items on the opposite axis of the justify-content property.

Strict Mode: a way to opt in to a stricter set of rules that help us write cleaner and safer code.

¡Decorators: a special kind of syntax that allows us to modify or enhance classes and class members.

¡JavaScript events: actions that happen in the browser, usually because of human action.

¡createElement() – creates an element with specified tag

¡appendChild() – attaches an element as a child of the specified element

¡removeChild() – removes a specified element from the DOM

¡replaceChild(newElement, oldElement) – swaps one element for another on a parent

Promise: an object that represents the eventual result of an asynchronous operation

Fetch API: a modern JavaScript interface for making HTTP requests to servers

¡Async/Await – a modern syntax for working with asynchronous code in a way that looks and behaves more like synchronous code