Welcome to Web Development I! This course is a hands-on overview of current web development. Emphasis will be placed on coding and debugging valid HTML and Cascading Style Sheets (CSS), but the course will also include design principles and introductory graphics to encourage attractive, usable design. Mobile development will be introduced. Student will use industry standard development environments to create websites.

Section 6810 - Online

2 hours lecture, 3 hours laboratory, 3 units
Course Management: gcccd.instructure.com/login/canvas
Course Website: cuyahacka.com/211

 

Jodi Reed, MA

Computer & Information Science
Cuyamaca College
jodi.reed (at) gcccd.edu
office: room E-107-B
Zoom (online conferencing): cccconfer.zoom.us/my/jodireed

Please see office hours and schedule or book an appointment for an online or face-to-face meeting.




Topics/Themes

In this 3-unit course, students will use a text editor to code Web sites. The course will cover these main topics:

  1. file management - how to organize and manage your content
  2. production - how to code pages
  3. standards - creating standard-compliant code
  4. design - creating attractive, usable, accessible sites
  1. Introduction & orientation
    1. Course orientation
    2. Internet overview (client, server, upload, download, ftp, HTML, CSS, servers, browsers, hosting, domains, etc.)
    3. HTML overview - using a text editor to create a simple web page that includes formatted text, images, links, lists, and embedded CSS)
  2. Web Development overview – how to code, test & validate
    1. Overview of editors & Integrated Development Environments (IDE’s)
    2. Development process
    3. Basic HTML document structure & syntax
    4. Basic CSS syntax
    5. Testing, debugging & validating
    6. File naming & management, FTP
    7. Getting your own domain and hosting service
  3. HTML structure
    1. Head – title, favicon, metadata
    2. Coding text elements
    3. Structuring content (div, span, & HTML5 semantic elements )
    4. Coding links, lists & images
  4. Design principles
    1. Target audience
    2. Visual design & color
    3. Site organization
    4. Navigation
    5. Layout
    6. Responsive design
  5. Basic CSS for formatting
    1. inline, embedded & external styles
    2. measurements & colors
    3. selectors (elements, ids, classes, relational, pseudo-class & pseudo-elements)
    4. formatting text
    5. CSS validation
  6. Graphics
    1. file types
    2. basic editing (resize, optimization)
    3. CSS formatting (border, float, spacing, alignment)
    4. thumbnails, rollovers, image maps
    5. favicon
    6. accessibility (alt text)
    7. background images
  7. CSS fonts & box model
    1. embedding fonts
    2. spacing
    3. borders
    4. backgrounds
    5. CSS3 shadows, opacity, color & gradients
  8. CSS layout & navigation
    1. floating in multi-column layouts
    2. CSS3 text columns
    3. positioning (absolute, fixed, relative)
    4. CSS navigation with unordered lists
  9. More on CSS, mobile overview
    1. Relative linking
    2. HTML5 figure & figcaption
    3. CSS for print
    4. Mobile web design
    5. Viewport meta tag
    6. Media Queries
    7. Flexible images
  10. Overview of WYSIWYG Development Environments
    1. Adobe Dreamweaver
    2. Microsoft
  11. Tables basics
    1. basic table structure (table, th, tr, td, caption, thead, tbody, tfoot)
    2. styling tables
  12. Form basics
    1. form elements (form, buttons, text fields, text areas, radio buttons, check boxes, drop-down lists, labels, fieldset, legend)
  13. Media and interactivity
    1. Slide show and gallery apps
    2. Embedding YouTube
  14. Overview of Web Programming
    1. JavaScript
    2. jQuery
    3. jQuery UI
    4. PHP/MySQL


Prerequisites

The recommended prerequisite skills for this class are:

  1. Send, receive and manage electronic mail.
  2. Use a web browser to browse, navigate and conduct research.
  3. Use computer operating system to copy, paste, move and rename files.
  4. Open and save word processing files.
  5. Copy and paste text or graphics from one window or application to another.
  6. Organize files using folders.
  7. Follow written instructions.

These skills can be learned in CIS 110 or GD 105.  Proficiency is especially important for students in the online course.



Learning Outcomes

At the end of this course, each student will be able to create a small website (>5 pages) that meets 80% of the technical, organizational, structural, and presentation requirements outlined in a detailed scoring rubric based on the course content and objectives.



Grading and Assignments

You will use Canvas to access learning resources, see assignment instructions, turn in work, check grades, and communicate.  Assignments turned in on time may be resubmitted without penalty, so be sure to check Canvas regularly for grades, scoring rubrics, and comments.  After the due date, you will have a short grace period to turn in Assignments with a 50% penalty.  Quizzes and Discussions are not  available after the due date.  
An incomplete grade is given only when there is an emergency near the end of the semester.

Your total grade will include:

25% 11 Labs Labs are fairly quick ways to reinforce your understanding of a specific concept or skills.
10% 2 Projects Projects integrate skills from multiple labs.
20%

Final Project
4 Milestones

The final project requires you to apply skills from the entire semester.
5% Discussion Participation You are expected to post at least one message to Canvas discussion each week.  These can be questions, comments, responses, interesting Web sites, etc.  Your message will be given 1-5 points based on complexity, appropriateness, and helpfulness.
20% 12 Quizzes Canvas quizzes will cover handouts, textbook, and online video material. 
20% Final Exam & Midterm The exams will be cumulative and will include a practical section.
  Extra Credit extra credit is occasionally offered and is used to bump up a borderline grade (1-2% below higher grade). Check Canvas early in the week for extra credit since it is usually only offered for a few days.

