Code Tidbits – Use Images to Learn Software Development Concepts

The tidbits on this page are pictorial explanations of various software development concepts. Each image is a tidbit of an article on this website. So, if 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.

1 / 5

HTML annotates the content a web browser will display

Learn more

CSS Tidbits

CSS box model comprises of four boxes

CSS ruleset equals selector plus declaration block

A CSS @keyframes at-rule consists of a keyword, a name, and a block of keyframes

nth-child selects its items from any group of elements. nth-of-type selects its items from a specified type of element.

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

1 / 7

CSS box model comprises of four boxes

Learn more

JavaScript Tidbits

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

Use lastIndexOf() to search an array for the index of the last occurrence of a value.

Use JavaScript's Number() method to convert a value to a Number type or NaN.

Use JavaScript's parseInt() method to convert strings from their radix state to a decimal integer.

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.

The Express router is called a mini-app because it has its own routing and middleware. This helps you break your Express application into smaller, manageable parts.

1 / 12

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

Learn more

React Tidbits

The super flexible JavaScript library for modern frontend and full-stack app development

React components return a single user interface

The four phases in the lifecycle of a component's UI

Steps to add an image grid gallery to a React app

Steps to add a responsive YouTube Playlist to React apps

1 / 5

The super flexible JavaScript library for modern frontend and full-stack app development

Buy the React Canvas

AD