Yes I know that FlexBox is part of CSS, but if in your previous pages you struggle with CSS to achieve: Layout, Positioning, Block-Formatting, Centering, etc…. you know that getting the desire results using CSS Floats and other Properties can be very frustrating, the hard part should be make it Dynamic and Interactive not building the frame. FlexBox can make the process of creating the Frame more easy and fast, and that put FlexBox in a category of its own and here in a post of its own. enjoy. I will put more updates when I learn more about FlexBox.

css-tricks.com  —  Ultimate  —  CCpdf

GAME: flexboxfroggy

Udemy: Professional CSS Flexbox

  • flex-wrap to create multi-line flex boxes.
  • justify-content to distribute empty space between our items per line
  • flex-direction to control which way our main and cross axis point
  • align-items to align our items along the cross axis per line
  • align-content to distribute extra cross axis space between our lines

Basic Definitions:

Flex Container: Any Element with the CSS property :  display: flex;  or   display: inline-flex; 

Flex Items: Any Element that is INMEDIATE Child of a Flex Container. and will take Only the space that they need, as stipulated in the CSS-Properties.

Two types of Flex Container:

  • display: flex;   ==  Block Level Element, Meaning: Put it self in a New-Line all takes all available with.
  • display: inline-flex;  ==  Now the container takes only the space It needs, sharing the line with other elements.


Udemy 2:20 – jsbin – If there is no enough width in the Horizontal width of the Container for the combine width of all elements, Then by default they will squish and share the available width in equality, unless we “flex-wrap” is modify from its default value of: “flex-wrap: nowrap;”

Wrap is a property of the container, if we set up: “flex-wrap: wrap;” then the container is allow to take as many lines as need to fit its elements in they original width.


Udemy 2:32 – jsbin – It distribute the items of a container without know the exact dimensions or having to specify, a complex margin and float rules.providing Manipulation in the “Main-Axis” (Horizontally) even center. This rule is only taken on account when is extra space.


Udemy 2:04  –  jsbin  – Gives control to in what direction the items are lay-out to understand this better we need to understand two new concepts:

  1. Main Axis: what direction the Items are layout.    Default: Left — to — Right.
  2. Cross Axis: what direction New-Lines are added.   Default: Top — to Bottom.

                    flex-direction: column  &  column-reverse;

Column: will change the Main-Axis to: Top — to Bottom. like in a single Column, it will take as much vertical space needs to fit all its Items in a single Column, if you want it to take just a specific height, well you need to code it: height: 150px; and if the vertical space is not long enough it will “Wrap“.  column-reverse will do the opposite.


Udemy 3.12  –  JsBin  :    align-items to align our items along the cross axis per line

This property will allow to manipulate the position of the items relative tot “Cross-Axis” (Vertically) Even Center them. Always maintaining the ITEM-HEIGHT. as long is smaller than the container,   Note: Baseline will align items in a Per-Line bases.


Udemy 2:17  –  JsBin  :    align-content to distribute extra cross axis space between our lines

This is very similar to “align-items:” providing Manipulation in the “Cross-Axis” (Vertically) even center. with some variations like:

  • It can work just the same in Columns,  “flexdirection: column;
  • It can be use to Align and Distribute LINES across any extra space.

Element Properties.

  • order to change the display order of items
  • flex-grow to specify how our items take up extra main-axis space when available
  • flex-shring to specify how our items shrink when there isn’t enough main-axis space
  • flex-basis to specify a dimension tied to the main-axis
  • align-self to align individual items along the cross-axis on their line


Udemy 2:22  –  JsBin  :  By default:   order: 0;  in all items., Using this you can change the order in which the elements are display.


Udemy 3:03  –  JsBin.  by default all elements will take only the space need, and if the container is bigger they will leave the extra space empty,

flex-grow is how the elements will divide that reminder space. this flex grow is Responsive to window size.


Udemy 2.05  –  JsBin. this specify how the items will shrink in comparation with the other items, when the container do not have enough space for the total size of the items.

Example: flex-shrink: 2;  do not means that the Item will be half the size, this means that the number of pixels  cut, will be double the number the items with size 1;


