Course Syllabus

CS50B: Web Development 2
Section 5407, Spring 2023 Course Syllabus

This syllabus is available in the following formats:

Instructor photo

Instructor: Ethan Wilde (he/him/his), ewilde@santarosa.edu

Course Description

Combines hand-coded exercises in CSS code with Bootstrap, a front-end development tool. Students will expand their CSS skills as they format text, display images, layout pages, and create navigational systems. Bootstrap will provide the basis for an e-folio that is customized with hand coding.

Recommended Preparation: Eligibility for ENGL 1A or equivalent

Prerequisites: Course Completion of CS 50A OR CS 50.11B

Whether you want to become a professional member of a web development team, or just want to create your own personal site, mastery of HTML and CSS is essential to those goals. We will engage in advanced HTML5 and CSS3 work while using the Bootstrap framework, the JavaScript language and the jQuery library, as well as the WordPress Content Management System. You will become proficient in the creation of interactive websites using static files as well as CMS-generated HTML.

Student Learning Outcomes

Students will be able to:

  1. Use CSS code that meets current industry standards to layout a site, create navigation, and control color and text.
  2. Apply appropriate terminology to describe CSS selectors, styles, and units.
  3. Create CSS code that is supported by current browsers, complies with accessibility standards, and validates under current industry standards.

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

  1. Describe the current status of CSS implementation across various browsers.
  2. Analyze and modify an existing web site's HTML and CSS using a Browser Code Inspector.
  3. Use Bootstrap to create an efolio site.
  4. Create webpages, which are styled using HTML, CSS, and JavaScript.
  5. Produce validated HTML and CSS documents.
  6. Produce a file / folder structure that matches industry standards.
  7. Apply the principles of the cascade, inheritance, pseudo classes, pseudo elements, and advanced selectors in CSS documents.
  8. Produce an e-folio created using Bootstrap HTML, CSS and JavaScript with hand coded CSS modifications.
  9. Demonstrate appropriate use of CSS properties.

Topics and Scope:

  1. Overview: HTML, CSS, JavaScript
  2. CSS selectors
  3. Structure and the cascade
  4. Bootstrap efolio
  5. Fonts / Text
  6. Position
  7. Backgrounds
  8. Images
  9. Layout
  10. Bootstrap layout
  11. Navigation
  12. Bootstrap Navigation
  13. Content Management Systems (CMS)
  14. WordPress CMS

Assignments:

  1. Regular textbook reading
  2. Fourteen (14) assignments. All webpages must be uploaded to the class-provided hosting account on the Internet and must validate.
  3. Two (2) quizzes, a midterm and final exam
  4. Website critiques
  5. Participation in electronic message board discussions

Course Outline of Record

You may find the official course outline of record for this course at the following link: https://portal.santarosa.edu/srweb/SR_CourseOutlines.aspx?ck=CS50B 

Class Meetings

Spring 2023 Schedule

Class Delivery Day and Time Modality
Online Meetings Weeks start on Tuesdays Canvas

Live weekly Web conference
https://santarosa-edu.zoom.us/j/135129123 

Tuesdays, 11:30am - 12:30pm Zoom

All class materials for each module will be released online in Canvas on Tuesdays throughout the entire semester. A weekly live online meeting will be held on Tuesdays, 11:30pam - 12:30pm. Attendance at the live web conferences is optional but highly recommended. Every student must either attend the live web conference or watch the entire screencast recording of the web conference. Use this link to join live only on Tuesdays, 11:30am - 12:30pm: https://santarosa-edu.zoom.us/j/135129123. To view any weekly lecture's recorded screencast, visit the Screencast page for any week in the Modules section.

Instructor Contact

Ethan Wilde

Email: ewilde@santarosa.edu

Phone: 707-527-4855

Spring 2023 Office Hours
January 23 – May 15, 2023

Day Time Location
Mondays (online) 9:00am - 1:20pm Online: Skype ethanwilde or Email ewilde@santarosa.edu
Thursdays (in-person) 10:00am - 12:20pm Maggini Hall - CS Dept Office

» Reserve a future office hour appointment

I typically respond to emails within 48 hours, weekends excepted. I never respond on Sundays.

Course Web Site

Students will use the Canvas course web site to access all course content, for assignment instructions, submitting assignments, viewing classmates' work, sharing resources, and viewing grades. The Google Chrome browser is recommended for viewing the Canvas-powered course site. Internet Explorer is not recommended.

Textbooks

WordPress 5 Complete book cover

WordPress 5 Complete (7th)
Karol Król
978-1789532012 (ISBN 13)
Free eBook available via SRJC Libraries
Publisher book site available

