About the Instructor

Pam Van Londen
541-737-8627
1105 Kelly Engineering Center
Corvallis, OR 97331, USA
Email via Canvas Inbox

Introduction

Credits: 4.

Contact Hours: Online only, for 11 weeks.

Prerequisites: CS 162 or CS 165.

Catalog Description: How to design and implement a multi-tier application using web technologies: Creation of extensive custom client- and server-side code, consistent with achieving a high-quality software architecture.

Categorization: Required for some programs.

Instructor: Pam Van Londen, Sr. Instructor, OSU

In this 11-week course, we will cover the frontend and backend of web development. You'll learn about the browser, using VS Code and its built-in terminal, and many languages and libraries, such as HTML, CSS, JavaScript, Node, Express, React, Mongoose, and MongoDB. Your attention will be needed several days per week so that you may deliver assignments on time with high proficiency. Instead of a final exam, you'll take weekly quizzes to help you focus on the most important concepts.

Help and Communication Policy

Help Sessions are posted on Canvas Home. They are updated frequently. Questions sent via Gmail or Outlook Inbox may end up in the spam folder. :-(

Seek help by following this sequence of options:

  1. 1. Content Questions

    Ed Discussion Ed Discussion Search for and read posts related to your content questions (24/7). Assignment Tips will be pinned at the top of the feed. If your question has not already been answered, then post it (anonymously, if you like), and we'll answer within 24 hours (usually).

    Response time is usually 1 day.
  2. 2. Scheduled Help Sessions

    MS Teams MS Teams Chat Work privately with a TA for help with coding and concepts.

    Zoom Zoom A group of students can watch a quick demo, ask content/code questions, and help troubleshoot.
  3. 3. Quiz & Assignment Questions

    Canvas Comment box Canvas > Grades > Assignment > Comment Box. If you would like more information about your Quiz responses, or if your score seems inaccurate, ask politely for the instructor to review it.

    Response time is usually 3 days.
  4. 4. Personal Questions

    Canvas Inbox Canvas Inbox Contact the Instructor if you have an emergency and need more time.

    Questions sent via Gmail Inbox may end up in the spam folder. :-(

    Response time is usually 1 day.
  5. 5. Surveys

    Canvas Canvas Surveys Let the instructor know how you felt about the content of the Explorations.

    Response time is usually 1 week.

Course Learning Outcomes (CLOs)

Upon completion of this course, students will be able to:

  1. Describe the architectural elements of effective web applications, as well as key threats to relevant architectural quality attributes.
  2. Demonstrate implementation of extensive custom functionality across multiple tiers.
  3. Evaluate which architectural strategies to apply, and in what manner, to address a given set of quality requirements, with particular emphasis on… 1) Scalability, 2) Usability, 3) Security.
Learning Outcomes Objectives (Assignments and Quizzes)
Describe the architectural elements of effective web applications, as well as key threats to relevant architectural quality attributes.
  • HTTP and URL quiz, FTP assignment.
  • Frontend design, usability, and HTML quiz, page layout assignment.
  • Images and CSS quiz.
  • Node, Express, and security quiz.
  • JavaScript, DOM, and Async quizzes.
  • React quiz.
  • MongoDB and scalability quiz.
  • Full Stack MERN Quiz.
Demonstrate implementation of extensive custom functionality across multiple tiers.
  • Assignment 1: Transfer a file to a web server, which uses SSH and browser Web Dev Tools.
  • Assignment 2: Add page layout and navigation, which builds on the previous assignment.
  • Assignment 3: Add images and style, which improves the user experience for the previous assignment.
  • Assignment 4: Contact Form, which incorporates Node and Express to send data input.
  • Assignment 5: Order Form, which incorporates JavaScript to respond with order data.
  • Assignment 6: Async Random Person Data, which manipulates the DOM using JavaScript.
  • Assignment 7: Convert to React App, which incorporates the existing app's technologies with React modules.
  • Assignment M8: (Optional) Database Persistence, which builds an app to perform CRUD on person data.
  • Assignment 8: Portfolio Project full-stack MERN app, which performs CRUD (create, review, update, and delete) with student's chosen topic.
Evaluate which architectural strategies to apply, and in what manner, to address a given set of quality requirements, with particular emphasis on… 1) Scalability, 2) Usability, 3) Security.
  • Assignment 8: Portfolio Project full-stack MERN app, which performs CRUD (create, review, update, and delete) with student's chosen topic.
  • Frontend design, usability, and HTML quiz, page layout assignment.
  • Node, Express, and security quiz.
  • MongoDB and scalability quiz.

