Class Information

HTML5 and CSS3 Fundamentals

Students will get an introduction to HTML/CSS and the client-server context. Some examples are borrowed from the book and others are explicitely developed by myself in order to prepare the student adequately for the advanced class and future courses in the JCCC web track. Students will create a resource project and a final project called Steamworks.

Course Material

Basics of Web Design HTML5 CSS3, 3rd Edition, Terry Felke-Morris, Pearson Ed.

Core Concepts (JCCC Objectives)
The following core items will be covered:
1.   Internet and Web Basics
2.   HTML Basics
3.   Web Design Basics
4.   Cascading Style Sheets Basics
5.   Graphics and Text Styling Basics
6.   More CSS Basics
7.   Page Layout Basics
8.   More on Links, Layout, and Mobile
9.   Table Basics
10.   Web Publishing Basics

Outline

What is HTML?
- Defining Hyper-text markup language
HTML Context
- What is a server?
- The Client-server Construct
- Static vs. Dynamic languages
- Client vs. Server side languages
HTML Editing
- An introduction to editing an HTML document
- The Windows problem: “hidden extensions”
- Creating a file with Notepad
- Creating a single tag and saving
- Two modes: text and browser rendering
- Rendering and viewing source
- Browser tools and inspecting
HTML editors
- Text editor vs text-based web editors, IDEs
- Syntax highlighting and code suggestion
The HTML5 DOM
- Document type
- Core tags and markup structure
- Structure vs. user visible
The Editing Process
- Open in editor
- Edit code
- Save
- View in browser
- Inspect as needed
- Repeat
HTML on the Server
- Getting a server (local test server)
- The document root
- Navigating to a local server
- Local pathing/file structure and the url
- URL structure
HTML’s relationship to other web languages
- Web languages
- Front-end vs. Back-end
Resource Project Site
- Home Page
- Tags Page
- Menus
- Images Page
- JavaScript Page
- Layouts Index Page
- CSS Animations Page
- Forms Index Page

Form handling
Understanding the server stack relationship

Form elements page

CMS Editing

How CMS works
Wordpress example

The Steamworks Project

Putting it all together
Assets & Requirements
Putting your own take on it
Borrowing code

Teacher Recommended Resources

Online book:

How to Code in HTML5 & CSS3

References:

Sandbox:

Codepen

Editors

Atom
Brackets
Geany
JetBrains (WebStorm, IntelliJ, PHPStorm, etc. Free to Students)

HTML5 and CSS3 Advanced

Overview

Students will explore advanced concepts in HTML/CSS in the client-server context. Some examples are borrowed from the book and others are explicitely developed by myself in order to prepare the student adequately for future courses in the JCCC web track.

Core Concepts (JCCC Objectives)
1.   Introducing HTML5 and CSS3
2.   Markup, HTML5 Style
3.   More HTML5 Semantics
4.   HTML5 Forms
5.   HTML5 Audio and Video
6.   Introducing CSS3
7.   CSS3 Gradients and Multiple Backgrounds
8.   CSS3 Transforms and Transitions
9.   Embedded Fonts and Multicolumn Layouts
10.   Flexbox and Media Queries
11.   Geolocation, Offline Web Apps, and Web Storage
12.   Canvas, SVG, and Drag and Drop

Custom Outline
Coming Soon!

JavaScript

Overview
Tour JavaScript, an important part of modern web applications. Learn to respond to user interactions and update web pages dynamically using the Document Object Model. Features from ECMAScript 6 (ES6) covered.

Core Concepts (JCCC Objectives)

Core language features (variable, decisions, loops, arrays)
The Document Object Model (DOM)
Handling Events
HTTP and AJAX
Working with Forms
Working with objects and JSON
Core ES6 features (let, arrow functions and more)
JavaScript classes
Using Promises

Custom Class Outline

What is JavaScript?

How does JavaScript relate to HTML/CSS?
What is the role of JavaScript?
Behavior emphasis and programmatic logic
Context

Where to Implement JavaScript
Hello World!