No purchase necessary. This book is available in electronic form without cost via SRJC Libraries.

Ideo Field Guide to Human-Centered Design book cover

The Field Guide to Human-Centered Design (1st)
IDEO.org
978-0991406319 (ISBN 13)
Free PDF eBook available for download

No purchase necessary. This book is available in electronic form without cost as a downloadable PDF eBook.

Equipment

  • A personal computer, either at home, work or on the Santa Rosa or Petaluma campuses.

Required Software + Services

  • Internet access
  • Web browsers including:
  • Code editor such as:
  • File Transfer Protocol (FTP) software such as:
  • Cloud hosting, version control + development environment services:
    • Repl.it IDE (Integrated Development Environment) required for all students, starting Week 2, for hosting class assignments in the first half of the term. For the first eight weeks, Repl.it will provide a text editor and file transfer support without any additional software needed. Starting in Week 10, you will need a text editor and file transfer application. Complete the hosting survey to get your free Repl.it account.
    • Pantheon required for all students, starting in Week 10, for hosting WordPress-based assignments in the second half of the term. Instructions will be provided for setting up your free account later in the term. 
  • Graphics and prototyping software such as:
    • Adobe Photoshop, part of a Creative Cloud subscription (optional)
    • Gimp open source application
    • Pixlr browser-based image editor
    • Diagrams.net browser-based drawing app
    • Figma user interface design tool app
  • PDF display software such as:

Optional Software

The additional software listed below is often used for Web development. 

  • Additional Web browsers including:
    • Apple Safari (Mac OS only)
    • Microsoft Edge (Windows 10 only)

Important Dates

Day Class Begins: Tuesday, January 17, 2023

Day Class Ends: Friday, May 19, 2023

Last Day to Add without instructor's approval: Tuesday, January 24, 2023

Last Day to Drop with refund: Sunday, January 29, 2023

Last Day to Add with instructor's approval: Sunday, February 5, 2023

Last Day to Drop without a 'W' symbol: Sunday, February 5, 2023

Last Day to Drop with a 'W' symbol: Sunday, April 23, 2023

Last Day to Opt for Pass/No Pass: Friday, May 19, 2023

Dropping the Class

If you decide to discontinue this course, it is your responsibility to officially drop it. A student may be dropped from any class when that student's absences exceed ten percent (10%) of the total hours of class time. It is strongly advised that if you need to miss more than one class/homework deadline in a row that you contact the instructor to avoid being dropped from the class.

Attendance

Students who fail to complete the requirements of the first and second class modules may be dropped by the instructor. Students must view and participate in online materials released each week in the Modules section of the course Canvas website.

Pass‐NoPass (P/NP)

You may take this class P/NP. You must decide before the deadline, and add the option online within your student portal 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 May 19, 2023. 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.

Instructor Announcements

The instructor will post announcements on the “Announcements” page in Canvas throughout the semester. Canvas notifies students according to their preferred Notification Preferences.

Late Policy

Please make a plan before the course starts to allow yourself the necessary time each week to complete the required reading, watching, online discussion posting, and assignments. The official Course Outline of Record for this three-unit semester-length course stipulates that each student is expected to complete 157.5 hours of learning for the class. This works out to 9 hours per week for each of the 17 weeks of regular instruction along with 4.5 hours for Finals Week. If you plan accordingly, you can avoid submitting assignments late.

All assignments are due at 11:59pm Pacific time on the Monday corresponding to the due date. A late submission will receive a 10% penalty for each week it is late. Submissions more than two weeks late are not accepted without prior written arrangement.

Exams

There will be online midterm and final exams. The material comes from the textbooks, class lectures and supplemental materials. If any exam is missed, a zero will be recorded as the score, unless you have made prior written arrangements with me. It is your responsibility to take the exams by the due date.

Grading Policy

Click the “Grades” link in Canvas to keep track of your grades. I grade once a week and post grades and comments in the Canvas gradebook.

Grades will be assigned as follows:

Letter Grade

Percentage

Points Total

A

90% - 100%

900 points or more

B

80% - 89%

800 to 899 points

C

70% - 79%

700 to 799 points

D

60% - 69%

600 to 699 points

F

59% or lower

599 points or less

If taking Pass/No Pass you need at least 70% of the total class points and to complete the midterm exam and the final exam to pass the class.

Grading Breakdown

Percent

Points

Grading Category

62%

620 points

Projects + Assignments

12%

120 points

Discussions + Attendance

6%

60 points

Quizzes

10%

100 points

Midterm

10%

100 points

Final Exam

100%

1000 points