Course Schedule of Modules

OSU's definitions and guidelines for quarter credits 120 hours of your time will be needed to read and understand the Explorations, participate in exercises, take quizzes, and complete assignments for this 4-credit course (that's 12 hours per week) for the first 10 weeks.

Due dates are listed in the Modules, Course Stream, Calendar, and Grades areas of the Canvas course.

Weekly Objectives and Total Points
Week Objectives Points
1
  1. Syllabus
  2. Syllabus Quiz. (5pts)
  3. Set up software.
  4. Module 1 Explorations and Exercises ~ Intro to Web Dev, HTTP Requests, Responses, and the URL.
  5. Module 1 Quiz. (10pts)
  6. Assignment 1 due ~ Transfer a file to a web server (14pts)
  7. Module Survey
29 points
2
  1. Module 2 Explorations and Exercises ~ Frontend Design and HTML
  2. Module 2 Quiz. (10pts)
  3. Assignment 2 due ~ Add page layout and navigation (20pts)
  4. Module Survey
30 points
3
  1. Module 3 Explorations and Exercises ~ Images and CSS
  2. Module 3 Quiz. (10pts)
  3. Assignment 3 due ~ Add images and style (30pts)
  4. Extra Credit (5pts)
  5. Module Survey
40/45 points
4
  1. Module 4 Explorations and Exercises ~ Node, Express, and Forms
  2. Module 4 Quiz. (10pts)
  3. Assignment 4 due ~ Contact Form (25pts)
  4. Extra Credit (10 points)
  5. Module Survey
35/45 points
5
  1. Module 5 Explorations and Exercises ~ Intro to JavaScript
  2. Module 5 Quiz. (10pts)
  3. Assignment 5 due ~ Order Form (27.5pts)
  4. Extra Credit (5 points)
  5. Module Survey
37.5/42.5 points
6
  1. Module 6 Explorations and Exercises ~ DOM, Async, and Middleware
  2. Module 6 Quiz. (10pts)
  3. Assignment 6 due ~ Async Random Person Data (20pts)
  4. Extra Credit (5 points)
  5. Module Survey
30/35 points
7
  1. Module 7 Explorations and Exercises ~ React framework
  2. Module 7 Quiz. (10pts)
  3. Assignment 7 start ~ Convert to React App
  4. Module Survey
10 points
8
  1. Module 8 Explorations and Exercises ~ Persistence Using MongoDB and Mongoose
  2. Module 8 Quiz. (10pts)
  3. Assignment 7 due ~ Convert to React App (40 points)
  4. Extra Credit assignment: Database Persistence Tests (13.5 pts)
  5. Module Survey
50/63.5 points
9
  1. Module 9 Explorations and Exercises ~ Full Stack MERN Apps
  2. Module 9 quiz. (10pts)
  3. Assignment 8 start ~ Portfolio Project (MERN) (Required assignment)
  4. Module Survey
10 points
10
  1. Assignment 8 continues ~ Portfolio Project (MERN) (Required assignment)
  2. Module Survey
  3. Student Learning Experience (SLE) Survey Due
0 points
11
  1. Assignment 8 due ~ Portfolio Project (MERN) (40 pts) (Required assignment)
40 points
311.5 Total Points

Evaluation of Student Performance

Late assignments

Each assignment must be submitted before the Due date and time as specified on the Syllabus Schedule or Modules list. The Available Until date and time constitutes a grace period, which can be used in an emergency, or if you are ill (it cannot be used for every assignment or for vacations). Students who submit using the Available Until date will incur a score reduction of 5% per day late.

If you need an extension due to extenuating circumstances, please request it in writing via the Canvas Inbox before the Due date.

Notify your instructors right away when there is a personal crisis. Some of us will waive the late penalties when students check in before Due dates. When they come afterword, however, we are less sympathetic. Just like with any employment, you'll be expected to check in immediately when a personal crisis will require a deadline extension.

Students with a DAS Flexibility Contract will have 72 hours to submit their work via file attachment in the event of a medical issue.

Incompletes

