Code Tidbits – Learn Programming Concepts with Images

The tidbits on this page are pictorial explanations of various programming concepts.

Keep in mind that each image is a tidbit of an article on this website. So, when you wish to learn more, go to the post for that tidbit.

HTML Tidbits

HTML annotates the content a web browser will display

Regular HTML element equals opening tag plus content plus closing tag

An empty HTML element has only an opening tag

HTML describes data. CSS styles elements. JavaScript commands items

HTML annotates content. CSS defines an element's style. JavaScript programs an item's actions

CSS Tidbits

CSS box model comprises of four boxes

CSS ruleset equals selector plus declaration block

A 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 axis

justify-content's flex-start value aligns flexible items to the flexbox's main-start edge

justify-content's center value aligns flexible items to the center of the flexbox

justify-content's flex-end value aligns flexible items to the flexbox's main-end side

justify-content's space-between value creates even spacing between each pair of items between the first and last flex item

justify-content's space-around value assigns equal spacing to each side of the flexbox's items

justify-content's space-evenly value ensures even spacing on both ends of the flexbox and between its items

Image illustrates the flex-start, center, flex-end, space-between, space-around, and space-evenly justify-content values

align-items' stretch value stretches flexible items to fill the flexbox's cross-axis

align-items' flex-start value aligns flexible items to the flexbox's cross-start edge

align-items' center value aligns flexible items to the flexbox's center

align-items' flex-end value aligns flexible items to a flexbox's cross-end edge

align-items' baseline value aligns flexible items to a flexbox's baseline

align-content's stretch value stretches flexbox's lines to fill the container's cross-axis

align-content's flex-start value aligns flexbox's lines to the container's cross-start edge

align-content center value aligns flexbox's lines to the center of the container's cross-axis

align-content's flex-end value aligns flexbox's lines to the container's cross-end edge

align-content's space-between value creates equal spacing between each pair of lines between the first and last line

align-content's space-around value assigns equal spacing to each side of a flexbox's lines

align-content's space-evenly value ensures even spacing on both ends of a flexbox and between its lines

align-self's stretch value stretches the selected flexible items

align-self's flex-start value aligns selected flexible items to the cross-start edge of the flexbox's cross-axis

align-self's center value aligns the selected flexible items to the center of the flexbox's cross-axis

align-self's flex-end value aligns the selected flexible items with the cross-end edge of the flexbox's cross-axis

A display property's grid (or inline-grid) value creates a grid container and grid items

justify-content's start value positions columns to the grid container's row-start edge

justify-content's center value positions columns to the center of the grid container

justify-content's end value positions columns to the grid container's row-end edge

justify-content's space-between value creates even spacing between each pair of columns between the first and last grid column

justify-content's space-around value assigns equal spacing to each side of the grid container's columns

justify-content's space-evenly value assigns even spacing to both ends of the grid container and between its columns

justify-items' stretch value stretches grid items to fill their individual cells' row axis

justify-items' start value positions grid items to their individual cells' row-start edge

justify-items' center value positions grid items to their individual cells' center

justify-items' end value positions grid items to their individual cells' row-end edge

align-content's start value aligns rows to the grid container's column-start edge

align-content's center value aligns rows to the center of the grid container

align-content's end value aligns rows to the grid container's column-end edge

align-content's space-between value creates even spacing between each pair of rows between the first and last grid row

align-content's space-around value assigns equal spacing to each side of the grid container's rows

align-content's space-evenly value assigns even spacing to both ends of the grid container and between its rows

align-items' stretch value stretches grid items to fill their individual cells' column axis

align-items' start value aligns grid items to their individual cells' column-start edge

align-items' center value aligns grid items to their individual cells' center

align-items' end value aligns grid items to their individual cells' column-end edge

justify-self's stretch value stretches the selected grid item to fill its cell's row axis

justify-self's start value positions the selected grid item to its cell's row-start edge

justify-self's center value positions the selected grid item to its cell's center

justify-self's end value positions the selected grid item to its cell's row-end edge

align-self's stretch value stretches the selected grid item to fill its cell's column axis

align-self's start value aligns the selected grid item to its cell's column-start edge

align-self's center value aligns the selected grid item to its cell's center

align-self's end value aligns the selected grid item to its cell's column-end edge

The CSS grid-template-columns and grid-template-rows properties determine the number of a grid container's lines

A CSS grid-template-columns property determines the number of a grid container's column lines

A CSS grid-template-rows property determines the number of a grid container's row lines

JavaScript Tidbits

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 variable

Arguments are values. Parameters are the names of the values.

Rest parameter equals Rest operator plus Regular parameter

Rest variable equals Rest operator plus Regular variable

The 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.

WebDev Tidbits

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 anchor

DNS Hierarchy goes from the Root Level Domain to the Top Level Domain to the Domain name and the Subdomain