1000 points possible

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. See the Student Code of Conduct page.

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, except for assignments that allow collaboration. Students are encouraged to share information and ideas, but not their work. See these links on Plagiarism:

I expect each student to maintain high standards of civility and respect when communicating with each other. The following rules of netiquette should be observed in all class discussions and communications:

  • Be kind and respectful to others
  • Use full sentences
  • Avoid jargon and acronyms
  • Use language that supports others

Special Needs

Every effort is made to conform to accessibility standards for all instructor-created materials. Students should contact their instructor as soon as possible if they find that they cannot access any course materials. Students with disabilities who believe they need accommodations in this class are encouraged to contact Disability Resources by calling (707) 527-4278 or visit online at drd.santarosa.edu.

Student Health Services

Santa Rosa Junior College offers extensive health services to students. Visit Student Health Services online at shs.santarosa.edu or call them at (707) 527-4445.

Course Outline

Start
Date
Canvas
Module
Topics Assignments
1/17 Week 1 Responsive HTML5 and CSS3 + Review
  • Hosting Signup Survey
  • Assignment 1: Syllabus Quiz
  • Discussion 1: Check-in Discussion
  • Reading: "Responsive Web Design"
1/24 Week 2 Introduction to the Bootstrap Framework:
the Responsive Grid
  • Assignment 2: Bootstrap Basics
  • Reading: online
1/31 Week 3 Bootstrap Typography + Basic Components
  • Assignment 3: Human-Centered Page
  • Discussion 2: Design Thinking
  • Reading: online
2/7 Week 4 Bootstrap Navigation
  • Assignment 4: Responsive Navigation
  • Reading: online
2/14 Week 5 More Bootstrap Components + Decoration
  • Assignment 5: Feedback + Decoration
  • Discussion 3: Interaction Design
  • Reading: online
2/21 Week 6 Forms + Customizing Bootstrap CSS
  • Assignment 6: Restyling Bootstrap
  • Quiz 1
  • Reading: online
2/28 Week 7 Introduction to JavaScript
  • Assignment 7: First Scripts
  • Discussion 4: Agile Workflow
  • Reading: online
3/7 Week 8 Bootstrap + JavaScript
  • Midterm Project: Interactive Catalog
  • Reading: online
3/14 Week 9 Midterm Review
  • Midterm Exam
  • Discussion: Midterm Project Presentations
3/21 No Class Spring Break
3/28 Week 10 WordPress 1: Introduction to CMS
  • Assignment 8: Setting Up WordPress
  • Discussion 5: Content Management Systems
  • Reading: WP Complete, Chs. 1 + 2
4/4 Week 11 WordPress 2: Posts
  • Assignment 9: Creating Content
  • Reading: WP Complete, Ch. 3
4/11 Week 12 WordPress 3: Pages, Menus + More
  • Assignment 10: Site Building
  • Discussion 6: Final Student Project Proposals
  • Reading: WP Complete, Ch. 4
4/18 Week 13 WordPress 4: Plug-ins, Widgets + Themes
  • Assignment 11: Extending Your Site
  • Quiz 2
  • Reading: WP Complete, Chs. 5 + 6
4/25 Week 14 WordPress 5: Custom Bootstrap Theme
  • Assignment 12: Building a Custom Theme
  • Discussion 7: Sass + CSS Preprocessors
  • Reading: WP Complete, Ch. 8
5/2 Week 15 Introduction to Sass: CSS Preprocessor
  • Assignment 13: Sass Basics
  • Reading: online
5/9 Week 16 Customizing Bootstrap's Sass Rules
  • Assignment 14: Remixing Bootstrap with Sass
  • Discussion 8: Final Student In-Progress Projects
  • Reading: online
5/16 Week 17 Mastering Sass + Bootstrap
Final Review
  • Final Project: Student-Defined Site
  • Reading: online
5/22 Mon –
5/26 Fri
Week 18 No Regular Class
(Exam online, no regular class meeting)
  • Final Exam (due 5/26)
  • Discussion: Final Project Presentations

Note to online students: the assignments listed above will become available as modules are released in sequence each week. To view course content, go to Modules.

All of the original material found on this online course website is the property of the instructor, Ethan Wilde. My lectures and course materials, including slide presentations, online materials, tests, outlines, and similar materials, are protected by U.S. copyright law and by College policy. I am the exclusive owner of the copyright in those materials I create. You may take notes and make copies of course materials for your own use. You may also share those materials with another student who is registered and enrolled in this course. You may not reproduce, distribute or display (post/upload) lecture notes or recordings or course materials in any other way — whether or not a fee is charged — without my express written consent. You also may not allow others to do so.

© 2023 Ethan Wilde.

Course Summary:

Date Details Due