Forms of output

document.write()
alert()
innerHTML
console.log()

The C based language style
Basic Programming logic

Variables
Comments
Assignment operators
Concatenation
Comparison operators
Mathematical operators
Algebra: Remembering PEMDAS
Default Functions and User defined functions
Variable scope
Data types

Strings

String methods

Numbers

Number methods
The math object
Random

Dates

Date formatting
Date methods

Programming Conventions

Objects
Arrays

Array methods

Conditions

If, else
switch

Loops

for
While

Exercises:

jQuery

Overview

Coming Soon!

ReactJS

Overview

Get up to speed with React, an open-source library for building web-based user interfaces. Set up a React project using Webpack. Build a basic React component. Use React features such as handling events, using routes passing properties and state.

Core Concepts (JCCC Objectives)

Introduction to Webpack and project setup
JSX files
React components
React properties
Working with state in components
Routes
Event handling
Component lifecycle

NodeJS

Overview

Build asynchronous, event-driven applications using Node.js, a server-side platform built in JavaScript. Cover the basics of Node.js before creating simple services to store and retrieve objects using MongoDB.

Core Concepts (JCCC Objectives)

Setting up Node.js
Asynchronous programming with Node.js
Modules and npm
Creating a simple server
Using Express to create web applications
Creating simple RESTful services
Setting up MongoDB
Using MongoDB in Node.js
Deploying Node.js applications

Wordpress Intro

Overview

Set up, create and customize a WordPress site, beginning with creating a website and multiple pages. Install and modify themes. Discuss how to use WordPress as a content management system, create menus, and modify the CSS behind the theme. Add videos and podcasts. Coursework includes RSS for syndication and basic analytics.

Core Concepts (JCCC Objectives)
1.   First Steps with Wordpress
2.   Getting Familiar with WordPress
3.   Settings
4.   Managing Accounts
5.   Setting up a WordPress Theme
6.   Widgets and Plug-ins
7.   Adding Content
8.   Menus
9.   Working with Media
10.   Managing Comments
11.   Getting Fancy with Themes
12.   Advanced Theme Development
13.   Custom Content Types
14.   One Installation, Multiple Blogs
15.   More Ways to Customize WordPress
16.   Best Practices

Outline

What is Wordpress?

What is a blog?
What is a CMS?

Wordpress Setup

The Client-Server Construct & LAMPP Stack
Running a Server
The Web Root
PHP/MariaDB (MySQL) and Wordpress
Getting Wordpress

Wordpress.com vs Wordpress.org
Hosted vs. Privately Hosted
Install steps
Wait! What just happened?!!!

Wordpress Administration

Public/Private Area
Navigating to your new site
The dashboard and menu
Navigation tips (top level and sub-menus)

Home
Updates: Keeping your installation up to date

The CMS/WYSIWYG Concept
Post

What are post?
Managing blog post

Media Managing your media library

Where do my images go?
What does Wordpress do with them?

Pages

What are pages?
How are pages different from post?
Managing pages

Comments

What are comments?
Managing comments

Users

What can you do with user adminstration?
User types explained

Subscriber
Contributor
Author
Editor
Administrator

Tools

What are tools?

Settings

What can you manage in Settings?

Appearance

Wordpress Themes
Customize
Widgets
Menus
Header
Editor
Changing Themes and How That Changes Things
Tweaking a design with CSS

Plugins

What are plugins?
The power of plugins

Knowing your environment limitations

Wordpress.com
Wordpress.org
Free Wordpress hosting
Paid Wordpress hosting

Building and Managing Your Site!

Wordpress Dev

Overview

Core
Themes
Plugins

The Client-Server Model

The CMS Construct

Preserving the Core

Using and Managing Themes

Developing Themes

Theme Components
Theme Plugin Structure
Your First Themes

Bootstrap
Flex

Using and Managing Plugins

Developing Plugins

Plugin Components

PHP Functions
Header
Hooks

Actions
Filters

Supporting Assets

Plugin File Structure
Your First Plugin

