CSS

• WEB CONCEPTS

• CSS Box Model: illustrates the space and boundary properties of an HTML element that can be controlled using CSS.

• CSS SKILLS

• border: sets the outline of an HTML page element, like a picture frame that contains the element.

• padding: sets the amount of space between an element's content and its border.

• margin: sets the amount of space between an HTML element and the next nearest element(s).

• display: property that determines how the selected element will be arranged in relation to other HTML elements on the page.

• inline: display value used to arrange HTML elements on the same line as neighboring elements.

• flex: display value that allows us to easily align multiple page elements vertically or horizontally.

• float: property used to float HTML elements left or right of neighboring elements.

• position: property used to position HTML elements in exact locations on a webpage.

image.png

In the diagram, observe the following:

1. Bootstrap's grid columns are represented by 12 vertical bars. The boxes represent HTML elements.

2. The words "container", "jumbotron", "col-sm-6" and "col-sm-3" refer to Bootstrap classes.

3. The element with class "jumbotron" spans the entire width of the webpage, beyond the borders of the grid.

4. Elements inside the second "container", such as "col-sm-6" and "col-sm-3" are contained within the grid columns.

5. Elements labeled "col-sm-3" take up three grid columns; elements labeled "col-sm-6" take up six grid columns.

Review Variables
Nice work! This lesson covered a lot of foundational skills that you will often use in your future programming endeavors.

Let's review what we learned:

Variables hold reusable data in a program.

• JavaScript will throw an error if you try to reassign const variables.
• You can reassign variables that you create with the let keyword.
• Unset variables store the primitive data type undefined.
• Mathematical assignment operators make it easy to calculate a new value and assign it to the same variable.
• The + operator is used to interpolate (combine) multiple strings.
• In JavaScript ES6, backticks (`) and ${} are used to interpolate values into a string.