Roberto Nogueira
BSd EE, MSd CE
Solution Integrator Experienced - Certified by Ericsson
About
Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones.
In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.
WEEK 1
Introduction to HTML5
[x] Course Introduction 3 min
[x] How Grading and Being Late on Assignments Works 10 min
[x] Recommended Books 10 min
[x] ALL of the EXAMPLE SOURCE CODE for this Course 10 min
[x] Practice Quiz: Optional Practice Quiz 4 questions
Development Environment Setup
[x] Welcome to Module 1: Introduction to HTML5 1 min
[x] Development Environment Setup, Part 1 3 min
[x] Development Environment Setup, Part 2: MacOS 8 min
[x] Development Environment Setup, Part 2: Windows 6 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Development Environment Setup, Part 3: Github and Browser Sync 17 min
[x] Resources for Asking Questions 5 min
HTML Basics
[x] Lecture 1: What is HTML? 7 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Lecture 2: Relevant History of HTML 10 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 3: Anatomy of an HTML Tag 5 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Lecture 4: Basic HTML Document Structure 6 min
[x] Practice Quiz: Optional Practice Quiz 6 questions
[x] Lecture 5: HTML Content Models 6 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
Essential HTML5 Tags
[x] Lecture 6: Heading Elements (and some new HTML5 semantic comments) 7 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Lecture 7: Lists 5 min
[x] Lecture 8: HTML Character Entity References 7 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 9: Creating Links 9 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 10: Displaying Images 6 min
[x] Frequently Asked Questions 10 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Stay In Touch! 10 min
[x] Module 1 Wrap-Up 30 sec
[x] Quiz: Module 1 Quiz 23 questions
WEEK 2
Cascading Style Sheets Basics
[x] Welcome to Module 2: Introduction to CSS3 50 sec
[x] Recommended Books 10 min
[x] ENTER RAFFLE (ends April 23rd, 2017) 10 min
[x] Lecture 11: Power of CSS 5 min
[x] Lecture 12: Anatomy of a CSS Rule 4 min
[x] Practice Quiz: Optional Practice Quiz 3 questions
[x] Lecture 13: Element, Class, and ID Selectors 9 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 14: Combining Selectors 9 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 15: Pseudo-Class Selectors 9 min
[x] Practice Quiz: Optional Practice Quiz 3 questions
CSS Rules Conflict Resolution and Text Styling
[x] Lecture 16: Style Placement 5 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Lecture 17, Part 1: Conflict Resolution 8 min
[x] Lecture 17, Part 2: Conflict Resolution 6 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 18, Part 1: Styling Text 6 min
[x] Lecture 18, Part 2: Styling Text 5 min
[x] Stay In Touch! 10 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
The Box Model and Layout
[x] Lecture 19, Part 1: The Box Model 10 min
[x] Lecture 19, Part 2: The Box Model 7 min
[x] Lecture 19, Part 3: The Box Model 5 min
[x] Practice Quiz: Optional Practice Quiz 4 questions
[x] Lecture 20: The background Property 6 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Lecture 21: Positioning Elements by Floating 10 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 22, Part 1: Relative and Absolute Element Positioning 7 min
[x] Lecture 22, Part 2: Relative and Absolute Element Positioning 3 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
Introduction to Responsive Design
[x] Lecture 23, Part 1: Media Queries 4 min
[x] Lecture 23, Part 2: Media Queries 9 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 24, Part 1: Responsive Design 7 min
[x] Lecture 24, Part 2: Responsive Design 11 min
[x] Practice Quiz: Optional Practice Quiz 3 questions
Introduction to Twitter Bootstrap
[x] Lecture 25, Part 1: Introduction to Twitter Bootstrap 5 min
[x] Lecture 25, Part 2: Introduction to Twitter Bootstrap 7 min
[x] Lecture 26, Part 1: The Bootstrap Grid System 9 min
[x] Lecture 26, Part 2: The Bootstrap Grid System 9 min
[x] Practice Quiz: Optional Practice Quiz 4 questions
[x] Frequently Asked Questions 10 min
[x] Module 2 Wrap-Up 38 sec
[x] Peer-graded Assignment: Module 2 Coding Assignment 2h Due April 23, 11:59 PM PDT
[x] Review Your Peers: Module 2 Coding Assignment Due April 26, 11:59 PM PDT
WEEK3
Coding the Static Restaurant Site
Ready for some REAL fun? This module is it! We'll go over some basics of interacting with a client when managing a web site project and then go visit a real client at their place of business (a Chinese restaurant), help the owner figure out what she wants in a site, and get acquainted with the restaurant in general. We'll spend the rest of the module building a real web site for this business from scratch and you'll get to sit next to me and watch as the site comes together.
Visit with the Client & Setup Overview
[x] Welcome to Module 3: Coding the Static Restaurant Site 53 sec
[x] Recommended Books 10 min
[x] Lecture 27, Part 1: Visit with the Client 10 min
[x] Lecture 27, Part 2: Visit with the Client (Field Trip) 9 min
[x] ENTER RAFFLE (ends April 23rd, 2017) 10 min
[x] Lecture 28: Design Overview 9 min
[x] Lecture 29: Some Ground Rules and Overview of Setup 10 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
Coding the Navigation Bar of the Site
[x] Lecture 30, Part 1: Coding Basics of Navbar Header 9 min
[x] Lecture 30, Part 2: Coding Basics of Navbar Header 7 min
[x] Practice Quiz: Optional Practice Quiz1 question
[x] Lecture 31: Coding Button for Future Collapsible Menu 6 min
[x] Practice Quiz: Optional Practice Quiz1 question
[x] Lecture 32, Part 1: Coding Nav Menu Buttons 11 min
[x] Lecture 32, Part 2: Coding Nav Menu Buttons 3 min
[x] Lecture 33, Part 1: Fixing Navbar Layout, Text, and Dropdown Menus 7 min
[x] Lecture 33, Part 2: Fixing Navbar Layout, Text, and Dropdown Menus 4 min
Coding the Homepage and the Footer
[x] Lecture 34: Coding the Jumbotron 11 min
[x] Practice Quiz: Optional Practice Quiz1 question
[x] Lecture 35, Part 1: Coding Navigation Tiles 11 min
[x] Lecture 35, Part 2: Coding Navigation Tiles 13 min
[x] Lecture 36, Part 1: Coding the Footer 10 min
[x] Lecture 36, Part 2: Coding the Footer 3 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
Coding the Restaurant Menu Pages
[x] Lecture 37, Part 1: Coding the Menu Categories 14 min
[x] Lecture 37, Part 2: Coding the Menu Categories 6 min
[x] Lecture 38, Part 1: Coding the Single Menu Category Page 11 min
[x] Lecture 38, Part 2: Coding the Single Menu Category Page 13 min
[x] Lecture 38, Part 3: Coding the Single Menu Category Page 7 min
[x] Lecture 39: Testing the Mobile Version on a Real Phone 4 min
[x] Frequently Asked Questions 10 min
[x] Module 3 Wrap-Up 28 sec
[x] Peer-graded Assignment: Module 3 Coding Assignment 2h Due in 6 days
[x] Review Your Peers: Module 3 Coding Assignment Due in 9 days
WEEK 4
Javascript Basics
[x] Welcome to Module 4: Introduction to Javascript 1 min
[x] Recommended Books 10 min
[x] Lecture 40, Part 1: Adjusting Development Environment for Javascript Development 5 min
[x] Lecture 40, Part 2: Where to Place Javascript Code 5 min
[x] Lecture 41, Part 1: Defining Variables, Function, and Scope 8 min
[x] Lecture 41, Part 2: Defining Variables, Function, and Scope 4 min
[x] Practice Quiz: Optional Practice Quiz 3 questions
Javascript Types and Common Language Constructs
[x] Lecture 42, Part 1: Javascript Types 5 min
[x] Lecture 42, Part 2: Javascript Types 4 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 43, Part 1: Common Language Constructs 8 min
[x] Lecture 43, Part 2: Common Language Constructs 4 min
[x] Lecture 43, Part 3: Common Language Constructs 7 min
[x] Lecture 44: Handling Default Values 4 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
Objects and Functions in Javascript
[x] Lecture 45, Part 1: Creating Objects Using 'new Object()' Syntax 7 min
[x] Lecture 45, Part 2: Creating Objects Using Object Literal Syntax 5 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Lecture 46: Functions Explained 8 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Lecture 47, Part 1: Passing Variables by Value vs. by Reference 6 min
[x] Lecture 47, Part 2: Passing Variables by Value vs. by Reference 7 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 48: Function Constructors, prototype, and the 'this' Keyword 12 min
[x] Lecture 49: Object Literals and the 'this' Keyword 6 min
[x] ENTER RAFFLE (ends April 23rd, 2017) 10 min
[x] Practice Quiz: Optional Practice Quiz 1 question
Arrays, Closures, and Namespaces
[x] Lecture 50, Part 1: Arrays 8 min
[x] Lecture 50, Part 2: Arrays 4 min
[x] Practice Quiz: Optional Practice Quiz 1 question
[x] Lecture 51: Closures 6 min
[x] Lecture 52, Part 1: Fake Namespaces 6 min
[x] Lecture 52, Part 2: Immediately Invoked Function Expressions (IIFEs) 8 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Frequently Asked Questions 10 min
[x] Module 4 Wrap-Up 44 sec
[x] Peer-graded Assignment: Module 4 Coding Assignment2h Due in 7 days
[x] Review Your Peers: Module 4 Coding Assignment Due in 10 days
WEEK5
Document Object Model Manipulation
[x] Welcome to Module 5: Using Javascript to Build Web Applications 47 sec
[x] Recommended Books 10 min
[x] Lecture 53, Part 1: DOM Manipulation 6 min
[x] Lecture 53, Part 2: DOM Manipulation 11 min
[x] Lecture 54: Handling Events 9 min
[x] Lecture 55: The 'event' Argument 6 min
[x] Stay In Touch! 10 min
[x] Practice Quiz: Optional Practice Quiz2 questions
Introduction to Ajax
[x] Lesson 56: HTTP Basics 12 min
[x] Lesson 57, Part 1: Ajax Basics 5 min
[x] Lesson 57, Part 2: Ajax Basics 13 min
[x] Lesson 57, Part 3: Ajax Basics 6 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
[x] Lecture 58: Processing JSON 9 min
[x] Practice Quiz: Optional Practice Quiz 2 questions
Using Ajax to Connect Restaurant Site with Real Data
[x] Lecture 59: Fixing Mobile Nav Menu Automatic Collapse 6 min
[x] Lecture 60: Dynamically Loading Home View Content 9 min
[x] Lecture 61, Part 1: Dynamically Loading Menu Categories View 6 min
[x] Lecture 61, Part 2: Dynamically Loading Menu Categories View 10 min
[x] Lecture 62: Dynamically Loading Single Category View 13 min
[x] Lecture 63: Changing 'active' Button Style Through Javascript 6 min
[x] Check out the final deployed site 10 min
[x] Frequently Asked Questions 10 min
[x] ENTER RAFFLE (ends April 23rd, 2017) 10 min
[x] Course Wrap-Up 1 min
[x] Peer-graded Assignment: Module 5 Coding Assignment2h Due in 7 days
[x] Review Your Peers: Module 5 Coding Assignment Due in 10 days