A minumal plugin example

Plugin Functionality and Use Case

A simple, full-featured plugin

Plugin Components Further Explained

Default Hooks
Custom Hooks
Plugin APIs

Advanced Features

PHP

Overview

Coming Soon!

Search Engine Optimization

Overview

Take a systematic approach to the art and science of search engine optimization (SEO). Set the foundation of SEO efforts, move to building an SEO strategy. Use tools and tasks needed for a comprehensive SEO plan.

Outline

Before You Begin

Website Fundamentals
Website Conversions and Usability
SEO Templates

Part 1: Content

Content Marketing
Tools and Strategies
Content Strategy
Blogging
Headlines
Attracting Global Traffic with Content

Part 2: Code

Keywords
Keyword Mapping
Optimizing your Site

Part 3: Credibility

Links
Measuring your Credibility
Link Building
Earning High-Quality Backlinks
Guest Blogging
Tools and Tricks

Part 4: Connections

Google Plus
Winning on Social Media
Social Media Hacks

Part 5: Cash

5 Website Monetization Models
Making Money with your Blog
Subscriber and Lead Growth Tools
Content Monetization Engines

Google Analytics

Overview
This class provides significant introduction to Google Analytics and assist the student in getting certified in Google Analytics. Many find that it is helpful to have a live instructor to explain the nuances and obscurities in the official Google Analytics training. I provide and explain the required web development context and understanding of what "web analytics" really is.

Setting up Google Analytics:

Prerequisite: You need a Google account.
Two Requirements:

Domain Account must be added to your Google Analytics account.
Code for Google Analytics must be added to your site.

https://analytics.google.com/
Sign in with your Google account.
You should see the following, click sign-up:

Google Analytics Sign-up Screenshot

You will be presented with a form to add your website. You will need to have a web site that you are able to add code to. If you do not have a web site you can setup a blog on Google Blogger or use the Google Analytics Demo Account. If that is the case, skip these site setup steps.
- Fill in your Account Name, Website Name, Website URL, and select an Industry Category and Reporting Time Zone.
- Under Data Sharing Options, check the boxes next to the options that you want.
- Click Get Tracking ID.
- From the Google Analytics Terms of Service Agreement that opens, click “I Accept.”
- Script setup (analyticsjs):
Links & Resources:

Google Analytics Information:
- This is the main Google Analytics Solutions page
- https://www.google.com/analytics/
Google Analytics Dashboard:
- Navigate to the following link and sign in with your google account (or create one if needed):
- https://www.analytics.google.com
Support and Development:
- The following are useful places for support or Google Analytics developer information:
- https://support.google.com/analytics/
- https://developers.google.com/analytics/
- https://developers.google.com/analytics/devguides/collection/analyticsjs
Adding the Test Site: Demo Account Google Merchandise Store
- Use this first link to read about adding the demo account to your own account.
- You can scroll down on that page and select "Access Demo Account" or use the link that follows this one.
- https://support.google.com/analytics/answer/6367342?hl=en
- This is the link provided to add the demo account for Google Analytics to your own account.
- This feature allows you to see the traffic of a live store courtesy of Google.
- https://analytics.google.com/analytics/web/demoAccount
- The following link is the live store that you will be seeing traffic from:
- https://shop.googlemerchandisestore.com
Google Analytics Academy
- Google provides free live training and instruction to earn four certificates here:
- https://analytics.google.com/analytics/academy/
Campaign URL Builder
- Google provides a campaign builder form that will help you in building urls for campaign tracking:
- https://ga-dev-tools.appspot.com/campaign-url-builder/
Google UTM Tracking Template
- Google provides a tracking spreadsheet template for creating multiple links for a given campaign.
- https://docs.google.com/spreadsheets/d/1tf3_SczMMTTf-ZJ9Bkb70xps_DPGLBTd4wkHPyadKSA/edit#gid=1
Google Analytics Campaign Events
- Google events allow you to track behavior with the tracking click events to discern behavior:
- By adding this JavaScript code snippet to any HTML element:
- Syntax: onclick="ga('send', 'event', 'Category', 'Action', 'Label', 'Value');"
- Example: onclick="ga('send', 'event', 'Payment', 'Link Click', 'Link Tracking' ,'1');"
- https://developers.google.com/analytics/devguides/collection/analyticsjs/events
Google Supplemental Tools
- Google Webmaster Tools:
- https://www.google.com/webmasters/
- Google Blogger:
- https://www.blogger.com/
- Adwords:
- https://adwords.google.com/
- Adsense:
- https://www.google.com/adsense/
- YouTube:
- https://www.youtube.com/ (has GA tracking adder)
- Significant Things:
- MUST SEE!
Basic Web Knowledge
- https://www.w3schools.com/
This custom curriculum has been developed by Dan Guinn, all rights reserved.

