|12/9/2023 6:04:38 PM||
||New Course (First Version)
|Discipline and Nbr:
WEB DESIGN 1||
Web Design 1
|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||6 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
Title 5 Category:
AA Degree Applicable
Grade or P/NP
00 - Two Repeats if Grade was D, F, NC, or NP
Also Listed As:
| ||Total Out of Class Hours: 105.00||Total Student Learning Hours: 157.50||
Course Completion of CS 50B
Eligibility for ENGL 1A or equivalent and Course Completion of CS 70.11A and Concurrent Enrollment in GD 72
Limits on Enrollment:
Schedule of Classes Information
(Grade or P/NP)
Prerequisites:Course Completion of CS 50B
Recommended:Eligibility for ENGL 1A or equivalent and Course Completion of CS 70.11A and Concurrent Enrollment in GD 72
Limits on Enrollment:
Repeatability:00 - Two Repeats if Grade was D, F, NC, or NP
ARTICULATION, MAJOR, and CERTIFICATION INFORMATION
Certificate Applicable Course
Outcomes and Objectives:
At the conclusion of this course, the student should be able to:
|CSU GE:||Transfer Area|| ||Effective:||Inactive:
|IGETC:||Transfer Area|| ||Effective:||Inactive:
|CSU Transfer:||Transferable||Effective:||Fall 2014||Inactive:||Fall 2017
Upon completion of the course, the student will be able to:
1. Download and utilize the files required to work within the Bootstrap and WordPress environment.
2. Develop a file / folder structure on your local computer and on web servers that reflects the Bootstap and Wordpress environment.
3. Design engaging websites by incorporating user friendly navigation, responsive design, interactive elements, a consistent visual layout, and effective branding.
4. Analyze Bootstrap and WordPress CSS code and modify it to meet client's design needs.
5. Compare and contrast the strengths of the JPEG (Joint Photographic Experts Group), GIF (Graphic Interchange Format), and PNG (Portable Network Graphics) formats.
6. Choose the appropriate graphic file type for specific applications.
7. Work with a color palette and images provided by a "mock" client to produce a website.
8. Understand the web design cycle.
9. Create logos and modify the design as the logo size decreases.
10. Work within a design team to offer and receive feedback regarding your design, software, and technical decisions and challenges.
11. Make use of web resources for current information on web design and web graphics.
Topics and Scope
1. Software requirements for web design
a. Web browsers
b. Chrome Property Inspector
c. Graphics programs
d. FTP (File Transfer Protocol) software - "Fugu" or "SSH Client" (Secure SHell)
e. HTML editor (Text Wrangler, Notepad ++, DreamWeaver)
2. Creating a Bootstrap development environment
a. Download files
b. Class file / folder structure
c. Upload files to student server
3. Graphics formats and compression
a. Images as JPEG vs PNG vs GIF
b. Clip art as JPEG vs PNG vs GIF
4. Bootstrap / hand coded - image treatment
a. Image / icon samplers
b. Carousels / slideshows
c. Thumbnail galleries
d. Hover effects
e. Product display
f. Image treatment samples
5. Bootstrap navigation
a. Nav bar, buttons, tabs and pills
b. Breadcrumbs / Pagination
c. Using image and color transparency in navigation
d. Navigation samples
6. Visual mock-up to webpage
a. Analyze structure of visual mock-up
b. Bootstrap classes / hand coding to create a shell
c. Adding carousel, images, and navigation
d. Modifying design to reflect student's design aesthetic
7. Client needs analysis
a. Client "favorite" sites
b. Client assets
c. Client content
8. Building a wire-frame
a. Exploring wire-frame software
b. Developing wireframes
c. Saving and exporting wire-frames
d. Working in a design team
e. Accepting and offering feedback on wireframes
9. Converting the wire-frame to a visual mock up
a. Graphics software review and overview
b. Developing a color scheme
c. Using images
d. Layout principles
g. Site consistency
h. Accepting and offering feedback on visual mock up
10. Converting a visual mock up to a functional website
a. Using bootstrap and hand coding to create the site shell
b. Adding color
c. Using images
d. Develop navigation
e. Incorporating interactive elements (carousel, galleries etc)
f. Site consistency
g. Accepting and offering feedback on finished web site.
11. Creating a WordPress development environment
a. Log in / using WordPress Dashboard / FTP to WordPress
b. Managing themes
c. Dowloading and installing a new theme
12. Developing a WordPress Site
a. Making pages
b. Controlling navigation
c. Adding images and video
d. Displaying a Microsoft Word file
e. Adding images and video
f. Incorporating a widget or plug-in
13. Creating a child theme
a. Upload unique theme
b. Create child theme CSS and snapshot
c. Upload files to WordPress
d. Install child theme
e. Modify theme CSS
14. Developing Logos
a. Logo elements
b. Principles of logo design
c. Logo techniques
d. Modifying and simplifying a logo for display at a small size
Read 30-50 pages per week.
Website design assignments:
1. Upload bootstrap files / folders onto the Web server.
2. Save a photo and clip art file at various levels of the PNG and JPEG format.
3. Create a transparent PNG.
4. Create image samplers that display carousels, thumbnail galleries, image hover effects, product displays, and other interactive image treatments selected by students. Use bootstrap classes and hand coding to produce samples.
5. Create navigation samplers that utilize bootstrap navigation classes, incorporate transparency and multiple backgrounds, and are modeled after web navigation selected by students. Use bootstrap classes and hand coding to produce samples.
7. Given client "favorite" sites, develop wire-frames that reflect those sites.
8. Translate a wire-frame into a visual mock-up.
9. Using bootstrap and hand coding build a website from the visual mock-up.
10. Build a WordPress site.
11. Build a WordPress Child Theme.
12. Create logos.
13. Evaluate classmate's work regarding color, line, layout, navigation and graphics.
Methods of Evaluation/Basis of Grade.
Representative Textbooks and Materials:
|Writing: Assessment tools that demonstrate writing skill and/or require students to select, organize and explain ideas in writing.||Writing
0 - 0%
|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
55 - 70%
|Website design assignments||
|Skill Demonstrations: All skill-based and physical demonstrations used for assessment purposes including skill performance exams.||Skill Demonstrations
0 - 0%
|Exams: All forms of formal testing, other than skill performance exams.||Exams
20 - 35%
|Other: Includes any assessment tools that do not logically fit into the above categories.||Other Category
0 - 10%
|Attendance and participation||
The Principles of Beautiful Web Design (2nd). Beaird, Jason. SiteFront: 2010
Above the Fold: Understanding the Principles of Successful Web Site Design. Miller, Brian. HOW: 2011