SRJC Course Outlines

3/28/2024 12:39:21 PMCS 50B Course Outline as of Fall 2014

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
Combines hand-coded exercises in CSS code with Bootstrap, a front-end development tool. Students will expand their CSS skills as they format text, display images, layout pages, and create navigational systems. Bootstrap will provide the basis for an e-folio that is customized with hand coding.

Prerequisites/Corequisites:
Course Completion of CS 50A OR CS 50.11B


Recommended Preparation:
Eligibility for ENGL 1A or equivalent

Limits on Enrollment:

Schedule of Classes Information
Description: Untitled document
Combines hand-coded exercises in CSS code with Bootstrap, a front-end development tool. Students will expand their CSS skills as they format text, display images, layout pages, and create navigational systems. Bootstrap will provide the basis for an e-folio that is customized with hand coding.
(Grade or P/NP)

Prerequisites:Course Completion of CS 50A OR CS 50.11B
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: Certificate Applicable Course



COURSE CONTENT

Outcomes and Objectives:
At the conclusion of this course, the student should be able to:
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 Bootstrap to create an efolio site.
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 an e-folio created using Bootstrap 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.  Take 1-2  exams.
3.  Deconstruct existing webpages into HTML and CSS components.
4.  Create10-20 original webpages that contain hand-coded HTML and CSS.  
5.  Utilize Bootstrap HTML, CSS and Javascript to create an e-folio.
6.  Modify Bootstrap HTML and CSS to create a customized webpage design.

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
60 - 80%
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
0 - 0%
None


Representative Textbooks and Materials:
Untitled document
Stylin' with CSS: A Designer's Guide (3rd). Wyke-Smith, Charles. New Riders: 2012

Print PDF