Scale

90-100%, awarded for work that meets all requirements and shows effort, skill, and creativity
B 80-89%
C 65-79%
D 55-64%

Everything is carefully set up in a specific sequence to help you learn, so DON'T SKIP ASSIGNMENTS. Due dates are shown on Canvas.

Here's why it's important to start assignments early in the week:

  • After the due date, you lose up to 50% on labs. Quizzes may not be taken late.
  • If you turn in your work on time, you will get one chance to fix mistakes and resubmit without penalty.
  • Questions and technical glitches are expected, so you should allow time for them.

BACK UP your work!

An incomplete grade is given only when there is an emergency near the end of the semester.

Academic Integrity

When creating Graphics or Web sites, treat Web content as you would treat content from a published article or book. Stealing content is unethical, and students guilty of academic dishonesty will receive a zero for the assignment and may be suspended or expelled. It is acceptable to use brief quotes or clip art. It's not ok to copy entire web pages or style sheets or use someone else's images without permission unless a license permits use.

While it's ok to look at another student's work or get help, it's cheating to copy code. Students who cheat will be given a zero for the assignment. If it happens twice, the student will be referred to the office of the Associate Dean of Student Affairs for further administrative action, such as suspension or expulsion.



Attendance

Though any student not participating in class for 2 consecutive weeks may be dropped from the course by the instructor, it is always the student's responsibility to drop any unattended course.  Failure to drop an unattended course will result in a grade of "F" on your transcript.  Participation in an online class means submitting assignments and taking quizzes on time, contributing to discussion regularly, and checking Canvas & email at least twice a week.



Schedule

Date Topics & Reading Assignment Final Project
Week 1 Intro to Course
Chapter 1: Internet & Web Background
Lab 1, Quiz 1  
Week 2 Chapter 2: HTML Basics Lab 2, Quiz 2  
Week 3 Chapter 3: Web Design Lab 3, Quiz 3 Topic Approval
Week 4 Practice Project 1  
Week 5 Chapter 4: Cascading Style Sheets (CSS) Basics Lab 4, Quiz 4 Begin gathering content
Week 6 Chapter 5: Web Graphics & Text Styling Lab 5, Quiz 5  
Week 7 Chapter 6: More CSS Lab 6, Quiz 6  
Week 8 Practice, Midterm Exam Project 2 Proposal
Week 9 Chapter 7: Page Layout Lab 7, Quiz 7 Flowchart
Week 10 Chapter 8: Page Layout Lab 8, Quiz 8 Wireframe
Week 11 Chapter 9: Tables Lab 9, Quiz 9 Draft 1
Week 12 Final Project Draft 1   Draft 1
Week 13 Chapter 10: Forms Lab 10, Quiz 10 Project Conferences
Week 14 Chapter 11: Multimedia & Interactivity, Final Project Lab 11, Quiz 11
Peer Review
Week 15 Chapter 12: Web Publishing, Final Project    
Week 16 Final Project   Finish project
Finals Week Present Projects, Final Exam   Present Project


Textbook - available at the campus bookstore or online

Basics of Web Design: HTML5 & CSS3, 3rd Edition
Terry Felke-Morris
ISBN-13: 978-0133970746
$85 on Amazon

There are cheaper/electronic versions at Amazon and on the Publisher's site. See Five Best Sites to Buy Cheap Textbooks. This book is available for 3-hour checkout at the Cuyamaca library circulation desk.

You DO NOT need the access code, so it is ok to purchase used books or electronic books without it.

Materials

You cannot complete this class without reliable access to Internet and text editing software. We'll learn more about text editing software in class.

You may use campus computer labs if needed.

You need adequate storage to SAVE and BACK UP your work.  You are responsible for your work in spite of technical problems, so be sure to back up!  Most students use a USB Flash Drive.



Course Communication

Instructors will respond to messages by the next business day. Responses tend to be brief.

Q&A Forum. Please post course related questions in the Q&A discussion forum that can be accessed from the discussions area. Please keep in mind that posts & replies in this forum are visible to the entire class. If you want help with code, attach your file or post your URL .

Messages and E-Mail. If you have a personal question, please contact your instructor using the Inbox tool within Canvas. Instructors receive all Canvas Messages via e-mail. Messages are preferred to email because sometimes student emails are filtered as spam.

Meet with Jodi. Meetings can be in person or online using Zoom. Check Jodi's schedule to find a meeting time. If you want to meet online, be sure to say so in the comments section of the meeting reservation form.

Students with disabilities. Notify your instructor and Disabled Students Programs and Services (DSPS) early in the semester so that reasonable accommodations may be implemented.

 



Important Dates

Please mark your calendar!

January 30 Classes begin
February 10 Last day to add semester-length classes
Last day to drop semester-length classes without a W
Last day to receive a refund for semester-length classes
February 13 Census Day
February 17-20 Holiday (President's Day Weekend)
March 3 Last day to apply for Pass/No Pass for semester length classes
March 10 Last day to apply for Spring degree/certificate
March 27-April 1 Spring Recess
April 28 Last day to drop semester-length classes
May 29 Holiday (Memorial Day)
May 30-June 5 Final Examinations

 

 

 

 

This course adheres to the policies outlined in the Cuyamaca College catalogue. For further information, see Academic Policies stated in the catalog.