Incomplete (I) grades may be granted only in emergency cases (usually only for a death in the family, major illness or injury, or birth of your child), and if the student has turned in 80% of the points possible (in other words, usually everything but the final project). If you are having any difficulty that might prevent you from completing the coursework, please don’t wait until the end of the term to communicate with the instructor; let them know right away.

Academic Integrity ~ Avoid Cheating

This course will require you to submit coded assignments. Here is a list of things you may copy and those you may not:

e
➕ You may copy this... ❌ But not this:
Comments from starter code. Comments exactly like the Help Session/Office Hours demonstrations. Add your own comments, using your native language, to help you understand what the code is doing.
Code snippets and functions from the written Explorations, videos, and Ed Discussion. Rename functions to aid your understanding. Avoid copying demo videos exactly. Code snippets found in websites that are not listed in the Explorations or Ed Discussion. Unsure? Ask the instructor.
Code Snippets from standard library references. Code snippets from other people's completed projects. Code Snippets for AI Chat. Do your own work. Unsure? Ask the instructor.
Stylesheet rule and property names. Stylesheet property values, such as colors, fonts, sizes, and spacing. Always experiment and choose your own designs.

Templating systems such as Bootstrap, Materials Design, etc. Demonstrate that you can write CSS rules yourself.

The Code of Student Conduct prohibits Academic Misconduct and defines it as:

Any action that misrepresents a student or group’s work, knowledge, or achievement, provides a potential or actual inequitable advantage, or compromises the integrity of the educational process. To support understanding of what can be included in this definition, the Code further classifies and describes examples of Academic Misconduct, as follows.

Prohibited behaviors include, but are not limited to doing or attempting the following actions:

Materials & Tools

Textbook and Resources

Optional free online textbooks:

JavaScript for impatient programmers.
Dr. Axel Rauschmayer. 2022 edition
Eloquent JavaScript.
Marijn Haverbeke. No Starch Press. 2018. ISBN-13: 9781593279509

Applications

Install and/or sign-in to these applications:

References

Add these supporting websites to separate TABS in your browser, as needed:

Internet Service

Learn more about internet service for different situations:

OSU no longer requires/recommends Virtual Private Network (VPN) when using a public Wi-Fi connection to access Canvas. If you are handling sensitive or confidential data, use of the VPN from off-campus is required to secure your connection and protect the data you access.

Read about why you might need it, then direct all technical difficulties to the OSU Service Desk.

OSU Accounts

The following accounts must be set up and running before class begins:

  1. DUO 2-factor authentication access.
  2. Canvas.
    Access Canvas using this URL: canvas.oregonstate.edu. (Requires DUO 2-factor authentication.)
  3. Zoom will be used for group Help Sessions.
  4. Ed Discussion is available via your Canvas course login.
  5. MS Teams is available via your Canvas course login.
  6. Engineering Account (to access the web server).

Back up your working files every time you finish a session by Zip/archiving the current chapter's assignment folder and dragging it to one of the OSU cloud drives. Login to a cloud drive with your OSU ONID credentials.

If your internet service goes down, you can submit assignments using the Canvas phone app (iOS or Android), your phone's hotspot capability, and a backup .zip archive, which you've placed on one or more cloud drive:

Failure to back up your work will not be a valid excuse for delivering assignments late.

Hardware

A laptop or desktop computer is needed (macOS, Windows, Linux preferred). Tablet computers will probably not suffice for any of the learning activities. Consult the OSU Library if you need to borrow a laptop.

 

Style Guide

Writing Style

Last updated on 05/10/2023

Assume all writing for this course will be shared with your future employers, who are expecting excellent, concise but detailed, and accurate writing.

Remember:

Coding Style

In this course, we recommend these coding conventions:

Visual Design Style

You will not be judged on your visual design style, however, if we cannot read the text or images of your website projects, then instructional feedback and score markdowns will be provided in the Rubrics.

Visual materials should reflect your personality but remain professional...what would you want to show a future employer?

Methods for acheiving decent style are provided in the Explorations, but you must customize the values of most of the properties to experiment and not copy exactly what is presented.

Statements of Expectations

Land Acknowledgement

Oregon State University in Corvallis, Oregon, is located within the traditional homelands of the Mary’s River or Ampinefu Band of Kalapuya. Following the Willamette Valley Treaty of 1855, Kalapuya people were forcibly removed to reservations in Western Oregon. Today, living descendants of these people are a part of the Confederated Tribes of Grand Ronde Community of Oregon (grandronde.org) and the Confederated Tribes of the Siletz Indians (ctsi.nsn.us).

