SRJC Course Outlines

10/4/2024 9:05:17 PMCS 50B Course Outline as of Fall 2017

Changed Course
CATALOG INFORMATION

Discipline and Nbr:  CS 50BTitle:  WEB DEVELOPMENT 2  
Full Title:  Web Development 2
Last Reviewed:10/24/2022

UnitsCourse Hours per Week Nbr of WeeksCourse Hours Total
Maximum3.00Lecture Scheduled3.0017.5 max.Lecture Scheduled52.50
Minimum3.00Lab Scheduled04 min.Lab Scheduled0
 Contact DHR0 Contact DHR0
 Contact Total3.00 Contact Total52.50
 
 Non-contact DHR0 Non-contact DHR Total0

 Total Out of Class Hours:  105.00Total 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:
Untitled document
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: Untitled document
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:TransferableEffective:Spring 2006Inactive:
 
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:
Untitled document
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: Untitled document
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
Untitled document
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:
Untitled document
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:
Untitled document
Beginning Responsive Web Design with HTML5 and CSS3. Fielding, Jonathan. Apress. 2014

Print PDF