-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
9,649 additions
and
12,773 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,174 @@ | ||
--- | ||
id: introduction | ||
title: Syllabus | ||
--- | ||
|
||
# INFO 1998: Trends in Modern Web Development | ||
|
||
### Spring 2025 | ||
|
||
**Course Website**: [https://webdev.cornelldti.org/docs/introduction](https://webdev.cornelldti.org/docs/introduction) | ||
|
||
Learn to build and deploy scalable, modern full-stack web applications using best practices and the industry's most-used technologies. This is a student run course by [Cornell DTI](http://cornelldti.org/) | ||
|
||
**Faculty Advisor: Kyle Harms** | ||
|
||
Email: [kyle.harms@cornell.edu](mailto:kyle.harms@cornell.edu) | ||
|
||
## Instructors: | ||
|
||
**Oscar Wang** | ||
|
||
Email: [ow39@cornell.edu](mailto:ow39@cornell.edu) | ||
|
||
**TBA** | ||
|
||
Email: TBA | ||
|
||
We also have many amazing TAs — TBA. | ||
|
||
### Office Hours Schedule | ||
|
||
The instructor and TA office hours schedule is as follows: | ||
|
||
- TBA | ||
|
||
Please note that some schedules may be subject to change; always check the latest comments under the pinned OH thread or the course website for the most up-to-date information. | ||
|
||
## Credits and Credit Hour Options | ||
|
||
1.0-credits, S/U | ||
|
||
## Time and Location | ||
|
||
This course meets once a week for 10 weeks for a total of 10 lectures. | ||
|
||
We will meet weekly on Wednesdays, from **TBA** in **TBA**. The start of the class will start on **February 12th**. | ||
|
||
<!-- \*\*You can find our course calendar with lecture dates and times, TA office hours with locations, and assignment due dates at [this](https://calendar.google.com/calendar/u/1?cid=Y183OTJmZmZmM2E3OWNjYTI2M2UwNTE2OTNmZDQ0YjlmMDI1NGQ4Y2JjYjk5YzUwODcxMmJkYmNhNDQ4YjMyODdlQGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20) Google Calendar link. --> | ||
|
||
## Course Description | ||
|
||
This class will teach students about modern web development technologies, | ||
practices, and industry standards to better equip them for academic work, | ||
research, interviews, internships, and full-time employment. By the end of this | ||
course, you will gain key experience in designing systems on both the frontend | ||
and backend using today's popularly applied technologies, including TypeScript, React, Firebase, and more. | ||
|
||
## Pre/Co-requisites | ||
|
||
Formally, there are no pre-requisites for this course: | ||
|
||
**Pre/Corequisites: None.** | ||
|
||
However, we _highly_ recommend that you have taken CS 1110, or have equivalent programming experience. | ||
|
||
## Course Application | ||
|
||
Apply [here (not open yet)](https://forms.gle/nshadTFzkzTenvjv8) by **TBA (early in the semester)**. It includes a general information questionnaire so we have the information necessary for enrollment, as well as a preassessment you must complete (see Pre-Course Assessment below). | ||
|
||
We will be distributing enrollment/permission pins soon after the application period closes. | ||
|
||
### Pre-Course Assessment | ||
|
||
Please complete the pre-assessment [here](https://webdev.cornelldti.org/assets/files/preassessment-b10fef745a7d911c1d56342a90e7076b.zip). It should take | ||
less than an hour! This is not meant as a test, but rather a way of ensuring | ||
that you are familiar with the foundational material in the course. | ||
|
||
Upload your submissions as a zip to your application [here](https://forms.gle/nshadTFzkzTenvjv8). | ||
|
||
**This preassessment is mandatory; those who do not submit it will not be admitted in the course.** | ||
|
||
## Course Objectives | ||
|
||
By the end of the course, a student will be able to: | ||
|
||
1. Develop dynamic, interactive web applications using frontend frameworks and server side rendering | ||
2. Utilize standard API calls and traditional HTTP requests to transmit and retrieve data through the web | ||
3. Design and implement various data models and utilize data manipulation techniques to represent data in web applications | ||
4. Implement each aspect of a web application from frontend technologies to backend technologies and how to utilize middleware to communicate between the two | ||
5. Develop and implement proper authentication methods to encrypt user data | ||
|
||
## Course Materials | ||
|
||
We highly recommend that you have a computer capable of running a modern web browser and text editor, as well as access to a stable internet connection. | ||
|
||
## Assignments | ||
|
||
Assignments are released after each lecture! There are 5 assignments total, which includes a final project spanning the last few weeks of the class. | ||
|
||
You are allowed max 3 slip days (out of 6 total for all assignments and the final project) per an assignment. | ||
**Please note that you are NOT allowed to use slip days for the final submission of the final project.** | ||
|
||
The class is scheduled to finish well before finals week. | ||
|
||
| Assignment | Topic | Due Date | | ||
| ------------ | ----------------------- | ----------------- | | ||
| Assignment 1 | JavaScript Fundamentals | Feb 26 by 11:59pm | | ||
| Assignment 2 | TypeScript Fundamentals | Mar 12 by 11:59pm | | ||
| Assignment 3 | React Fundamentals | Mar 19 by 11:59pm | | ||
| Assignment 4 | Frontend Capstone | Mar 26 by 11:59pm | | ||
| Assignment 5 | Final Project | May 4 by 11:59pm | | ||
|
||
More details regarding the final project will be released upon starting the course. | ||
|
||
## Method of Assessing Student Achievement | ||
|
||
### Basis of Grade Determination | ||
|
||
First, we will determine your numerical grade. This will be done by the following: | ||
|
||
| Assignment | Percentage of Grade | | ||
| -------------------- | -------------------------------------------------------------------- | | ||
| Attendance | 20% (based on weekly lecture forms, can miss 1 of 9 without penalty) | | ||
| Filling out Feedback | 10% | | ||
| Final Project | 30% | | ||
| Assignments | 40% | | ||
|
||
Your final grade will be determined by your numerical grade calculated above: | ||
|
||
**Satisfactory (S)** - 70% or higher | ||
|
||
**Unsatisfactory (U)** - 69% or lower | ||
|
||
Keep in mind that the class is S/U, and that a numerical score of a C- (70%) or | ||
higher would allow you to pass with an S grade. | ||
|
||
### Grading Scale | ||
|
||
Web Development is a creative process, one that depends heavily on current technologies and how students decide to utilize them towards an end. Because of this, it is unnecessary to assign letter grades to students in this course. Rather, we will assign Satisfactory/Unsatisfactory grades. For a student to receive an Unsatisfactory grade, their numerical grade must be at or below 69% according to the numerical determination outlined above. Otherwise, they will receive a Satisfactory grade. | ||
|
||
## Course Management | ||
|
||
For the following sections, the word "us" refers to the course staff. | ||
|
||
When in contact with us, contact with either of the two primary instructors (Sarah Young and Sophia Pham) is sufficient to qualify as contact with us. | ||
|
||
The contact information can be found above in the "Instructors" section. | ||
|
||
### Academic Integrity | ||
|
||
**Each student in this course is expected to abide by the Cornell University Code of Academic Integrity:** [http://cuinfo.cornell.edu/aic.cfm](http://cuinfo.cornell.edu/aic.cfm) | ||
|
||
Under the provisions of the Code, anyone who gives or receives unauthorized assistance in the preparation of work at home or during tests in class will be subject to disciplinary action. A student's name on any piece of work is our assurance that they have neither given nor received any unauthorized help in its preparation. Students may assist each other on assignments by answering questions and explaining various concepts. However, one student should not allow another student to copy their work directly. All University policies with respect to cheating will be enforced. A student who is found to have cheated on an exam, or any other graded assignment, will receive a "U” in the course. | ||
|
||
### SDS Accommodations | ||
|
||
**Students with Disabilities:** Your access in this course is important to us! Please request your accommodation letter early in the semester, or as soon as you become registered with Student Disability Services (SDS), so that we have adequate time to arrange your approved academic accommodations. | ||
|
||
Once SDS approves your accommodation letter, it will be emailed to both you and us. Please follow up with us to discuss the necessary logistics of your accommodations using the contact information provided in this syllabus. | ||
If you are approved for exam accommodations, please consult with us at least two weeks before the scheduled exam date to confirm the testing arrangements. | ||
|
||
If you experience any access barriers in this course, such as with printed content, graphics, online materials, or any communication barriers, reach out to us or SDS right away. | ||
|
||
If you need immediate accommodation, please speak with us after class or send an email message to us and SDS at [sds_cu@cornell.edu](mailto:sds_cu@cornell.edu). | ||
|
||
If you have, or think you may have, a disability, please contact Student Disability Services for a confidential discussion: [sds_cu@cornell.edu](mailto:sds_cu@cornell.edu) or visit [sds.cornell.edu](http://sds.cornell.edu/) to learn more. | ||
|
||
### Mental Health and Well-being | ||
|
||
**Your health and wellbeing are important to us.** | ||
|
||
There are services and resources at Cornell designed specifically to bolster undergraduate, graduate, and professional student mental health and well-being. Remember, your mental health and emotional well-being are just as important as your physical health. If you or a friend are struggling emotionally or feeling stressed, fatigued, or burned out, there is a continuum of campus resources available to you: [https://mentalhealth.cornell.edu/get-support/support-students](https://mentalhealth.cornell.edu/get-support/support-students). | ||
|
||
Help is also available any time day or night through Cornell’s 24/7 phone consultation (607-255-5155). You can also reach out to me, your college student services office, your resident advisor, or Cornell Health for support. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
--- | ||
id: setup-editor | ||
title: Setup your editor | ||
--- | ||
|
||
# Install an Editor | ||
|
||
We recommend using [VSCode](https://code.visualstudio.com/), which is free for students. Install it from the website. | ||
|
||
Note: Course staff, instructors, and TAs will be using VSCode, so if you are using any other editors (such as [WebStorm](https://www.jetbrains.com/webstorm/)), you may need to do some extra work to get help from us. | ||
|
||
## Recommended VSCode Extensions | ||
|
||
To install extensions in VS Code, navigate to the left-hand sidebar, and click the building blocks icon near the bottom. This should take you to the Extensions marketplace. | ||
|
||
### ESLint | ||
|
||
Installing ESLint in VSCode will give you real-time linter feedback in any JavaScript code you write, allowing you to quickly pinpoint many problems and have readable, proper formatting. | ||
|
||
Once installed, add these lines to your VSCode Settings (refer to [this link](https://code.visualstudio.com/docs/getstarted/settings) if you need help getting there or alternatively open the command palette in VSCode with <kbd>CMD</kbd>/<kbd>CTRL</kbd> + <kbd>SHIFT</kbd> + <kbd>P</kbd> and search `settings.json`): | ||
|
||
```json | ||
// Other settings ... | ||
"eslint.alwaysShowStatus": true, | ||
"editor.codeActionsOnSave": { | ||
"source.fixAll.eslint": true | ||
}, | ||
"eslint.packageManager": "yarn" | ||
``` | ||
|
||
### Prettier | ||
|
||
Prettier is a code formatter that will automatically format your code to be consistent with the rest of the class. | ||
|
||
Install it and it should automatically work! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
--- | ||
id: setup-environment | ||
title: Setup your development environment | ||
--- | ||
|
||
## Install Node.js | ||
|
||
Node is a JavaScript runtime that allows you to run JavaScript code outside of a browser! It powers all of web development today, and is critically necessary for this course. | ||
|
||
Go to [this website](https://nodejs.org/en/download/) and follow the instructions to install it on your workstation. | ||
|
||
For consistency, please use the latest Node LTS (currently, as of Fall 2023, this is Node 18). | ||
|
||
## Install `git` | ||
|
||
Git is a version control system that allows you to track changes to your code and collaborate with others. | ||
|
||
It is extremely likely that you already have git installed on your system. You can check this by running: | ||
|
||
```bash | ||
git --version | ||
``` | ||
|
||
If this command fails, you can install git by going to [this website](https://git-scm.com/downloads) and following the instructions for your operating system. | ||
|
||
## Install Additional Package | ||
|
||
We will be using an additional package manager to help us with development. | ||
|
||
#### Pnpm | ||
|
||
Pnpm is a package manager that is faster and more efficient than the default `npm` package manager. (It caches everything.) | ||
|
||
```bash | ||
npm install -g pnpm | ||
``` | ||
|
||
## REPL | ||
|
||
To be able to follow along with / later try out the demos in class, you'll need a REPL (Read-Eval-Print-Loop). We just use Node for this. | ||
|
||
The command you can run to enter Node in REPL mode is: | ||
|
||
```bash | ||
node | ||
``` | ||
|
||
We highly recommend adding a flag to get rid of extra `undefined`s at the end of all lines. | ||
|
||
```bash | ||
node -e "require('repl').start({ignoreUndefined: true})" | ||
``` | ||
|
||
## Running simple JS files | ||
|
||
If you have a simple single JS file, you can run it with Node. | ||
|
||
```bash | ||
node your-file.js | ||
``` | ||
|
||
Where `your-file.js` is the name of the file you want to run, **relative to the current directory**. | ||
|
||
## Install `ts-node` | ||
|
||
`ts-node` is a package that allows you to run TypeScript code directly from the command line. | ||
|
||
```bash | ||
npm install -g typescript | ||
npm install -g ts-node | ||
``` | ||
|
||
You can test that you have it installed by running: | ||
|
||
```bash | ||
ts-node -v | ||
``` | ||
|
||
If you get weird `export {}` errors with `ts-node`, you can call with `ts-node your-file.ts --esm` / `ts-node --esm` or try using `npx` and `tsx` as alternatives: | ||
|
||
```bash | ||
npm install -g tsx | ||
npx tsx your-file.ts # or `npx tsx` for REPL (interactive mode) | ||
``` | ||
|
||
## Making a React Project | ||
|
||
To make sure you've got everything set up correctly, `cd` into a directory of your choice and run: | ||
|
||
```bash | ||
pnpm dlx degit cornell-dti/trends-mono-fa24/frontend-starter your-project-name | ||
``` | ||
|
||
This will create a new directory called `your-project-name` with a React project inside. `cd` into it and run `pnpm install` to install all the dependencies. | ||
|
||
Take a look around and edit the code if you'd like. | ||
|
||
When you're ready, run `pnpm dev` to start the development server. If everything works as it should, you should be able to navigate to `localhost:5173` and see a React app running! | ||
|
||
You can also use that command to create a new 'blank' React project at any time. Bookmark this page and come back to it! | ||
s |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"docs": { | ||
"Getting Started": [ | ||
{ | ||
"type": "doc", | ||
"id": "version-2025sp/introduction" | ||
}, | ||
{ | ||
"type": "doc", | ||
"id": "version-2025sp/setup-editor" | ||
}, | ||
{ | ||
"type": "doc", | ||
"id": "version-2025sp/setup-environment" | ||
} | ||
], | ||
"Lectures": [], | ||
"Assignments": [] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
[ | ||
"2025sp", | ||
"2024fa", | ||
"2024sp", | ||
"2023fa", | ||
|
Oops, something went wrong.