STAGE 0: Getting Started with HTML

1. Thinking Like a Programmer:

  1. Procedural Thinking - Creating clear and unambiguous instructions for a computer for follow.
  2. Abstract Thinking - Finding similarities or generalities amongst dissimilar things. Using abstraction, programmers avoid repletion of work.
  3. System Thinking - breaking down larger problems into smaller pieces. Using big-picture thinking and figuring out how the pieces will work together to solve the problem.
  4. Technological Empathy - Understanding how computers work and what they do well and what they can't do well.
  5. Debugging - Systematic problem solving. Mistakes or "bugs in code will happen. Debugging is a system for finding and correcting and correcting the problems.

2. Introduction to the Web:

  1. The World Wide Web is a collection of HTML (Hypertext Markup Language) documents.
  2. HTML documents are the "glue" that holds online audio, images, documents, etc. together. The hyperlinks or "links" that tie pages together is what makes the web, web like.
  3. The Web was invented in the early 1990's and has approximately 30 Billion pages.
  4. The Major pieces of the Web include: Users, computers and browsers, the Internet, and Servers. Browsers communicate with servers via HTTP.
  1. HTTP is the main protocol of the Web.
  2. Servers - computers that host the files that make up the internet.
  3. he Internet - the world's largest network.
  4. browser - computer programs that display files found on the web.

3. HTML - Hypertext Markup Language:

  1. HTML is made up of text content, markup (what it looks like), and references to other documents.
  2. HTML Markup (tags) - Tag composition: (opening tag) "text" (/closing tag). Markup Tags use angled brackets
  3. Tag examples: Many examples exist on the web such as this one -
    commonly used html tags

4. Computers are Stupid:

  1. Computers can't make inferences and don't do well with ambiguity. Computers understand literal terms and require strict syntax.
  2. small mistakes that "smart humans" make while coding can lead to huge problems when given to a "stupid computer".

5. HTML Attibutes:

  1. Structure:
  2. Example using the anchor tag : Google
  3. Images: Using the img tag, we can display images: ”html. The img tag is a void tag. It has no content and therefore does not require an end tag.

6. Whitespace: Inline vs block breaks:

  1. The break tag is a void tag (no end tag needed) it creates an inline line break.
  2. The Paragraph tag (not a void tag / end tag is required). The paragraph tag creates a block break by creating an invisible box around text; the box can have height in with.

7. Container Elements:

  1. Container elements contain stuff inside.
  2. Span is an inline element. It groups an inline (usually small) amount of HTML, a portion of a paragraph for example.
  3. The div tag behaves like the paragraph tag. The Div tag is a block element; it creates a box around the text, a paragraph for example.

8. Document Structure:

  1. !DOCTYPE HTML Defines the document as an HTML document.
  2. HTML tags surrounds the document.
  3. The Head tags surround the title tags (which surround the title of the page as seen in the browser tab) and can contain metadata, java script, and css.
  4. The body tags contain the content of the document (what is seen on the screen).

STAGE 1: HTML and CSS

1. How Learning Code Works:

  1. Ask for help if you are lost. Use the Udacity forums as well as Google, Stackoverflow.com, etc.
  2. Learning in general has a progression from Ignorance to Awareness to Ability and finally to fluency.
  3. Take a break when frustrated.

2. Page Structure:

  1. Tree-like structure: browsers create a branching structure.
  2. Browsers use the structures to figure out how to display the content.
  3. Sideways triangles are an html element, complete with an opening and closing tag.
  4. Clicking the triangles allows you to navigate the structures

3. HTML-CSS-DOM:

  1. HTML - HyperText Markup Language - the standard markup language used to create web pages.
  2. CSS - Cascading Style Sheets - style sheet language used for describing the look and formatting of a document.
  3. DOM - Document Object Model - a convention for representing and interacting with objects in HTML. The nodes of every document are organized in a tree structure (DOM tree).

4. Boxes, Grids, and Rules:

  1. Visual Elements are broken into boxes/rectangles.
  2. There are underlying grid rules that insure things are properly aligned.

5. CSS:

  1. CSS is code written to control the "style" of HTML elements.
  2. CSS stands for Cascading Style Sheets.
  3. CSS rules describe the value a certain attribute should take.
  4. Class: a class refers to a group of elements that can be styled together.
  5. ID: ID's are unique identifiers that identify HTML elements.
  6. CSS can be linked in the "Head" of the HTML document, it can be linked in a separate file (more organized), or coded in line (generally a bad idea).
  7. The CSS file needs to be saved in the same folder as the HTML document that it is linked to.