Introduction to Programming Nanodegree

Table of Contents

  1. Lesson 1: Learn to Code
  2. Lesson 2: Making a Stylish Webpage

Lesson 1: Learn to Code

Thinking like a Programmer

A large goal of this Nanodegree is to give you practice thinking like a computer programmer. Longtime programmers will often talk about how the programming thought process has helped them in other areas of their life, but what does it mean to "think like a programmer?" In this Nanodegree we will focus on five specific ways of thinking that all programmers have to use all the time. We will come back to these ideas repeatedly throughout the Nanodegree.

  1. Procedural Thinking - create unambigious instructions
  2. Abstract Thinking - find generality among seemingly different things
  3. Systems Thinking - break a big problem down into smaller pieces
  4. Technological Empathy - ability to understand how computer works
  5. Debugging
    1. Collect evidence (what makes this 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

Components of the Web

  • Browser
  • Internet
  • Server
  • HTTP

HyperText Markyp Language (HTML) Basic

HTML is made up of:

  • Text content (what you see)
  • Markup (what it looks like)
  • References to other documents, e.g. images or videos
  • Links to other pages

HTML Markup Examples

  • <Tag>Write between the tags</Tag>
  • <b>This is how you bold</b>
  • <em>Italicize the words with em</em>
  • <a href="url"> add links to words </a>
  • <img src="url" alt="adding picture"> - it is a void tag
  • <br>Breaking the line (inline)</br>
  • <p>making paragraph - in blocks</p>
  • <span>Group inline elements</span>
  • <div>Group block elements to format</div>

Lesson 2: Making a Stylish Webpage

Creating a Structured Document

HTML-CSS_DOM

  • both are languages
  • HTML controls the structure of a web page
  • CSS (Cascading Style Sheets) controls the style of a page
  • DOM (Document Object Model) refers to the tree-like structure of a page

CSS Vocabulary

  • Rule: a line of CSS code describing the value that a certain attribute should take
  • Property: the proporty you ant 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

Box Model

the Box Model