← HomeTR
UndergraduateFall 2026

Web Technologies and Programming

Web Technologies and Programming course

Language
Turkish
Class meetings
3.5 hours per week, hands-on (development studio)
Contact
Announcements, submissions and grades on this platform

Course description

This course is about building, not listening. It runs as a development studio: there are no planned lectures and no live coding by the instructor. Throughout the term each student develops a single product in their own repository: a Campus Events application.

In the six sprints before the midterm, students first build a working web prototype with HTML, CSS and JavaScript, then migrate it to an integrated frontend with Vite, TypeScript and React. In the six sprints after the midterm, the same repository gains a REST API with Express, persistent data with MongoDB and Mongoose, authentication with JWT, frontend–backend integration with Axios, and a production deployment. The term ends with a live full-stack application.

Every sprint follows the same rhythm: before class, study a 2–3 hour resource pack and complete a short preparation task; in class, develop your own code and get feedback directly on it; at the end of the sprint, demonstrate the working result and commit, push and tag the sprint.

A 3.5-hour session: 10 minutes of goals and acceptance criteria, 155 minutes of individual development with code-level guidance, 30 minutes of demonstrations, 15 minutes of commit, push and submission notes.

The technology stack is deliberately limited: client side HTML, CSS, JavaScript, TypeScript (strict), Vite, React, React Router and Axios; server side Node.js, Express, REST, JWT, MongoDB and Mongoose; delivery with Git, GitHub and deployment. Next.js/SSR, refresh tokens/OAuth and advanced cloud architecture are out of scope.

Prerequisites Basic programming. Sprint 0 (installing Node.js, npm, Git and GitHub) must be completed before the first class.

Learning outcomes

On successful completion, students will be able to:

  1. 1Build accessible page structures with semantic HTML and version the work with Git and GitHub
  2. 2Design mobile-first, responsive and accessible interfaces with CSS (Flexbox, Grid)
  3. 3Render the interface from data with JavaScript and build interactions such as search, filtering and form validation
  4. 4Write a data model and pure functions in strict TypeScript and set up a project scaffold with Vite
  5. 5Develop a React interface from typed, reusable components with state, forms and routing
  6. 6Design and implement a REST API contract with Express, using correct HTTP status codes and error handling
  7. 7Build a persistent data layer with MongoDB and Mongoose, with full CRUD and request validation
  8. 8Implement authentication and authorization with password hashing, JWT and resource ownership
  9. 9Connect the frontend to their own REST API with Axios, handling loading and error states
  10. 10Deploy the full-stack application and verify it with environment variables, CORS and end-to-end checks
  11. 11Own their product by explaining the code they wrote and the help they used

Weekly schedule

WeekTopicReadings and work
0Pre-term setup (Sprint 0)Install Node.js, npm, Git and GitHub; not graded
1Sprint 1: HTML and GitFive linked pages in plain HTML
2Sprint 2: CSS, responsive design and accessibilityAn interface usable on mobile and desktop
3Sprint 3: JavaScript, DOM and user interactionList rendered from data, search, filter and form validation
4Sprint 4: Vite scaffold and TypeScript data layerStrict TypeScript data model and pure functions
5Sprint 5: React componentsPrototype moved into typed components with props
6Sprint 6: State, forms, routing and an integrated frontendList, detail, create, at least 4 routes and a 404 page
7Midterm weekLive demo, repository, README, production build and domain
8Sprint 7: Express server and REST API contractWorking REST API with in-memory data
9Sprint 8: MongoDB Atlas, Mongoose and persistent dataAPI that reads from and writes to MongoDB
10Sprint 9: CRUD, request validation and error handlingPATCH, DELETE, 400 and 404 responses, error middleware
11Sprint 10: Authentication, JWT and authorizationRegister, login, protected routes and event ownership
12Sprint 11: Frontend–backend integration with AxiosShared Axios client and protected CRUD flow
13Sprint 12: Deployment and production checksLive frontend and backend, CORS, smoke tests
14Final weekLive demo: log in, create, update and delete an event, and show the ownership check

Assessment

40%Midterm60%Final
Midterm100 points in total

Badge bonus: Tam isabet +1, İlk adım +1, Seri +2, İstikrar +3, Yarı yol +3; at most +10, capped at full marks.

  1. Sprint-14 pts
  2. Sprint-26 pts
  3. Sprint-310 pts
  4. Sprint-415 pts
  5. Sprint-520 pts
  6. Sprint-625 pts
  7. Submission20 pts
Final100 points in total

Badge bonus: Tam isabet +1, İlk adım +1, Seri +2, İstikrar +3, Yarı yol +3; at most +10, capped at full marks.

  1. Sprint-78 pts
  2. Sprint-812 pts
  3. Sprint-916 pts
  4. Sprint-1020 pts
  5. Sprint-1124 pts
  6. Final submission20 pts

Resources

Course policies

Sprint grading: Every sprint is graded with the same weights: 40% working core functionality, 20% code that shows the learning goal, 20% commit, push, tag and submission note, 20% explaining the change. There is no separate “integrated project” grade; technical work is graded in the sprint where it is built. Responsibility accumulates: each new sprint builds on the previous features and must keep them working.

Midterm and final weeks: Most of the midterm and final grade comes from the sprints; the rest comes from that week's demo and submission (see Assessment). In midterm week the working React frontend is demonstrated live (repository, README, production build and domain). In final week the live full-stack application is shown: logging in, creating, updating and deleting an event, and the ownership check.

Submission: At the end of each sprint, commit, push and create a sprint tag (e.g. sprint-01); list known gaps in the submission note. Sprints are not separate repositories but recorded versions of the same product.

Sprint 0: Not graded; completed before the first class so that technical problems surface before Sprint 1.

Role of the instructor: The instructor walks around the class, reviews code in place and gives direction. Solved code is not handed out; you get pointers for finding the bug. Every student runs, shows and can explain their own code.

AI tools: AI tools may be used; state the help you used in the submission note and be able to explain the code you add. Code you do not understand cannot be submitted.