|
Outline
|
week 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 class)
- Group Collaboration Tools & GitHub
- Writing Expectations & Resources
- Unix
- 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 )
- TODOs:
- 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.
- Create GitHub repository
- Read your announcements for Google Cloud Credits and redeem them now.
- Install software - students may use any IDE, editor, or AI-assisted development environment they prefer.
[Students are responsible for selecting, installing, configuring, and learning their chosen development environment. The course focuses on web development concepts and technologies rather than IDE-specific instruction.]
Recommendations
- vscode + "live server" extension + OpenAI Codex extenstion tied to CSUEB account + Google Cloud Code exgtension
- cursor + "live server" extension + OpenAI Codex extenstion tied to CSUEB account -use codex over built in agent for free
- vscode + "live server" extension + GitHub CoPilot
- or?
- AI-Assisted Development: Students are encouraged to use AI coding assistants (e.g., Codex, Copilot, Gemini, Cursor) for learning and development. However, students are responsible for understanding, explaining, debugging, and maintaining all code they submit. You will be tested on your learning without the assistance of AI.
- NOTE: later you will install other tools depending on your choice
HTML:
Labs:
- Lab 1.1: Create first webpage (your resume) using your IDE -and run locally
- Lab 1.2: Hosting a Static Site (HTML, CSS, ClientSide JavaScript) on Google Cloud - via HTTP (no SSL certificate needed), now deploy your webpage to Google Cloud.
|
week 1
2 Design Principles + Static Web Page Continued
Read
and go over:
TOOL: Optional Visual Web Authoring Tools
|
week 2
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 next class what you have (not recorded)
|
week 3
4 Clientside JavaScript
Read
BOOK 2: Part IV "JavaScript"
and go over:
Basics
Interactivity:
DOM - Document Object Model
Calling ServerSide: fetch() or Other options (forms/links)
Homework: Learn Bootstrap AND Bootstrap5 (HTML, CSS + Javascript framework) via w3schools. AND Getting Started in Bootstrap |
week 4-5
5 React - Single Page Applications
Read Chapter 8-10
and go over:
On your own: Investigate Playwright - a modern browser automation framework for end-to-end testing of web applications (
AND
Playwright can literally record what you do in Chrome and generate the test automatically.
Documentation:
https://playwright.dev/docs/codegen |
week 6
6 Cloud Overview + Web Systems Stack
Read BOOK 1 Chapter 1, Go over:
Resources:
- Google Cloud Credits (see Canvas Announcements for details)
|
week 7 NodeJS Serverside Programming (MidTerm)
7 Serverside Programming: NodeJS
Read BOOK 3 Go over
- git + GitHub Lecture as video
- NodeJS basics lecture
- Lab 7.1: Go over information for YOUR chosen IDE (use AI to help you) and create a NodeJS file and run locally, Then Enable Git&associate w/ GitHub repository and push it. (finish this week -get help if you need it).
|
week 8-9
8 MEAN/MERN overview, Express framework, on the Cloud
Read BOOK 1: Chapter 2-4
and go over:
- First quick discussion: HTTP Request/Response
- Express Lecture and template (interface) options
- Example of an IDE creating a NodeJS+Express Project with Git & GitHub & running locally
(you are responsible for understanding this for YOUR chosen IDE)
Example is with Webstorm
- Deployment to Google Cloud Run (serverless Google Cloud --like Amazon Lambda)- Video: Cloud Run (no container needed)
- Example: (you need to research for YOUR chosen IDE --this is your responsibility --use AI to help guide):
- Environment variables (.env) and protecting credentials
- Calling Express backends from client-side JavaScript and React using REST APIs (fetch())
- LAB 8.1 -setup YOUR IDE with Git, GitHub (make a repository) 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.
- Simple GitHub backend with minimal front End --using Gemini API
- LAB 8.2 -modify the codebase to invoke backend from client JavaScript (fetch).
|
week 10
10 Database - MongoDB
Read BOOK 1 Chapter 5,6
and go over:
Lab Database - MongoDB
- 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
- Environment variables (.env) and protecting credentials
- 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. Show and discuss with peers in your groups weekly meeting.
- LAB 10.1 - DUE start of class next week. 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 your IDE for a NodeJS + Express project)
|
week 11 Agentic Web
*** pre-experience:Google Codelab: ADK – From Basics to Multi-Tool Agents ****
11 Google ADK - Codelab Building a Production AI Code Review Assistant with Google ADK |
week 12
12 Python + Flask (microservice) backend for agent (ADK) with a simple front end --- Learn through exploration
|
week 13 (time permitting)
13 AWS Cloud
Go Over
|
week 14
14 Work on Project |
| ***Fall Break ***** |
week 15
15 FINAL Project Demos, Peer Reviews and Discussions |
CS351