Nanodegree #1: Intro to Programming Notes (Draft 1)

So What Is Coding Anyway?

Coding is telling a computer what you want it to do by writing text in a way it can understand. By using language it can speak, you can use words to build and create new and exciting things. Apps. Websites. Dodads. Robot Armies... 

Barriers to Coding

Intimidating Factors

1. Code speak.

Stacey: "Yeah you just CD into this dir and ls -a mv awesomesauce.txt to amazingsauce.txt, then commit it to git and huzzah!"

Jerry: "uuuuh... well, I just use spotify to listen to my music usually." "I like sauce." "Now what did you want me to get?"

2. You have to be a genius.

Anyone can learn anything as long as you're passionate, and committed to do so. We just have to start, and go from there.

Jerry's not stupid. He just doesn't know the meaning behind any of those words yet. All it takes is going after it.


3. "Where do I even start?"

I know what I want to make, but I don't know how, or what programming language to use.

4. Hitting a wall when coding.


Stacey: "The computers not on jerry."

Infinite Loop

5. Learning but not Applying.

Learning on thing, and then the next, and the next... but never actual using what you just learned.

Be The Programmer: How to Think Like a Programmer

1. Procedural Thinking

Taking a big PROBLEM and breaking it into several smaller byte-sized steps.


2. pro-

3. blem-

4. a!

2. Abstract Thinking 

1 + 1 = 2. Finding similarity or generality amongst seemingly different things.

Programmers use abstraction to avoid unnecessary repetition of work

3. Systematic Debugging

Systematic way of solving problems.

Identify Problem --> Look for Possible Causes --> Fix

Debugging - When a program doesn't work, it's because there's a mistake (aka a bug) in the code somewhere. Bugs are a part of a programmer's life. (Wake up, drink coffee, code, crush bugs, rise repeat.) 

Knowing how to systematically debug your problem will help you not lose your cool and explode.

One Example of Debugging

1. See Problem. "What's making my program crap?"

2. Develop a theory. "Hmm... What's the cause of this bugger?"

3. Test your theories. "Ah here we go, it's because I spilt coffee all over my keyboard!"

4. Fix it. "Well look at that, It works. I'm a genius!

4. Technological Empathy

Knowing how a computer see's things. [Speaking its language]

A Computer is just a fancy stick. - A tool once you know how to use it, you can go fish, start a fire, fight dragons, andor anything else you can dream up.

5. Systems Thinking

Taking a big idea (i.e. what does it mean to think like a programmer) and breaking it down into pieces.

Making a plan for how your program will work (big PICTURE) and breaking it into small pieces that work together to solve it.

If you desire to learn something, know that you can.

"Whoever you are, wherever you are, you only have to know one thing, you can learn anything."
Salmon Khan, KhanAcademy

Basics of the Web & HTML

The Web.

Invented in early 1990s.

Is a collection of HTML documents (mostly, there are other types of doc's).

HTML - stands for Hyper Text Markup Language

HTML is the foundation of almost every web page. Think of an HTML document as the structure of a web page.  Through HyperLinks - links between pages - HTML docs are the glue, the connections among different web pages making the web 'web like'.

Any type of file can be linked to - plain text, HTML, images (img), videos, music...


Components of the Web.

A browser is a program (so someone / team made it!) that runs on your computer to display files found on the web.

The Internet is the world's largest computer network.

HTTP is the main protocol of the web, passing info to-and-fro across the web.

Servers are computers that host the files that make up the web. They are used for sending / receiving data.

HTML.  - Consists of 

  • Text Content - what you see when you visit a page.
  • Markup - how the language of HTML is written.
  • References to other documents (imgs, other html files)

HTML Markup.


Opening tag, Tag Name, Tag contents, Closing tag (only difference is the '/'). The whole thing can be called an element.

HTML can be nested. 

  • b element.

b is for<b>BOLD</b>

HTML is <b>reasonably straightforward</b>
  • em is for emphasis (italics)


HTML Attributes. Tags can have attributes that help describe / define elements in various ways.

<Tag ATTR="Value">Contents</Tag>

  • a - Anchor Tag

<a href="">RML</a>

<a href="/recommends">These are my favorite books</a>

  • <img> - Image Tag. An img tag is a VOID tag, meaning it doesn't have a closing tag.

<img src="url" alt="text" >

url to image

alt - text that is displayed if (when) image doesn't load. Also used for screen readers for the sight-impaired.

<img src="" alt="beep the boldsheep">

image appear inline with text

hello []  beep!

It can be easy to mix up the href attribute of an <a> tag and the src attribute of an img tag. That is A-O-K. If your having trouble remembering just Google it! You don't have to remember every single little detail.

whitespace - In HTML all whitespace (tabs, newlines, spaces) all equates to just one space.

so <p>hello                       my 

                        name is josh, let's                         have coffee.</p>        

is just 'hello my name is josh, let's have coffee.'   

You can use the <br> tag to break text on multiple lines.

This text is<br>stupid long.

= This text is

stupid long

An Alternate is to use the <p> tag. p is for paragraph.

<p>This text is</p>

<p>stupid long</p>

<p>on one line.</p>

Inline / block

<br> is an inline element.

Inline elements we've seen so far - b, em, br, img.

<p> is a block element. It creates an invisible box around p. The box can have width / height.

span and div elements - These are container elements. Essentially, all they do is hold their content

Why? Because you can attach style to these elements of course! Which allows you to adjust the ways the elements and content looks inside them (CSS). By adding a class or id attribute in the opening tag of span or div, you can reference that container specific in CSS (more on styling later).

span - Span is an inline container.

<span>inline container</span>

<span class="foo">text</span>

div - div is a block container.

<div>block baby</span>

<span class="bar">text</div>

HTML Document Structure.

<!DOCTYPE html>                            <-- doctype tells the browser what type of file / HTML the document is

<html>                                                 <-- html doc element. 

<head>                                      <-- opening head tag - this is where meta information about the web page goes.

<title>Title!</title>       <-- title element - the title of the page appears in the top of your browser window / tab.

</head>                                    <-- closing head tag.

<body>                                      <-- opening body tag. - this is where your web page content goes. (what the users see.)

<p>Content of the <b>Web Page</b>!</p>

</body>                                   <-- closing body tag.

</html>                                             <-- closing html tag.


Thinking in boxes.

A great way to think about the structure of an HTML page is thinking in terms of boxes.


1. A Web Page is a text document written in a language called HTML. browsers read these documents, interpret them, and display them.

2. How coding works. Coding happens by telling a computer what to do with using a language it understands. All a computer does is follow instructions.

3. Computers are stupid. The syntax of coding language has to match the way a computer understands it, otherwise it won't be able to figure it out. (At least until our AI overlords take over.)

4. Don't worry about trying to remember everything.

5. Vocab and HTML Jargon. 

  • Tag: Always contained in <    > angle brackets. Most elements have an opening <tag> and closing </tag>, unless they are void elements (such as <img> or <br>)
  • Element: Refers to everything within a set of open-close tags
  • Attribute: think properties of an element. More description, detail. (i.e. href="url" or class="")