reading-notes

Class 201.03

Class Notes

• readings:
  • HTML: ordered and unordered lists,
  • CSS: box model,
  • Javascript: Arrays, Expressions and Operators, Conditionals, Loops,
• HTML
  • Every HTML Element rendered in the browser has a box. The box has 4 layers
    • the size of the box
    • Padding - the space around the content, going all the way to the border
    • Border - by default elements don’t have a border, but you can add this between the padding and margin
    • Margin - outermost layer, provides space between the border of the content and any sibling HTML elements
• CSS:
  • height: 10vh is 10% of the veritcal height
  • height: 10vw 10% width = height: 10% 10% of the height of the parent
  • all the above are responsive
• 5 immutable data types:
  • Strings:
  • Numbers: any numerical value (fractions, decimals, integers, floats)
  • Boolean: True/False
  • Null: variable hasn’t been called yet, so when you see this, I might be calling it too soon.
  • Undefined: forgot to define a variable

• to append something to an array use the push method: myArray.push(variable)

• User Stories are presented as As a __, I want __, so that____

Read 03 Questions

This section is important as it’s expanding on our understanding of the fundamentals of layout, design and data types.

Learn HTML

1. When should you use an unordered list in your HTML document?

   • When you want to group a collection of items that do not have a numerical ordering, and their order in the list is meaningless.

2. How do you change the bullet style of unordered list items?

   • One can nest bulleted points, or one can use the CSS, specifically the list-style-type property.

3. When should you use an ordered list vs an unorder list in your HTML document?

   • Ordered list: when you’ve got a list where the order of the questions matter. Unordered list when it doesn’t matter.

4. Describe two ways you can change the numbers on list items provided by an ordered list?

   • One can also use the CSS property list-style-type(e.g. decimal, lower-alpha, lower-roman, upper-roman). One can use the type attribute (e.g. type="lower-roman").

Learn CSS

1. Describe the CSS properties of margin and padding as characters in a story. What is their role in a story titled: “The Box Model”?

   • Margin is the warm embrace around a box, and ensures it doesn’t need to get too close to other. Padding is a supporting character that adds the cushioning within the box. Together, they are going to help the Box take over the world!

2. List and describe the four parts of an HTML elements box as referred to by the box model.

   • Content box: The area where your content is displayed; size it using properties like inline-size and block-size or width and height.
   • Padding box: The padding sits around the content as white space; size it using padding and related properties.
   • Border box: The border box wraps the content and any padding; size it using border and related properties.
   • Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties.

Learn JS

1. What data types can you store inside of an Array?

   • any type of data type can go into an array

2. Is the people array a valid JavaScript array? If so, how can I access the values stored? If not, why?

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

   • Yes, this is a valid array. It’s an array of array’s in fact.
   • You’d have to first access which array (0, 1, or 2), and then the element within that array. e.g. people[2][2] is artist.

3. List five shorthand operators for assignment in javascript and describe what they do.

   • x += 1 (increments x by 1)
   • x -= 1 (decrements x by 1)
   • x *= 2 (multiplies x by 2)
   • x /= 2 (divides x by 2)
   • x %= 3 (x becomes the remainder of prev value of x/3)

4. Read the code below and evaluate the last expression and explain what the result would be and why. ```javascript let a = 10; let b = ‘dog’; let c = false;

// evaluate this (a + c) + b; ```

• 10dog

1. Describe a real world example of when a conditional statement should be used in a JavaScript program.

   • Check to see if the users cart is empty or not when they click “Checkout”

2. Give an example of when a Loop is useful in JavaScript.

   • Maybe we want to loop until the user enters a valid response.

Q&A’s

This site is open source. Improve this page.