JCCC Student Resources

Supplemental Student Information for Students of Classes at JCCC from Dan Guinn.

  HTML5 and CSS3 Fundamentals


Book Cover:

Class: HTML5 and CSS3 Fundamentals

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


  • 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.


  • 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
      • localhost
      • Machine name
      • Ip address
    • 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
      • In page CSS
    • Tags Page
      • External CSS
      • Anchor types
      • Numerous tags
    • Menus
      • The duplication menu
      • The frame menu
    • Images Page
      • Storing and referencing images
    • JavaScript Page
      • Understanding JavaScript's relationship to HTML/CSS
      • Simple Example
      • jQuery Example & External Script Libraries
    • Layouts Index Page
      • The folder level problem
      • Layout 1 - Simple stack column layout
      • Layout 2 - Two column layout
      • Layout 3 - Media Queries
      • Layout 3 - Simple Flex
      • Layout 4 - Simple Bootstrap
    • CSS Animations Page
    • Forms Index Page
      • A simple web contact form 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



  HTML5 and CSS3 Advanced

Book Cover: HTML5 & CSS3

HTML5 and CSS3 Advanced

Course Material: HTML5 & CSS3 For the Real World, 2nd Edition, Goldstein, Lazaris & Weyl, Sitepoint.


  • Coming soon!

Recommended Resources

Teacher Recommended Tools



  Excel VBA Programming


Book Cover:

Class: Excel VBA Programming

Course Material: Course Material: Excel 2010: VBA Programming

Teacher Provided Resources

Class Objectives Outline & Resources

  • Visual Basic for Applications Quick Reference
  • Class Objectives Day 1
    • What is VBA?
    • VBA vs. Macros & Formulas
    • VBA & OOP
    • VBA Editor Features
      • Project Explorer
      • Properties Window
      • Code Window
      • Object Browser
        • Search
    • 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 Day 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



  Access VBA Programming



  SQL Fundamentals

Book Cover: SQL Fundamentals

Class: SQL Fundamentals

Class 1 Outline:

  • 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 2 Outline:

  • Review
  • Navigating to Other Network Databases
  • Form Usage
  • Data Types
  • LIKE
  • AND

Class 3 Outline:

  • Review
  • Case sensative LIKE
    • Aggragate Functions
    • Scalar Functions
    • Mathematical Functions
    • Text Functions
    • Date Functions
  • INSERT - Create
  • SELECT - Read
  • UPDATE - Update
  • DELETE - Delete
  • SET 
  • Introduction to the JOIN Concept
  • Types of JOINS

Class 4 Outline:

  • 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





  Access Fundamentals

Book Cover:

Class: Access Fundamentals

Coming Soon!



  Programming Fundamentals

Book Cover:

Class: Programming Fundamentals

Coming Soon!




Book Cover: jQuery Fundamentals

Class: jQuery

Coming Soon!



  Search Engine Optimization

Book Cover: SEO Like I'm 5

Class: Search Engine Optimization

Coming Soon!



  Excel Advanced


Book Cover:

Class: Excel Advanced (3)

Course Material: Excel Advanced (3)

  • Coming Soon!

Teacher Provided Resources

Class Objectives Outline & Resources



  Google Analytics

Google Analytics

Class: Google Analytics

