Contact Hours: Online only, for 11 weeks (8 weeks during Summer Session).
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 (8 weeks during Summer Session), 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, MongoDB, and REST.
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. Content Questions
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. Scheduled Help Sessions
MS Teams Chat Work privately with a TA for help with coding and concepts.
Zoom A group of students can watch a quick demo,
ask content/code questions, and help troubleshoot.
3. Quiz & Assignment Questions
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. Personal Questions
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. Surveys
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:
Describe the architectural elements of effective web applications, as well as key threats to relevant architectural quality attributes.
Demonstrate implementation of extensive custom functionality across multiple tiers.
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, color, Favicon, and CSS quizzes.
Node, Express, and security quiz.
JavaScript, DOM, and Async quizzes.
MongoDB and scalability quiz.
React and Full Stack MERN Quizzes.
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 semantic HTML page layout and navigation, which builds on the previous assignment.
Assignment 3: Add images and a favicon, which provides visual content for the previous assignment.
Assignment 4: Add style, which improves the user experience for the previous assignment.
Assignment 5: Add a contact form, which incorporates Node and Express to send data input.
Assignment 6: Add an order form, which incorporates JavaScript to respond with order data.
Assignment 7: Portfolio backend, which performs CRUD (create, review, update, and delete)
on student's chosen data topic, using Express, MongoDB, Mongoose, and REST.
Assignment 8: Portfolio frontend full-stack MERN app, which converts the previous static website into
a React frontend and becomes the user interface for CRUD performed on the existing backend.
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 frontend full-stack MERN app, which converts the previous static website into
a React frontend and becomes the user interface for CRUD performed on the existing backend.
Frontend design, usability, and HTML quizzes, 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.
In the Summer Session 8-week intensive sections, expect to spend more time per week
to finish up in the compressed timeframe.
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
0
Syllabus
Set up software.
Syllabus Quiz. (5pts)
5 points
1
Module 1 Explorations and Exercises ~
Intro to Web Dev,
HTTP Requests, Responses, and the URL.
Module 1 Quiz. (10pts)
Assignment 1 due ~ Transfer a file to a web server (14pts)
Module Survey
24 points
2
Module 2 Explorations and Exercises ~ Frontend Design and HTML
Module 2 Quiz. (10pts)
Assignment 2 Due ~ Add Page Layout and Navigation (20pts)
Module Survey
30 points
3
Module 3 Explorations and Exercises ~ Images, Color, and Favicons
Module 3 Quiz. (10pts)
Assignment 3 due ~ Add Images and Favicons (35pts)
Module Survey
45 points
4
Module 4 Explorations and Exercises ~ CSS
Module 4 Quiz. (10pts)
Assignment 4 due ~ Add Style (25pts)
Extra Credit Writing (3pts)
Module Survey
35/38 points
5
Module 5 Explorations and Exercises ~ Node, Express, and Forms
Module 5 Quiz. (10pts)
Assignment 5 Due ~ Process Contact Form Data (26pts)
Extra Credit Writing (3pts)
Extra Credit NodeMailer (5pts)
Module Survey
36/44 points
6
Module 6 Explorations and Exercises ~ Intro to JavaScript
Module 6 Quiz. (10pts)
Assignment 6 due ~ Process Order Form data (25pts)
Extra Credit Writing (5pts)
Module Survey
35/40 points
7/8
Module 7 Explorations and Exercises ~ Asynchronous Programming
Module 7 Quiz. (10pts)
Extra Credit ~ Manipulate the DOM with a Dataset API (10 points)
Module Survey
Two-day holiday changes the weekly pattern!
10/20 points
9
Module 8 Explorations and Exercises ~ MongoDB, Mongoose, REST
Module 8 Quiz. (10pts)
Assignment 7 due ~ Required Portfolio Backend (14pts)
Module Survey
24 points
10
Module 9 Explorations and Exercises ~ React and Full Stack MERN
Assignment 8 Starts ~ Required Portfolio Frontend for CRUD (MERN)
Student Learning Experience (SLE) Survey Due
0 points
11
Assignment 8 Due ~ Required Portfolio Frontend and Backend (MERN) (40pts)
Extra Credit options (10 pts)
Contribute to the Ed Discussion Gallery (0ptional)
Module Survey
40/50 points
294/330 Total Points
Evaluation of Student Performance
Late assignments
Each assignment must be submitted
before the Due date and time as specified on the 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:
➕ 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.
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:
Cheating: Unauthorized assistance, or access to or use of unauthorized materials, information, tools, or study aids. Examples include, but are not limited to, unauthorized collaboration or copying on a test or assignment, using prohibited materials and texts, unapproved use of cell phones, internet, or other electronic devices, etc.
Plagiarism: Representing the words or ideas of another person or presenting someone else’s words, data, expressed ideas, or artistry as one’s own. Examples include, but are not limited to, presenting someone else’s opinions and theories as one’s own, using another person’s work or words (including unpublished material) without appropriate source documentation or citation, working jointly on a project and then submitting it as one’s own, etc.
Falsification: Fabrication or invention of any information. Examples include, but are not limited to, falsifying research, inventing or falsely altering data, citing fictitious references, falsely recording or reporting attendance, hours, or engagement in activities such as internships, externships, field experiences, clinical activities, etc.
Assisting: Any action that helps another engage in academic misconduct. Examples include, but are not limited to, providing materials or assistance without approval, altering someone’s work, grades or academic records, taking a test/doing an assignment for someone else, compelling acquisition, selling, bribing, paying or accepting payment for academic work or assistance that contributes to academic misconduct, etc.
Tampering: Interfering with an instructor’s evaluation of work by altering materials or documents, tampering with evaluation tools, or other means of interfering. Multiple submissions of work. Using or submitting work completed for another or previous class or requirement, without appropriate disclosure, citation, and instructor approval.
Unauthorized recording and use: Recording and/or dissemination of instructional content without the express permission of the instructor(s), or an approved accommodation coordinated via Disability Access Services.
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.
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, or Linux).
Tablet and Chromebook computers will probably not suffice for any of the learning activities.
Consult the OSU Library if you need to borrow a laptop.
Assume all writing for this course will be shared with your future employers, who are expecting excellent, concise but detailed, and accurate writing.
Remember:
All writing must be your own. You may not copy directly from Explorations, internet sources, or AI chat.
Synthesize what you learned from multiple paragraphs in multiple Explorations.
Use the vocabulary/keywords presented in the Exploration Overview, bolded words, section headings, and Review pages.
Write only what is necessary...be detailed without repeating anything. Get right to the point. No need to say what you're going to say, then say it, then say it again.
Always write in complete sentences when describing a concept.
Do not include writing prompts. Instead, add them to comments in your code:
HTML<!-- prompt -->
JS// prompt or /* prompt */
CSS/* prompt */
Do not number the <p> paragraphs.
When instructions say to write a <p>paragraph, do not provide <br>, <ul>, <ol>, or <dl> tags.
Add <strong> to the first mention of a key concept name.
Use the tag sparingly; not on phrases or URLs.
Do not add it on all mentions of the same key concept.
Do not use the out-of-date <b> tag.
A decent word count in this course is between 75 and 100 words per paragraph.
If you want to highlight code in your paragraphs, incorporate the <code>, <pre>, <samp>, <var>, and <kbd> tags.
Learn more about that.
Acronyms must be uppercase (unless they are part of a URL or response).
Proper nouns, such as companies and languages, must be spelled with the correct upper/lower case letters.
Use LanguageTool (with Picky mode on) to correct grammar and spelling issues, so your writing is professional.
Review how to use LanguageTool in the Software Setup Module.
Coding Style
In this course, we recommend these coding conventions:
Do not use <div> tags. Instead, use the semantic page layout tags.
Add your own comments in your native language, so you can understand your code better.
Add tabs and line breaks to make your code easier for the instructional staff to read. How many and how often is up to you.
JavaScript and React are picky. Use camelCase rather than underscores and hyphens for variable names.
Names/values must be unique from REPLs, sample code, and video demonstrations.
Renaming them helps you understand what you're doing. This includes renaming/rewriting the following:
<h3>Headings.
<p>All content text.
<label for="unique">
<input id="unique" name="unique">
<button>Text
<article id="unique">
function unique(params)
const unique = ""
let unique = ""
res.status(500).send(`unique message`);
error.message = "unique message";
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 achieving 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
Make a personal commitment to learning about, understanding, and supporting your peers.
Assume the best of others in the class and expect the best from them.
Acknowledge the impact of sexism, racism, ethnocentrism,
classism, heterosexism, ageism, and ableism on the lives of class members.
Recognize and value the experiences, abilities, and
knowledge each person brings to class. Value the diversity of the class.
Participate actively in the discussions, having completed
the readings and thought about the issues.
Pay close attention to what your classmates write in
their online comments. Ask clarifying questions, when appropriate. These
questions are meant to probe and shed new light, not to minimize or devalue
comments.
Think through and re-read your comments before you post them.
Never make derogatory comments toward another person in the class.
Do not make sexist, racist, homophobic, or victim-blaming comments at all.
Disagree with ideas, but do not make personal attacks.
Be open to being challenged or confronted with your ideas or prejudices.
Challenge others with the intent of facilitating growth. Do not demean or embarrass others.
Encourage others to develop and share their ideas.
Be willing to change.
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.
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.
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.
For Mental Health:
Learn about counseling and psychological resources for
Ecampus students. 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).
Financial Hardship Statement:
Any student whose academic performance is impacted
due to financial stress or the inability to afford groceries, housing, and other
necessities for any reason is urged to contact the Director of Care for support
(541-737-8748).
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.
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.
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).
MS Teams Chat Work privately with a TA for help with coding and concepts.
Zoom A group of students can watch a quick demo,
ask content/code questions, and help troubleshoot.
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.
Visual Studio Code (for editing code and assistance during group Help Sessions).
Replit (for interacting with Code snippets in the Explorations).
Install Guide
LanguageTool (for checking grammar, spelling, and punctuation).
Install it in your favorite browser and view the video posted in Canvas.
OSU Engineering Web Sever (for transferring files from the local drive to your free public server).
Node.js version 18.x
Other versions may not work with updated modules.
Install guides
MongoDB
Mozilla Developer Network (MDN)
CSS Tricks Almanac
Mozilla Developer Network (MDN)
Express official guide
React official guide
Mongoose at MongoDB