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!
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.
Understand and discuss the language of the Internet and web page authoring.
Demonstrate the development process.
Demonstrate best practices.
Envision, design, prototype, produce, test, and promote a web site with consistent and meaningful navigation, quick-loading images, and compliant HTML and CSS.
Recognize good navigation and compliant code.
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.
Download and use Chrome for the course; it is required!
Viewing on other browsers will be required later in the term.
Students will use the OSU ONID or ENGR web server for all assignments.
But because OSU now uses 2-factor authentication with those servers, use of an
Integrated Development Environment (IDE) or desktop applications might be too difficult to set up for beginners.
Beginners will be asked to map their laptop hard drive to their ONID web server, which doesn't require extra software.
This will allow them to easily login with Duo.
Experienced web developers can use any IDE or installed application they wish
as long as they can connect securely to either server.
Use of other servers won't be allowed without special permission.
room Meet me
Class is held at 12:00pm to 1:50pm on Tuesday and Thursday in
Bexall Hall 328.
Office hours are via Canvas Inbox (anytime) and
Zoom (2pm to 3pm Mon, Wed, Fri).
Be prepared to spend 4+ hours outside of class each week. Some chapters have multiple lessons which require reading, writing, coding, testing, and asking questions (for a weekly total of 8 to 12 hours).
Tuesday: Understand the goal and begin the project.
Thursday: Continue learning, coding, and asking questions.
Friday: Test, fix, and submit the project. Attend office hours.
When asking questions, write using the new vocabulary.
Spelling and grammar checking are required for each week's project.
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 be challenged or confronted on 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.
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.
Chapter 1 ( 6 points) Install and configure software, upload the first file.
Chapter 2 (35 points) Markup a PHP file, add content, anchors, icons, and fonts.
Chapter 3 (33 points) Add media queries, table, form, and embellishments, extra credit.
Chapter 4 (17 points) Optimize and add background and foreground photos.
Chapter 5 (14 points) Add a gallery and slideshow.
Chapter 6 (28 points) Define a color scheme, design a logo, add touch icons.
Chapter 7 (23 points) Add audio/video, animation, and an error page.
Chapter 8 (up to 32 points) Extra Credit: Plan a website project.
Chapter 9 (100+ points) Build the new website project.
Extra Credit Optional opportunities are noted in the textbook and listed as extra credit in the Canvas Rubrics for most assignments.
live_help Weekly Tech Support
Participate in the Canvas Announcement discussion every week to practice the
Include the URL of your web page each time you participate.
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.
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.
Discussions have some useful features:
At the top there is a set of Instructions.
The Rubric can be found by clicking the 3-dot menu on the top right.
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).
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.
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.
Notice that you can expand and collapse each of the other students' threads.
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:
Make numbered or bulleted lists, add bold, italic, color, floating, etc. These features work when you have text selected.
To make a hyperlinked article title, select the title, click the link icon, then paste source's URL.
View the class roster in the People area. Find people here to form study groups if you like.
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.
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.
Available until date (grace period).
Submit, TurnItIn Load, or other button.
File attachment link.
View Rubric button.
Once you submit an assignment, look for the confirmation message:
If you need to resubmit, submit an additional file, or comment on a submission, then click the Submission Details option.
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.
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.
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.
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.
In the Grades area,
uncheck the Calculate button
to ensure you see the actual grade based on your scores.
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,
club meetings, and
class and work times.
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.
Copy the link provided then add it to your calendar:
In Microsoft Outlook's tab, choose
Paste the Canvas Calendar Feed URL and submit.
In the Calendar app on your Mac, > .
Paste the Canvas Calendar URL and adjust the name, color, and other options on the next screen.
In Google Calendar, click the plus + symbol next to the or
Add the URL you copied from Canvas and paste it into the field.
Click Add calendar.