Course Overview

CS193X covers modern full-stack web development techniques, with a focus on fundamental concepts, best practices, and writing robust and maintainable web applications. We hope to present some of the essential concepts that appear over and over in web dev and equip you with the skills you need to learn about and keep up with new technologies as they emerge through an emphasis on standard JavaScript and tools which will be relevant regardless of the framework or library in use.

Client-side topics include layout and rendering with HTML and CSS, event-driven programming in JavaScript, and asynchronous programming techniques including Promises and fetch, with a focus on modern standardized APIs and best practices. Server-side topics include the development of RESTful APIs, JSON services, and basic server-side storage techniques.

Prerequisites: This course assumes no previous experience with web development at all. We do, however, expect you to be comfortable with core programming concepts, algorithms, and data structures at the level of CS106B.

Learning Goals

Here is what we hope you will take away from this course, broken down by topic area. (Each topic will be covered with varying depth.)

• Website rendering and layout
  • Build web pages that use semantic HTML elements
  • Create page layouts that use the CSS box model and Flexbox
  • Create and adapt pages to be mobile- and accessibility-friendly
• Client-side JavaScript
  • Use JavaScript to manipulate page content (the DOM) and respond to user interaction (events)
  • Write JavaScript using modern standard techniques, such as classes and modules
  • Access data and APIs using fetch and async
• Servers and APIs
  • Design a small RESTful API
  • Implement an API using NodeJS
  • Use a data source such as MongoDB to store and retrieve dynamic content
• General skills
  • Read and search technical documentation for web technologies
  • Identify information and code as unreliable or outdated (e.g. in tutorials, on StackOverflow)
  • Understand and utilize new web technologies as they become standardized or commonplace

Lectures

Lectures will be in 420-040. Due to the room and setup, lectures will not be recorded.

Materials from lecture will be posted on the lectures page. A significant portion of lectures will consist of live coding. We will post the code we start with before each lecture, and you are encouraged to follow along on your laptop. We will post the code we end with after lecture.

Getting Help

There are multiple ways to engage with the course staff and other students, to get your questions answered, and to get help with concepts and assignments.

• Discussion Forum: We will be using Ed Discussion this quarter as our forum/Q&A platform. The forum is a place where you can ask and answer questions about the course. We encourage you to work together to understand and learn course concepts; if you see a question or discussion you can contribute to, please chime in!
• If you have a specific question about your assignment, you can post it privately for the course staff to answer. This is appropriate if, for example, your question needs to include a piece of code from your assignment. For more general questions, such as clarifications about the assignment spec or questions about lecture content, we encourage you to make your question public.
• Office Hours: The course staff will hold office hours throughout the week. The details and calendar of office hours will be posted on the course website. Office hours are best for getting answers to your specific questions, such as issues you are having with your assignment.
• Email: If you have a private issue regarding course logistics, accommodations, or grading, you can email Michael directly (mchang91@stanford.edu). Please do not email CAs individually. If you have a question for the CAs, please make a private post on Ed.

Coursework and Grading

The work in this class consists of two components:

• Assignments: Assignments ask you to complete a task or set of tasks, giving you practice with specific topics and techniques covered in the course. You will have between one and two weeks to complete each assignment, depending on length and complexity.
• Final project: The final project is your opportunity to show us all you've learned throughout the course and build something cool in the process. We encourage you to use it as a chance to create something relevant to your interests, such as to support a group or organization you work with. We will post details abrut the project requirements around the midpoint of the quarter. We will ask you to submit a description of your intended project and a milestone to check in on your progress before the final submission.

All assignments and projects must be completed individually.

Grading: Coursework will be graded on functionality and style, weighted equally. The course staff will provide specific feedback and suggestions through inline and overall comments. Functionality and style are graded on a bucket scale, in order to focus on the qualitative feedback over a quantitative metric. The buckets are as follows:

We expect the majority of bucket grades to be ok and +, leaning lower toward the beginning and higher toward the end.

While these buckets roughly map to letter grades (+ maps to A, ok to high B/low A, and - to low B), this mapping is not exact and may differ per submission based on the specific details of that submission. You can use the feedback you receive to understand where in the range your submission falls.

Course grades: Final course grades are calculated as 70% assignments and 30% final project. In order to pass the course, students must satisfactorily complete both components of the course.

Poor performance (e.g. a --) on a single assignment may be cause to discuss your situation with the course staff, but will not immediately doom your final grade. Multiple poor performances would necessitate having a conversation with staff to develop a plan for the remainder of the quarter.

Late Policy:

• All assignments and project milestones will be due at 11:59 PM Pacific time on the published date. Submissions received by the due date will earn a small "on-time bonus", added into your course grade at the end of the quarter.
• Most assignments and project milestones will be published with a 48-hour "grace period". All students may submit within the grace period, penalty free, without needing to request an extension. There may be assignments or milestones with a shorter (or no) grace period, based on the course calendar; the writeup will clearly state the last day submissions will be accepted.
• Submissions past the end of the grace period will not be accepted unless arrangements for an additional extension are made with the instructor prior to the due date.

We understand that unexpected situations arise that may prevent you from completing coursework by the due date. The goal of our due dates and grace periods is to build in flexibility while ensuring that you receive timely feedback and do not fall behind amid a fast-paced quarter.

Honor Code: All coursework is subject to the Stanford Honor Code, meaning it must represent your original, individual work completed without the use of unpermitted aid. The course website has a detailed collaboration policy with specific examples of permitted and unpermitted collaboration. You are responsible for reading and understanding this document in full. Violations of the Honor Code are taken very seriously. We may use software tools to compare your submissions against those of all other current and past students, and we will refer all suspected violations to the Office of Community Standards.

Technology and Materials

• Software: You will need a computer on which you can install freely available development tools. Generally, any computer running a relatively recent version of Windows, macOS, or Linux will do. Some assignments will require you to have an active Internet connection while working on them.
• There are no required textbooks for the course.

If you anticipate or are experiencing technical difficulties accessing materials or working on coursework, please get in touch with the course staff to discuss what options are available.