What you'll learn-and how you can apply it
By the end of this live, online course, you’ll understand:
And you’ll be able to:
This training course is for you because...
- You’re an aspiring web designer who wants to take your skills to the next level
- Basic understanding of HTML, CSS and how to use a browser
- Experience with at least one other programming language so that basic programming concepts will not be new to you
- At least one browser installed, including Chrome. Make sure and update your browser version to the most recent before class
About your instructor
Elisabeth Robson is the co-author of several Head First books, including Head First Design Patterns, and is a principal at WickedlySmart, an online learning company for software developers.
The timeframes are only estimates and may vary according to how the class is progressing
The timeframes are only estimates and may vary according to how the class is progressing.
Each segment will include plenty of in-class exercises using the browser development console.
Segment 1: Introduction and set up (~20 mins)
- Introduction and set up
Segment 2: Diving in (~20 mins)
- Discuss pre-class exercises.
- Learn how to use the console.
Segment 3: Variables, expressions, and statements (~15-20 mins)
- Variables, primitive values, expressions, and statements.
- Strings and numbers, basics of types and type conversion
- Booleans and conditional expressions.
Segment 4: Conditionals (~15-20 mins)
- If statement
- Logical operators
Segment 5: Iteration and types (~30 minutes)
- While and for loop iteration
- Basic interaction with prompt
- More on types
- Truthy and falsey values
Segment 6: Debugging (~15 minutes)
- Syntax debugging
- Debugging with the console, how to use breakpoints
Segment 7: Arrays and the for loop (~25 minutes)
- Arrays and array syntax.
- Iterating on arrays with the for loop.
- Adding items to an array with push()
Segment 8 (~10 minutes)
- Homework discussion: describe homework and plan out the program.
Segment 1: Functions (~30 mins)
- Example of built-in functions (console.log, alert, prompt, etc.) we’ve been using in class.
- Arguments and parameters.
- Returning values from a function.
Segment 2: Scope (~20 mins)
- What is scope?
- Global scope and function scope.
- Why “var” is so important.
- Scope of parameters.
- Let, const, and and the new block scope; compare var and let.
Segment 3: Organizing code (~20 mins)
- Where should we put variables and functions?
- Hoisting - what is it, and how does it affect your code
Segment 4: Objects (~30 mins)
- What is an object??
- Syntax of defining and accessing an object.
- Using objects in your code.
Segment 5: Methods (~20 mins)
- Adding behavior to an object.
- Syntax of adding a function (method) to an object.
- Calling an object method.
- How “this” works
Segment 6: The DOM (~20 mins)
- The document object: what is it and how we use it to interact with the page.
- The getElementById() method and innerHTML property.
- Quick overview of other useful document properties and methods.
- Brief summary of where to go next.
Assignments prior to the live scheduled meetings online:
Assignment 1: Take a look at these pages:
Assignment 2: Make sure you know how to:
Convert fahrenheit to celsius and back
Compute the area of a circle from its radius
Assignment 4: Download either or both of Firefox and Chrome if you don’t already have them installed. Make sure you have the most recent versions of these browsers. Take a look at the PDF on how to open the Developer Console in these browsers and make sure you can do it.