Skip to content

Latest commit

 

History

History
92 lines (68 loc) · 4.51 KB

201-class02.md

File metadata and controls

92 lines (68 loc) · 4.51 KB

Class 201.01

Read 02

This topic matters because these are foundational elements to web development.

Introduction to HTML

  1. Why is it important to use semantic elements in our HTML?

semantics give the humans reading our code (and indeed scrapers) an intuitive understanding about what data is being displayed, and how/where to find it.

  1. How many levels of headings are there in HTML?

There are six, and no more than 3 different headings are recommended per page. One should use them in the correct order too (i.e. h2 always comes before h3)

  1. What are some uses for the <sup> and <sub> elements?

<sup> is a superscript E = mc2 <sub is a subscript H2O

  1. When using the <abbr> element, what attribute must be added to provide the full expansion of the term?

the <title> attribute should be used to convey the full meaning of the term that you're abbreviating.

Learn CSS

  1. What are ways we can apply CSS to our HTML?
  • external stylesheet: referencing a .css file using <style> in the <head> section.
  • internal stylesheet: css code written in the HTML file, using the <style> element, also within the <head> section.
  • inline: you add the attribute directly in the element itself, as follows: <p style="color:red;">This is my first CSS example</p>
  1. Why should we avoid using inline styles?
  • it's inefficient for maintenance, and difficult to read/understand.
  • it might only be used when using a CMS or other system that doesn't let you add a CSS file, or alter the internal ss.
  1. Review the block of code below and answer the following questions:
        h2 {
          color: black;
          padding: 5px;
        }
    1. What is representing the selector?
    • The selector is represented by h2
    1. Which components are the CSS declarations?
    • when a property is paired with a value, that makes it a CSS declaration. The CSS declarations here are color: black and padding: 5px.
    1. Which components are considered properties?
    • color and padding

Learn JS

Javascript Basics

  1. What data type is a sequence of text enclosed in single quote marks?
  • this is a string
  1. List 4 types of JavaScript operators.
  • Arithmetic operators (+, -, *, /, %)
  • Assignment operators (=, +=, -=)
  • Comparison operators (==, ===, !=, !==, <, >, <=, >=)
  • Logical operators (&&, ||, !)
  1. Describe a real world Problem you could solve with a Function.
  • one could calculate the cost of all the items within a shopping cart (e.g. calculateTotalCost())

Making Decisions In Your Code – Conditionals.

  1. An if statement checks a __ and if it evaluates to ___, then the code block will execute.

conditional statement, True

  1. What is the use of an else if?

if the previous conditional statements are not true, then more conditional statements are tested.

  1. List 3 different types of comparison operators.

I'm listing 4 so that I remember this for later:

  • Equality Operator (==): Checks if two values are equal, irrespective of their data types. For example, 4 == "4" would be true.
  • Strict Equality Operator (===): Checks if two values are equal in both value and data type. For example, 4 === "4" would be false.
  • Inequality Operator (!=): Checks if two values are not equal; only the values not the data types. So, 4 != "4" would be false.
  • Strict Inequality Operator (!==): Checks if two values are not equal; the values AND the data types. So, 4 !== "4" is true.
  1. What is the difference between the logical operator && and ||?
  • && (AND): returns TRUE if all conditionals are also true. One False and the whole thing returns FALSE.
  • || (OR): only one TRUE needs to be returned for the OR to return a TRUE. If there are no TRUE's, then a FALSE is returned.

Things I want to know more about/want to remember

  • CSS orders things based on cascading(i.e. order) and specificity
    • do if I define a p tag with two colors, the second color will be in effect (so last one defined "wins")
    • specificity goes like this general > class > id
  • one can actually call functions in CSS (check this link out for an example). Examples include calc() and rotate()
  • when using git commit always include a message that is useful. How is something useful? Well, don't say WHAT you changed something, say WHY you changed it.
    • also use a Subject and Body of message to convey more complex commits.

Q&A's