Course Syllabus
CS50B: Web Development 2
Section 1384, Fall 2023 Course Syllabus
This syllabus is available in the following formats:
- Word document: SRJC CS50B 1384 Fa 2023 Syllabus Final v2.docx Download SRJC CS50B 1384 Fa 2023 Syllabus Final v2.docx
- PDF file: SRJC CS50B 1384 Fa 2023 Syllabus Final v2.pdf Download SRJC CS50B 1384 Fa 2023 Syllabus Final v2.pdf
Instructor: Ethan Wilde (he/him/his), ewilde@santarosa.edu
Course Description
This class offers advanced instruction in client-side Web development technology and design. Students work on project-based assignments using front-end frameworks, such as Bootstrap, and Web content management systems, such as WordPress. An introduction to the JavaScript language is included. Advanced topics in HTML and CSS, including language pre-processors, are presented. User-centered design, user experience research, and search engine optimization practices are explored and practiced with each project.
Recommended Preparation: Eligibility for ENGL 1A or equivalent
Prerequisites: Course Completion of CS 50A
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:
- Use HTML, CSS, and frameworks that meet current industry standards to create a multipage website that includes accessible content, navigation, and user interfaces.
- Create a website powered by a web content management system (CMS) that demonstrates best practices of user experience (UX) research, user-centered and responsive design.
- Understand current accessibility, search engine optimization (SEO), and validation standards and create search-engine-optimized content that adheres to these standards.
At the conclusion of this course, the student should be able to:
- Describe the process of creating style rules using CSS language preprocessors such as syntactically awesome style sheet (Sass).
- Analyze and modify an existing website's HTML and CSS using developer tools in a browser.
- Use a front-end framework such as Bootstrap to create a Web site.
- Use a Web content management system (CMS) such as WordPress to create a Web site.
- Produce validated and accessible HTML and CSS documents that are optimized for search engines.
- Produce a file system structure that matches industry standards.
- Conduct user research (UX) and design development practices to support user-centered site design.
Topics and Scope:
I. Responsive HTML and CSS Review
A. HTML semantic and other elements review
B. CSS language standards and media queries review
C. Responsive Web design (RWD) review
II. Front-End Frameworks
A. Introduction to common front-end framework concepts and practices: styles, classes, and components
B. Creating responsive user interfaces using framework components
C. Framework typography and content support
D. Working with images and rich media via frameworks
E. Navigation interfaces using framework components
F. Interactive interfaces using framework components
G. Web form composition using framework components
H. Decorative content and icon font libraries
III. Web Content Management Systems
A. Introduction to common CMS concepts and practices: content, users, navigation, themes
B. Page-based and recurring content elements
C. Multi-user authentication systems
D. Navigation menus and links
E. Presentation layer access and theme modification
F. Functionality extensions: plug-ins
G. Custom theme creation
H. CMS-based site development, production, and maintenance best practices
I. CMS file system organization
IV. Introduction to JavaScript
A. Language basics, including keywords and syntax
B. JavaScript event model, including browser and user-triggered events
C. Calling pre-existing JavaScript code, including jQuery library and Bootstrap JavaScript library
V. Advanced Styling with CSS Language Preprocessors
A. CSS Language Preprocessors: Sass and Less
B. Capabilities provided by language preprocessors
C. Workflows using language preprocessors
VI. Search Engine Optimization
A. Technical best practices for SEO, including HTML coding
B. Content-related practices for SEO, including marketing
C. Evaluating SEO with analytics
VII. User Experience (UX) Research
A. Remote testing tools and practices
B. Card sorting and taxonomy research
C. User definitions: personas, interviews, stories of use, and journey mapping
D. User-centered design principles and practices
VIII. Design Prototyping
A. Interactive prototype creation and tools
B. Prototype testing practices
C. Iterative prototyping
IX. Professional Practices
A. Project documentation practices
B. Site backup and migration practices for CMS-powered sites
C. Introduction to automated version control tools and practices
D. Review of code validation practices
Assignments:
- Textbook and other assigned reading (25-60 pages per week)
- Web page assignments (7-15). All HTML and CSS code submitted must be validated.
- Midterm static HTML project and final CMS-powered project (2). Each project must include:
A. At least seven pages
B. A navigation system
C. HTML elements
D. CSS styles
E. Rich media elements, including images, audio, and video elements
F. Links using relative and absolute paths
G. Fully validated and accessible code
H. Project documentation - Quizzes and exams (2-4)
- Discussions (5-8). Conducted in-class or online with participation from all students.
- Project presentations and peer feedback (2). Each student must present their project to classmates, either online or in-class, and provide feedback to at least two peers. May be ungraded.
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
Fall 2023 Schedule
Class Delivery | Day and Time | Modality |
---|---|---|
Online Meetings | Weeks start on Tuesdays | Canvas |
Live weekly Web conference |
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 Links to an external site.. 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
Fall 2023 Office Hours
August 14 – December 4, 2023
Day | Time | Location |
---|---|---|
Mondays (online) | 10:40am - 5:00pm | Online: Skype ethanwilde Links to an external site. or Email ewilde@santarosa.edu |
» Reserve a future office hour appointment Links to an external site.
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 (7th)
Karol Król
978-1789532012 (ISBN 13)
Free eBook available via SRJC Libraries
Links to an external site.
Publisher book site available
Links to an external site.
No purchase necessary. This book is available in electronic form without cost via SRJC Libraries.
Designing and Prototyping Interfaces with Figma (1st)
Fabio Staiano
978-1800564183 (ISBN 13)
Free eBook available via SRJC Libraries
Links to an external site.
Links to an external site.No purchase necessary. This book is available in electronic form without cost via SRJC Libraries.
The Field Guide to Human-Centered Design (1st)
IDEO.org
978-0991406319 (ISBN 13)
Free PDF eBook available for download
Download 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:
- Google Chrome Links to an external site. recommended and typically used in instructor demos
- Mozilla Firefox Links to an external site. recommended
- Code editor such as:
- Microsoft Visual Studio Code Links to an external site. (Windows, Mac OS, free license)
- BBEdit Links to an external site. (Mac OS only)
- Sublime Text Links to an external site. (Windows, Mac OS, Linux)
- Brackets Links to an external site. (Windows, Mac OS, free license)
- File Transfer Protocol (FTP) software such as:
- CyberDuck Links to an external site. (Mac OS and Windows, free license)
- Fetch Links to an external site. (Max OS only)
- WinSCP Links to an external site. (Windows only)
- Cloud hosting, version control + development environment services:
- Repl.it Links to an external site. 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 Links to an external site. 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 Links to an external site. subscription (optional)
- Gimp Links to an external site. open source application
- Pixlr Links to an external site. browser-based image editor
- Diagrams.net Links to an external site. browser-based drawing app
- Figma Links to an external site. 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: Monday, August 14, 2023
(first course week begins with class meeting on August 15, 2023)
Day Class Ends: Friday, December 8, 2023
Last Day to Drop with refund: Sunday, August 27, 2023
Last Day to Add with instructor's approval: Sunday, September 3, 2023
Last Day to Drop without a 'W' symbol: Sunday, September 3, 2023
Last Day to Drop with a 'W' symbol: Sunday, November 12, 2023
Last Day to Opt for Pass/No Pass: Friday, December 15, 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 December 15, 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 |
---|---|---|---|
8/15 | Week 1 | Responsive HTML5 and CSS3 + Review |
|
8/22 | Week 2 | Introduction to the Bootstrap Framework: the Responsive Grid |
|
8/29 | Week 3 | Bootstrap Typography + Basic Components |
|
9/5 | Week 4 | Bootstrap Navigation |
|
9/12 | Week 5 | More Bootstrap Components + Decoration |
|
9/19 | Week 6 | Forms + Customizing Bootstrap CSS |
|
9/26 | Week 7 | Introduction to JavaScript |
|
10/3 | Week 8 | Bootstrap + JavaScript |
|
10/10 | Week 9 | Midterm Review |
|
10/17 | Week 10 | WordPress 1: Introduction to CMS |
|
10/24 | Week 11 | WordPress 2: Posts |
|
10/31 | Week 12 | WordPress 3: Pages, Menus + More |
|
11/7 | Week 13 | WordPress 4: Plug-ins, Widgets + Themes |
|
11/14 | Week 14 | WordPress 5: Custom Bootstrap Theme |
|
11/21 | Week 15 | Introduction to Sass: CSS Preprocessor |
|
11/28 | Week 16 | Customizing Bootstrap's Sass Rules |
|
12/5 | Week 17 | Mastering Sass + Bootstrap Final Review |
|
12/11 Mon – 12/15 Fri |
Week 18 | No Regular Class (Exam online, no regular class meeting) |
|
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 |
---|---|---|
Tue Aug 15, 2023 | Calendar Event CS50B Weekly Lecture 1 | 11:30am to 12:30pm |
Mon Aug 21, 2023 | Quiz Week 1: Assignment 1: Syllabus Quiz | due by 11:59pm |
Discussion Topic Weeks 1-2: Check-In Discussion | due by 11:59pm | |
Tue Aug 22, 2023 | Calendar Event 🕑 Remember to make a second post to the graded check-in discussion | 12am |
Calendar Event CS50B Weekly Lecture 2 | 11:30am to 12:30pm | |
Mon Aug 28, 2023 | Quiz Week 2: Assignment 2: Bootstrap + UX Basics | due by 11:59pm |
Tue Aug 29, 2023 | Calendar Event CS50B Weekly Lecture 3 | 11:30am to 12:30pm |
Mon Sep 4, 2023 | Quiz Week 3: Assignment 3: Human-Centered Page | due by 11:59pm |
Discussion Topic Weeks 3-4: Discussion 2: Design Thinking | due by 11:59pm | |
Tue Sep 5, 2023 | Calendar Event 🕑 Remember to make another post to Discussion 2: Design Thinking | 12am |
Calendar Event CS50B Weekly Lecture 4 | 11:30am to 12:30pm | |
Mon Sep 11, 2023 | Quiz Week 4: Assignment 4: Responsive Navigation | due by 11:59pm |
Tue Sep 12, 2023 | Calendar Event CS50B Weekly Lecture 5 | 11:30am to 12:30pm |
Mon Sep 18, 2023 | Quiz Week 5: Assignment 5: Feedback + Decoration | due by 11:59pm |
Discussion Topic Weeks 5-6: Discussion 3: Interaction Design | due by 11:59pm | |
Tue Sep 19, 2023 | Calendar Event 🕑 Remember to make another post to Discussion 3: Interaction Design | 12am |
Calendar Event CS50B Weekly Lecture 6 | 11:30am to 12:30pm | |
Thu Sep 21, 2023 | Calendar Event CS50B Weekly Lecture 7 | 1:15pm to 2:15pm |
Mon Sep 25, 2023 | Quiz Week 6: Assignment 6: Restyling Bootstrap | due by 11:59pm |
Quiz Week 6: Quiz 1 | due by 11:59pm | |
Mon Oct 2, 2023 | Discussion Topic Week 7: Assignment 7.1: Preparing for the Midterm Project | due by 11:59pm |
Quiz Week 7: Assignment 7.2: First Scripts | due by 11:59pm | |
Discussion Topic Weeks 7-8: Discussion 4: Agile Workflow | due by 11:59pm | |
Tue Oct 3, 2023 | Calendar Event 🕑 Remember to make another post to Discussion 4: Agile Workflow | 12am |
Calendar Event CS50B Weekly Lecture 8 | 11:30am to 12:30pm | |
Mon Oct 9, 2023 | Quiz Week 8: Midterm Project: Interactive Catalog | due by 11:59pm |
Tue Oct 10, 2023 | Calendar Event CS50B Weekly Lecture 9 | 11:30am to 12:30pm |
Mon Oct 16, 2023 | Discussion Topic Week 9: Midterm Project Presentations | due by 11:59pm |
Quiz Week 9: Midterm Exam | due by 11:59pm | |
Tue Oct 17, 2023 | Calendar Event CS50B Weekly Lecture 10 | 11:30am to 12:30pm |
Mon Oct 23, 2023 | Quiz Week 10: Assignment 8: Setting Up WordPress | due by 11:59pm |
Discussion Topic Weeks 10-11: Discussion 5: Content Management Systems | due by 11:59pm | |
Tue Oct 24, 2023 | Calendar Event 🕑 Remember to make another post to Discussion 5: Content Management Systems | 12am |
Calendar Event CS50B Weekly Lecture 11 | 11:30am to 12:30pm | |
Mon Oct 30, 2023 | Quiz Week 11: Assignment 9: Creating Content | due by 11:59pm |
Tue Oct 31, 2023 | Calendar Event CS50B Weekly Lecture 12 | 11:30am to 12:30pm |
Mon Nov 6, 2023 | Quiz Week 12: Assignment 10: Site Building | due by 11:59pm |
Discussion Topic Weeks 12-13: Discussion 6: Final Student Project Proposals | due by 11:59pm | |
Tue Nov 7, 2023 | Calendar Event 🕑 Remember to make another post to Discussion 6: Final Student Project Proposals | 12am |
Calendar Event CS50B Weekly Lecture 13 | 11:30am to 12:30pm | |
Mon Nov 13, 2023 | Quiz Week 13: Assignment 11: Extending Your Site | due by 11:59pm |
Tue Nov 14, 2023 | Calendar Event CS50B Weekly Lecture 14 | 11:30am to 12:30pm |
Mon Nov 20, 2023 | Quiz Week 14: Assignment 12: Building a Custom Theme | due by 11:59pm |
Quiz Week 14: Quiz 2 | due by 11:59pm | |
Discussion Topic Weeks 14-15: Discussion 7: Sass + CSS Preprocessors | due by 11:59pm | |
Tue Nov 21, 2023 | Calendar Event 🕑 Remember to make another post to Discussion 7: Sass + CSS Preprocessors | 12am |
Calendar Event CS50B Weekly Lecture 15 | 11:30am to 12:30pm | |
Mon Nov 27, 2023 | Quiz Week 15: Assignment 13: Sass Basics | due by 11:59pm |
Tue Nov 28, 2023 | Calendar Event CS50B Weekly Lecture 16 | 11:30am to 12:30pm |
Mon Dec 4, 2023 | Quiz Week 16: Assignment 14: Remixing Bootstrap with Sass | due by 11:59pm |
Discussion Topic Weeks 16-17: Discussion 8: Final Student In-Progress Projects | due by 11:59pm | |
Tue Dec 5, 2023 | Calendar Event 🕑 Remember to make another post to Discussion 8: Final Student In-Progress Projects | 12am |
Calendar Event CS50B Weekly Lecture 17 | 11:30am to 12:30pm | |
Mon Dec 11, 2023 | Quiz Week 17: Final Project: Student-Defined Site | due by 11:59pm |
Fri Dec 15, 2023 | Discussion Topic Web Development Class-Sourced Resource Wiki | due by 11:59pm |
Discussion Topic Week 18: Discussion: Final Project Presentations | due by 11:59pm | |
Quiz Week 18: Final Exam | due by 11:59pm |