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

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)
• 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
• 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

Intro to Test Driven Development

---

Objectives

• Understand the use case for testing your apps
• Understand how to write tests

jnewman12

Ionic App Challenge Part 2

---

Our Challenge

• In this past module, we have seen how to use angular, and now, we have seen how to use what is essentially a mobile-only library for angular
• We are going to combine this into what we did last week, which is to build a mobile news reader

jnewman12

Intro to Ionic

---

Objectives

• Understand the use case for Ionic
• Identify the tech stack involved in creating ionic apps

jnewman12

Angular App Challenge

---

Our Challenge

• This week we have dove head first into angular and learned all about some of the core components of angular.
• data binding

jnewman12

Front-end Routing with UI-Router

---

Objectives

• Understand the value of client side routing
• Build a SPA with multiple pages
• Describe when to consider server-side routing and when to consider front-end routing

jnewman12

Front-end Routing with UI-Router

Introduction

• To practice working with UI-Router, you're going to make a single-page app with multiple views.
• just like in our UI-Router lesson, don't forget you'll need to run your front-end through a server so http-server or server will be your friend.
• This lab builds upon our services lesson (and lab) from yesterday,
• The exercise is to make a simple crud app (index, new/create, show, delete) with an external API
• API Endpoint: https://agile-chamber-77499.herokuapp.com/artists