week 1

1 Introduction to Class + HTML Basics

Read  BOOK 2: Part I "HyperText Markup Language" AND Part II "HTML,..." and go over:

General

• Introduction / Course Overview (in clas) - Video (recorded Spring 2024)
• Group Collaboration Tools (note: work is individual unless stated as group work)
• Writing Expectations & Resources
• Campus csweb01 Server  &    Unix
   

HTML beginning:

• html intro lecture
• HTML intro,
• Additional HTML (video- tables and more):
  • Tables
  • Div Tags (and others)
  • Media
  • URL and Hostnames
• Informal demo of Adobe Dreamweaver (in class)
• Setup Group Meeting day/time and zoom link post to Canvas->Assignments->Group Meetings by Jan 30 @11pm (one posting per group). You will start meeting week 2.
• Informal Lab: Play with HTML in w3schools interactive site

week 2

2 Design Principles + Static Web Page Continued

Read  and go over:

• Design intro (video)
• Navigation (video)
  
• A few General Terms/Concepts/Considerations
• Example of Accessibility Design - IBM corporation Accessibility Policy
• Evaluating a Site & a Brief checklist
• LAB 2.1- (not recorded) SHOW instructor by NOW DUE Feb. 1 (individual work). create a simple webpage of your resume including a picture of your self, name it resume.html and put all the files in your csweb01 account (under public_html directory) - uses some div tags, color (nicely) your body, use design pricinples to group and allign your content (show to your instructor for check off during class).
  
  
• LAB 2.2- (recorded ,DUE 9:30am Feb 6 - turn in URL to main resume page from csweb01 to Canvas->Assignments->Lab2.2) install trial version of Dreamweaver- read/view their online tutorials and create a mutli-page example of your resume using Templates and upload to csweb01.

TOOLS:

week 3

3 CSS

Read  BOOK3 Part III "CSS" and go over:

• CSS part 1 , CSS part 2 lectures
• CSS overview and example (3 column+header+footer+nav bar) and 2nd example (unequal width columns)
  
• LAB 3.1 - using your previously created multi-page resume, create a styles.css file that creates styles you apply for different text content in your pages, the body of each page, etc. Attach the styles to your template so that it becomes part of each page and then apply as necessary the styles (if they are "named" styles versus styles associated with HTML tags). Show peers on Feb. 8 what you have (not recorded)

week 4 (,5)

4 Clientside JavaScript

Read BOOK 2: Part IV "JavaScript" and go over:

Basics

• Lecture: Overview (video-part 1 AND part 2)
• Intro
• Standard Output
• Conditionals and Loops
• Objects, Functions
• JavaScript resources

Interactivity:

• Event Handeling
• Form Validation

DOM - Document Object Model

• DOM
• DOM and Cookies
• DOM official site

More:

• JavaScript to Server side Program 
• Javascript and Language Detection
• JQuery- A JavaScript Framework
• Examples
  • 1
  • 2
  • 3
  • 4

Informal Lab: Learn Bootstrap AND Bootstrap5 (HTML, CSS + Javascript framework) via w3schools. Also, look at Getting Started in Bootstrap

week 5 (,6)

5 Cloud Overview + Web Systems Stack

Read BOOK 1 Chapter 1, Go over:

• High Level Cloud Intro (YouTube)
• Cloud Terminology, Cloud Identity and Authorization
• Google and Amazon(AWS) Cloud
  
  
• Google Cloud : Hosting a Static Site (HTML, CSS, ClientSide JavaScript) on Google Cloud - via HTTP (nWo SSL certificate needed) or via HTTPS (with load balancing and need an SSL certificate) : Video Discussing GCP
  • LAB 5.1- show to your instructor when done follow step-by-step instructions [NOTE: you do not have a registered domain name just use a unique name for your storage bucket] AND you can see me doing it
    • note previously there existed a codelab (has been removed)

Resources:

• Google Cloud Credits (see Canvas Announcements for details)
  

week 6 (,7)

6 Serverside Programming: NodeJS, WebStorm

Read BOOK 3 Go over

• git + GitHub Lecture   as video     
  • tutorial, video review, GitHub ReadMe AND GitHub Wiki, GitHub repository creation, Sharing repository
    
    
• NodeJS basics lecture
  • NodeJS basics
  • NodeJS files
    
    
• Webstorm: GitHub account setup, Webstorm Project Enable Git+ associate with GitHub Respository
  
  
• Lab 6.1: Go over Jetbrains WebStorm documentation and create a NodeJS file and run locally, Then Enable Git&associate w/ GitHub repository and push it. (finish by 1 week -get help from instructor if you need it)

week 7

7 FullStack: MEAN/MERN overview + NodeJS on the Cloud

Read BOOK 1 Chapter 2 and go over:

• First quick discussion: HTTP Request/Response
• MEAN (or MERN) lecture
  • MEAN stack
• Read : quick design steps for a MEAN or MERN application (by illustraton)
  
  

week 8

8 "MEN" featuring Express framework, on the Cloud

Read BOOK 1: Chapter 3,4 and go over:

• Express Lecture and template (interface) options
  • Express
  • Reading Request Data (from URI query or forms)
  • express and MVC AND detailed New Customer Example
    
    
    
• Development using Webstorm IDE and Git
• Install IDE WebStorm
• demo: Create a NodeJS Express project in WebStorm
  • run configurations