Programming Fundamentals

Overview
Receive an introduction to fundamental programming skills, focused on object-oriented topics such as classes, objects, methods, and properties. Course content uses JavaScript (ES6) to build on programming skills.

Core Concepts (JCCC Objectives)

Values, Types, and Operators
Program Structure
Functions
Data Structures: Objects and Arrays
Higher-order Functions
Objects, Prototypes, Methods, Properties and Constructors
Bugs and Error Handling
Modules

Excel VBA Programming

Overview

Learn how to code and create VBA Applications in Excel.

Course Concepts (JCCC Objectives)
Visual Basic Editor
1.   Visual Basic for Applications
2.   Object programming
3.   The Object Browser

Programming basics
1.   Data basics
2.   Scope of variables
3.   Scope of procedures

Control structures
1.   Decision structures
2.   Loop structures

Custom dialog boxes
1.   User forms
2.   Events

Debugging and error handling
1.   Errors
2.   Debugging
3.   Error handling

Course Material: Course Material: Excel 2010: VBA Programming

Teacher Provided Resources

The Excel VBA Object Model Chart

Class Outline &

Visual Basic for Applications Quick Reference
Class Objectives Part 1

What is VBA?
VBA vs. Macros & Formulas
VBA & OOP

The Excel VBA Object Model Chart

VBA Editor Features

Project Explorer
Properties Window
Code Window
Object Browser

Events & Buttons Excercises
Unit Summary / Practice Activity
VBA Programming Basics

Datatypes
Variables
Opertators
Expressions

VBA Functions & Procedures

The Ecapsulation Concept

VBA Scope

Procedure-level
Private module-level
Public module-level
Application level (not in book)

Control Structors Introduction

If Then
If Then Else
Select Case

Class Objectives Part 2

Control Structures Cont.

For Next
For Each
Do Loop
Do While

Unit Summary / Practice Activity
Forms

Creating Forms in the VBE (Visual Basic Editor)
Controls
Events
Form Validation

Unit Summary / Practice Activity
Debugging & Error Handling

Step Into
Step Over
Step Out
The VBE Immediate Window
The Locals Window
On Error GoTo
On Error Resume Next

Unit Summary / Practice Activity
Extra (If Time Allows) - Ribbon Editing

Advanced Extras

Ribbon Editor

Access VBA Programming

Overview

Coming Soon!

SQL Fundamentals

Overview
Learn the key concepts of Structured Query Language (SQL), and gain a solid working knowledge of this powerful and universal database programming language.

Class Outline Pt1:

What is a database?
Popular databases
Database terminology
CRUD
The Client/Server Model
SQL Management Tools
Our databases (Access, Oracle, MySQL)
Data Migration & SQL Scripts
Your first SQL script
Three Rolls of SQL

Data Definition
Data Manipulation
Data Authorization

Introduction to the SELECT clause

Class Outline Pt2:

Review
Navigating to Other Network Databases
Form Usage
Data Types
DISTINCT SELECTS
OPERATORS
LIKE
AND
LIMIT
BETWEEN

Class Outline Pt3:

Review
Case sensative LIKE
FUNCTIONS

Aggragate Functions
Scalar Functions
Mathematical Functions
Text Functions
Date Functions

