Syllabus
CS 50C :: Web Development 3
Course Description
Students will use HTML, CSS, & JavaScript to produce powerful interactive web content. Topics include semantic elements, forms, canvas, audio, video, content management systems. Students will create responsive websites using a grid-based Bootstrap framework and WordPress.
Student Learning Outcomes
Upon completion of the course, students will be able to:
• Use HTML5 Markup to create interactive web content.
• Explain the major benefits of HTML5.
• Compare and contrast HTML5 and HTML4.
• Incorporate HTML5's new elements and attributes into websites.
• Utilize HTML5 to incorporate semantic elements.
• Develop web pages using HTML5's new, audio, video elements.
• Produce code which uses the canvas element to create code-based drawings and animations.
• Use new HTML5 form elements.
• Discuss web site accessibility issues and implementations.
• Utilize Bootstrap to style forms, tables, and navigational elements.
• Utilize Bootstrap to create responsive designs which work well with mobile devices.
• Set up hosting and installation of WordPress
• Learn how to best configure WordPress and set up pages, posts, categories, and menu system
• Understand how to select a WordPress theme, install it and do some basic customization
• Build a simple WordPress theme from scratch and implement it on a site
Class Meetings
Each lecture week starts on Monday. There will not be live lectures, as this is a totally online class. All the lecture material will be offered asynchronously, meaning you can access at anytime of the week you want.
Instructor: Corrine Haverinen
Email: chaverinen@santarosa.edu (best way to reach me)
Phone: (707) 527-4778 - CS Dept for emergencies only
Class Web Site: http://online.santarosa.edu/homepage/chaverinen/cs50_c/site/index.shtml
The best way to contact me is by email. I will respond within 48 hours.
Office Hours:
Mondays 6:30-8:30 PM Online
Email me to schedule a meeting online, or we can chat by email or phone. We can both log on to a website and call a toll-free phone number to chat with each other if you need visual instruction. Contact me in advance if you would like to make arrangements to meet in the lab.
Web Site
Students will use the class web site for assignment instructions, submitting assignments, viewing classmate's work, sharing resources, and viewing grades.
Dropping the Class
If you decide to discontinue this course, it is your responsibility to officially drop it to avoid getting no refund (after 10% of course length), a W symbol (after 20%), or a grade (after 60%). Also, for several consecutive, unexplained absences, the instructor may drop a student.
Pass-No Pass (P/NP)
You may take this class P/NP. You must decide before the deadline, and add the option online with TLC or file the P/NP form with Admissions and Records. With a grade of C or better, you will get P.
You must file for the P/NP option by 2/22/2019. Once you decide to go for P/NP, you cannot change back to a letter grade.
If you are taking this course as part of a certificate program, you can probably still take the class P/NP. Check with a counselor to be sure.
Important Dates
Day Class Begins: January 12, 2019
Day Class Ends: May 15, 2019
Last Day to Add without instructor's approval: January 18, 2019
Last Day to Drop with refund: January 25, 2019
Last Day to Add with instructor's approval: February 1, 2019
Last Day to Drop without a 'W' symbol: February 1, 2019
Last Day to Opt for Pass/No Pass: February 22, 2019
Last Day to Drop with a 'W' symbol: April 19, 2019
Class Message List
I check email daily Monday through Friday and frequently on the weekends. I will answer email questions within 48 hrs (most frequently sooner). Students can use the class message list linked to from the class web site for sharing resources and student interaction outside of class.
Attendance
Students who miss the first two week’s assignments may be dropped from the class. It is strongly advised that if you need to miss more than one class/homework deadline in a row that you contact me to avoid being dropped from the class.
Assignments/Late Policy
Late Policy
All assignments are due at midnight PST on the due date. A late submission will receive a 20% penalty. Submissions more than one week late are not accepted without prior arrangement. Late work will not be graded unless student sends instructor an email with URL for late work.
Exams
There will be online midterm and final exams. The material comes from the textbook, class lectures and supplemental materials. If any exam is missed, a zero will be recorded as the score. It is your responsibility to take the online exams by the due date.
Grading Policy
Visit the Gradebook linked to in the main navigation often to keep track of your grades. I grade once a week and post grades and comments on the online gradebook. If you are taking this course to complete one of the SRJC CS Department Web Development Certificates, you must take the class for a letter grade.
Grades will be assigned as follows: 90% for an A = 243 points or more 80% for a B = 216 to 242 points 70% for a C = 189 to 215 points 60% for a D = 162 to 188 points
In addition to receiving at least 70% of the total class points, you must complete the midterm exam and the final exam to pass the class.
Grade Book
I grade once a week and post grades and comments on the online grade book.
Textbook
Introducing HTML5 (Second Edition)
AUTHOR Bruce Lawson. ISBN 978-0321784421
You can find the text at the SRJC or Petaluma campus bookstore and online at the SRJC Bookstore, or Amazon.
The textbook is strongly recommended. You may get through the course without it and instead use Mark Pilgrim's Dive Into HTML5, a free online book. I will post online articles some weeks that are required reading.
Required Software
Students will need to use an HTML editor and FTP software of choice, and at least 3 browsers. You can use the open labs at either the Petaluma or Santa Rosa campus, although you will not have control over which browsers are available.
HTML editors:
[pc] Notepad++, Wordpad, Dreamweaver, etc.
[mac] TextEdit, BBEdit, Dreamweaver, TextWrangler, Atom, etc.
FTP software:
SSH client [win] / Fugu [mac] / Dreamweaver [win or mac]
Web Browsers:
I recommend you have the latest version of at least 3 browsers: Firefox, Chrome, IE [PC] or Safari. Opera will be helpful when working with HTML5 forms.
Student Hosting
Your projects and exercises will need to be posted on a web server for demonstration and grading. The SRJC offers students free web server accounts. Use this link to Request a website. You are not required to use the student server, but it is strongly recommended. You may not use any hosting service that places ads on your site
WordPress Hosting
For the last section of the class, you will need to set up hosting on HostGator.com in order to install WordPress. HostGator allows you to pay per month, so your cost will only be for one or two months at $8 per month.
Standards of Conduct
Students who register in SRJC classes are required to abide by the SRJC Student Conduct Standards. Violation of the Standards is basis for referral to the Vice President of Student Services or dismissal from class or from the College.
Collaborating on or copying of tests or homework in whole or in part will be considered an act of academic dishonesty and result in a grade of 0 for that test or assignment. I encourage students to share information and ideas, but not their work.
Special Needs
Students with disabilities who believe they need accommodations in this class are encouraged to contact Disability Resources (527-4278), as soon as possible to better ensure such accommodations are implemented in a timely fashion.
Class Lecture Schedule
It may be necessary to make changes to the following list of topics.
| Week | Date | Topic | Description |
| Week 1 | January 12 | Introduction to HTML5 | Intro to Course, History leading to HTML5, Major benefits of HTML5, Compare and contrast HTML5 and HTML4, Intro to Google Chrome DevTools & Firebug |
| Holiday | January 19 | Fun | |
| Week 2 | January 26 | HTML5 Semantics & Structure | Review of HTML5 tags, HTML5 shiv, Outlining, ARIA, Microdata |
| Week 3 | February 2 | CSS3 and Javascript Integration | Detection and Progressive Enhancement including Modernizr, polyfills, feature detectors. Basics of integrating JS. |
| Week 4 | February 9 | Responsive Web Design | Responsive vs Adaptive Web Design, Media Queries, Introduction to Grid-based Frameworks, downloading and setting up a simple site with Bootstrap, the Bootstrap grid classes |
| Holiday | February 16 | ||
| Week 5 | February 23 | Mobile Applications | Viewports, handling touchscreen events, creating a sliding table of contents with JQuery |
| Week 6 | March 2 | Interactive Page Layouts | Responsive Interactive Page Elements, Tables, Tabs, Accordions, Navigation, and Panels - with and without Bootstrap |
| Week 7 | March 9 | Canvas | Interactive Imagery, Scripting the Canvas Tag |
| Spring Break | March 16-20 | ||
| Week 8 | March 23 | SVG | Vector Graphics, SVG Libraries, Image Sprites, Image Resolution and the Retina Display, Pixel Density. Midterm Exam |
| Week 9 | March 30 | Multimedia Elements | Audio & Video elements, codecs, mimetypes, encoding, using a jQuery media player |
| Week 10 | April 6 | Forms | HTML5 Input Elements, Pseudo-Classes, Form attributes, Forms in Bootstrap, Styling Forms |
| Week 11 | April 13 | Accessibility | Review of Accessibility features and other considerations for making Accessible Web sites |
| Week 12 | April 20 | WordPress Part 1 | CMS basics, Setting up account, how to install and set up WordPress on your own server, basic settings in WP, how best to configure WP |
| Week 13 | April 27 | WordPress Part 2 | Pages and posts in WordPress and how categories work. Using pages, posts and categories to build out a menu system. Plug-ins. |
| Week 14 | May 4 | WordPress Part 3 | Themes and how to install, finding themes and the considerations when choosing a theme, basic customization, WP file structure, using a child theme |
| Week 15 | May 11 | WordPress Part 4 | Build a theme from scratch and implement it on a WordPress site |
| Week 16 | May 18 | Finish Final Projects | Final Exam |