Course Syllabus
CS50A: Web Development 1
Section 5397, Spring 2024 Course Syllabus
This syllabus is available in the following formats:
- Word document: SRJC CS50A 5397 Spr 2024 Syllabus Final v3.docx
- PDF file: SRJC CS50A 5397 Spr 2024 Syllabus Final v3.pdf
Instructor: Ethan Wilde (he/him/his), ewilde@santarosa.edu
Course Description
This course provides an introduction to client-side Web development technology and design. Students learn the basics of current versions of Hypertext Markup Languages (HTML) and Cascading Style Sheets (CSS) which are used to create webpages. Lessons incorporate current industry practices related to user-centered design, including visual and interaction design.
Recommended Preparation: Course Eligibility for ENGL 1A
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 work with current versions of both core client-side languages of the Web, HTML5 and CSS3, to become proficient in the creation of hand-coded static Web sites.
Student Learning Outcomes
Students will be able to:
- Use HTML and CSS code that meets current industry standards to create a simple website.
- Apply appropriate terminology to describe basic web development concepts.
At the conclusion of this course, the student should be able to:
- Create a simple multi-page Web site.
- Develop Web pages that utilize HTML elements to address the following: basic document structure, filesystem concepts, links and navigation, structural, text content, semantic, table, form, rich media, and interactive HTML.
- Develop Web pages that utilize CSS to control the appearance of the site, including: font and text, pseudo-classes, box model, backgrounds, element positioning, responsive layout, and media queries.
- Develop Web pages that utilize CSS selector and declaration syntax and concepts of the cascade, specificity, and inheritance with user agent, external, embedded and inline style rules.
- Summarize the following Web site development concepts and knowledge: Hypertext Transfer Protocol (HTTP), rich media preparation, responsive design, interaction design, visual design, accessibility, hosting, domain names, and professional practices.
Topics and Scope:
I. Hypertext Markup Language Version 5 (HTML5)
A. Document Type Declarations and language versions
B. Elements, opening and closing tags, self-closing tags, attributes, nesting, and syntax
C. Filesystem concepts: Web root, file paths, absolute, relative, and in-page URLs/URIs
D. Links and navigation, hyperlink formats, including mailto: pseudo-protocol
E. HTML structural elements: Main root, document metadata, sectioning root, content sectioning
F. HTML text content elements, including lists
G. HTML semantic elements, including inline text semantics
H. HTML embedded content elements
I. HTML scripting elements
J. HTML demarcating edit elements
K. HTML table content elements, including caption, rows, headers, cells, nesting and spanning
L. HTML form elements, including server-side data handling, POST/GET methods, required and data validations
M. HTML interactive elements
N. HTML Web component elements
O. HTML character sets, including Unicode, and character entities
II. Cascading Style Sheets Version 3 (CSS3)
A. CSS language standards and versions
B. Style rule composition and syntax: selectors, declarations, property name and value pairs
C. Stylesheet options: user agent, external, internal, and inline styles
D. Cascading and specificity
E. Style property inheritance
F. Selector types, including ID- and class-based selectors, descendent selectors, and pseudo-classes
G. Declaration properties for font and text characteristics
H. Declaration properties and underlying concepts for box model, including backgrounds
I. Declaration properties, concepts, and approaches for page layout, including flexbox and CSS grid
J. Declaration properties, concepts, and approaches for element positioning, including floating, z-index, relative and absolute position
K. Declaration properties, concepts, and approaches for interactive, behavioral, transformational, and time-based animation of elements
L. Media types and media queries, including print media
III. HTTP
A. Client-server HTTP communication model, including roles of Web servers and browsers
B. HTTP request and response formats
C. Common HTTP status codes
IV. Rich Media: Images, Audio, Video
A. HTML image and multimedia elements and attributes
B. Image sources, including intellectual property (IP) and copyright considerations
C. Web-ready image formats, including JPEG, PNG, GIF, SVG, and WebP
D. Media editing software tools for preparing web-ready rich media, including image, audio, and video
V. Visual Design
A. Color theory fundamentals, history, principles, and practices
B. Typography fundamentals, history, principles, and practices
C. Layout fundamentals, history, principles, and practices
D. User interface design patterns, including references
E. Design process, including wireframing and comps
VI. Interaction Design
A. User experience (UX) research fundamentals, principles, and practices
B. User-centered design (UCD) fundamentals, principles, and practices
VII. Responsive Web
A. Responsive Web design (RWD) fundamentals, history, principles, and practices
B. CSS media queries applied for responsive design solutions
C. Mobile-first design approach
VIII. Accessibility Principles
A. WCAG and US Section 508 accessibility requirements, and standards
B. Accessible Rich Internet Applications (ARIA) standard and HTML attributes
C. Accessibility testing tools and approaches
D. Accessibility compliance documentation, including VPAT
IX. Professional Practices
A. Code validation practices and tools
B. Code editors and integrated development environments (IDEs)
C. Filesystem management approaches for organizing and backing up static site files
D. Managing files, including server uploads
E. Separation of concerns, including presentation vs. structure
F. Continuous learning approach, including professional publications and online learning and reference resources
X. Hosting and Domain Names
A. Common approaches to Web site hosting solutions
B. Commercial hosting providers
C. Domain name registration and name resolution services (DNS)
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 and final projects (2). Each project must include:
A. At least four 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 - 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=CS50A
Class Meetings
Spring 2024 Schedule
| Class Delivery | Day and Time | Modality |
|---|---|---|
| Online | Modules start on Tuesdays | Canvas |
|
Live Web conference (optional) |
Tuesdays, 10:30am - 12:00pm | Zoom |
All class materials for each module will be released online in Canvas on Tuesdays throughout the entire semester. A live online meeting will be held on Tuesdays, 10:30am - 12:00pm. 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, 10:30am - 12:00pm: https://santarosa-edu.zoom.us/j/640848204. 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 2024 Office Hours
January 22 – May 13, 2024
| Day | Time | Location |
|---|---|---|
| Mondays (online) | 1:20pm - 8:00pm | Online: Skype ethanwilde or Email ewilde@santarosa.edu |
» 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 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. Other browsers are not recommended.
Textbook
Head First HTML and CSS (2nd)
Elizabeth Robson, Eric Freeman
0596159900 (ISBN 10)
978-0596159900 (ISBN 13)
Free eBook available via SRJC Libraries
Publisher site available
This book is available in electronic form without cost via SRJC Libraries.
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 recommended and typically used in instructor demos
- Mozilla Firefox recommended
- Cloud hosting, version control + development environment services:
- Repl.it IDE (Integrated Development Environment) required for all students, starting Module 2, for hosting class assignments. Repl.it will provide a text editor and file transfer support without any additional software needed. Complete the hosting survey to get your free account.
- 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)
- Code editor such as:
- Microsoft Visual Studio Code (Windows, Mac OS, free license)
- Sublime Text (Windows, Mac OS, Linux)
- Brackets (Windows, Mac OS, free license)
- BBEdit (Mac OS only)
- GUI-based Git repository manager:
- File Transfer Protocol (FTP) software such as:
Important Dates
Day Class Begins: Tuesday, January 16, 2024
(first course week begins with class meeting on January 16, 2024)
Day Class Ends: Friday, May 24, 2024
Last Day to Drop with refund: Sunday, January 28, 2024
Last Day to Add with instructor's approval: Sunday, February 4, 2024
Last Day to Drop without a 'W' symbol: Sunday, February 4, 2024
Last Day to Drop with a 'W' symbol: Sunday, April 21, 2024
Last Day to Opt for Pass/No Pass: Friday, May 17, 2024
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
For online courses, students who fail to participate in the first and second class modules may be dropped by the instructor.
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 17, 2024. 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. Be sure to check for recent announcements during every module.
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 in the accelerated summer term, along with an additional 4.5 hours in the Final Exam period. 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 module it is late. Submissions more than two modules late are not accepted without prior written arrangement.
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, 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.
Use of generative AI tools is not allowed in this course. Please do not use any generative AI tool to assist you in any homework assignment in this course. The use of content created by generative AI tools in your homework is considered a form of plagiarism.
What's a generative AI tool? Any software that creates code or content based on large language models. These include, but are not limited to:
- Microsoft CoPilot
- Google Bard/Gemini
- OpenAI ChatGPT
- GitHub CoPilot
- Repl.it Ghostwriter
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/16 | Module 1 | Introduction to Web Development |
|
| 1/23 | Module 2 | HTML Links + Paths |
|
| 1/30 | Module 3 | HTML Elements |
|
| 2/6 | Module 4 | HTML5 + HTTP Standards |
|
| 2/13 | Module 5 | Media: Images, Video + Audio |
|
| 2/20 | Module 6 | Introduction to CSS + Selectors |
|
| 2/27 | Module 7 | Typography + Web Fonts |
|
| 3/5 | Module 8 | Web Color |
|
| 3/12 | Module 9 | Midterm Review |
|
| 3/19 | No Class | Spring Break | |
| 3/26 | Module 10 | CSS Box Model |
|
| 4/2 | Module 11 | HTML5 Semantic Structure |
|
| 4/9 | Module 12 | CSS Layout |
|
| 4/16 | Module 13 | Responsive CSS + Media Queries |
|
| 4/23 | Module 14 | HTML Tables |
|
| 4/30 | Module 15 | HTML Forms |
|
| 5/7 | Module 16 | Interactive CSS + Pseudo Classes |
|
| 5/14 | Module 17 | Animation + CSS Transitions |
|
| 5/20 Mon – 5/24 Fri | Module 18 | No Regular Class (Exam online, no regular class meeting) |
|
Note to students: the assignments listed above will become available as modules are released in sequence each module. 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.
© 2024 Ethan Wilde.
Course Summary:
| Date | Details | Due |
|---|---|---|