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.
CodeSweetly ads 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 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. 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 1 / 61 CSS box model comprises of four boxes 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. A JavaScript method is a function used as the value of an object's property. 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. 1 / 16 A JavaScript variable is a container used to store JavaScript data (values). CodeSweetly ads React components return a single user interface Steps to add an image grid gallery to a React app The super flexible JavaScript library for modern frontend and full-stack app development Steps to add a responsive YouTube Playlist to React apps 1 / 4 React components return a single user interface How to convert JavaScript Objects to JSON 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 1 / 4 How to convert JavaScript Objects to JSON 
