CPRG-306
Web Development 2
Intro to Web Development 2
Introductions
Course Overview
Week 1 Lecture and Assignment
Welcome
- Instructor introduction
Meet Each Other
Stand up, walk around. Talk to one person you know and one person you don't know. Ask each other:
- What's your name?
- Where are you from?
- Why did you choose Software Development diploma at SAIT?
- What do you want to be when you grow up (i.e. graduate)?
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
https://youtu.be/jL88IAxoYOk?si=SquI2bk4M3s_HWQb&t=420 (opens in a new tab)
Weekly Class Structure
In person class (3 hours)
- Short lecture/demo
- Start and try to complete the weekly assignment
Online class (2 hours)
- Read the weekly content, complete the interactive exercises
- Get one-on-one help from your instructor
This website
All content: schedule, readings, slides, activities, assignments, project
Brightspace Course Shell
- Announcements
- Notification of deadlines (if subscribed)
- 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. Do not work alone. Discord server?
- Free tutor (more details coming soon)
- Stack Overflow, YT, Kagi/Google/DDG
- Various AI tools, e.g. ChatGPT, Phind
Deadlines
- All deadlines are posted in the schedule.
- Submissions prior to the posted deadline will be graded quickly, usually the next day.
- Submissions after the posted deadline:
- Will be accepted until April 22, 2025 at 11:59 pm.
- Will not be graded until after April 22, 2025 at 11:59 pm.
- Submissions after April 22, 2025 at 11:59 pm will not be accepted.
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.
- Life will be more stressful than it needs to be.
FAQ
- Can I work ahead?
- The course is not designed for you to work ahead, but there's no specific reason why you couldn’t. There is no speed limit.
- May I share code with my friends?
- Yes. Collaboration is encouraged. Make sure you understand what you are doing. 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.
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.