reading-notes

201_Read_02

These Topics Matters Because

it’s vital to understand how HTML, CSS, and JS interact and with eachother and what can each individually do.

Intro to HTML

Links to tutorials and challenges.

Text Fundamentals

Headings and paragraphs exist in most pieces of writing and exist to give readable content structure and be able to easily discern different sections of what is being read.

Paragraphs are wrapped in <p> elements.
Headings stand out by being wrapped in <h#> elements. Replacing the number sign (#) with the corresponding number (1-6).

Having a structured site allows the user to easily scan the page for relevant content. Also, useful for search indexes to be able to pull content and categorize important keywords. Increasingly helpful for screen readers and accessibility software. Useful when utilizing CSS/JS to target specific elements.

Semantics are key to have, as their inclusion allows a developer to know what an element is expected to do/output. Easier on the developer as well as it saves keystrokes for not having to style individual/generic elements (<span> or <div>) to match desired styling/format.

Adv. Text Formatting

Blockquotes are specified by using the <blockquote> element and citing the source with the cite attribute.
Inline quotes are done very similar, they however use the <q> element within the parent element, whereas the <blockquote> element is the parent element. Also citing as an attribute in the opening tag.

<abbr> is used to represent abbreviations or acronyms.

To represent contact information, the <address> element is used to wrap content.

Superscript and subscript is represented by <sup> and <sub> respectively.

Time and date is specified with the <time> element.

Various elements can be used to represent computer code, such as:

  1. Why is it important to use semantic elements in our HTML?
    • Important to use semantics to have an idea what the code will be used for, for accessibility compatibility and ease of use, and to make the developers life easier.
  2. How many levels of headings are there in HTML?
    • 6 levels of headings, try not to use them all and keep the hierarchy order in mind when using.
  3. What are some uses for the <sup> and <sub> elements?
    • Formulas, numbers, dates, math in general.
  4. When using the <abbr> element, what attribute must be added to provide the full expansion of the term?
    • title.

Learn CSS

How is CSS structured

CSS can be used one of three ways.
Best practice is to link an external .css file within <head> element using th <link> element, but you may also choose to write out all the rules used on that one page in the <head> element with the <style> element. Last choice is if you want to style just one, single element, you may choose to style it by using the <style> attribute in the opening tag. A benefit of linking an external style sheet is that one sheet can be used for multiple pages, if need be.

Various selectors exist that dictate which HTML element will be style, such as:

Functions can also be used in CSS rules to further add and modify the styling of an element/selector.

Shorthand properties save keystrokes as they allow to set various values within one line.

  1. What are ways we can apply CSS to our HTML?
    • Linking externally, writing internally or inline.
  2. Why should we avoid using inline styles?
    • Bad practice and makes editing more difficult.
  3. Review the block of code below and answer the following questions:
    • What is representing the selector?
      • <h2>
    • Which components are the CSS declarations?
      • the code inside{}, color: black; is one declaration and padding: 5px; is the second declaration.
    • Which components are considered properties?
      • the characteristic that is going to edited. color or padding.

Learn JS

JavaScript basics

Through the use of APIs, we as developers are able to further add functionality to a website and as users, are allowed to interact and manipulate various parts of the site, browser, and programming environment. APIs are built on top of the existing JS language. Usually coupled with Events, which are just that, things that happen within the browser. An event is an indicator for something to start running or happen.

  1. What data type is a sequence of text enclosed in single quote marks?
    • string
  2. List 4 types of JavaScript operators.
    • Arithmetic, assignment, comparison, logical.
  3. Describe a real world Problem you could solve with a Function.
    • Washing dishes..? if there are dishes in the sink, begin washing them. Soap up sponge or brush, scrub, rinse, and set to dry.

Making decisions in code - conditionals

  1. An if statement checks a condition and if it evaluates to true, then the code block will execute.
  2. What is the use of an else if?
    • When there is more than two choices; not black or white choice; a yes or no answer.
  3. List 3 different types of comparison operators.
    • Greater than or less than > <
    • Strictly equal or not equal === !==
    • Less than/greater than or equal to <= >=.
  4. What is the difference between the logical operator && and ||?
    • && AND, combines expressions and both must be true for entire expression to be true.
    • || OR, combines expressions and at least one must be true.

Review - git commits

Keep messages short and sweet; the more straight to the point, the better while still including relevant info.
A clean log is a better log to review.
Might be a good idea to have a format / style as to how to write commit messages and what to include in them.

Things I Want To Know More About