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
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 display property's flex (or inline-flex) value creates a flex container and flex items
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.
Illustration of a flexbox's main and cross-axis
A flexbox's flex-direction property determines the main and cross axis
Illustration of justify-content's flex-start value
justify-content's flex-start value aligns flexible items to the flexbox's main-start edge
Illustration of justify-content's center value
justify-content's center value aligns flexible items to the center of the flexbox
Illustration of justify-content's flex-end value
justify-content's flex-end value aligns flexible items to the flexbox's main-end side
Illustration of justify-content's space-between value
justify-content's space-between value creates even spacing between each pair of items between the first and last flex item
Illustration of justify-content's space-around value
justify-content's space-around value assigns equal spacing to each side of the flexbox's items
Illustration of justify-content's space-evenly value
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
Illustration of align-items' stretch value
align-items' stretch value stretches flexible items to fill the flexbox's cross-axis
Illustration of align-items' flex-start value
align-items' flex-start value aligns flexible items to the flexbox's cross-start edge
Illustration of align-items' center value
align-items' center value aligns flexible items to the flexbox's center
Illustration of align-items' flex-end value
align-items' flex-end value aligns flexible items to a flexbox's cross-end edge
Illustration of align-items' baseline value
align-items' baseline value aligns flexible items to a flexbox's baseline
Illustration of align-content's stretch value
align-content's stretch value stretches flexbox's lines to fill the container's cross-axis
Illustration of align-content's flex-start value
align-content's flex-start value aligns flexbox's lines to the container's cross-start edge
Illustration of align-content's center value
align-content center value aligns flexbox's lines to the center of the container's cross-axis
Illustration of align-content's flex-end value
align-content's flex-end value aligns flexbox's lines to the container's cross-end edge
Illustration of align-content's space-between value
align-content's space-between value creates equal spacing between each pair of lines between the first and last line
Illustration of align-content's space-around value
align-content's space-around value assigns equal spacing to each side of a flexbox's lines
Illustration of align-content's space-evenly value
align-content's space-evenly value ensures even spacing on both ends of a flexbox and between its lines
Illustration of align-self's stretch value
align-self's stretch value stretches the selected flexible items
Illustration of align-self's flex-start value
align-self's flex-start value aligns selected flexible items to the cross-start edge of the flexbox's cross-axis
Illustration of align-self's center value
align-self's center value aligns the selected flexible items to the center of the flexbox's cross-axis
Illustration of align-self's flex-end value
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

Anatomy of a JavaScript variable
Variable declaration, initialization, and invocation
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
Anatomy of a JavaScript object destructuring assignment
Anatomy of a JavaScript properties object

WebDev Tidbits

Anatomy of a JSON text
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
Everything you need to sell courses, webinars, downloads, and community.