Udemy 2.05  –  JsBin.

Usint flex-basis in an Item we can ensure that will take a particular amount of space along its Main-Axis regardless which direction is pointing.


Udemy 1:56  –  JsBin.  does the same thing than “align-items” but this is for each individual item, and it overwrites “align-items” unless “align-self: auto;

Shorthand Properties

There are two:

  • flex:
  • flex-flow:

“Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously” – MDN CSS Shorthand Properties


For Flex Items:

The shorthand property flex specifies flex-grow, flex-shrink but only if flex-grow is specified, and / or flex-basis.



Flexbox Quick Reference


  • Flex Container : Any HTML element with the CSS property of display set to “flex” or “inline-flex“.
  • Flex Item : Any element that is a direct child of a Flex Element.
  • Main Axis : The direction items are laid out on a line. By default this is left to right.
  • Cross Axis: The direction that lines are added to the flex container. By default this is top to bottom.

CSS properties for Flex Containers

display : Designate an element as a Flexbox or Inline Flexbox

  • flex
  • inline-flex

flex-wrap : Specify whether items should wrap when there is not enough space to display them all.

  • no-wrap (default)
  • wrap
  • wrap-reverse

justify-content : Distribute extra space between items per line.

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around

flex-direction : Specify which direction the Main and Cross axes point.

  • row (default)
  • row-reverse
  • column
  • column-reverse

align-items : Align the items along the cross axis per line.

  • flex-start (default)
  • flex-end
  • center
  • stretch
  • baseline

align-content : Distribute extra space between lines.

  • flex-start (default)
  • flex-end
  • center
  • stretch
  • space-between
  • space-around

CSS properties for Flex Items

order : Takes a group number, default is 1

flex-grow : Takes a positive number that determines what proportion of empty space an item gets to take for itself. Default is 0.

flex-shrink : Takes a positive number that determines how fast an item shrinks relative to other items when there is not enough space to display all items. Default is 1.

flex-basis : Specifies how much space an item will take up along it’s main axis. Takes either an exact dimension like 150px, 10rem, or 30% or the word auto. Auto means use the height or width CSS property specified for the item or fall back to its content size. Default is auto.

align-self : Align an individual item on its line.

  • auto (default)
  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

Helpful Resourses


Notes from Other classes

To start in the parent container set up the Display:

Flex Direction

This depends from what “Axis” we are using, by default it uses the Main axis, but we also have the  Cross axis

MAIN: when row goes from Left to Right  — when column goes from Top to Bottom.

CROSS: wen row goes from Top to Bottom.  — when column goes from Left to Right


To reverse the Direction of the elements.

Wrapping elements with Flexbox

Flexbox Re-Ordering

Alignment and Centering

Justify – Horizontally: V6

Align-Items – Vertically: V 7, 8, 9

Divide space btween elements

Flex: grow shrink bases;

Udemy: Professional CSS Flexbox

Basic Definitions:

Flex Container: Any Element with the CSS property :  display: flex;  or   display: inline-flex; 

Flex Items: Any Element that is INMEDIATE Child of a Flex Container. and will take Only the space that they need, as stipulated in the CSS-Properties.

Two types of Flex Container:

  • display: flex;   ==  Block Level Element, Meaning: Put it self in a New-Line all takes all available with.
  • display: inline-flex;  ==  Now the container takes only the space It needs, sharing the line with other elements.

flex-wrap: nowrap;


Udemy 2:20 – jsbin – If there is no enough width in the Horizontal width of the Container for the combine width of all elements, Then by default they will squish and share the available width in equality, unless we “flex-wrap” is modify from its default value of: “flex-wrap: nowrap;”

Wrap is a property of the container, if we set up: “flex-wrap: wrap;” then the container is allow to take as many lines as need to fit its elements in they original width.

Justify-content; flex-start;

Udemy 2:32 – jsbin – It distribute the items of a container without know the exact dimensions or having to specify, a complex margin and float rules. This rule is only taken on account when is extra space.

flex-direction: row | row-reverse | column | column-reverse










Category: FED | Comments Off on FlexBox


“Document Object Model”

