CPRG-306
Web Development 2
Intro to Web Development 2
Introductions
Course Overview
Week 1 Lecture and Assignment
Welcome
- Instructor introduction
Introduce each other
- What's your name?
- Where are you from?
- Hobbies or any funny thing about you?
- Why did you choose Software Development diploma at SAIT?
- What do you want to do after you graduate?
What will you learn in this course?
- JavaScript skills
- A full-stack web application
- Essential course to prepare you for your capstone
- Use of AI tools effectively
Warning: THE COURSE CONTENT IS DIFFICULT
(I'm sorry)
Why? Miss 1 class 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
Weekly Class Structure
In person class (3 hours)
- Short lecture and demo
- Start and try to complete the weekly assignment
Online class (2 hours)
- Short lecture, complete the interactive exercises
- Get one-on-one help from your instructor
This website
All content: schedule, readings, slides, activities, assignments, project
D2L Brightspace Course
- Announcements
- Notification of deadlines (if subscribed)
- Grades
GitHub
Assignment and project submissions
Classroom Agreement
- Learn! Learn! Learn!
- Collaborate and cooperate
- Work together in groups
- Respect each other
- Interactive class
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. Do not work alone.
- Free tutor (more details coming soon)
- Stack Overflow, YT, Google
- Various AI tools, e.g. ChatGPT, Copilot
Deadlines
- All deadlines are posted in the schedule.
- Submissions prior to the posted deadline will be graded very next week.
- Submissions after the posted deadline:
- Late submissions are accepted only with genuine reasons.
- Late submissions will be marked zero without communication.
Consequences of Late Submissions
- Assignments build on each other. If you miss one, you will have less time to complete the next one.
- You will have difficulty completing the project.
- Several grades of zero in a row may result in an automatic withdrawal from the course.
Break
Introduction to Web Application Development
Web Dev 1: Websites
Web Dev 2: Web Applications
The big difference: interactivity
Typical Components of a Web Application
- Front-end
- User interface
- Client-side logic
- Back-end
- Server-side logic
- Database
Typical Sequence of Events
- User types a URL in the browser or clicks a link
- The browser sends a (GET) request to the server
- The server processes the request
- The server sends a response (HTML) back to the browser
- The browser renders the response and requests additional resources (CSS, JS, images)
And then with Interactivity
- The user interacts with the page (clicks a button, fills out a form)
- The browser sends an asynchronous request to the server (POST, PUT, DELETE)
- The server processes the request
- The server sends a response back to the browser (JSON).
- The browser updates the page with the new data
Week 1 Assignment
Development Environment Setup
Demonstrate GitHub, GitHub Desktop, and VS Code.