CS 195 Web Design

Oregon State University, School of Electrical Engineering and Computer Science

About the Instructor

For more than 30 years, I have designed print and online promotional materials for small and medium companies in the USA. For 10+ years, I have been selling my fine art paintings at exhibits on the West Coast. And for 15 years, I've been teaching technology courses at OSU. Combining these activities keeps me whole!

Philosophy of Teaching/Learning

Challenging both sides of your brain (the creative side and the logical side) will transform you into a well-rounded designer. Some of you are already that designer and some of you don't know yet that you can become that person who creates beauty out of code! play_for_workGoogle has this icon called Play for Work. To me it represents the joy I feel when being creative with logical languages. I expect to transfer that joy to you!

infoCatalog Description

How to design and publish a static website using an existing publishing platform: Techniques and tools for designing and publishing on the World Wide Web; hypertext and HTML; site and page design; media integration; issues raised by Internet publishing. Courses that require this course as a prerequisite: CS 295 Web Management. Fall and Winter: Two 1:50min lecture/demonstration/practice sessions per week (Tues/Thurs). Extended office hours are provided in lieu of a separate lab.

assessmentMeasurable Student Learning Outcomes

Read more about OSU’s Learning Goals. Upon completion of this course, students will be able to:

  1. Understand and discuss the language of the Internet and web page authoring.
  2. Demonstrate the development process.
  3. Demonstrate best practices.
  4. Envision, design, prototype, produce, test, and promote a web site with consistent and meaningful navigation, quick-loading images, and compliant HTML and CSS.
  5. Recognize good navigation and compliant code.



Web Design, Management, and Interaction Textbook Cover Web Design, Management, and Interaction ($0). Van Londen, Pam, 2016 to present. Step-by-step online lessons for coders, designers, and marketers. Read the Understanding this Textbook section before you begin. Login instructions will be sent to you before the first day of class.


When you attend class, bring a laptop computer with power cable. Writing code on a tablet device is difficult but sometimes doable. You can use any platform, such as Macintosh, Windows, Chromebook, or Linux, as long as you have a fast internet connection.




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


In the first 7 weeks, you'll work on the design of a modern résumé while learning HTML, CSS, PHP, and a bit of JavaScript. Don't let this intimidate you! The instructions will ensure your success as long as you stay engaged and try what you read.

During the last 4 weeks, you'll plan and build a new website based on what you learned as well as additional new skills if you are ready for a challenge.

build Weekly Chapters with multiple Lessons (276 points)

Each assignment must be submitted before the Due date and time specified in Canvas. If you are ill or have an emergency, you may submit before the Available Until date (a grace period). Students who submit using the Available Until date will incur a slight penalty (via the Canvas Late Penalty function). Students on a DAS Flexibility Contract may use the Available Until date without a penalty.

Chapter Assignments include multiple lessons...remember to check them off as you complete them so you don't miss any.

Subject to change before the first day of class.

live_help Weekly Tech Support

people Attendance (20 points)

Subject to change before the first day of class:

Attendance is required and earns you 1 point per session for a total of 20 points.

Attendance will be taken electronically at the end of class. Be on time.

assignment Launch Party and Peer Review (20 points)

During the last class session, students will show off their new websites at a launch party held in the Kelly Engineering Atrium. While at the launch party, students will review and make recommendations for each others' sites. Review sheets will help students improve their sites before the final deadline during Finals Week.

Extra Credit Quizzes

By Sunday night of each week, you may complete each chapters' quizzes (varies with the chapter). Earn up to 1 point per quiz per week. Cropped screenshots of each of the lessons' Results screen must be submitted to earn full credit.

Canvas How to use Canvas

