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

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.

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

Good Blogs for Beginners

What you should do when you get stuck

You will get stuck, you aren't challenging yourself enough if you don't ever 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

Khan Academy - Free
Codecademy - Free
Microsoft Virtual Academy - Free
CodeSchool.com - $20 - $30 a month
Lynda.com $20 - $30 a month
PluralSight.com $30 a month / $300 a year

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

Options

Multi-Platform
- Brackets
- Vim
Mac
- Textmate
- BBEdit
Windows
- Notepad 2
- 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

VSCode

https://code.visualstudio.com/

Web Browsers

The primary app that will serve your content

Chrome - 55%
Safari - 14%
Firefox - 5%
IE/Edge - 3%
Global Stat Counter

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

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.

How do websites work?

What happens when you type uark.edu and press enter?

A DNS lookup occurs

Every website has a unique IP Address.

Domain Name Servers act as a directory for website's and their IP Address

uark.edu --> 130.184.3.113

The Server Responds with Content

The server looks up and finds the files you are looking for.

Pages are sometimes dynamically built with information from other sources.

Your Browser Renders the page

Every browser does this differently.

Client Side
&
Server Side

Client Side
or
The Front End

Functionality that occurs on the browser side of a website.

Front End Tech Stack

HTML - The content and structure
CSS - Describes what the content looks like
JavaScript - Adds interactivity to the content
Flash & Silverlight (with plugins)

Server Side
or
The Back End

Code that is executed on a remote server.

Back End Tech Stack

PHP
Python
Javascript
C#
Java
Databases