MAT-125 Onsite Syllabus

MAT-125 Onsite, Web Design Fundamentals

Syllabus Contents

To jump to a section of this syllabus, select from the links below. Note: These links are only for convenience; students are required to read the entire syllabus.

The Basics
Meeting Times + Places  |  PrerequisitesAdministrative Deadlines and Drops |  Pass/No-Pass Grading Status HolidaysCourse ObjectivesStudent Learning OutcomesTechnical HelpStudents with Disabilities

Course Requirements
Required Textbooks and SoftwareCompletion of WorkCourse TimelineDiscussion BoardsCritiques

Grading and Assignments
Grading PolicyClass Participation Grading Breakdown + Assignments | Adding/Dropping Classes Instructions

The Basics

Meeting Times and Place

  • Course section #1568
  • Spring 2018 semester : 1/22/18 – 5/24/18
  • Class Meeting Place: OC4610
  • Class Sessions: Mondays, 5:30pm – 8:20pm + one hour asynchronously online weekly 
  • Office Hours: Room OC4621 (4600 building) -> Mondays 1:00pm – 2:00pm, Tuesdays 4pm – 5pm, and by appointment
  • Final Exam/Critique: 5/216pm-7:50pm (see final exam schedule for details)


Leigh Cotnoir,



IMPORTANT Administrative Deadlines!

The following dates apply to this class’ deadline schedule! These are not necessarily for other courses you are taking, as some classes start later than others!

  • 2/02 : Last day to drop without W and to receive a full refund
  • 2/23 : Last day to switch to Pass/No-Pass grading status
  • 4/26 : Last day to drop the class and still receive a “W” on transcript
  • 5/22 – 5/26 : Final Exam Week
  • THIS CLASS’ FINAL CRITIQUE: Monday, 5/21, 6pm-7:50pm

NOTE: the instructor of this class WILL NOT agree to a late appeal for a grade change, removal of a W, or to help get a refund if the student fails to abide by the above deadlines. You have been warned.


  • 2/16 – 2/19 : Lincoln’s and Washington’s Days
  • 3/19 – 3/24 : Spring Break

Regarding Administrative Drops

While students are not graded on attendance in this class, participation is included in the grade. If a student is not regularly attending, participating, and turning in assignments, s/he will be subject to an administrative drop by the instructor for lack of participation. If the instructor deems that a student’s lack of participation will so severely impact the student’s ability to pass the course, she reserves the right to drop you within the acceptable instructor drop period. Please know that a student’s financial aid status has no bearing on the instructor’s decision. Students receiving aid based on number of enrolled units can potentially lose their that aid if an instructor drop puts them below their stated aid threshold.

Pass/No-Pass Grading Status

All students have the have the right to switch your grading status to Pass/No-Pass before the stated deadline above. That means that your grade point average will not be affected, and it will not have a negative impact on your transcript should changing circumstances prevent you from doing as well as you wanted. This option might be good for people who are on the fence about taking the course because they already have a heavy school and/or employment workload, and are worried about their GPA being negatively affected. You can still take the course without the fear/stress of falling behind and needing to drop later.

While Miracosta’s Media Arts & Technologies department accepts “Pass” grading outcomes toward their degrees/certificates, some other institutions and degree plans might not allow P/NP electives as transfer units. If you are counting on receiving credit for the class in another degree/certificate program, it is imperative that you check with your advisor to be sure it will count. You also need to ensure that P/NP status will not affect your aid package if you receive a form of financial aid.

IMPORTANT: It is the student’s responsibility to change this grading status with the enrollment office BEFORE the stated deadline above. The instructor cannot do this for students.

Course Objectives

This course introduces the fundamentals of building Web pages including HTML programming, CSS, effective images/backgrounds, interface design, and SFTP protocols for uploading Web sites. Students also learn the management techniques for personal Web pages, browser and platform issues, as well as the basics of network protocols.

