HTML Lists, Control Flow with JS, and the CSS Box Model

Chapter 3 “Lists” ::

We have 3 types of lists :
1. Unordered List <ul> use bullets.
2. Ordered List <ol> use numbers.
  - Each type should include <li> to write each partition of this list,
  - You can put a several lists inside them by open new list tag and <li> tags and then close it and continue with the first list.
3. Definition Lists : contain <dl> to create or start the definition list ,<dt> create the definition term ,<dd> contain the definition data.

Chapter 13 “Boxes” ::

every box has a width and height proparties, by default the size of box just big enough to hold its contents.
to determine the size of box you can use:
1. pixels(px)pixels have been the most popular method because they allow designers to accurately control their size.
2. persentage (%) the size of the box is relative to the size of the browser window.
3. ems the size of the box is based on the size of text within it.
you can limiting width by using min-width specifies the smallest size a box can be displayed at when the rowser window is narrow, max-width indicates the maximum width a box can stretch to when the browser window is wide. and the same thing with min-height,max-height .
Overflowing Content: The overflow property tells the browser what to do if the content contained within a box is larger than the box itself. It can have one of two values:
1. hidden This property simply hides any extra content that does not fit in the box.
2. scroll This property adds a scrollbar to the box so that users can scroll to see the missing content.
Border: The border separates the edge of one box from another, they have a severl values to border-width : thin,meduim,thick or write the width in numbers in pixel , you can controlling the width of each side border-top-width: vlaue and the same thing with other sides .border-style to control the style (solid,dotted,…) , and border-color to determine the color. also you can write all of them in one line by border : width style colorfor example border: 2px solid black .
Margin : the distance between the border and other box betwwen , you can controled the marign-top , margin-left , .. the same thing to other sides.( If you want to center a box on the page you can set the left-margin and right-margin to auto.)
Padding : the distance between the content and the border,you can controled the padding-top ,.. to other sides.
all of margin ,border, padding will adding to the size of box.
displye values : inline , block , inline-block , none.
visibility :The visibility property allows you to hide boxes from users but It leaves a space where the element would have been.
1. hidden :This hides the element.
2. visible :This shows the element.
box-shadow The box-shadow property allows you to add a drop shadow around a box.
1. Horizontal offset :Negative values position the shadow to the left of the box.
2. Vertical offset:Negative values position the shadow to the top of the box.
3. Blur distance:If omitted, the shadow is a solidline like a border.
4. Spread of shadow :If used, a positive value will cause the shadow to expand in all directions, and negative value will make it contract.
border-radius The value indicates the size of the radius in pixels. You can specify individual values for each corner of a box using border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-top-left-radius.
To create more complex shapes, you can specify different distances for the horizontal and the vertical parts of the rounded corners for example border-radius: 80px 50px;

JavaScript Book

Basic JavaScript Instructions

Chapter 2 “Creating an array” ::

You create an array and give it a name just like you would any other variable (using the var keyword followed by the name of the array). The values in the array do not need to be the same data type,so you can store a string, a number and a Boolean all in the same array. var array_name=['Sohaib',24,true,1.77];.
Values in an array are accessed as if they are in a numbered list. It is important to know that the numbering of this list starts at zero (not one).
Each item in an array is automatically given a number called an index. This can be used to access specific items in the array.
To retrieve the third item on the list, the array name is specified along with the index number in square brackets. array_name[2] . also you can change the vlaue of the third item by array_name[2]=new value.
Each array has a property called length, which holds the number of items in the array array_name.lenght().

Chapter 4 “Decisions and Loops” ::

A switch statement starts with a variable called the switch value. Each case indicates a possible value for his variable and the code that should run if the variable matches that value.

data types :

NaN is a value that is counted as a number. You may see it when a number is expected, but is not returned, e.g .. (‘ten’ /2) results in NaN.
Due to type coercion, every value in JavaScript can be treated as if it were true or false; and this has some interesting side effects.
1. Falsy values are treated as if they are fa 1 se. The table to the left shows a hi ghScore variable with a series of va lues, all of which are falsy.Falsy values can also be treated as the number 0 .
2. Truthy values are treated as if they are true. Almost everything that is not in the falsy table can be treated as if it were true. truthy values can also be treated as the number 1.

Loops :

loops check condition if it’s True run the code inside { } if false skip the code inside { } .

FOR if we have a specific times of times . should determine the counter , the stop condition , update the counter .for ( var i=0 ; i<5 ; i++){ block of code }.
While if we don’t know the times of repeating the code and we have a condition ` while(condition){ block of code }`.
Do While if we need to run the code at least one time and then check the condition do {block of cade }while(condition)

Github Profile

reading-notes

this repo will contain my readings from Code102 & Code201