Class 1 An Introduction and Overview of Google Analytics

  • Disclaimers - What this class is and is not.
  • Types of Web Measurement - Digital Marketing Measurement Models
    • What are they? Why? Implementation?
    • Definition: A methodology that includes the gathering of information through resources such as reports, dashboards and online conversions for the purpose of improving strategy and campaign performance results.
  • Basic Concepts:
    • Collection of data (data harvesting)
    • Processing of data into actionable information
    • Translating information into key performance indicators (KPI)
    • Formulating strategic initiatives
    • Ascertain Value
  • The Cyclical Model - A Web Development Interaction Approach:
    • Implement - (Develope/Experiment as an Informed Action)
    • Measure
    • Analyze
    • Learn
    • Recommend
  • THE DATA SOURCE: Clickstream (Book, page 5-7)
    • Avoid the “single source of relevant truth” concept with respect to overall analytics as quality analytics will include multiple streams of information. 
    • On site (site interaction) and Off-site Analytics (Global Internet)
  • The Google Analytics Approach: A, B, Cs of Measurement
    • Audience
    • Acquisition
      • Source
      • Organic Search
      • Direct
      • Social Media
      • Referral
    • Behavior
      • What is the user doing?
    • Conversion
      • What are the desired goals?
      • Destination
      • Duration
      • Page Screen Visits
      • Event
  • Setting up Google Analytics
    • Prerequisite: You need a Google account. 
    • Two Components:
      • Domain Account must be added to your Google Analytics account.
      • Code for Google Analytics must be added to your site.
      • The client/server model
    • Goto: 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 use the Google Analytics Demo Account. If that is the case, skip these site setup steps and see instructions later in this outline.
    • 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):
      • Information: https://developers.google.com/analytics/devguides/collection/analyticsjs/
      • Getting the needed code: Admin -> Property Settings -> Tracking Info -> Tracking Code
  • How the Script Works:
    • An example of the Google Analytics code in the wild.
      • HTML and JavaScript Explanation and script placement.
    • An example of Google Analytics event tracking in the wild.
      • Google Chrome Developer Tools
      • Taking a look at the GA cookies in application cookies.
      • How JavaScript functions and parameters work.
      • Analyzing a Google Analytics page hit in network traffic:
        • A Sample url hit string for this page. You may see several of these in network traffic during the page load. 
        • The url is ampersand delimited. Notice some of the discernable information in the tracking url:
          • http://www.google-analytics.com/r/collect? -  The domain and page where your hit registers.
          • v=1 
          • &_v=j62
          • &a=120461928
          • &t=pageview - The type of action.
          • &_s=1
          • &dl=http%3A%2F%2Fdanguinn.com%2Fjccc-students%2F - The url of this page
          • &ul=en-us - The language of this page
          • &de=UTF-8 - The encoding of this page
          • &dt=DANGUINN.COM%20-%20Jccc-students - The title of this page
          • &sd=24-bit
          • &sr=1366x768 - The screen resolution
          • &vp=490x638
          • &je=0
          • &fl=27.0%20r0
          • &_u=AACAAEABI~
          • &jid=699500873
          • &gjid=464394241
          • &cid=1479283727.1502992055 - Random user identifier
          • &tid=UA-75557500-1 - The tracking code of this page.
          • &_gid=748479334.1505590455
          • &_r=1&z=686253164
        • These data points get translated into the dimensions (categories) of metric data in Google Analytics.
      • A Simple Event Code: onclick="ga('send', 'pageview', 'what you are tracking');"
  • Google Analytics Demo Account: Google provides a free test account of a live web store you can experiment with:
  • Google Analytics Interface Walkthrough
    • Home
    • Customization
    • Reports
      • Realtime
      • Audience
      • Acquisition
      • Behavior
      • Conversions
    • Dashboard Concept (why a dashboard?)
  • Answering Basic Analytical Questions about the Google Analytics Demo
    • Audience - Who came to the site?
      • Where geographically?
      • Have they been here before?
      • How often do they come back?
      • What devices do they use?
    • Acquisitions - How did they get here?
      • What channels are driving the most traffic?
      • What sites are sending traffic to the site?
      • Which campains are driving the most traffic?
      • What channels are generating the most monetarily?
    • Behavior - What did they look at?
      • Which pages?
      • Where did they enter and leave?
      • What actions did they take?
    • Conversions - Were they successful?
      • Did they complete the goals?
      • Did they complete a transaction?
      • Did they drop out?
  • The Google Complimentary Ecosystem in Other Google Products:
    • Show Blogger
    • Show YouTube
    • Using them together to track a campaign

Class 2 

  • Going Deeper
    • Review
    • Additional knowledge
    • Getting Google Certified!
  • HTML Elements and how your developer can help you.
    • Inline coding reviewed
    • Sample scripts of "event listeners" (double meaning)
    • HTML - elements ids and classes
    • Using JavaScript and jQuery to target multiple or single events without inline coding
  • Email Marketing Concept Introduction
    • Email Markup and HTML
    • Click metrings on all links
    • Tracking types
      • Direct to tracking enabled page
      • Track and forward
      • URL tracking with url parameters enabled
        • Medium (required)
        • Source (required)
        • Campaign (required)
        • Content
        • Term
  • Getting back in the interface
    • Accounts, Properties, Views
    • Permissions
    • Views - Recommended types: Master, Test, Raw/Unflitered
    • Things you might have missed...
      • sending reports on schedule
      • notes
    • Metrics vs. Dimensions
    • Source vs. Medium
  • Google Analytics Academy - Let's do this... together!

Putting it All Together

Links & Resources:

Related resource, webmaster tools: 

Google Analytics Solutions:

Getting to your cloud instance of Google Analytics:

Support and Development:

Adding the Test Site: Demo Account Google Merchandise Store

Google Analytics Academy

Google UTM Tracking Template

Campaign URL Builder

Basic Web Knowledge