At the end of this course a student will be able to:

  1. execute intermediate-level HTML programming skills, including debugging techniques;
  2. implement practical image editing techniques for web display;
  3. repurpose content from other media to web delivery;
  4. implement fundamental design principles into user interface designs;
  5. upload, update and maintain a basic web site;
  6. evaluate various web browser differences and functionalities;
  7. implement fundamental skills in file management and server techniques.

Students will be expected to achieve these goals through assignments, demonstrations, lectures, and critiques. It is important to learn from both instructors and peers to better understand the context and originality of your own work. Participation is critical in learning new techniques, approaches, and ideas in design.

Student Learning Outcomes

The Miracosta faculty believe that students who complete one or more certificates or degrees are systematic, critical, creative thinkers and clear communicators who are intellectually curious, technically proficient, professional, and aesthetically literate. To that end, the faculty have identified seven Student Learning Outcomes (SLO’s) that apply directly to the high-level skills you are expected to possess for the professional workforce:

  • Technical Skills
  • Application of Discipline Skills
  • Critical Thinking and Problem Solving
  • Communication
  • Professional Behavior
  • Aesthetic Literacy and Appreciation
  • Global Awareness and Responsible Citizenship

Specifically, when you have completed this course, you should be able to:

  1. Apply HTML and CSS coding techniques to construct and format web pages using modern web standards.
  2. Create effective user interfaces that apply fundamental design and usability principles.
  3. Plan, design, and construct a website and publish it to the Web.

Need Technical Help or Advice?

For tutorials using the College’s learning management system or the SURF enrollment system, check out the Student Help Desk’s tutorials page.

Students With Disabilities

If you have specific physical, psychological or learning disabilities and require accommodations, please let me know early in the semester so that your learning needs may be appropriately met. You will also need to provide documentation of your disability to Disabled Students Programs & Services at 760-795-6658.

Other Important Student Resource Links:

Course Requirements

Required Textbooks:

Learning Web Design textbook coverLearning Web Design: A Beginners Guide to HTML, CSS, JavaScript, and Web Graphics Fourth Ed.Edition
Fourth Ed.
Author(s): Jennifer Niederst Robbins
ISBN10: 1449319270
ISBN13: 9781449319274
O’Reilly Press

(PLEASE NOTE: exercise lessons in the book are for practice only and are not graded materials in the class. This book has been selected primarily for its readings, which will be the basis of several graded discussion boards.)

Software and Computer

Although it is not a requirement that students in this class have their own computers, it is helpful for students who do have computers to install the software that we are using in the class on their personal machines. This will allow those students to do homework at home. Most of the software we use in this class is free, with the exception of Photoshop, which is available on all library and MAT lab computers for student use.

Furthermore, it is the instructor’s recommendation that students also have decent speakers (home) or a headset (anywhere) to listen to video lectures and tutorials.

Software that you need is as follows:

  • A Simple, Free Code Editor (recommendations below)
    • REQUIRED FOR ALL USERS: Brackets (Mac and PC)
    • Other optional (Mac and PC): Komodo Edit
    • Other optional (Mac Users): Sublime
    • Other optional (PC Users): Notepad++
    • Special Note: If you already have Dreamweaver and want to use it, you may. The instructor will not be teaching this course as a Dreamweaver course, but you are free to use it as a code editor. It does, admittedly, have very good color coding and “Find-and-Replace” features. The instructor will not be supporting Dreamweaver troubleshooting, though.
  • Free SFTP Program for Connecting to the Server (recommendations below)
  • Design Software (recommendations below)
    • Adobe Photoshop (STRONG recommendation!)
    • Adobe Illustrator (OPTIONAL. Great tool if you know how to use it!)
    • Pixlr Online Editor (a free Photoshop-like replacement)
    • Pixlr Desktop (for easy and effective image editing/effects)
  • Browsers (only one required, but several are recommended for testing)

Completion of Work

You are required to check into the class each Monday to see what you are responsible for doing each week. You will look in the Course Schedule link on the instructor’s website to find the current week’s folder. Weekly assignments and timelines will be made available at the start of each week if they have not already been release prior to the week’s date. Most assignments will be much easier if you do your readings and lectures first (or concurrently)! Additionally, our Blackboard course also has a link to the schedule for your convenience.