Links:  API  — Enligh  —  SitePoint  —  MDN  —  U-NotNeed  — CanIUse —

Tutorials:  Tutorial  —  Node.xyz  — DOM

The following is a brief list of common APIs in web and XML page scripting using the DOM.


QuerySelector will return only one Item.  you provide the “ID” or “Class Name”

If you want to grab all of them:


This will return only One

If you want to grab all of them, use two $

Monitoring Events

Every time we “click” on the Element wit Id=”div-7″ we will see and get a response printed, on the console






You can target elements by:

  • Finding HTML elements by id
  • Finding HTML elements by tag name
  • Finding HTML elements by class name
  • Finding HTML elements by CSS selectors
  • Finding HTML elements by HTML object collections


In the last example “Finding HTML Elements by HTML Object Collections” we use “.forms” but you can use other HTML Objects:

The following HTML objects (and object collections) are also accessible:

Dig Deep

The methods “getElementsBy….” are aplicable to the return elements, so we search on them or as we call it: Dig Deep.

Console Inspection

To see it on the console you can type: document

The window Reference object that contain all the JavaScript API’s, Default Functions, the Document and more: window

the javaScript Document Object can be access with: dir(document);

Example: dir(document.getElementById(“p1”));

Using the CSS Selectors: dir( document.querySelectorAll(“p1”) );

Modify HTML Elements



because we are using the ” = ” operator that means that we are overwriting whatever was there but if you don’t want to delete, instead you want to add to it use the ” += ” operator one example is:

now if you want to modify the newly created span without modify the other text on that element?

in this case we nee to use the CSS selectors, and specify the direct child using the “>” Direct Child indicator.

also make sure that you target the right element of the “Array” in this case is “0”

Input Elements

Most Input Elements do not have closing tag, they are self closing Tags. so lest change the value of an INPUT with value=”Click Me”. in JavaScript attributes are simple properties on an Object.

remember to interact with the WINDOW Object in the Browser console to find more information you can use:

then look for “value” and in this case the value is: “Click Me” as we stipulate in our index.html file

so to change the value I use the code as:

Modify Element Styles

to begin this example we have the following code:

Note– the command:

keep track of the “IN-LINE STYLES” and not the Computed Styles found in: “<head>”  or  “.css “ files, if you need to review the CSS Computed Style values use the command:

This will give you an Object with Numeric Keys from 0…. to …??   in the following way.

This numerical keys are not much help so in order to get the information in a better way, use the command:

Basically we are telling to the computer: from the Coumputed Styles, of the Element with ID= “blue”, get the value of “width”.

In the other side for elements with “IN-LINE STYLES” have different commands like:

and if you want to see the value of just one property use the following command:

Modify the “IN-LINE STYLES”

You can actually OVERWRITE the value of that property, example:

This will simply modify the current ON memory DOM values, one thing to remember is tha JavaScript uses CamelCase but CSS no. so you need to convert the translate the “Property Name” from CSS to CamelCase, example:

Modify the Computed Styles found in: “<head>”  or  “.css “ files

Here we use the same syntax that in the “In line Styles” modifications because “In line Styles” have a higher precedence to “Computed Styles”.

Create and Append DOM element

This time we will not change the elements on the DOM, we actually will Create an OBJECT in JavaScript that represents the “DOM Element” that do not exist on the DOM. in other words we will inject HTML from JavaScript in the virtual DOM.

But this will not be Injected to the HTML for the user “YET”, to do that we need to tell to the compiler where we want this new <div> to be placed on the HTML document.

Create new element inside the newly created “DOMobject”



There is another post with this information, where I put my notes on eventListeners, which are very useful when Manipulating the DOM. click the image below to go to that post.

Also check: guestbook.mycode.website


Category: JS | Comments Off on DOM


Here is some information about JS data structure: “Strings”.

For a complete list check MDN String Methods List: LINK

String Creation:


Storing Strings:

Multi-Line Strings:

  • Using: Shift + Enter  and use the “Tilde” to wrap the text.

  • Using the “Return Line Break Operator ”  —> “\n”

String Reverse

I have not found a direct build method to achieve this task but using a chain of methods including some for Arrays this get the job done.  another variation in 14-Reverse-Words.js  CodeWars-JS

