IT Readiness

Front End Development

Instructor

Jon Middaugh

Email: Jonathan.Middaugh@gmail.com

Slack: @Middaugh

About Me

  • Name: Jon Middaugh
  • Married: Kristin
  • Kids: 2
    • Benjamin - 4
    • Annaleigh - 2
  • Occupation 1: JB Hunt Transport, Associate Manager
  • Occupation 2: U of A ITR, FE Instructor

My Technology Career

Five years in IT

  • 2013 - Joined BNSF: Java, SQL, Data Warehousing, BI Tools
  • 2014 - jQuery, HTML, CSS, JavaScript
  • 2015 - Joined JB Hunt: ExtJs
  • 2017 - Angular, Selenium
  • 2018 - React

Meeting Times

  • Every Tuesday and Thursday from 5:30 - 9:00
  • Every other Saturday from 9:00 - 1:00
  • We'll have breaks during Saturday class for meals

Class Room Policies

  • Drinks in closed containers
  • Attendance is "required". Notify the instructor as soon as you know you will be missing.
  • Silence your cellphones before class.

Course Guidelines

  • I'm here for you
  • Ask questions
  • Help each other.
  • Don't get bored.
  • I'm not perfect.

Course Description

This course will walk you through front-end web application development. The course will teach a number of technologies including HTML, CSS, and JavaScript frameworks. It will also provide context on how front-end applications interact with APIs and other back-end technologies.

Goal

Upon completion of this course, you will be able to create an interactive website and deploy it to a cloud-based hosting provider. You will be able to apply your front-end skills to a variety of off-the-shelf or SAAS (Software as a Service) solutions such as WordPress, Shopify, SquareSpace, etc. You will also understand the role that developers play on an overall product team to prepare you for a transition into a work environment.

What is required to get the certificate?

  • 70% average on the four assessments
  • A portfolio project that I approve
  • Must attend demo day and demo your project to recruiters

TLDR;

  • How to write WebPages
  • How to make it look pretty
  • How to make it interactive

End Goal

  • Capable build interactive websites using the latest tools.
  • Equip you with the tools to expand your skillset
  • Understand the life cycle involved with building a website
  • Knowledgeable and skill enough to be hired in a entry level position.

Front End Focus

Design/CSS

  • LESS/SCSS
  • Responsive Web
  • Usability
  • Animations

Development/JavaScript

  • Single Page Web Apps
  • MVVM Frameworks
  • Unit Testing
  • Node Tasks
Example Tree

We will only hit the tip of the iceberg of FE development

Tuesday & Thursday Format

  • 5:30 - 6:00 - Setup and Review
  • 6:00 - 7:00 - Topic Overview
  • 7:00 - 7:30 - Open Discussion/Breaks
  • 7:30 - 9:00 - Exercises

Saturday

  • 9:00 - 10:00 - Setup and Review
  • 10:00 - 1:00 - Assignment Work

Grading Structure

Pass / Fail

Class Exercises

Assignments

Formal Assessments

Schedule

  • August/September
    • Basic HTML
    • Basic CSS
  • October
    • More CSS
    • Basic JavaScript
  • November
    • HTML Forms
    • jQuery
  • December
    • Responsive CSS
    • SASS
  • January
    • ES6
    • Advanced JavaScript
  • February
    • TypeScript
    • Angular/React

Technology Books

Buy with caution

Many books are out of date by the time they are published.

There are tons of good resources available if you search for them

My Top Books

Good Blogs for Beginners

What you should do when you get stuck

Steps to take

  • Google it
  • Look at it from a different angle
  • Go for a walk outside
  • Google it again
  • Play around in a different environment
  • Exception: Tribal Knowledge

Don't spend more than 30* minutes trying to figure something out on your own before asking for help. *10 if in class

Stack Overflow

This will become your absolute best friend ever.

Other Good Sources

Online Training

Tell us about yourself

  • Who are you?
  • What do you hope to get out of this?

Tools we'll be using

Slack

ua-itreadiness.slack.com

Download

Slack's purpose in class

  • Announcements
  • General Communication
  • Collaboration

Text Editors

More than just Notepad

Syntax Highlighting

Code Validation

Intellisense

Commonly called Code Completion

Code Snippets

Multitasking

IDEs

Integrated Development Environment

  • Provide project templates
  • Compiles Code Easier
  • GUI For everything
  • Performance tools
  • Bloated

Editor Overview

These are some of the more popular text editors available.

VSCode

https://code.visualstudio.com/

Atom

https://atom.io

Other Options

  • Multi-Platform
    • Brackets
    • Vim
  • Mac
    • Textmate
    • BBEdit
  • Windows
    • Notepad 2
    • Notepad++

Further Reading

Web Browsers

The primary app that will serve your content

What you will support will vary depending your customer's requirements.

We will primarily use Chrome

Browser - Dev Tools

  • Inspect the active document
  • See network traffic
  • Debug/Step through active code
  • Run performance tests
  • Press F12 to activate

Version Control

Version control is a system that monitors and tracks changes to files over time.

Git

Git is a distributed version control system aimed at speed and non-linear workflows.

Install

GitHub.com

Online project hosting using Git. GitHub is the largest repository of open source code projects.

Codepen.io

Online code editor we use for examples and exercises.

>