HTML annotates the content a web browser will displayRegular HTML element equals opening tag plus content plus closing tagAn empty HTML element has only an opening tagHTML describes data. CSS styles elements. JavaScript commands itemsHTML annotates content. CSS defines an element's style. JavaScript programs an item's actions
CSS box model comprises of four boxesCSS ruleset equals selector plus declaration blockA flex container (the large yellow area in the image) is an HTML element whose display property's value is flex or inline-flex. Flex items (the smaller boxes within the yellow container) are the direct children of a flex container.A flexbox's flex-direction property determines the main and cross axisjustify-content's flex-start value aligns flexible items to the flexbox's main-start edgejustify-content's center value aligns flexible items to the center of the flexboxjustify-content's flex-end value aligns flexible items to the flexbox's main-end sidejustify-content's space-between value creates even spacing between each pair of items between the first and last flex itemjustify-content's space-around value assigns equal spacing to each side of the flexbox's itemsjustify-content's space-evenly value ensures even spacing on both ends of the flexbox and between its itemsImage illustrates the flex-start, center, flex-end, space-between, space-around, and space-evenly justify-content valuesalign-items' stretch value stretches flexible items to fill the flexbox's cross-axisalign-items' flex-start value aligns flexible items to the flexbox's cross-start edgealign-items' center value aligns flexible items to the flexbox's centeralign-items' flex-end value aligns flexible items to a flexbox's cross-end edgealign-items' baseline value aligns flexible items to a flexbox's baselinealign-content's stretch value stretches flexbox's lines to fill the container's cross-axisalign-content's flex-start value aligns flexbox's lines to the container's cross-start edgealign-content center value aligns flexbox's lines to the center of the container's cross-axisalign-content's flex-end value aligns flexbox's lines to the container's cross-end edgealign-content's space-between value creates equal spacing between each pair of lines between the first and last linealign-content's space-around value assigns equal spacing to each side of a flexbox's linesalign-content's space-evenly value ensures even spacing on both ends of a flexbox and between its linesalign-self's stretch value stretches the selected flexible itemsalign-self's flex-start value aligns selected flexible items to the cross-start edge of the flexbox's cross-axisalign-self's center value aligns the selected flexible items to the center of the flexbox's cross-axisalign-self's flex-end value aligns the selected flexible items with the cross-end edge of the flexbox's cross-axisA display property's grid (or inline-grid) value creates a grid container and grid itemsjustify-content's start value positions columns to the grid container's row-start edgejustify-content's center value positions columns to the center of the grid containerjustify-content's end value positions columns to the grid container's row-end edgejustify-content's space-between value creates even spacing between each pair of columns between the first and last grid columnjustify-content's space-around value assigns equal spacing to each side of the grid container's columnsjustify-content's space-evenly value assigns even spacing to both ends of the grid container and between its columnsjustify-items' stretch value stretches grid items to fill their individual cells' row axisjustify-items' start value positions grid items to their individual cells' row-start edgejustify-items' center value positions grid items to their individual cells' centerjustify-items' end value positions grid items to their individual cells' row-end edgealign-content's start value aligns rows to the grid container's column-start edgealign-content's center value aligns rows to the center of the grid containeralign-content's end value aligns rows to the grid container's column-end edgealign-content's space-between value creates even spacing between each pair of rows between the first and last grid rowalign-content's space-around value assigns equal spacing to each side of the grid container's rowsalign-content's space-evenly value assigns even spacing to both ends of the grid container and between its rowsalign-items' stretch value stretches grid items to fill their individual cells' column axisalign-items' start value aligns grid items to their individual cells' column-start edgealign-items' center value aligns grid items to their individual cells' centeralign-items' end value aligns grid items to their individual cells' column-end edgejustify-self's stretch value stretches the selected grid item to fill its cell's row axisjustify-self's start value positions the selected grid item to its cell's row-start edgejustify-self's center value positions the selected grid item to its cell's centerjustify-self's end value positions the selected grid item to its cell's row-end edgealign-self's stretch value stretches the selected grid item to fill its cell's column axisalign-self's start value aligns the selected grid item to its cell's column-start edgealign-self's center value aligns the selected grid item to its cell's centeralign-self's end value aligns the selected grid item to its cell's column-end edgeThe CSS grid-template-columns and grid-template-rows properties determine the number of a grid container's linesA CSS grid-template-columns property determines the number of a grid container's column linesA CSS grid-template-rows property determines the number of a grid container's row lines
A JavaScript variable is a container used to store JavaScript data (values).Declaration declares the creation of a variable, while initialization assigns an initial value to a declared variableArguments are values. Parameters are the names of the values.Rest parameter equals Rest operator plus Regular parameterRest variable equals Rest operator plus Regular variableThe destructuring object's key references its profile object's property name. And the destructuring object's value represents your new variable.A properties object is an element you can use to bundle up multiple named values into a single item.Use lastIndexOf() to search an array for the index of the last occurrence of a value.Use RegExp's exec() method to search a string for a regular expression pattern.Use RegExp's test() method to test if a string contains a regular expression pattern.Use split() to create an array containing the result of splitting a string into substrings.Use the toLowerCase() method to convert your string to lowercase.Use JavaScript's toUpperCase() method to convert your string to uppercase.A JavaScript method is a function used as the value of an object's property.
JSON (JavaScript Object Notation) is a text format for interchanging data between web pages and servers.A URL consists of a scheme, domain, port, file path, one or more parameters, and an anchorDNS Hierarchy goes from the Root Level Domain to the Top Level Domain to the Domain name and the Subdomain