• GIT & deployment to github or bitbucket & deployment from github to heroku app directly (NOTE: in this class we will use :
  • Git overview YouTube
  • GITHUB: how to create a repository (or see below how to do directly by sharing in WebStorm)
  • GIT & Webstorm setup with examples of deploying to both bitbucket and github
  • Read Webstorm documentation on using git
    
    
    
• Deployment to Google Cloud Run (serverless Google Cloud --like Amazon Lambda)- Video: Cloud Run (no container needed)
  • Deployment from Webstorm Code Directory Manually to Google Cloud Run [ AND how to remove Cloud Service or Project --when want to stop running]
  • Deployment from Github repository to Google Cloud Run AND more details
    
    
    
• Development: Webstorm IDE, Git and auto deploy to Heroku (a different cloud offering)
• AUTOMATIC deployment from GitHub to Heroku app
• Manually (from heroku console) triggering copy of code from GitHub to Heroku app
  
• WE ARE NOT doing this --but, if you are interested MANUAL Manual Command Line (CLI) deployment Heroku + NodeJS + Express
  
  
  
  
• LAB 8.1 -setup WebStorm with Git and Google CloudRun and create beginning NodeJS+Express project (use this code as a base --note this code is very lightly commented --not sufficient for what will be required of course work --but ,is a quick sample) and show deployed to both your local machine and running on GoogleCloudRun. Demo it running in both. ALSO make sure you know how to stop the code running and demo this. Show you know how to deploy from Git or Manually to Google Cloud Run

week 9

9 Database - MongoDB

Read BOOK 1 Chapter 5,6 and go over:

• Data Overview & MongoDB
• How to Create MongoDB Atlas database (video demonstration)
• NodeJS with MongoDB
  • MongDB NodeJS Querries
  • Connect from Serverless Cloud (w/dynamic IP) to MongoDB Atlas

week 10-11

10 Lab Database - MongoDB and more on GitHub Projects

Go over

• MongoDB Atlas -- currently given credits on under the Github Student pack.
• [cuurently dysfunctional] Experience 1 - (HOUR 1 ONLY- needsGoogle Cloud Skills Boost credits ) Getting Started with MongoDB Atlas on Google Cloud
• Experience 2- (webage version ) CodeLab NodeJS + Express + MongoDB Atlas on Google CloudRun
  • step 3 -
    • 1) After subscribing log into MongoDB Atlas with your Google email (campus horizon email)
    • 2) First time create an "organization" givde it a unique name like "CS351_YourLastName"
    • 3) From the Organization create a new "Project" --give it a unique name
    • 4) Then in this Project create a Deployment on Google and this then is what you are seeing in "step 3" of the codeLab CHOOSE a free Google Server (e.g. M0, you can change the name of the cluster or keep the default name cluster 0)
    • 5) After creating the instance it will ask you to setup creditials to log in -- REMEMBER your login and password you setup. MAKE sure that you also add your computer's IP address
      
      
• GitHub Project Management:(overall) Video-example
  • Issues (you can create from issues tab or from a project), Note Issues can not have due dates but, the Milestones they belong to can.
  • GitHub Projects (you can have 1 or more projects associated with a repository) - how to create
  • GitHub Milestones (groupings of issues )
  
  
  
  
• PRELAB - Setup a MongoDB database called "shoppingsite" that contains a collection called "customers". Then understand and execute the sample code --- a NodeJS+Express(w/EJS) project which reads in form data for a new customer and creates a new document in the customers collection.
• LAB 10.1 - DUE Extended to 4pm March 29 (original MARCH 28 start of class). In your assigned group work on deployment of a Database and Collection of your choice for your Project extending the PRELAB work you have done. Add code and an interface form to display the first 10 customers in your "customers" collection. (remember use information from week 8 about deploying to Google Cloud Run directly from code in Webstorm for a NodeJS + Express project)

***Spring Break *****

week 12/13

11 Angular or React - Single Page Applications

Read Chapter 8-10 and go over:

• Angular: Lecture part 1, part 2 on services+data,
  • intro
  • processing http requests and responses from AngularJS
  • How to add Angular to a NodeJS+Express Webstorm project

• React: a little intro , tutorial and testing library(including DOM assertions)
  • Create new Project (command line or from WebStorm IDE)
  • React Dev Tools for Chrome
  • Official website
  • TicTacToe
    
    
• LAB 11.1 -learn react through tutorial make tic tac toe (from reactjs.org site) - not officially turned in but, may take attendance

week 13

12 AWS Cloud

Go Over

• Amazon Web Services (AWS):

  • of AWS for Admins For Dummies (in safari books in library.csueastbay.edu).

    • AWS Academy accounts [ NOTE: it can take minutes++ to launch the sandboxed labs --be patient]
    • AWS overview YouTube
      
      

    •  AWS QwikLab - ( you have each been allocated 2/person to do these--do not use more credits)

      • Introduction to AWS EC2
      • Introduction to S3
      
      
      
    • EC2
      • Launching an EC2 instance (screens may varry over time)
        • what if you can't find your instance
      • Connecting to a Launched EC2 instance (using putty or...)
        
      • How to Stop an EC2 instance (You still are paying for storage)
      • How to Terminate an EC2 instance (now you pay for nothing --its gone read here or if broken search on charges terminated EC2 instances)
      • EC2 instance and security group settings
      • EC2 --using
        
        
    • AMIs:
      • search Amazon Marketplace for a (free, cheap,??) pre-configured AMI
        
      • AMI Instance (HW) types
        
        
    • S3 overview
      
      
      
• Lab 12.1:

  AWS Academy: Cloud Foundations: (must have setup your AWS academy account --see Canvas announcements)

  • Modules 1-4, 6,7 (NOTE: only modules 4,6 and 7 have labs) - you have limited credit make sure you stop a session when you are pausing.
  
  

week 14

14 Work on Project

week 15

15 FINAL Project Demos, Peer Reviews and Discussions