IPND in Three Days or Bust - Project 2

Project 2 involves creating some Python code to generate html for me. This sounds exciting. I've only played around with Python a handful of times so this will be new territory for me. Very exciting!

11:22am

Python code is saved with the extension of .py

Running Python on a Mac is super simple. Open the terminal and type "python" press return and bam. Python running on the mac. To write code that you can save simply open your favorite IDE (I like atom 1.0 or sublime 3) and save your file with extension .py.

In Project 2 I'll learn how to use variables effectively and how to write functions to do repetitive work...we'll let's say review. I've been here before.

Informed it's time to clean the house...this may take awhile..

11:33 am

Back in the seat! 1:10 pm

Working through Introduction to Computer Science courses. I've taken this course in the past. Dave breaks down the basics into very simple concepts. In my experience, Udacity courses have been spot-on about 95% of the time. 

Computers enable making repetitive steps at incredible speeds. 

Some examples of the methods of thinkings:

Procedural thinking...follows instructions in code

Technological empathy as to how the computer interprets the code

Abstract thinking when conceptually understanding that a Python program, Python interpreter and web browser are different versions of the same thing (a program).

Natural languages can be full of ambiguity and verbosity. Computer programs must be precise and concise. This is why computer languages exist and computers do not operate in English or Mandarin or some other human language.

However, Python and other programming languages have grammar rules that must be followed. We call that syntax.

Backus-Naur Form helps humans write in language that computers can interpret. 

Expression is something that has a value. Python follows the grammatical structure of Arithmetic expressions is Expression Operator Expression

On to Stage 2: Work Session 1

1:36 pm

Pulled away again right after last post...Back on for another three hours of uninterrupted study time. Had to pick up The Revivalists new Album Men Amongst Mountains, first though. Just released yesterday. I've been listening to these guys nonstop and have to support them on their debut weekend.

Back to the Mighty Python...3:27 pm

Wrapped up 2.1 and the work session 1 with some syntax quizzes in Python. Moving on to 2.2 Variables and Strings

So, now we're talking about variables. A Variable is an assigned expression that can be changed.

An Assignment Statement i.e. Name = Expression, assigns an expression to a variable.

Moving on to strings. Strings can be printed using " " or ' ', double or single quotes. Strings can be concatenated with the operator +.

Strings can be sequenced using square brackets [].

Strings are 0-based so that the first letter begins at the number 0 and moves forward from there. For example:

name = JP
print name[0]
will print J

You can also print a range of letters using the colon : as in 

print word[3:6] this will print the fourth to the sixth letters in the word. Remember, strings are 0-based so the first letter is counted as zero. Negative numbers can be used in the square brackets. Negative numbers count from the end of the string.

Words in strings can be found using the method .find. 

string.find('word-in-string') will print the character at which the search term begins.

A return of -1 means that the string was not found.

Strings are case sensitive.

4:05 pm

More vocab:

Parameters are values or numbers that go inside parentheses. Parameters can help you find specific points within a string...in the case of finding strings. They have other uses too..Specifically with the .find method the first parameter will be a letter or phrase and the second parameter can be a number. This number tells the method at which character it should begin looking for the first parameter.

Wrapped up 2.2 looking at how these parameters effect strings.

4:17 pm

On to Stage 2: Work Session 2..

Apparently triple double or single quotes can be used to print multiple line strings. That's a new one for me.

Work session 2 involves some fun string .find-ing quizzes

5:02 pm

2.3 moves on to Functions (or procedures). I am constantly misspelling function...not good when working in object oriented programming.

Python functions are linked to the keyword "def" and "return" breaks the function and computes a result..parameters here are called inputs, sometimes parameters are also called operands.

I'm thinking that def stands for defined. So, function defined as...

syntax of a python function looks something like

def functionName(parameter):
return parameter do something

print functionName(value of parameter)

Finished up 2.3 and will go through the next work session before taking a short break.

5:41 pm

The final quiz begins walking your through the process of using Python to create HTML. This is going to be really cool, and it's a skill I can't wait to master. Absolutely brilliant to write a program to create more programs for you. I suppose, though, that this is the idea behind AI technology. Create the AI program and it can create on it's own...but that is for another course, and one that is available on Udacity, as a matter of fact. But that's all for me for about an hour or so.

5:57 pm

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

IPND in three days or bust - Stage1

Made a quick chicken cutlet for dinner and onto the orientation. Very basic entry requirements. Know the internet and interested enough to Google the things you don't know.

5:08 pm

Quick introduction with Miriam - she rocks as a community organizer. Very friendly and makes the nuts and bolts of the nanodegree as easy as possible.

Here's something new, in the forums (does this work in SquareSpace?) enter three backticks ``` and the type of code to create markup...the backtick is by the tilda on the upper left of your keyboard.

```html

<b>mark me up <em>baby!</em></b>

```

guessing that's not going to show as grey-back-field markup...

Accepting the honor code...

5:14 pm

Shout out to Dawoon...All hail...warning to work on the degree a little bit every day (2 hours per day, 10 hours per week). A great blog post on Acing Your Online Course: http://blog.udacity.com/2014/09/top-study-tips-for-online-courses.html

Orientation complete

5:18 pm

Moving forward ...very slowly...Last day of registration. I imagine the Udacity servers are working over-time.

On to How Learning to Code Works

We all begin learning at the stage of complete novice. By the time one is an expert one asks, "Why was this ever hard?" ha! ain't it the truth..

