12/3/2024 9:10:59 AM	CS 50B Course Outline as of Fall 2017	Changed Course
CATALOG INFORMATION
Discipline and Nbr:  CS 50B	Title:  WEB DEVELOPMENT 2
Full Title:  Web Development 2
Last Reviewed:10/24/2022

Units		Course Hours per Week			Nbr of Weeks	Course Hours Total
Maximum	3.00	Lecture Scheduled	3.00		17.5 max.	Lecture Scheduled	52.50
Minimum	3.00	Lab Scheduled	0		4 min.	Lab Scheduled	0
		Contact DHR	0			Contact DHR	0
		Contact Total	3.00			Contact Total	52.50
		Non-contact DHR	0			Non-contact DHR Total	0

Total Out of Class Hours:  105.00

Total Student Learning Hours: 157.50

Title 5 Category:  AA Degree Applicable
Grading:  Grade or P/NP
Repeatability:  00 - Two Repeats if Grade was D, F, NC, or NP
Also Listed As: 
Formerly:  CS 50.11C

Catalog Description:

This class offers advanced instruction instruction through project-based assignments in client-side Web development technology and design. Students use HTML5 and CSS3, as well as basic JavaScript coding with jQuery to create interactive user interfaces. Topics include working with frameworks such as Bootstrap; advanced CSS coding using language pre-processors; and an introduction to the WordPress Web Content Management System.

Prerequisites/Corequisites:
Course Completion of CS 50A

Recommended Preparation:
Eligibility for ENGL 1A or equivalent

Limits on Enrollment:

Schedule of Classes Information
Description:

This class offers advanced instruction instruction through project-based assignments in client-side Web development technology and design. Students use HTML5 and CSS3, as well as basic JavaScript coding with jQuery to create interactive user interfaces. Topics include working with frameworks such as Bootstrap; advanced CSS coding using language pre-processors; and an introduction to the WordPress Web Content Management System.

(Grade or P/NP)
Prerequisites:Course Completion of CS 50A
Recommended:Eligibility for ENGL 1A or equivalent
Limits on Enrollment:
Transfer Credit:CSU;
Repeatability:00 - Two Repeats if Grade was D, F, NC, or NP

ARTICULATION, MAJOR, and CERTIFICATION INFORMATION

Associate Degree:		Effective:		Inactive:
Area:
CSU GE:	Transfer Area			Effective:	Inactive:
IGETC:	Transfer Area			Effective:	Inactive:
CSU Transfer:	Transferable	Effective:	Spring 2006	Inactive:
UC Transfer:		Effective:		Inactive:
C-ID:

Certificate/Major Applicable: Both Certificate and Major Applicable

COURSE CONTENT

Student Learning Outcomes:
At the conclusion of this course, the student should be able to:

1.  Use HTML, CSS, and frameworks that meets current industry standards to layout a site, create

    navigation, and control color and text.

2.  Create a Content Management System (CMS) powered website that complies with current

    user-centered, user experience (UX) and responsive design best practices.

3.  Understand current accessibility and validation standards and create content that adheres to

    these standards.

Objectives:

Upon completion of this 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 a frameworks standard such as Bootstrap to create a website.

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 content using current industry standard frameworks, HTML, CSS and JavaScript with

    hand coded CSS modifications.

9. Demonstrate appropriate use of:

    a. Text/font properties

    b. Image properties - thumbnail galleries, carousels, hover effects, multiple background

         images

    c. Layout using CSS

    d. Navigation - drop down, pop out, tabs, buttons, navigation bars

    e. CSS transitions

Topics and Scope

I. Overview

    A. How Hyper Text Mark-up Language (HTML), Cascading Style Sheets (CSS), and

         JavaScript work together

    B. Analysis of existing web sites using Browser Inspector

     C. How to modify CSS in the browser

    D. File / folder structure

    E. Bootstrap setup

    F. Current industry standards

    G. CSS styles and units

II. CSS selectors

    A. Advanced selectors

    B. Pseudo classes

    C. Pseudo elements

    D. Attribute selectors

    E. Document structure

III. Structure and the cascade

    A. Specificity

    B. Inheritance

    C. The cascade

IV. Bootstrap efolio

    A. Setup

    B. Add page content

    C. Modify existing CSS

    D. Upload to server

V. Fonts / Text

    A. Google fonts

    B. Text shadow

    C. Vertical alignment

    D. Base 10 font size

    E. Modify CSS for e-folio implementing lesson concepts

VI. Position

     A. Thumbnail gallery

    B. Float / clear

    C. Position property

    D. Modify CSS for e-folio implementing lesson concepts

VII. Backgrounds

    A. Background basics

    B. Border radius

    C. Box shadow

    D. Gradients

    E. Multiple backgrounds

    F. Background hover effects

    G. Modify CSS for e-folio implementing lesson concepts   

VIII. Images

    A. Icons

    B. Image treatment

    C. Thumbnail gallery

    D. Carousel

    E. Image hover effects

    F. Modify CSS for e-folio implementing lesson concepts

IX. Layout

    A. Fixed

    B. Fluid

    C. 2/3 column

    D. Column backgrounds

    E. Centering layouts

X. Bootstrap layout

    A. Responsive design

    B. Grid basics

    C. Change column distribution with screen size

    D. Hidden and visible columns

    E. Customize bootstrap

    F. Modify CSS for e-folio implementing lesson concepts

XI. Navigation

    A. Styling list to for a nav bar

    B. Images as navigation

    C. Drop down

    D. Pop out

XII. Bootstrap Navigation

    A. Tabs

    B. Buttons

    C. Pills

    D. Nav bars

    E. Drop down

    F. Breadcrumbs

    G. Pagination

    H. Next / Previous

    I. Modify CSS for e-folio implementing lesson concepts

Assignments:

1. Read approximately 30 pages per week from the textbook

2. Exams (1 - 2)

3. Create ten to twenty original webpages that contain hand-coded HTML and CSS

4. Utilize Frameworks, HTML, CSS and JavaScript to create an e-folio

5. Modify Frameworks, HTML and CSS to create a customized webpage design

6. Create a Content Management System (CMS) website that complies with current industry

    standards

Methods of Evaluation/Basis of Grade.

Writing: Assessment tools that demonstrate writing skill and/or require students to select, organize and explain ideas in writing.		Writing 0 - 0%
None
This is a degree applicable course but assessment tools based on writing are not included because problem solving assessments are more appropriate for this course.
Problem solving: Assessment tools, other than exams, that demonstrate competence in computational or non-computational problem solving skills.		Problem Solving 50 - 70%
Webpages and e-folio projects
Skill Demonstrations: All skill-based and physical demonstrations used for assessment purposes including skill performance exams.		Skill Demonstrations 0 - 0%
None
Exams: All forms of formal testing, other than skill performance exams.		Exams 20 - 40%
Exams
Other: Includes any assessment tools that do not logically fit into the above categories.		Other Category 10 - 20%
Participation, attendance

Representative Textbooks and Materials:

Beginning Responsive Web Design with HTML5 and CSS3. Fielding, Jonathan. Apress. 2014

Print PDF