String Concatenation:

  • Using the “+”

  • Using   .concat(x)

String Replacement:

Using basic  .replace

Using .replace()  +  Regular Expressions  +  “g” (Global Flag)

Changing the CASE of a String:

Cap the 1rst Letter of a string.


Cut Last Character of String:


Template Strings:

this are the ones that are contain inside Tildes and using ${}  what is inside of the braces is understood as JS.


.startsWith(“abc “);

Check if a Strings has any numbers on it, True – False


Strings —to—> Numbers:

  • parseInt(str)

  • parseFloat(str)

string to array every X characters

this will split the string every 2 characters, you can change the 2 for other number.




Category: JS | Comments Off on Strings


Here you will find some things that I’m not sure in what category should be placed, but one thing is sure, this are good tools that should be documented.


Console.log  multiple variables.

This  keyword

if the “this” keyword is outside of an Executions context:  this == Window Object

javascript essentials – lecture: 28, minute: 19:25

when “this” was invoked from an object: it will became the object from where it was directly invoked from.

when “this” was invoked from an event listener: then “this” will be repopulated with an object that represents the DOM Element that the Event was invoked on.

JavaScrip Comparations:

When comparing values in JavaScrip:

  • true === true  –> true
  • 2 === 2 –> true
  • [3] === [3]  –> false    why?

The 3rd reason is because JavaScript compares Primitives by (Values) and Objects by (Reference), Reference is the GPS cordenates of its location in memory, regardless if is a Identical Object, Identical Copy, or New Instance of that Object, all of them have a different Address in Memory Street.



Category: JS | Comments Off on Miscelaneous


Here we found simple examples of Loops & Iterations  …  for more details see: MDN

for( var i = 0; i < arr.length; i++ ) { code… }

for … in   -&-   for … of

do{  …  }while(condition);

while (condition)

labeled statement

break (will exit the loop)

Study:  “break to a label” ????

continue    (will exit or skip current iteration)



Category: JS | Comments Off on Iterations



Box Element quick look


colors: creative  –  crockford  –  Picker

Unit Types

Distance & Size & Position:

  • Pixels: px;  :  screen pixels.
  • em: 1.3em; = 130% the size of parent : Relative to “Parent” element property.
  • rem: 2.1rem; :  Relative to “Document Root” (Body) element property.
  • % :  85%;  : Relative to the holding container.


  • Hex: #RRGGBB  exadecimals 0..9 A..F  = #FFFFFF;
  • Name: its literal name = black;
  • RGB: rgb(0, 0, 0); of rgb(255, 255, 255);
  • RGBa: rgba(0, 0, 0, 0.5);


This is how syntax works.


Multiple selectors can be used on the same line with the following syntax.

Decendant Selector

here we use:  ” ” + “a”  to target all anchor tags whiting the <p>.

Id & Class

Combination Selector

Pseudo Selectors


Lists of CSS Properties: w3.org , w3schools – blooberryMDN

Formats of Properties

Extra Spaces

Simple Menu using List


Layout — (Positioning)

Introduction to CSS Development:  Lectures 14 & 15:   float,  clear,  position : relative -or- absolute

block Formatting Context: How the browser controls and contains floats.







Pages can be seen different in different computers with diff O.S. or different Browser, there few tools to deal with this problem:

Reset Files.

Normalize: cdnjs.com : A cdn is a site that is build for serving content to multiple users.


Miscellaneous CSS

Clear Fix:  Introduction to CSS Development:  Lecture 20.


!important > Style At. > Id > Class > Element

CSS Architecture

  1. Re-usability
  2. Maintainability
  3. Modularity
  4. Scalability
  5. Semantics

Use Calc to divide width



Font Awesome

Links: The-Icons









Category: FED | Comments Off on CSS-CS

HTML Basics


Cheat Sheets:

w3schools  –  Simplehtmlguide  –  Mega  –  Quackit  –  Emmet  – TIZAG

Block Elements: Create a new line.     examples: <p>, <h1>, <form>, <div>, etc..  tags

Line Elements: Do NOT create new lines.    examples: <a>, <strong>, <input/>, <span>, etc… tags

