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.
In this 3-unit course, students will use a text editor to code Web sites. The course will cover these main topics:
- file management - how to organize and manage your content
- production - how to code pages
- standards - creating standard-compliant code
- design - creating attractive, usable, accessible sites
- Introduction & orientation
- Course orientation
- Internet overview (client, server, upload, download, ftp, HTML, CSS, servers, browsers, hosting, domains, etc.)
- HTML overview - using a text editor to create a simple web page that includes formatted text, images, links, lists, and embedded CSS)
- Web Development overview – how to code, test & validate
- Overview of editors & Integrated Development Environments (IDE’s)
- Development process
- Basic HTML document structure & syntax
- Basic CSS syntax
- Testing, debugging & validating
- File naming & management, FTP
- Getting your own domain and hosting service
- HTML structure
- Head – title, favicon, metadata
- Coding text elements
- Structuring content (div, span, & HTML5 semantic elements )
- Coding links, lists & images
- Design principles
- Target audience
- Visual design & color
- Site organization
- Responsive design
- Basic CSS for formatting
- inline, embedded & external styles
- measurements & colors
- selectors (elements, ids, classes, relational, pseudo-class & pseudo-elements)
- formatting text
- CSS validation
- file types
- basic editing (resize, optimization)
- CSS formatting (border, float, spacing, alignment)
- thumbnails, rollovers, image maps
- accessibility (alt text)
- background images
- CSS fonts & box model
- embedding fonts
- CSS3 shadows, opacity, color & gradients
- CSS layout & navigation
- floating in multi-column layouts
- CSS3 text columns
- positioning (absolute, fixed, relative)
- CSS navigation with unordered lists
- More on CSS, mobile overview
- Relative linking
- HTML5 figure & figcaption
- CSS for print
- Mobile web design
- Viewport meta tag
- Media Queries
- Flexible images
- Overview of WYSIWYG Development Environments
- Adobe Dreamweaver
- Tables basics
- basic table structure (table, th, tr, td, caption, thead, tbody, tfoot)
- styling tables
- Form basics
- form elements (form, buttons, text fields, text areas, radio buttons, check boxes, drop-down lists, labels, fieldset, legend)
- Media and interactivity
- Slide show and gallery apps
- Embedding YouTube
- Overview of Web Programming
- jQuery UI
The recommended prerequisite skills for this class are:
- Send, receive and manage electronic mail.
- Use a web browser to browse, navigate and conduct research.
- Use computer operating system to copy, paste, move and rename files.
- Open and save word processing files.
- Copy and paste text or graphics from one window or application to another.
- Organize files using folders.
- Follow written instructions.
These skills can be learned in CIS 110 or GD 105. Proficiency is especially important for students in the online course.
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.|
|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.|
|A||90-100%, awarded for work that meets all requirements and shows effort, skill, and creativity|
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.
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.
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.
|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
|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
$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.
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.
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.
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.