Generate overview for courses

[erikreyna]

We need to scaffold out what we're teaching and then fill in information.

We'll be using https://jsfiddle.net/ for embedding examples.

[erikreyna]

Think Like a Programmer - C ¡Hola Mundo! Welcome to the world of HTML + CSS - C Hello Javascript - E Javascript and Beyond - E

[CarlaAstudillo]

Think Like A Programmer

Introduction To Programming

• Explain How Computers/Programming Work
• Defining some terms: What is?
  • Coding
  • A Program
  • Syntax
  • Testing
  • Debugging
• What does a Programming Language/code look like?

Programming is like Writing a very Precise Recipe

• Let's think of a meal

• Let's write instructions for the recipe

  • if it was code, how would it be written
  • ex. Fill pot with water, chop vegetables, stir-fry vegetables if vegetables are ready, then remove, etc.

• Let's break down what are simple actions, what are conditional actions, what are repeated actions (loops)

• We just wrote a program!

More Programming Concepts Defined

• Declarations
• Variable Declarations
• Conditional Statements
• Boolean Operators
• Loops
• Functions

If We Were to Write it as a Program, What would it look like?

• I'll write an example of what the recipe could look like in Javascript
• Show same recipe in Python
• Show same recipe in Ruby
• This is to show similarities/differences between languages

Interpret from Code to English (or Spanish!)

• An exercise where we interpret two or three sample code into human language
• Break into groups and then they try to break down

Extra Credit: Debugging and Testing

• Some simple, broken examples and let's find where the problem is

[CarlaAstudillo]

¡Hola Mundo! Welcome to the world of HTML + CSS

What is HTML?

• Definition
• What it looks like. Tags.

Anatomy of a Website

• Content + HTML (structure) + CSS (style)

Folder Structure

HTML Elements

• Explanation of tags
• Container Elements
• Standalone Elements
• Attributes
• Value

HTML Tags

• Doctype
• HTML tags
• Head tags
• Body tags
• Paragraph tags
• Header tags
• Tags nested in another tag
• Link tags
• Image tags
• Break tags
• List tags
• Div tags
• Comment

What is CSS?

• Definition
• What it looks like.
• How it relates to HTML

Connect the CSS to HTML

• Inline
• Embedded
• Linked

CSS Syntax

• Declarations
• Selector Elements
• Properties
  • color
  • font-family
  • font-size
  • width
  • height
• Selector IDs
• Selector Classes
• Cascading Rules