IPND, Three Days or Bust - Finishing Project 1

It's a bright and beautiful morning. Enjoyed a relaxing child-free evening and am ready to take on today. Starting things off properly with a hearty breakfast; brain power is important, and I'll be pushing through Project 1. I like that the nanodegree prompts note taking. Studies have shown that to be a powerful part of learning...

Saturday, 7/18/15 8:38 am 

An overview of CSS

CSS is code written to control the style of HTML elements

Cascading Style Sheets

Style can refer to elements, attributes, the general look of a page or a verb. i.e. "I must style this page."

Rule: a line of CSS code describing the value that a certain attribute should take

Property: The property you want to change

Value: The value that you want to assign to the attribute

Selector: The name that you use to in order to target the elements that are assigned to a class or id attribute in the HTML

Class: A class refers to a group of elements that can be styled together. Class names should not contain periods or any other punctuation marks such as class="1.1"

ID: ID's are unique identifiers that uniquely identifies an element in HTML

Best practice for linking CSS to HTML: Link the CSS in the head of the document. (Style commands can also be inserted directly into the HTML, usually for web optimization purposes, but that's a more advanced subject.

<link rel="stylesheet" href="main.css">

Inline style looks something like:

<div style="background-color: red; color: white">

</div>

Excellent discussion on Divs, Spans, Classes here: https://discussions.udacity.com/t/stage-1-webcasts/16000

Important notes on "Boxes" in HTML elements

  1. HTML elements are boxes and each box has 4 components
  2. Getting boxes 'just right' can be challenging
  3. Two techniques are available to help with sizing issues
    1. Set sizes in terms of percentages rather than pixels (px)
    2. Set the ```box-sizing``` attribute to ```border-box``` for every element.
      1. ``` * { box-sizing: border-box; } ```
  4. Different browsers work differently. This can act the same code to act different in each browser
    1. Negate that using Reset CSS or NormalizeCSS
    2. http://necolas.github.io/normalize.css/

Box Positioning:

  1. Divs are block elements (as opposed to inline), so by default they take up the entire width of a page.
  2. Adding the rule ```display: flex;``` to the appropriate CSS will override this behavior and let divs appear next to each other.

9:10 am

Code, Test, Refine (The principle behind engineering)

  1. Look for natural boxes
  2. Look for repeated styles & semantic elements
  3. Write the HTML
  4. Apply Styles from Biggest to smallest

Going to dive into creating a table of contents and CSS styles for Stage 1 submission.

9:25 am

HTML looks good, time to start Styling..

10:33 am

Finished up CSS. Looks good. Brief interruption and twenty minutes uploading to GitHub (my Git skills are still in the early ability stages) and ready to submit Project 1. Woot Woot!

On to Stage 2: Automate Your Page

11:19 am