INSERT - Create
SELECT - Read
UPDATE - Update
DELETE - Delete
SET
ALIASES
Introduction to the JOIN Concept

Cartesian Product

Types of JOINS

NATURAL JOINS
INNER JOINS
SELF JOINS
OUTER JOINS

Class Outline Pt4:

Review
JOIN Types (part 2)
CLASS PROJECT (Putting SQL in context. SQL in Relation to Applications)

Application Connections
A login query

Encryption functions

Application SELECTS (creating SELECT statements for applications)
SQL and the Application CRUD processes in action

Application Record IDs
SELECT (details)
UPDATES
DELETES
Form INSERTS

Recommendations for furture growth with SQL
Evals

Resources:

Oracle

The Oracle Database
Oracle Database Express Edition 11g Release 2
MySQL (now owned by Oracle)

MS Access Database
MariaDB (Completely open-source version of MySQL)

XAMPP Server Stack (including MariaDB)
For installation, see the FAQ page for your operating system on Apachefriends.org.

Reference:

Chart of basic JOINS
JOIN REFERENCE CHARTS (Source Page)

Excel Fundamentals

Overview

Content introduces essential uses, tools and features of Microsoft Excel. Enter, edit and format data. Manage data in a single worksheet. Manage workbooks. Link worksheets and create basic functions. Design and edit charts. Organize large amounts of data.

The student will receive a specialized training spreadsheet developed for Excel instruction by the instructor called "Excel Super Powers."

Excel Advanced

Overview

Designed for students looking for discussion on tables, pivot tables, pivot charts, financial functions, structured references, goal seek, and workbook protection.

The student will receive a specialized training spreadsheet developed for Excel instruction by the instructor called "Excel Super Powers."

Access Fundamentals

Overview

Coming Soon!

Introduction to Web Development

Overview
This class introduces students to the tools, technologies and methodologies to build websites. The goal is to understand industry vocabulary and techniques used by people already in the web development world.

Outline

Web Development Process

Requirements gathering
Wireframing, creating prototypes
Development
Testing
Deployment
Popular processes:

*What is SDLC?
Waterfall,*RAD, Agile, Scrum, *Kanban
Project interaction concepts

*Analytic Conversion Concept

* Client-Server Construct

Web Server Technologies
Web Languages Overview

Tools of the Trade

Editors vs IDE's
*SDLC Tools

Atlassian Products: Jira, Confluence, SourceTree, Bitbucket, Hipchat
Slack

Version Control Systems (GIT, SVN, Bitbucket)
NodeJS and NPM
*Other Servers: XAMPP, WAMPP, LAMPP Stacks

Key Web Technologies

HTML
CSS
JavaScript
JavaScript Libraries and Frameworks (jQuery, Angular, React, etc.)
Content Management Systems (WordPress, Drupal, etc)
*Server-side languages, PHP, JSP, Ruby on Rails
*Web Services & Feeds: REST, SOAP, XML, JSON, RSS
Databases

Other things to consider

Responsive Web Design
Security
SEO

*Supplemental Content added by instructor to JCCC Objectives.

Comparison of common types:
http://www.satejinfotech.in/the-different-software-development-models-part-1/
https://www.atlassian.com/software/jira/comparison

Excel Intermediate

Expand Excel knowledge with an in-depth look at conditional formatting, advanced text and analysis functions, vlookup, outlines and subtotals.

The student will receive a specialized training spreadsheet developed for Excel instruction by the instructor called "Excel Super Powers."

Custom Training

Do you require custom technical training or tutoring? I regularly develop curriculum for numerous web languages and web development. Various options are available to meeting your instruction needs. Here are some for your consideration:

Private one-on-one tutoring in a professional training environment
Onsite contract instruction, individual or groups
Group training, in a professional training environment

Contact me (information on resume), with any questions or a consultation.

FOLLOW & EXPLORE:

Web Design & Development by Dan Guinn

JCCC & Contract Student Resources

Class Information

$( )

Custom Training