Instructor

Welcome to the Front End Developer Professional class page!

Class 1 - Introduction

Topics: Intro to Front End Development, File System, Windows Command Line Basics, Source Control, Git Basics, First Web Site
Lecture(s): Welcome , Front End Developer , How The Web Works , Git & SourceControl
Homework: Create a Hello World Github page
Links: Github Pages, Windows Command Line Cheat Sheet

Class 2 - HTML Fundamentals

Topics: HTML Basics
Lecture(s): HTML , HTML Fundamentals (HTML5/PS)
Homework: Marking up a Letter , Structuring Page Content
Links: HTML MDN, HTML5 MDN, HTML Template, Periodic Table of Elements

Class 3 - HTML Semantics + Javascript 101

Topics: HTML Semantics, JS Values/Operators/Types, Node Command Line Basics
Lecture(s): Semantic HTML (HTML5/PS), Javascript Quick Start (JS/PS), Learn to Program 1 (NodeJs/PS)
Homework: Read Chapter 1 in the Eloquent Javascript book
Links: Eloquent Javascript, NodeJs, VS Code + NodeJs

Class 4 - Javascript 102

Topics: JS Control Flow
Lecture(s): JavaScript1
Homework: Read Chapter 2 in the Eloquent Javascript book, Login to PluralSight
Links: PluralSight
Quiz 1: Q1 - Review
Quiz 2: Q2 - Eloquent Javascript Chap2 Exercies

Class 5 - Industry, CSS, Responsive / Mobile First Design

Topics: CSS Basics, Responsive, Mobile First Design, Project 1
Lecture(s): Industry, CSS , Design
Homework: PluralSight Scores (HTML5, CSS, Javascript), LinkedIn, Mock Project Website Design / Contents
Links: CSS MDN, CSS Diner, CSS Normalize, CSS Reset
Quiz 3: Q3 - CSS

Class 6 - Media Queries, Responsive Units, Responsive Layouts, Fonts

Topics: Media Queries, Responsive Units (vh,vw), CSS Float, Bootstrap, Responsive Layouts (Flex)
Lecture(s):
Homework: Continue working on Project 1
Links: Media Queries, Can I use?, Modern CSS, Responsive images, Box Sizing, Bootstrap, Bootstrap Grid, Flex, Wes Boz - Flex, Fonts, Anchor Links
Quiz 4: Q4 - CSS

Class 7 - Project Work

Topics: Lab Setting to Complete Project 1

Class 8 - Project Work

Topics: Lab Setting to Complete Project 1

Class 9 - Demo Day - Project 1

Topics: Demo Project 1, Resume Review

Class 10 - Bootstrap Deep Dive, NPM, Sass

Topics: Build your own bootstrap, NPM packages, Sass
Lecture(s):
Homework: Pluralsight - 1-2hrs your choice, Read Chapter 3 in the Eloquent Javascript book
Links: Download Bootstrap Source, Sass, NPM

Class 11 - Javascript Functions, Javascript Events, DOM, Window

Topics: Javascript Functions + Events, Document Object Model (DOM), Window, Document
Lecture(s): Create a javascript game with events and dom manipulation, Class ouput
Homework:
Links: DOM, Web Events, Window, Document

Class 12 - Javascript Scope / Objects / Array / JSON, JQuery, Html5 Web Storage, Git Branching

Topics: Javascript Scope / Objects / Arrays / JSON , JQuery, Web Storage, Git Branching
Lecture(s): Create a javascript game with different levels
Homework: Pluralsight - JavaScript Objects and Prototypes, Read Chapter 4 in the Eloquent Javascript book, Read You Don't Know JS links
Links: more DOM, JS Objects, JS Objects, JS Scope, JS let vs var, JSON, JQuery, Web Storage, Using Web Storage, Git Branching

Class 13 - Project Work

Topics: Lab Setting to Complete Work on Game

Class 14 - Project Work

Topics: Lab Setting to Complete Work on Game

Class 15 - Javascript Objects / Try-Catch / Switch statement / Iteration, Node Programming

Topics: object creation, inheritance, try-catch, switch, iteration
Lecture(s): Review game with Levels, start blackjack simulation
Homework:
Links: MDN Object, Blackjack Project

Class 16 - NodeJs, BlackJack Simulator

Topics: blackjack simulator, nodejs, breaking work down, pivotal tracker
Lecture(s): Review simulation, discuss creating objects, and game flow
Links: Player/Dealer breakdown, Simulation Flow

Class 17, 18 - BlackJack Simulator Lab

Topics: Lab

Class 19 - BlackJack Simulator DEMO

Topics: Team blackjack demos, start front end

Class 20, 21, 22, 23 - BlackJack Front End Lab

Topics: Lab

Class 24 - BlackJack Front End DEMO, Angular

Topics: blackjack demos, Angular, TypeScript, lint, karma, protractor, components, sass
Lecture(s): Demo day, angular quickstart
Homework:
Links: Angular

Class 25 - Create an API, Define next project

Topics: expressjs, node, api, restful enpoints, angular
Lecture(s): Angular , PluralSight: Angular-TheBigPicture, Angular-GettingStarted
Homework:
Links: Create Rest API, Angular Docs, Material Angular