CS50A: Web Development 1 Section 4517, Spring 2017 Course Syllabus Instructor: Ethan Wilde, [email protected] Course Description This course is intended for the beginning student who will learn how to build a simple website using HTML and CSS. Topics include: font formatting, navigation, images, layout, semantic elements, tables and forms. Recommended Preparation: Course Completion of CS 5 OR CS 101A OR CS 105A and 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 clientside 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: 1. Use HTML and CSS code that meets current industry standards to create a simple website. 2. Apply appropriate terminology to describe basic web development concepts. Upon completion of the course, students will be able to: 1. Create a simple website. 2. Develop webpages that utilize the HTML elements that address the following functions: basics document structure, head elements, text markup, site navigation, images, div and span structure, semantic elements, tables, forms. 3. Develop webpages that utilize CSS to control the appearance of the site. Students will use these CSS property groups: text and font, color and background, the box model, position and display, lists, tables. 4. Develop webpages that utilize the CSS concepts of the cascade and inheritance of browser, external, embedded and inline CSS. 5. Students will correctly use the CSS elements of selectors, declarations, properties, values. Classes and id's will be stressed. 6. Summarize the following website development concepts: element, attribute, element nesting, asset path, style, rule, selector, declaration, property, and value. Topics and Scope: 1. Basic Document Structure 2. Navigation 3. Structural Elements 4. Images 5. Cascading Style Sheets Usage 6. CSS Font / Text Properties 7. HTML Editors - download, use and review 8. CSS (Cascading Style Sheets) Box Properties 9. Webpage layout using CSS 10. Semantic Elements 11. Tables 12. Forms 13. Commercial Website Assignments: 1. Regular textbook reading 2. Fourteen (14) assignments. All webpages must be uploaded to the classprovided 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 Class Meetings Spring 2017 Schedule Tuesdays 5:00pm - 6:00pm Lecture Maggini 2806 Tuesdays 6:00pm - 8:00pm Lab Maggini 2928 All class materials for each module will be released online in Canvas on Tuesdays throughout the entire semester. Instructor Contact Ethan Wilde Email: [email protected] Phone: 707-527-4855 Spring 2017 Office Hours January 17 – May 19, 2017 Tuesdays 3:45pm - 4:45pm Maggini 2937 Wednesdays (Online) 8:00am - 10:00am Online: Email [email protected] or Skype ethanwilde Wednesdays 10:30am - 11:50am Maggini 2937 Wednesdays (Online) 12:00pm - 1:00pm Online: Email [email protected] or Skype ethanwilde I respond to emails within 48 hours. 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. Internet Explorer is not recommended. Textbook Head First HTML and CSS (2nd) Elizabeth Robson, Eric Freeman 0596159900 (ISBN 10) 978-0596159900 (ISBN 13) SRJC Libraries call number: QA76.76.H94 R636 2012 Consider buying a used copy. You can locate and order textbooks online via the SRJC Bookstore. Equipment A personal computer, either at home, work or on the Santa Rosa or Petaluma campuses. Required Software + Services Internet access Web browser o Google Chrome strongly recommended Text editor, for Week 1 only, such as: o TextWrangler (Mac OS only) o Brackets (Windows, Mac OS) o Sublime Text (Windows, Mac OS, Linux) Cloud hosting + development service o Cloud9 IDE (Integrated Development Environment) required for all students, starting Week 2, for hosting class assignments. This service provides a complete set of browser-based tools in place of the optional software listed below. Complete the hosting survey to get your free account. Graphics software such as: o Adobe Photoshop, part of a Creative Cloud subscription o Gimp open source application o Pixlr browser-based image editor PDF display software such as: o Adobe Reader Optional Software The additional software listed below is often used for Web development. Our cloud-based IDE – Cloud9 – will provide a text editor and file transfer support without any additional software needed. Additional Web browsers including: o Mozilla Firefox o Apple Safari (Mac OS only) o Microsoft Edge (Windows 10 only) File Transfer Protocol (FTP) software such as: o FireFTP add-on for Firefox browser (free) o Fetch (Max OS only) o WinSCP (Windows only) Important Dates Day Class Begins: Tuesday, January 17, 2017 Day Class Ends: Tuesday, May 16, 2017 Last Day to Add without instructor's approval: Sunday, January 22, 2017 Last Day to Drop with refund: Sunday, January 29, 2017 Last Day to Add with instructor's approval: Sunday, February 5, 2017 Last Day to Drop without a 'W' symbol: Sunday, February 5, 2017 Last Day to Opt for Pass/No Pass: Sunday, February 26, 2017 Last Day to Drop with a 'W' symbol: Sunday, April 23, 2017 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 face-to-face courses, students who fail to attend the first and second class meetings will 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 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 February 26, 2017. 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 and Q&A Forum The instructor will post announcements on the “Instructor Announcements” page in Canvas throughout the semester. Canvas notifies students according to their preferred Notification Preferences. Late Policy All assignments are due at 11:59pm PST 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 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: 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 62% 620 points Projects + Assignments 12% 120 points Discussions + Attendance 6% 60 points 10% 100 points Midterm 10% 100 points Final Exam 100% 1000 points Standards of Conduct Quizzes 1000 points possible 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. Students are encouraged to share information and ideas, but not their work. See these links on Plagiarism: SRJC Writing Center Lessons on avoiding plagiarism SRJC's statement on Academic Integrity Special Needs Every effort is made to conform to accessibility standards for all instructorcreated 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 Week 1 Topics Introduction to Web Development Week 2 HTML Links + Paths Week 3 HTML Elements Week 4 HTML5 + HTTP Standards Week 5 Media: Images, Video + Audio Week 6 Introduction to CSS + Selectors Week 7 Typography + Web Fonts Week 8 Web Color Week 9 Midterm Review Week 10 CSS Box Model Week 11 HTML5 Semantic Structure Week 12 CSS Layout Assignments Hosting Signup Survey Assignment 1: Syllabus Quiz Discussion 1: Check-in Discussion Reading: Head First, Ch. 1 Assignment 2: First Pages Reading: Head First, Ch. 2 Assignment 3: An Animal Page Discussion 2: History of the Web Reading: Head First, Ch. 3 Assignment 4: Linking + Embedding Quiz 1 Reading: Head First, Chs. 4 + 6 Assignment 5: Adding Media Discussion 3: Web Accessibility Reading: Head First, Ch. 5 Assignment 6: Start Styling Reading: Head First, Ch. 7 Assignment 7: Fonts for Animals Discussion 4: Design Theory Reading: Head First, Ch. 8, pp. 311-339 Midterm Project: About An Animal Reading: Head First, Ch. 8, pp. 340-359 Midterm Exam Discussion: Midterm Project Presentations Assignment 8: Decorated Boxes Discussion 5: CSS Box Model Reading: Head First, Ch. 9 Assignment 9: Organizing Elements Reading: Head First, Chs. 10 + 12 Assignment 10: Composing Layouts Week 13 Responsive CSS + Media Queries Week 14 HTML Tables Week 15 HTML Forms Week 16 Interactive CSS + Pseudo Classes Week 17 Animation + CSS Transitions Final Review No Regular Class Week 18 Discussion 6: Responsive Design Reading: Head First, Ch. 11 Assignment 11: Responsive Pages Quiz 2 Reading: Online article Assignment 12: Organizing Data Discussion 7: Interaction Design Reading: Head First, Ch. 13 Assignment 13: Interactive Forms Reading: Head First, Ch. 14 Assignment 14: Interactive Menus Discussion 8: Future Web Reading: Head First, Appendix + online Final Project: Responsive Animal Catalog Reading: Head First, Appendix + online Final Exam Santa Rosa Junior College offers extensive health services to students. Visit Student Health Services online at shs.santarosa.edu or call them at (707) 5274445. Course Outline Note to students: the assignments listed above will become available as modules are released in sequence each week. To view course content, go to Modules.