jnewman12

Positioning the Web with the Box Model

Objectives

• Explain how marigin, border, padding, and content relate to one another in the box model
• Describe the difference between block, inline, and inline-block elements
• Create a page with multicolumn layout
• Explain the difference between and use cases of static, relative, absolute, and fixed positioning

Plan

• Instructor Lead: I Do – 10 minutes

jnewman12

Git and Github intro

Learning Objectives

After this lesson, you will be able to

• Understand 4 foundational git commands: init, add, commit, and push
• Explain what a repository is, and distinguish between local and remote repositories
• Create, copy, and delete repos locally and on github
• Fork and Clone remote repositories

STUDENT PRE-WORK

jnewman12

Uncle Derry's Dog Needs a Date

HTML/CSS Lab

Well, lemme tell you, my terribly sad Uncle Derry has been projecting onto his dog again, and is determined he needs to help his pup, Bobo, find someone special.

Living alone near a pond more sewage than water leads you to do some crazy things, but it also affords you a lot of thinking time. Good ol' Uncle Derry has been trying to build website with those lonely hours.

jnewman12

JS Debugging

---

Objectives

After this lesson, students will be able to:

• Identify and resolve common and uncommon "logical errors" that affect the results of your program
• Use logs to troubleshoot errors in an application (console log in Dev Tools)
• Conduct real-time debugging in the browser (start small, triangulation, remove code)
• Access properties of a class using helper methods ( typeOf( ) for datatypes)

jnewman12

JS Debugging

Objectives

After this lesson, students will be able to:

• Identify and resolve common and uncommon "logical errors" that affect the results of your program
• Use logs to troubleshoot errors in an application (console log in Dev Tools)
• Conduct real-time debugging in the browser (start small, triangulation, remove code)
• Access properties of a class using helper methods ( typeOf( ) for datatypes)
• Use debuggers and breakpoints to identify logical errors in expressions

jnewman12

JavaScript Objects

---

Objectives

After this lesson, students will be able to:

• Compare objects and key-value stores to arrays as data structures
• Explain the difference between object properties and methods
• Create empty objects and objects with multiple properties and methods using object literal syntax

jnewman12

JS Objects Lab

---

Building and Referencing Objects

• Lets's take what we've learned about JS objects and put it to work!

Model Yourself from Your Parents

jnewman12

JavaScript and the DOM!

---

Display Types, Normalize.css, centering!

• Students will be able to...
• Explain what the DOM is
• Use JavaScript to select parts of the DOM
• Use JavaScript to change parts of the DOM

jnewman12

JavaScript Objects

Objectives

After this lesson, students will be able to:

• Compare objects and key-value stores to arrays as data structures
• Explain the difference between object properties and methods
• Create empty objects and objects with multiple properties and methods using object literal syntax
• Compare adding and retrieving properties to an existing object using the dot and bracket notations
• Access properties of an object using keys and helper methods (.hasOwnProperty)

jnewman12

Responsive CSS

---

Students will be able to....

• Explain what a media query is, and when you would use it
• Use media queries to write responsive CSS
• Display projects on various screen sizes without CSS issues