You will be expected to complete ALL assignments. Incomplete assignments will be evaluated as-is when turned in. Late work can only be turned in up to one full week late after the original due date (with a grade reduction). As the course progresses, students can expect to spend, at a minimum, approximately 6-8 hours a week working on this course’s content to be successful.

Course Timeline

The course schedule is available on the instructor’s teaching website at any time, and there is also a link to it from our Blackboard class for your convenience. This timeline is critical in helping you organize your production time for assignments, and it also has all of our due dates,as well as links to assignments, resources, required reading, and tutorials. Each week outlines what activities students should be doing to keep up, as well as listing dues dates for both assignments and progressive deadlines.

You can visit the online course schedule page now to get an idea of how it is organized.

Critiques (For Credit)

It is imperative that each student contributes to each critique when we have them. A dialogue of constructive criticism is what helps artists and designers find weaknesses and strengths in their work. These sessions are important tools in refining your own self-critiquing and design processes. We will have online and in-class critique sessions for different assignments. Critiques will be assigned during the semester.

Drawings, Artwork, Comps

With some projects, you might be required to create either hand sketches or computer drawings of web wireframes and layout design ideas before embarking on the full-scale project. You will need to create these precursory drawings with a pencil and paper to avoid getting bogged down by technology. You can can then digitize your hand sketches on a flatbed scanner. All materials turned into the instructor must be in digital format.

This course will also place an emphasis on the visual presentation aspect of design in addition to the purely technical components. It is a marketplace reality that users respond best to strong visual design and functional presences in websites, which further challenges and complicates the job of the web designer. Integrating a strong visual design front-end and a cohesive technical back-end will be one of the challenges in this course. Thus, knowing industry-standard graphic design tools such as Adobe Photoshop and/or Illustrator will be very helpful to your success in this course. You will be expected to use these tools on a regular basis to produce and prep artwork for comps and final web graphics.

Grading Policy

You may turn in a project late up to one full week after the original due/critique date. Any work later than one week overdue will be subject to receive an “F” without consent from the instructor . If you know you will be unable to complete work on time, please discuss it with the instructor in advance! Please note that your grade will automatically drop by 10 points for late work. This means that if work is up to a week late, your highest possible grade begins at a 90.

The final project is the exception! ******NO LATE WORK ACCEPTED FOR THE FINAL.******

Class Participation

This is an onsite course, so class participation simply cannot happen when a student fails to attend class. While there is not a specific “Participation” evaluation value in your final grade, your level of participation will often help determine borderline grades, flexibility in missed work, etc. Participation is monitored through the following outlets:

  • meeting progressive deadlines for samples, preliminary sketches, etc.
  • contributing to classroom discussion and Q&A
  • critique participation
  • clear communication with the instructor and peers

Grading Breakdown and Assignments:

125 Grading Breakdown
125 Grading Breakdown

Viewing Assignments on the Web

Once you have uploaded your work to the server according to the exact instructions on each assignment page, you can view your work on the web in a web browser easily by visiting our Class Roster page. If you have named your assignment folders correctly, the links on this page will work perfectly.

Letter Grade Assignments

Letter Value Numerical Value
A 90-100
B 80-89
C 70-79
D 60-69
F 0-59

Completed projects will be graded on the following criteria (OVERVIEW):

  1. Instructions (did you follow technical instructions for the assignment?)
  2. Craftsmanship (is the finished piece and presentation clean and well-crafted?)
  3. Overall Composition and Creativity (did you understand and successfully execute the problems presented?)

For detailed grading criteria, you will need to refer to each project outline page. Grading rubrics for specific assignments are available via Blackboard.

Grading Definitions

  • A = Outstanding achievement: available only for the highest accomplishment
  • B = Praiseworthy performance: definitely above average
  • C = Average: award for satisfactory performance, most common undergraduate grade.
  • D = Minimally passing: less than the typical achievement.
  • F = Failing.

**No incompletes will be given without EXTENUATING circumstances.

Adding and Dropping Classes

Link to Student Help Desk Tutorials page.

Digital Art, Design, and Communication Education