CPRG-306

Web Development 2

Intro to Web Development 2

Introductions

Course Overview

Week 1 Lecture and Assignment

Welcome

• Instructor introduction
• Ashlyn Knox (Web Developer, UX/UI Designer)
• Email: ashlyn.knox@sait.ca
• Office: NN413-A

What will you learn in this course?

• Learn intermediate JavaScript skills
• Learn how to build a full-stack web application using modern tools and technologies
• Develop a portfolio of web applications using technologies that are in high demand in the industry
• Essential course to prepare you for capstone (most projects are web apps)
• Learn how to use AI tools effectively

Warning: THE COURSE CONTENT IS DIFFICULT

(I'm sorry)

Why? So many essential concepts and technologies and all are required to build a web application. Miss one and you're stuck.

E.g. command line interface, arrow functions, promises, objects, functions returning an array of functions, fetch API, React, Next.js, and much more

These are professional skills that are in demand and required - whether you are prompt engineering or building code more manually.

https://youtu.be/jL88IAxoYOk?si=SquI2bk4M3s_HWQb&t=420 (opens in a new tab)

Weekly Class Structure

In person Lab (3 hours)

• Demo requested examples
• Activities to develop your methodologies
• Lab time to work on assignments.
• Instructor and peer support

Online Lecture (2 hours)

• Lectures and essential demonstrations
• Introduce assignments
• Small focused activities

This website

• schedule
• readings
• slides
• activities
• assignment instructions
• project

Brightspace Course Shell

• Announcements
• Notification of deadlines
• Official Deadlines (section based)
• Submission of project description and reflection
• Grades

GitHub

• Code
• Assignment and project submissions

Classroom Agreement

• Be prepared to make mistakes and learn from them
• Make wise choices to support your learning
• Collaborate and cooperate
• Work together to learn the material
• Include people if they look excluded
• Take ownership of your learning

Getting Help

• During class time:
  • Help each other. Do not work alone.
  • Ask me in person or through MS Teams chat.
• Outside of class time:
  • Help each other and learn from each other
  • LAMB Learning Center Tutoring
  • Stack Overflow, YT, Kagi/Google/DDG
  • AI Tools (use to diagnose and discover)

Providing Help

• Don't just give people direct answers
• Start by walking through the problem
• Support critical problem solving

Deadlines

• All deadlines are posted in the schedule.
• Submissions after the posted deadline
  • -10% per day for a maximum of 3 days late
  • extensions are given if you can demonstrate problem solving thinking
    • extensions will not be given the day of without demonstratable thinking (diagrams, logic flows, notes etc)
• You can resubmit if you like

FAQ

• May I share code with my friends?
  • Yes. Collaboration is encouraged. Make sure you understand what you are doing and that you write your own code. Remember: learning is your responsibility.
• Should I still come to class if it's not required?
  • Yes! Collaborate in person. Increase your personal network. Better and more positive experience.
  • There is a clear correlation between attendance at in person sessions and success
• If I need more challenges what should I do?
  • schedule a meeting with me and we can draft a plan to enhance your learning

• If I feel lost and can't catch up... What should I do?
  • Don't keep it a secret. These topics are challenging and we have diverse learning needs.
  • Talk to your colleagues or instructor based on your comfortability. Seek support early, it's always easier than waiting even if it doesn't feel like it

Ice Breaker Logic Activity: The River Crossing Challenge

• In small groups whiteboard and determine an algorithm in plain language
• Time: 20 minutes
• Problem Objective: Get the grain, goat, farmer, and fox across the river
• Learning Objective: Practice algorithmic problem solving & documenting your process
• Link to the instructions (opens in a new tab) access with your sait office account.

Ice Breaker Logic Activity: The River Crossing Challenge

• In small groups whiteboard and determine an algorithm in plain language
• Time: 20 minutes
• Problem Objective: Get the grain, goat, farmer, and fox across the river
• Learning Objective: Practice algorithmic problem solving & documenting your process
• Link to the instructions (opens in a new tab) access with your sait office account.

Introduction to Web Application Development

Web Dev 1: Websites

Web Dev 2: Web Applications

The big difference: interactivity

Typical Components of a Web Application

• Diagram in Figjam (opens in a new tab)
• Front-end
  • User interface
  • Client-side logic
• Back-end
  • Server-side logic
  • Database
• they may be hosted together or separately depending on your tech stack

Typical Sequence of Events

1. User types a URL in the browser or clicks a link
2. The browser sends a (GET) request to the server
3. The server processes the request
4. The server sends a response (HTML) back to the browser
5. The browser renders the response and requests additional resources (CSS, JS, images)

And then with Interactivity

6. The user interacts with the page (clicks a button, fills out a form)
7. The browser sends an asynchronous request to the server (POST, PUT, DELETE)
8. The server processes the request
9. The server sends a response back to the browser (JSON).
10. The browser updates the page with the new data

Development Environment Setup

• Github Account and Git SSH Configuration
• VS Code extensions and environment setup
• Node Install
• Command line refresher
• Note taking tools

Week 1 Assignment

• HTML + CSS Debugging Activity
• Write clearly scoped Javascript
• Demonstrate working node environment
• Practice and Demonstrate Git Skills