Singleton Tags: No closing Tags. (AKA) void elements.   examples: <img>, <hr>, <br>, <command>

Spaces and Images


Image Place-Holder

The site where this came is: placehold.it    and the code is:

List of Sites with Free Images:

  1. canva.com
  2. https://unsplash.com/
  3. https://www.splitshire.com/
  4. http://gratisography.com/
  5. Article with resources

Enjoy the use of this images on your Apps and Web-Sites.


Create Online Custom Text Images / Logos

This site provides free service to creation of Logos / Images: Cooltex.com

Online Free Logo Creator

Now if you need  FREE LOGO here is a great resource

“figure” with “figcaption”



More about forms Udemi: HTML Complete Course – Beginner to Expert: Sections: 4 – Lecture: 19.

HTML-5 Inputs

In this we will bu using the for=”name1″ in the label, and when the user click the label the cursor will be ready to type on the input box. The placeholder=”abcd” is the default text.

HTML Entities

HTML Entity List

Embed Video using “IFRAMES”

Many ways to embed videos, here is one way: in You-Tube, in the bottom of the video click “share” then “Embed”, copy the link and past it on the HTML file, you will get something like:

Another way to embed video would be using the <video> tag,

IFRAME Embedded websites.

Audio Embedding

“div”  &  “span”

This are containers that help to divide the page and give a easier styling. this will be explain in-depth in CSS.



Category: FED | Comments Off on HTML Basics

Conditional Control Flow

Here is where the magic happens, because using data and applying “Logic” to the data “Sherlock Holmes” was able to deduct what was elementary.


 Conditional (Ternary) Operator

If  –  else if  –  else  –  ||  –  &&


This allow to fall into more that one cases. if you dont want to enter the next case use: “break;” will look for a


Operator Precence

PEMDAS = Please Excuse My Dear Aunt Sally     —     MDN

Parenthesis – Exponents – Multiplication & Division (from L to R) – Addition & Subtraction (from L to R).



Category: JS | Comments Off on Conditional Control Flow


Constructors are your virtual workers in the JS universe, and can create “Objects”, and attach a “Prototype Object”, doing so we can replicate the code dynamically and have a ever expanding code.

with the following results

Adding Functions to the .prototype

with following output:

Arguments (parameters): for Custom Objects



Category: JS | Comments Off on Constructors

JS Prototype

To make this easier to understand, lets change the word “Prototype” to “Template” for one second, and remember that almost everything in JS is an Object, this instance of the object get its characteristics, and abilities from a Global template that specify characteristics but not values,

the abilities are the functions or Methods, but what happen when you want an object to execute an ability that is not ingrain-coded in its template or prototype, well one thing is that we can create a new function that will do that and coded on its template (prototype), or if you want all instances of this specific Object to have this ability then you code it in the “Global Prototype of the Object”

  • Every JavaScript object has a prototype. The prototype is also an object.
  • All JavaScript objects inherit their properties and methods from their prototype

In the following example we want to create a new Method (ability) in the “Array-Object-Prototype” so all instances can use it:

Not all Object-Prototype are created equal, see this two variations.

A Function’s prototype: is the object instance, that will become the prototype for all objects created using this function as a constructor.

An Object’s prototype: is the object instance form which the object is inherited.

In the following example we console.log the prototype from a function and an object:

The prototype properties are borrow from its parent, so the instance property supersedes the prototype property. PS: LINK



in this case, means share an object that has: “Functions & Values” with another object that can use those “Functions and Values”.  doing so we don not need to define the same Functions over and over fore every object.



Category: JS | Comments Off on JS Prototype

JS Functions

This are the Verbs that make the action happen on JS, and are one of the fundamental building blocs in JS. to use a function you must define it somewhere in the scope from which you wish to call it, now lest see some examples on how this works.

Definition and use:

Functions inside Arrays

Functions inside Objects

Two Different ways to declare a Function???

Not Really, One is call: Function Expression and the other is Function Declaration Statement, the main difference that function expressions are not hoisted:

           Function expression hoisting

Function expressions in JavaScript are not hoisted, unlike function declarations. You can’t use function expressions before you declare them:


