My reading notes journal for Code Fellows
In CSS we broadly have two types of boxes — block boxes and inline boxes. The type refers to how the box behaves in terms of page flow and in relation to other boxes on the page. Boxes have an inner display type and an outer display type.
In general, you can set various values for the display type using the display property, which can have various values.
If a box has an outer display type of block, then:
The box will break onto a new line. The width and height properties are respected. Padding, margin and border will cause other elements to be pushed away from the box. The box will extend in the inline direction to fill the space available in its container. In most cases, the box will become as wide as its container, filling up 100% of the space available. Some HTML elements, such as <h1> and <p>, use block as their outer display type by default.
If a box has an outer display type of inline, then:
The box will not break onto a new line. The width and height properties will not apply. Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box. Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box. Some HTML elements, such as , , and use inline as their outer display type by default.
Boxes also have an inner display type, which dictates how elements inside that box are laid out.
Block and inline layout is the default way things behave on the web. By default and without any other instruction, the elements inside a box are also laid out in normal flow and behave as block or inline boxes.
You can change the inner display type for example by setting display: flex;. The element will still use the outer display type block but this changes the inner display type to flex. Any direct children of this box will become flex items and behave according to the Flexbox specification.
When you move on to learn about CSS Layout in more detail, you will encounter flex, and various other inner values that your boxes can have, for example grid.
JavaScript has both binary and unary operators, and one special ternary operator, the conditional operator. A binary operator requires two operands, one before the operator and one after the operator:
operand1 operator operand2 For example, 3 + 4 or x * y. This form is called an infix binary operator, because the operator is placed between two operands. All binary operators in JavaScript are infix.
A unary operator requires a single operand, either before or after the operator:
operator operand operand operator For example, x++ or ++x. The operator operand form is called a prefix unary operator, and the operand operator form is called a postfix unary operator. ++ and – are the only postfix operators in JavaScript — all other operators, like !, typeof, etc. are prefix.
An assignment operator assigns a value to its left operand based on the value of its right operand. The simple assignment operator is equal (=), which assigns the value of its right operand to its left operand. That is, x = f() is an assignment expression that assigns the value of f() to x.
There are also compound assignment operators that are shorthand for the operations listed in the following table:
Name Shorthand operator Meaning Assignment x = f() x = f() Addition assignment x += f() x = x + f() Subtraction assignment x -= f() x = x - f() Multiplication assignment x *= f() x = x * f() Division assignment x /= f() x = x / f() Remainder assignment x %= f() x = x % f() Exponentiation assignment x **= f() x = x ** f() Left shift assignment x «= f() x = x « f() Right shift assignment x »= f() x = x » f() Unsigned right shift assignment x »>= f() x = x »> f() Bitwise AND assignment x &= f() x = x & f() Bitwise XOR assignment x ^= f() x = x ^ f() Bitwise OR assignment x |= f() x = x | f() Logical AND assignment x &&= f() x && (x = f()) Logical OR assignment x ||= f() x || (x = f()) Logical nullish assignment x ??= f() x ?? (x = f()) Assigning to properties If an expression evaluates to an object, then the left-hand side of an assignment expression may make assignments to properties of that expression. For example:
const obj = {};
obj.x = 3; console.log(obj.x); // Prints 3. console.log(obj); // Prints { x: 3 }.
const key = “y”; obj[key] = 5; console.log(obj[key]); // Prints 5. console.log(obj); // Prints { x: 3, y: 5 }.