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​

What is HTML?
HTML annotates the content a web browser will display
Anatomy of a regular HTML element
Regular HTML element equals opening tag plus content plus closing tag
Anatomy of an empty HTML element
An empty HTML element has only an opening tag
HTML vs. CSS vs. JavaScript
HTML describes data. CSS styles elements. JavaScript commands items
HTML vs. CSS vs. JavaScript
HTML annotates content. CSS defines an element's style. JavaScript programs an item's actions

CSS Tidbits​

CSS box model anatomy
CSS box model comprises of four boxes
Anatomy of a CSS ruleset
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
Illustration of the CSS flexbox justify-content property's values
Image illustrates the flex-start, center, flex-end, space-between, space-around, and space-evenly justify-content 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
Illustration of a grid container and a grid item
A display property's grid (or inline-grid) value creates a grid container and grid items
Illustration of justify-content's start value in CSS Grid
justify-content's start value positions columns to the grid container's row-start edge
Illustration of justify-content's center value in CSS Grid
justify-content's center value positions columns to the center of the grid container
Illustration of justify-content's end value in CSS Grid
justify-content's end value positions columns to the grid container's row-end edge
Illustration of justify-content's space-between value in CSS Grid
justify-content's space-between value creates even spacing between each pair of columns between the first and last grid column
Illustration of justify-content's space-around value in CSS Grid
justify-content's space-around value assigns equal spacing to each side of the grid container's columns
Illustration of justify-content's space-evenly value in CSS Grid
justify-content's space-evenly value assigns even spacing to both ends of the grid container and between its columns
Illustration of justify-items' stretch value in CSS Grid
justify-items' stretch value stretches grid items to fill their individual cells' row axis
Illustration of justify-items' start value in CSS Grid
justify-items' start value positions grid items to their individual cells' row-start edge
Illustration of justify-items' center value in CSS Grid
justify-items' center value positions grid items to their individual cells' center
Illustration of justify-items' end value in CSS Grid
justify-items' end value positions grid items to their individual cells' row-end edge
Illustration of align-content's start value in CSS Grid
align-content's start value aligns rows to the grid container's column-start edge
Illustration of align-content's center value in CSS Grid
align-content's center value aligns rows to the center of the grid container
Illustration of align-content's end value in CSS Grid
align-content's end value aligns rows to the grid container's column-end edge
Illustration of align-content's space-between value in CSS Grid
align-content's space-between value creates even spacing between each pair of rows between the first and last grid row
Illustration of align-content's space-around value in CSS Grid
align-content's space-around value assigns equal spacing to each side of the grid container's rows
Illustration of align-content's space-evenly value in CSS Grid
align-content's space-evenly value assigns even spacing to both ends of the grid container and between its rows
Illustration of align-items' stretch value in CSS Grid
align-items' stretch value stretches grid items to fill their individual cells' column axis
Illustration of align-items' start value in CSS Grid
align-items' start value aligns grid items to their individual cells' column-start edge
Illustration of align-items' center value in CSS Grid
align-items' center value aligns grid items to their individual cells' center
Illustration of align-items' end value in CSS Grid
align-items' end value aligns grid items to their individual cells' column-end edge
Illustration of justify-self's stretch value in CSS Grid
justify-self's stretch value stretches the selected grid item to fill its cell's row axis
Illustration of justify-self's start value in CSS Grid
justify-self's start value positions the selected grid item to its cell's row-start edge
Illustration of justify-self's center value in CSS Grid
justify-self's center value positions the selected grid item to its cell's center
Illustration of justify-self's end value in CSS Grid
justify-self's end value positions the selected grid item to its cell's row-end edge
Illustration of align-self's stretch value in CSS Grid
align-self's stretch value stretches the selected grid item to fill its cell's column axis
Illustration of align-self's start value in CSS Grid
align-self's start value aligns the selected grid item to its cell's column-start edge
Illustration of align-self's center value in CSS Grid
align-self's center value aligns the selected grid item to its cell's center
Illustration of align-self's end value in CSS Grid
align-self's end value aligns the selected grid item to its cell's column-end edge
Illustration of CSS grid lines
The CSS grid-template-columns and grid-template-rows properties determine the number of a grid container's lines
Illustration of grid column lines in CSS Grid
A CSS grid-template-columns property determines the number of a grid container's column lines
Illustration of grid row lines in CSS Grid
A CSS grid-template-rows property determines the number of a grid container's row lines
Anatomy of CSS @keyframes at-rule
A CSS @keyframes at-rule consists of a keyword, a name, and a block of keyframes

JavaScript Tidbits​

Anatomy of a JavaScript variable
A JavaScript variable is a container used to store JavaScript data (values).
Declaration vs. initialization vs. assignment
Declaration declares the creation of a variable, while initialization assigns an initial value to a declared variable
Arguments vs. parameters
Arguments are values. Parameters are the names of the values.
Anatomy of a rest parameter
Rest parameter equals Rest operator plus Regular parameter
Anatomy of a rest variable
Rest variable equals Rest operator plus Regular variable
Anatomy of a JavaScript object destructuring assignment
The destructuring object's key references its profile object's property name. And the destructuring object's value represents your new variable.
Anatomy of a JavaScript properties object
A properties object is an element you can use to bundle up multiple named values into a single item.
What is a JavaScript method?
A JavaScript method is a function used as the value of an object's property.
Array lastIndexOf() method's tidbit
Use lastIndexOf() to search an array for the index of the last occurrence of a value.
JavaScript Number() global method's tidbit
Use JavaScript's Number() method to convert a value to a Number type or NaN.
JavaScript parseInt() global method's tidbit
Use JavaScript's parseInt() method to convert strings from their radix state to a decimal integer.
RegExp exec() method's tidbit
Use RegExp's exec() method to search a string for a regular expression pattern.
RegExp test() method's tidbit
Use RegExp's test() method to test if a string contains a regular expression pattern.
String split() method's tidbit
Use split() to create an array containing the result of splitting a string into substrings.
String toLowerCase() method's tidbit
Use the toLowerCase() method to convert your string to lowercase.
String toUpperCase() method's tidbit
Use JavaScript's toUpperCase() method to convert your string to uppercase.
Buy CSS Grid book

WebDev Tidbits​

Anatomy of a JSON text
JSON (JavaScript Object Notation) is a text format for interchanging data between web pages and servers.
Anatomy of a URL
A URL consists of a scheme, domain, port, file path, one or more parameters, and an anchor
Illustration of the DNS hierarchy tree
DNS Hierarchy goes from the Root Level Domain to the Top Level Domain to the Domain name and the Subdomain