An introduction to software development on the web. The course covers the development of programs that operate on the web and survey of technological alternatives, with emphasis on modern web development technologies. Concepts, including the internet and the web, static client content, dynamic client content, dynamically served content, data management, web development processes, deployment, and containerization are discussed. It features a comprehensive project for students to showcase their understanding over the course content.
At the end of the course, you will:
This course is suitable for anyone interested in learning web programming and may be seeking a relevant job in the future. It assumes no prior knowledge or experience in web development. Concepts will be discussed from the very basics. However, the focus will be on practical and up-to-date technologies.
Course is delivered in-person. All activities are the same between the two sections, and you are free to attend either lectures, tutorials, and midterms. You can also form groups with people from either sections. One of the lectures will be recorded for future reference. However, this is a best-effort process, and its quality cannot be guaranteed. It is only meant to complement the lectures, not replace them.
Assessment will be done through weekly exercises, a project, and exams. Each one is described in detail below.
Every week, you will be given a handful of small problems related to the topics discussed at the lecture. The exercises are designed to help you understand the concepts better and gain practical experience. Due to the educational nature of the exercises, the auto-grader will be provided to you, so you can check your answers before submission.
You should submit your solutions to Markus every Tuesday by 12pm. Note that because of the number of exercises, their relatively low impact on your final grade, and the availability of the auto-grader, no late submissions, extensions, or remark requests will be accommodated. Your best 10 out of 11 submissions will count for grading.
Keep in mind that the exercises are meant to give you some initial practice with the topics. Therefore, it is important to do them yourself and understand the solutions. It will be possible to satisfy the auto-grader without fully developing the solution. But grading is not the purpose of the exercises, and it might impact your ability to do the project or exams.
The project simulates a real-world web application that you might be asked to develop as a freelance web developer. Even though the scope is small, it is designed to give a sense of what creating a real website and working as a full-stack developer would entail. For the project, you can form groups of 2 or 3 members. You can also do it alone, but it is not recommended as the workload is excessive for one person. Details will be provided once the project handout is released.
You will deliver the project in two parts. In part 1, you will deliver the backend of the application. In part 2, you will develop the frontend, connect the backend to it, and deliver the full web application.
Grading will take place through interview sessions with TAs. They will work with your website to check if the requirements are implemented correctly. Also, they will ask each member questions about their role and the code they have written. The grade for the former will be shared among all members, while the latter will yield individual grades based on each member's participation and understanding of the entire submission.
There will be a midterm during week 6 of the lectures, as well as a final exam at the end of the semester. They will be held in person and will be closed-book. However, you will be allowed to bring one letter-sized paper with hand-written notes on both sides. Note that printed or typed notes are not allowed. The questions are designed to test your understanding of the concepts, architectures, and practices discussed in the course, rather than your memorization of specific syntax, commands, function names, etc.
Note that the final exam is cumulative and will cover all the topics discussed in the course. To pass the course, you need to have a final grade of at least 50%, as well as a grade of 40% or above in the final exam.
No late submissions will be accepted for the weekly exercises. For the project, late submissions will be accepted with a penalty of 10% per day, up to a maximum of three days late.
If you are registered with Accessibility Services, you might be entitled to extensions on the project deadlines. In that case, email the instructor at least one week before the deadline and request the extension. Note that individual entitlements will be adjusted to the size of the team. For example, if one member of a team of two is entitled to 7 days of extensions, the team will be granted ⌈7/2⌉=4 days.
No remark requests will be accepted for the weekly exercises. For the project, you may request a remark for the interview part of the grading. However, the request must be submitted within three days of receiving your grade through Markus or by email to the instructor or the lead TA. You must point out specific grading errors in your request, and the entire group must agree to it. Keep in mind that your entire work will be re-evaluated, and your grade may increase, decrease, or remain the same.
To request special consideration, bring supporting documentation to the instructor in person during office hours at least one week in advance of the due date.
In the event of illness or another unforeseen event, please contact the instructor (via the course-related email) and provide supporting documentation within one week of the missed work. You must also declare your absence on Acorn. Do not wait until the due date has passed. It is always easier to make alternate arrangements before the due date.
Honesty and fairness are fundamental to the University of Toronto’s mission. Plagiarism is a form of academic fraud and is treated very seriously. You are also expected to read the handout How Not to Plagiarize and to be familiar with the Code of Behavior on Academic Matters.
You are allowed to search the internet, use online resources, open-source codes, and generative AI (e.g., ChatGPT) to help you with the project. However, sharing even a small piece of code with other teams is strictly prohibited (whether giving or receiving).
Note that All work that was not written by you or your teammates must be cited in the code, including open-source codes and code created by generative AI.
Web architecture, server/client model, request/response, HTTP, course intro, HTML, CSS
Syntax, objects, functions, scope, arrow functions, DOM, elements
Frontend/backend, Modern web apps, server-side JS, node, npm, Next.js, API, Rest framework
MVC, Models, ORM, Prisma, queries, Next.js API handlers and CRUD, validation
Async programming, promises, async/await, auth, sessions, tokens, access and refresh
Migration workflow, assumptions, conflict resolution
React intro, JSX, props, events, state
React in Next.js, monorepo, hooks, fetch API, auth and CORS
Context, Type safety, TypeScript, TailwindCSS, responsive design
Isolation, Docker intro and history, containers, images, volumes, Docker hub
Dev vs prod, build, process manager, web server, DevOps
Tutorials are designed to complement every week's lectures by presenting a combination of advanced concepts and practical applications. Two tutorials are offered every week, and you are free to attend either one. The content of both tutorials is the same. Also note that only one tutorial is held at any given time. In other words, sections PRA0101 and PRA0103 are held in the other section's location. Check Piazza for the exact details on tutorial locations.
Each tutorial usually consists of the following:
You can earn bonus marks with active participation in tutorials. In the first 6 tutorials, the bonus goes towards your midterm mark. Afterwards, the bonus will apply towards your final exam mark (if your exam grade is above the auto-fail threshold).
Each tutorial can earn you 1% bonus towards your midterm grade. To qualify for the bonus, you need to answer at least two questions correctly in the polls. However, you also need to qualify at least four tutorials for any bonus to apply. That is, 3% or lower bonuses will not be awarded. This rule is in place to encourage consistent participation in tutorials.
For example, if you attend weeks 1, 3, 5, and 6 tutorials and meet the poll requirement only in weeks 1, 3 and 5, you will not earn any bonus marks because you are below the minimum 4% threshold. In another example, if you attend all 6 tutorials before the midterm and meet the poll requirements in each of them, you will earn a bonus mark of 6% for your midterm.
Tutorials 8-11 can each earn you 1% bonus towards your exam grade. To qualify for the bonus, you need to answer at least three questions correctly in the polls. However, you also need to qualify at least three tutorials for any bonus to apply. That is, 1% or 2% bonuses will not be awarded. This rule is in place to encourage consistent participation in tutorials.
For example, if you attend weeks 8, 9, and 11 tutorials and meet the poll requirement only in weeks 8 and 11, you will not earn any bonus marks because you are below the minimum 3% threshold. In another example, if you attend all 4 tutorials and meet the poll requirements in each of them, you will earn a bonus mark of 4% towards your final exam.
Tutorial | Topics | Materials |
---|---|---|
Tutorial 1 | VSCode, DNS, HTML, CSS | slides |
Tutorial 2 | Git, teamwork, JavaScript | slides | polls |
Tutorial 3 | APIs, Node.js, Next.js, real-world examples | slides | polls |
Tutorial 4 | Design, business logic, ERD diagrams, validations and constraints, ORMs | slides | polls |
Tutorial 5 | Async programming, midterm review, Q&A | slides |
Tutorial 6 | [Cancelled] OpenAPI documentation, code documentation, migrations | |
Tutorial 7 | Form validation, Selenium, Playwright, unit testing, React | slides |
Tutorial 8 | Practical projects, server actions, custom hooks | slides | polls |
Tutorial 9 | UI/UX, TypeScript | slides |
Tutorial 10 | Docker workshop | slides | polls | files |
Tutorial 11 | Database deployment, CORS, cloud infrastructure | slides | files |
Tutorial 12 | Exam review, Q&A | slides |
I remember daydreaming about teaching at a class when I was 10. It feels good when dreams come true.
Frontend enthusiast. Backend enjoyer.
Traveling through the 'coding space', I always bring some 'Starbucks'! Chasing my passion turns out to be just a fun excuse to stay caffeinated and curious.
I was a top 500 Overwatch player in grade 8. Now, I’m studying Computer Science because clearly, debugging is way more fun than gaming, right? 🙃
SGVsbG8gdGhlcmUhIEknbSBhIDR0aCB5ZWFyIHVuZGVyZ3JhZHVhdGUgc3R1ZGVudCBzdHVkeWluZyBDb21wdXRlciBTY2llbmNlLiBJIHRvb2sgdGhpcyBjb3Vyc2Ugd2l0aCBQcm9mLiBBYmJhc2kgdHdvIHllYXJzIGFnbyBhbmQgSSByZWFsbHkgbGlrZWQgaXQuIEkgaG9wZSB5b3UgZW5qb3kgaXQgdG9vIDop
I’m always down for good food and great company 😋
Just a chill guy who enjoys building cool stuff and driving fast cars.
Hi, this Fermi. I am a Computer Science and Statistics student at the University of Toronto who codes by day and gets bossed around by my cat at night.