Establishing a Positive Community

It is important you feel safe and welcome in this course. If somebody is making discriminatory comments against you, sexually harassing you, or excluding you in other ways, contact the instructor, your academic advisor, and/or report what happened at Student Conduct Reporting, so we can connect you with resources.

Remember that when you communicate online, you cannot provide eye contact and body language to help explain yourself, so your message may be misunderstood. Sometimes the thread of a message is lost, making readers rely on memory (which is often faulty). And if you need the reader to act on your request, good manners will help you be successful. Use the following to ensure you communicate professionally.

Emotional & Cultural Intelligence

The following is adapted from Dr. Susan Shaw, Oregon State University

Student Conduct: This manual provides the purpose, definitions, jurisdiction, responsibilities, prohibited conduct, process and procedures, sanctions, authorities, and appeals students must know in order to succeed at OSU.

Cyberbullying on the College Campus: Understand the different types of cyberbullying and how to avoid them.

Student Bill of Rights: OSU has twelve established student rights. They include due process in all university disciplinary processes, an equal opportunity to learn, and grading in accordance with the course syllabus.

Religious Accommodation Process: Oregon State University is required to provide reasonable accommodations for employee and student sincerely-held religious beliefs. It is incumbent on the student making the request to make the faculty member aware of the request as soon as possible prior to the need for the accommodation. See the for Students.

Services

Students with Disabilities: Accommodations for students with disabilities are determined and approved by Disability Access Services (DAS). If you, as a student, believe you are eligible for accommodations but have not obtained approval please contact DAS immediately at 541-737-4098 or at http://ds.oregonstate.edu. DAS notifies students and faculty members of approved academic accommodations and coordinates implementation of those accommodations. While not required, students and faculty members are encouraged to discuss details of the implementation of individual accommodations.

Anytime Anywhere: MySSP @ OSU App. My Student Support Program is a phone app that gives all OSU students, including Ecampus students, 24/7 access by text or phone with a licensed mental health counselor. Schedule short-term counseling appointments with the same ongoing counselor and read educational materials. Students can communicate with a counselor in five different languages (Mandarin, Cantonese, French, Spanish or English); additional language options are available upon request.

Reach Out for Success (on-campus students): University students encounter setbacks from time to time. If you encounter difficulties and need assistance, it’s important to reach out. Consider discussing the situation with an instructor or academic advisor. Learn about resources that assist with wellness and academic success at oregonstate.edu/ReachOut. If you are in immediate crisis, please contact the Crisis Text Line by texting OREGON to 741-741 or call the National Suicide Prevention Lifeline at 1-800-273-TALK (8255).

Reach Out for Success (online students): University students encounter setbacks from time to time. If you encounter difficulties and need assistance, it’s important to reach out. Consider discussing the situation with an instructor or academic advisor. Learn about resources that assist with wellness and academic success. Ecampus students are always encouraged to discuss issues that impact your academic success with the Ecampus Success Team. Email ecampus.success@oregonstate.edu to identify strategies and resources that can support you in your educational goals.

Tutoring Assistance: On-campus students can utilize the OSU College of Engineering Tutoring Center when they need programming assistance.

Technical Assistance: OSU Service Desk and Accounts: Get help and learn more about your OSU technologies. If you experience any errors or problems while in your online course, contact 24-7 Canvas Support through the Help link within Canvas. If you experience computer difficulties, need help downloading a browser or plug-in, or need assistance logging into a course, contact the IS Service Desk for assistance. You can call (541) 737-8787 or visit the IS Service Desk online.

Academic Calendar: All students are subject to the registration and refund deadlines as stated in the Academic Calendar

Student Learning Experiences Survey: During Fall, Winter, and Spring term the online Student Learning Experience surveys open to students the Wednesday of week 9 and close the Sunday before Finals Week. Students will receive notification, instructions, and the link through their ONID email. They may also log into the survey via MyOregonState or directly. Survey results are extremely important and are used to help improve courses and the learning experience of future students. Responses are anonymous (unless a student chooses to “sign” their comments, agreeing to relinquish anonymity of written comments) and are not available to instructors until after grades have been posted. The results of scaled questions and signed comments go to both the instructor and their unit head/supervisor. Anonymous (unsigned) comments go to the instructor only.