higherorder function

In mathematics and computer science, a higherorder function (also functional,functional form or functor) is a function that does at least one of the following:

  • Takes one or more functions as arguments (i.e., procedural parameters)
  • Returns afunction as its result.

Functional Programming:

In computer science, functional programming is a programming paradigm “style” of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.

Basically is a style, that when we need to create a BIG program that does several little things, we create a Little-Function that does each of those little thing lest call them Minion-Functions, we also create another Master-Function that decided which of the little ones to use, if we need to add one more feature to the Big program we only create a new little Minion Functions, and when we need to change the process on one of the already created little Minion Function we edit that little one and nothing else.  this is a very basic explanation if you wan to understand better: Link1  –  Link2  –  Link3  –  Link4

Nested Functions


A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.   To get a better understanding please read my Blog-Post:  Closures.

JavaScript Built-In Functions

JavaScript is a language, and like other languages it has words that have deeper meaning, one example is:

We do not say: “I took, chew, swallow, and ingest bite by bite that Hamburger”

We usually say: “I ate that Hamburger”


In javaScript we also have some words that have a more deep meaning, and in some cases they can take a parameter, process it, and provide a different product, some of this are call Build-In Functions;

here is a list of some of those functions: JavaScript Build-In Functions.


ES6 Functions

Here we have the fat arrow way to write functions.

we have new functionality like default value in parameters when parameters are not passed.

When passing parameters, remember ” Undefined “ will trigger the default value but ” Null “ is a valid parameter value and will not make use of the default parameter value.



Category: JS | Comments Off on JS Functions

Object JS

This is one of those times when JavaScript can trow a curb-ball with the addition of “Homonyms” to the language, because the word “Object” can mean other things in the JavaScript language, now lets see how we can initialize and utilize them.

Object Initialization:

MDN-1   —   MDN-2

Other methods to Create Objects:


Manipulation: Access, change, Add, Delete.

Combine AKA Merge, objects:


Object Properties


Loopint to Pringint Information of Array

Keys or Values to Array



Object to –> “Two-Dim Array” .entries()


Bank Account Object Example

Using a function inside or an Object is so common practice that even have a name: “METHOD”

Is Key on the Object?

In this case we have an object “CustomeData” and we want to know if the Key :  var = firstName => (the Name of the Customer), is one of the keys in the Object:

GitHub Problems with related information

Given a string, “countWords” returns an object where each key is a word in the given string, with its value being how many times that word appeared in th given string: LINK to CODE



Category: JS | Comments Off on Object JS

JS – Arrays

One of the most Useful tools that you can find on the tool-box, this is basically a collection of elements, in a variable, imagine a box with subdivisions and index numeration that goes from “0” up to the number of items -1. One place to get good information is the Mozilla Developer Network.

For more METHODS check this Link of the Array.prototype

Article with the: “Most useful ja Array Functions


In JavaScript we use “Sparse Arrays” In computer science, a sparse array is an array in which most of the elements have the default value (usually 0 or null). The occurrence of zero-value elements in a largearray is inefficient for both computation and storage. An array in which there is a large number of zero elements is referred to as being sparse.

One property is that we can have empty elements in between, Elements.

and because this is an Object and the .length is a property you can set it to be what you want with arr.length = 4;  if the number is bigger will create empty container, if is shorter it will delete.

And we can observe the following characteristics:


Initialize Arrays


Testing Array

* If there is no property at the key, it should return an empty array.
* If the property at the given key is not an array, it should return an empty array.
* If the array is empty, it should return an empty array.



Creates an Array from a String base on the Parameter that you provide.





Access & Modify

Access & Modify


pushing multiple elements




delete array[x]

This will leave “undefined” in the places where the items were delete, this is good if you want to keep the “array.length“, but if you really want to delete those items and modify the “array.length” use “arr.splice(x, y)

Remove Undefined values from array:



toString()   —    .replace(/x/g, “y”)


It gives a string representation of the Array, including comas. But you can chose any other separator:    arr.join(” | “);  or nothing at all:  arr.join(“”);

1 Dimensional Array to 2 Dimensional array