Skip to main content

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
HTML annotates the content a web browser will display
Regular HTML element equals opening tag plus content plus closing tag
Regular HTML element equals opening tag plus content plus closing tag
An empty HTML element has only an opening tag
An empty HTML element has only an opening tag
HTML describes data. CSS styles elements. JavaScript commands items
HTML describes data. CSS styles elements. JavaScript commands items
HTML annotates content. CSS defines an element's style. JavaScript programs an item's actions
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 box model comprises of four boxes
CSS ruleset equals selector plus declaration block
CSS ruleset equals selector plus declaration block
A display property's flex (or inline-flex) value creates a flex container and flex items
A display property's flex (or inline-flex) value creates a flex container and flex items
A flexbox's flex-direction property determines the main and cross axis
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 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 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 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-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-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
justify-content's space-evenly value ensures even spacing on both ends of the flexbox and between its items
The CSS flexbox justify-content property's values
The CSS flexbox justify-content property's values
align-items' stretch value stretches flexible items to fill the flexbox's cross-axis
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' 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' 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' 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-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 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'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 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 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-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-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-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 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 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 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
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
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 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 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 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-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-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-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' 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' 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' center value positions grid items to their individual cells' center
justify-items' end value positions grid items to their individual cells' row-end edge
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 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 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 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-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-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-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' 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' 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' center value aligns grid items to their individual cells' center
align-items' end value aligns grid items to their individual cells' column-end edge
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 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 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 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
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 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 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 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
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
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-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
A CSS grid-template-rows property determines the number of a grid container's row lines

JavaScript Tidbits

Anatomy of a JavaScript variable
Anatomy of a JavaScript variable
Variable declaration, initialization, and invocation
Variable declaration, initialization, and invocation
Rest parameter equals Rest operator plus Regular parameter
Rest parameter equals Rest operator plus Regular parameter
Rest variable equals Rest operator plus Regular variable
Rest variable equals Rest operator plus Regular variable
Anatomy of a JavaScript object destructuring assignment
Anatomy of a JavaScript object destructuring assignment
Anatomy of a JavaScript properties object
Anatomy of a JavaScript properties object

WebDev Tidbits

Anatomy of a JSON text
Anatomy of a JSON text
A URL consists of a scheme, domain, port, file path, one or more parameters, and an anchor
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
DNS Hierarchy goes from the Root Level Domain to the Top Level Domain to the Domain name and the Subdomain