HTML Lists, Control Flow with JS, and the CSS Box Model
Lists
- Numbered lists
- Bullet lists
- Definition lists
HTML provides three different types: of lists:
- Ordered Lists:
are lists where each item in the list is numbered.
- Unordered Lists:
are lists that begin with a bullet point
- Definition lists:
are made up of a set of terms along with the definitions for each of those terms.
Ordered Lists
<ol>
The ordered list is created with
the <ol> element.
<li>
Each item in the list is placed
between an opening <li> tag
and a closing </li> tag.
Unordered Lists
<ul>
The unordered list is created with the <ul> element.
<li>
Each item in the list is placed between an opening <li> tag and a closing </li> tag.
Definition Lists
<dl>
The definition list is created with the <dl> element and usually consists of a series of terms and their definitions.
<dt>
This is used to contain the term being defined (the definition term).
<dd>
This is used to contain the
definition.
Nested Lists
You can put a second list inside an <li> element to create a sublist or nested list.
Boxes
- Controlling size of boxes
- Box model for borders, margin and padding
- Displaying and hiding boxes
Box Dimensions
width, height
By default a box is sized just big enough to hold its contents.
To set your own dimensions for a box you can use the height and width properties.
And there are Three ways to specify the size:
- Pixels
- Have been the most popular method because they allow designers to accurately control their size.
- Percentages
- The size of the box is relative to the size of the browser window or, if the box is encased within another box
- ems
- The size of the box is based on the size of text within it.
> `Designers have recently started to use percentages and ems more for measurements as they try to create designs that are flexible across devices which have different-sized screens.`
## **Limiting Width**
## *min-width, max-width*
## **Limiting Height**
## *min-hight, max-hight*
## **Overflowing Content**
## *overflow*
# **Border, Margin & Padding**
## **Border Width**
## *border-width*
## **Border Style**
## *border-style*
## **Border Color**
## *border-color*
## **ShortHand**
## *border*
## **Padding**
## *padding*
## **Margin**
## *margin*
## **Centering Content**
## **Change Inline/Block**
## *display*
## **Hiding Boxes**
## *visibility*
# Summary
## BOXES
- CSS treats each HTML e XX lement as if it has its own box.
- You can use CSS to control the dimensions of a box.
- You can also control the borders, margin and padding
for each box with CSS.
- It is possible to hide elements using the display and
visibility properties.
- Block-level boxes can be made into inline boxes, and
inline boxes made into block-level boxes.
- Legibility can be improved by controlling the width of
boxes containing text and the leading.
- CSS3 has introduced the ability to create image
borders and rounded borders.
# ***Programming with JavaScript***
## **Decisions and Loops**
## **Comparison Operators:**
Evaluate a situation by comparing one value in the script to what you expect it might be. The result will be a Boolean: True or false.
- Is equal to **==** compares two values to check if they are the same
- Is not equal to **!=** compares two values to check if they are not the same
- Strict equal to **===** compares two values to verify that both the value and the data type are the same
- Strict not equal to **!==** compares two values to verify that both the value and the data type are different
- Greater than: 8 **>** 3 returns true
- Less than: 5 **<** 9 returns true
- Greater than or equal to **>=**
- Less than or equal to **<=**
_____________________________________________________________
## **Logical Operators**
The operators used to return the result of multiple comparison operators
**((5 < 12) || (8 >= 2))**
- Logical AND **&&**
- Logical OR **||**
- Logical NOT **!**
______________________________________________________________
## **Loops**
A loop is block of code that will keep running as long as the condition is true. The most common types of loops are:
- **For loop**; used when the code has to run specific number of times. It uses a counter as a condition
- **While loop**; used when the number of repetitions is unknown
- **Do while loop**; the fundamental difference between this loop and while loop is that the code will run at least once even if the condition evaluates to false
** A for loop consists of variable initialization, condition, and update.
***Example***
Loop through the indices of an array to collect the car names from the cars array:
>var cars = ["BMW", "Volvo", "Saab", "Ford"];
v/ar text = "";
var i = 0;
while (i < cars.length) {
text += cars[i] + "
";
i++;
}