Asked to think of something I'm an expert in...I chose raising a toddler then laughed at myself. That's not true, so I'm settling on changing a diaper. Fairly decent at that task at this point in my life.

Moving through the stages of expertise from Ignorance, awareness, ability to fluency.

Andy speaking on the inevitable frustration of learning to program. #truth Avoid frustration turning into confusion, despair, terror...or other awful emotions. 

Project0 just came back. Reviewed in less than one hour (give or take). That's very awesome, especially for new students completely unfamiliar with coding! Udacity really focuses on their students. I may sound like a fanboy, and I am, but I've also seen the tweaks in the system first hand. This is a very adaptable company and they work hard to give students the best experiences possible.

Finished How Learning to Code Works...now on to Stage1.

5:38 pm

Two reasons why we code, as stated by Andy, and reasons I completely agree with.

For the thrill of writing code to tell a computer what to do and then watching the computer actually do it.

Because we hate repetition

Finished Introduction to Stage1...now on to 1.1 The basics of Web and HTML...this is actually the first lesson with Steve all over again. Great if you're a student who may have got busy for a week and need a refresher. I just completed this so moving on to 1.2

5:50 pm

1.2 Creating a structured document.

Best to work through the videos with the instructors of this piece...

Let's take some notes here:

  1. HTML and CSS (and JavaScript) are programming languages
  2. HTML controls the structure of the Web page
  3. CSS controls the style of the page. Thus Cascading Style Sheets
  4. The DOM or document object model refers to the tree-like structure of a page

Took a quick stand up and sit down break. About 45 minutes left for today's work...

6:14 pm

Basically, HTML is the structure of the website, CSS puts on the color and makes it look pretty, and JavaScript gives the site functionality. The DOM is defined as a cross-platform and language-independent convention for representing and interacting with objects in HTML. The nodes of every document are organized in a tree structure, called the DOM tree.

Favorite word of the day, "Boxify"

laughing out loud, seriously. 6:22

The program recommends Sublime 2, but I've moved onto GitHub's Atom 1.0 now. Open source driven. It's going to surpass Sublime's functionality in a matter of months.

Finished 1.2 and now on to the first work session.

6:31 pm

Added notes to Stage0 html. Wrapping up for a few hours.

7:09 pm

 

This weekend's experiment - IPND in three days or bust - Stage0

Today I embark on an experiment. I've completed the front-end nanodegree with Udacity, but have had no formal computer science training or education in the past. I want to be sure my new career is on a firm foundation, so even if this is a step back, I'm enrolling in the Intro to Programming nanodegree with the goal of completing it over one monster-free weekend.

Wish me luck.

July 17 1:49 CDT

Signed up to CodePen's free service and checked out scratchpad.io. Both very similar to jsFiddle.net. Very basic, friendly for people who have done nothing on the internet put open a browser...even if that browser is IE.

1:58 pm

Five methods of Thinking

Procedural Thinking - clear and unambiguous instructions that follow a linear path

Abstract Thinking - finding generality (similarity) amongst seemingly different things

Systematic Debugging - process of relentlessly identifying the cause of a comp program failure This involves a four step process:

  1. Collect evidence (what makes the program fail?)
  2. Generate theories (what may have caused this problem?)
  3. Test those theories (if my theory is correct, how could I find out?)
  4. Fix the problem.

Technological Empathy - understanding how the computer operates, what it is good and bad at

Systems Thinking - breaking big problems down into smaller component pieces

2:15

Just about anyone can learn just about anything. The brain is incredibly flexible. With the proper inputs you can physically change the brain.

Finished the introduction

2:22 pm

Took an hour break, unloaded monster into grand monster mother's care. Opened a celebratory beverage and back, hopefully without further distractions for some time.

3:20 pm

Some basic terms:

World Wide Web - collection of HTML documents 

HTML - hypertext markup language

hyperlinks - connects HTML pages (makes the internet web like)

Servers - Computers that host files that make up content on web. 

Computers access servers for their files. 

HTTP - the main protocol of the web

Internet - The world's largest computer network

Browser - A program that runs on your computer to display files found on the web

HTML is made up of many things including:

  1. text content (what you see)
  2. markup (what it looks like)
  3. references to other documents (images, videos...)
  4. links to other pages

...Some reasonably straightforward html quizes

3:38 pm

And a jab at everyone's favorite browser to hate..hahaha

HTML Attributes - <tag attr="value"> content </tag> attributes always equal a value

<a> anchor tag is very common - links attribute href to value of website.

<img> image tag uses attribute src, linked to url value to show an image. Use alt tag with text content incase link to image is broken, or user is visually handicapped. <img> is called a void tag; it requires no closing tag.

Very simple html quizzes...

There are inline and block elements. Block elements actually create "invisible boxes" around their content. Piece on difference in block and inline elements: http://www.impressivewebs.com/difference-block-inline-css/

Some inline elements include a, span, br, img, strong

Block elements include div, p, form

4:05 pm

Basic HTML Document
<!DOCTYPE HTML>
<html>
<head>
<title> content </title> (displays in browser tag)
<head>
  </head>
<body>
<b>content</b>
</body>
<head>
</html>

Finishing up basics of web and html with Steve...

4:14 pm

Push together some quick notes from above into an html file for Project 0. -If you've played enough video games or watched too many movies I assure you, it's less mysterious than it sounds.

Stage0 complete and sent off. Post this feed and on to the next.

4:49 pm