reading-notes

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

Learn HTML

  1. Unordered Lists (<ul>) Use an unordered list when you need to group a collection of items that do not require a numerical order and where the specific sequence of the items is meaningless.

  2. Changing Bullet Styles The modern and recommended way to change the bullet style is by using the CSS list-style-type property.
    • Supported Styles: Common styles include disc, circle, and square.
    • Note: While HTML previously used a type attribute for this, it is now deprecated in favor of CSS.
  3. Ordered vs. Unordered Lists
    • Ordered List (<ol>): Use for sequences where the order matters, such as recipe steps, turn-by-turn directions, or ingredients listed by decreasing proportion.
    • Unordered List (<ul>): Use for simple collections, such as a shopping list, where items can be rearranged without changing the meaning.

  4. Customizing Ordered Lists You can customize markers using these attributes:

    Method Description
    The type Attribute Sets the numbering type (e.g., 1 for numbers, a for letters, I for Roman numerals).
    The start Attribute Specifies the integer to start counting from (e.g., start="4" to begin with “d” or “iv”).

Learn CSS

  1. The Box Model Concept In CSS, every HTML element is treated as a distinct box. Understanding how its components interact is essential for building layouts.

    • Padding (The Protective Interior): The internal cushion between the content and the border. Background colors or images appear behind the padding.
    • Margin (The Social Distancer): The invisible barrier outside the border that pushes other boxes away. Margins can be negative and are not part of the box’s actual clickable size.

  2. Four Parts of the Box Model

    • Content Box: The innermost area where text or images appear.
    • Padding Box: The whitespace immediately surrounding the content.
    • Border Box: The layer wrapping the padding and content.
    • Margin Box: The outermost layer acting as whitespace between elements.

JavaScript Fundamentals

  1. Data Types in Arrays Arrays are “list-like objects” that store multiple values. You can store any data type (strings, numbers, booleans, objects, etc.) and even mix different types within the same array.

  2. The people Array Analysis const people = [['pete', 32, 'librarian', null], ['Smith', 40, 'accountant', 'fishing:hiking:rock_climbing'], ['bill', null, 'artist', null]];

    • Validity: Yes, this is a valid multidimensional array (an array of arrays).
    • Accessing Values: Use chained bracket notation array[outer_index][inner_index].
      • To get ‘pete’: people[0][0]
      • To get ‘accountant’: people[1][2]
    Variable Outer Index Inner Index Result
    people [0] [1] 32
    people [1] [0] 'Smith'
    people [2] [3] null
  3. Assignment Shorthand Operators
    • += (Addition): x = x + y
    • -= (Subtraction): x = x - y
    • *= (Multiplication): x = x * y
    • /= (Division): x = x / y
    • %= (Remainder): x = x % y
  4. Evaluating the Expression Given let a = 10;, let b = 'dog';, and let c = false;:
    • Expression: (a + c) + b
    • Result: '10dog'
    • Reasoning: JavaScript converts false to 0 during addition, so 10 + 0 = 10. Then, it concatenates the number 10 with the string 'dog'.
  5. Conditional Statements Used for decision-making based on specific criteria.
    • Real-world example: User Authentication. If the password is correct, grant access; else, show an error message.
  6. Loops Useful for rapidly completing repetitive tasks without writing redundant code.
    • Example: Iterating through a list of 100 products to display them on a webpage or drawing 100 random shapes on a digital canvas.