When you visit Canvas for the first time, bookmark its location: oregonstate.instructure.com

  1. Click on the Announcements button to see weekly or bi-weekly messages from the instructor. These will introduce and make clarifications about the project. Read them before you write the instructor with questions. In some cases you can reply to the Announcement to ask clarifying questions. Everyone will see the answer to your question. To use the Announcement Discussion, see Discussion instructions, below.
  2. Discussions have some useful features: Basic Canvas Discussion options.
    1. At the top there is a set of Instructions.
    2. The Rubric can be found by clicking the 3-dot menu on the top right.
      Show the Discussion Rubric by clicking the 3-dot more menu
    3. The search bar allows you to search for a keyword, key phrase, or student in the long list of threads (which will appear once others have posted).
    4. Below that, you'll see a Reply box. You'll click it to create a new thread where you can paste in writing, or write from scratch.
    5. When you want to reply to someone else's thread, use the Reply button under that student's thread, rather than the first one. This provides conversation continuity.
    6. Notice that you can expand and collapse each of the other students' threads.
    7. Hover over the middle top of the thread to see an arrow appear. This allows you to open just one thread at a time when they are all collapsed.

    When editing a thread, notice that you can:
    1. Make numbered or bulleted lists, add bold, italic, color, floating, etc. These features work when you have text selected.
    2. To make a hyperlinked article title, select the title, click the link icon, then paste source's URL.
      Basic Canvas Discussion editing options.
    3. To learn more, consult the Canvas Discussion tutorials: Canvas Student Guides for Discussions.
  3. View the class roster in the People area. Find people here to form study groups if you like.
  4. View the Coming Up menu. It lists the assignments coming up in the current week. Notice the due dates so you'll never be late again.
    No excuses for being late; the Canvas Coming Up list shows the day and time items are due.
  5. Click on the Assignment button to see a list of Chapter Assignments and Pages. An Assignment includes these components:
    • Link the Chapter web page.
    • Summary of topics.
    • Due date.
    • Available until date (grace period).
    • Submit, TurnItIn Load, or other button.
    • Commenting box.
    • File attachment link.
    • View Rubric button.
  6. Once you submit an assignment, look for the confirmation message:
    Canvas Assignment submission confirmation.
  7. If you need to resubmit, submit an additional file, or comment on a submission, then click the Submission Details option.
    Uploading a file to Canvas.
  8. Click the Grades button to view instructor feedback. A few days after each assignment is due, read the instructor and/or TA's feedback in the Grades or Assignment area. It provides a Rubric icon for viewing your score on each criterion and allows you to ask questions.
    Canvas Grades Assignment link
  9. Click the Assignment Name to respond to instructor feedback. If you want to ask a question about your score, click on the assignment name to reveal the feedback and write your comment in the box provided.
    Canvas Grades Rubric and Comments
    Once you click the assignment name, you'll see the feedback. The comment box is under the feedback.
    Using this box notifies the instructor and is the fastest way to get a response.
  10. Click the colored TurnItIn Originality Report icon to see how much potential plagiarism your project includes. Learn to use the Report in Chapter 2, step 2.21.
  11. In the Grades area, uncheck the Calculate button to ensure you see the actual grade based on your scores.
    Uncheck the calculate button to see the actual final grade in Canvas.
  12. Click the Calendar button. The Calendar shows all of your courses' due dates. Click one course on and off on the right to see one at a time or all of them. Notice that they are color-coded. Use the calendar with your name on it to add your own time management events, such as project start dates, office hours, club meetings, and class and work times.
    Canvas Calendar
    Add the calendar's feed of due dates to your preferred calendar app by clicking the Calendar Feed link at the lower right of Canvas Calendar screen.
    Canvas Calendar Feed link
    Copy the link provided then add it to your calendar:
    Canvas Calendar Feed URL
    • In Microsoft Outlook's Home tab, choose + Open Calendar Paste the Canvas Calendar Feed URL and submit.
      Open a Calendar from the Internet in Outlook.
    • In the Calendar app on your Mac, File > New Calendar Subscription. Paste the Canvas Calendar URL and adjust the name, color, and other options on the next screen.
      Add the Canvas calendar feed URL to Apple's calendar subscription.
      Update the Apple Calendar settings.
    • In Google Calendar, click the plus + symbol next to the Other Calendars or Add a Coworker's Calendar
      Add a URL using the Google Calendar Add Coworker menu.
      Add the URL you copied from Canvas and paste it into the field. Click Add calendar.