MAT-125 Online, Web Design Fundamentals
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.
Meeting Times + Places | Instructor Contact | Prerequisites | Administrative Deadlines and Drops | Pass/No-Pass Grading Status | Holidays | Course Objectives | Student Learning Outcomes | Technical Help | Students with Disabilities
Meeting Times and Place
- Course number #1570
- Spring 2018 semester : 1/22 – 5/24
- Class Meeting Place: ONLINE ONLY
- Class Sessions: Weekly via Canvas announcements, discussion boards, and synchronous open lab hours for student assistance and collaborative feedback
- Office Hours:
- ONLINE: By appointment via the Canvas online conferencing tool.
- ON CAMPUS: OC4621 (4600 building) -> Mondays 1-2pm, Tuesdays 4-5pm, and by appointment
Leigh Cotnoir, email@example.com
Regular effective contact and interaction with the instructor will be maintained through weekly instructor-prepared electronic lectures and updates to the class website, weekly email announcements, active online discussion and question and answer forums, timely instructor feedback on student work, weekly online office hours (by appointment), synchronous web conferencing or screen-sharing sessions (by appointment), and through responding to student emails, phone calls, and/or other questions or postings in a timely manner. Students can reasonably expect to hear back from the instructor within 1-3 days (excluding weekends and holidays) for most inquiries. If the instructor expects to be absent and unable to post materials and/or respond to email or discussion forums in excess of three or four days, she will notify the class and make other accommodations. If you have concerns about instructor contact or any other regard, please refer to the section on Students Rights in the MiraCosta College catalog (http://catalog.miracosta.edu/academicpolicies/studentrights/).
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/21 – 5/24 : Final Exam Week
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 participating and turning in assignments, s/he will be subject to an administrative drop by the instructor for lack of participation. This behavior pattern is equivalent to missing too many classes in an on-ground course. 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 will 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.
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:
- execute intermediate-level HTML programming skills, including debugging techniques;
- implement practical image editing techniques for web display;
- repurpose content from other media to web delivery;
- implement fundamental design principles into user interface designs;
- upload, update and maintain a basic web site;
- evaluate various web browser differences and functionalities;
- 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
- Professional Behavior
- Aesthetic Literacy and Appreciation
- Global Awareness and Responsible Citizenship
Specifically, when you have completed this course, you should be able to:
- Apply HTML and CSS coding techniques to construct and format web pages using modern web standards.
- Create effective user interfaces that apply fundamental design and usability principles.
- Plan, design, and construct a website and publish it to the Web.
Need Technical Help or Advice?
****Check out the Student Help Desk.****
While I will do my best to help students out in all areas, I will not be acting as technician during this course. Your system is your responsibility. I cannot troubleshoot your system problems.
For tutorials using the College’s learning management system or the SURF enrollment system, check out the Student Help Desk’s tutorials page.
Are you prepared for an online class?
Please go through all the linked sections in the list of MiraCosta online course preparation tips.
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:
- MiraCosta College Library
- Student Services
- Tutoring & Academic Support Center
- Writing Center
- Health Services
- Academic Counseling
- Veterans Services
Author(s): Jennifer Niederst Robbins
(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
Because this is an online course, students are expected to have access to a computer that meets the minimum requirements. Furthermore, it is the instructor’s recommendation that students also have decent speakers or a headset to listen to video lectures and tutorials, as well as access to high-speed internet (cable, DSL, or better connection). Students on dial-up modems might experience some problems getting the content delivered in a timely or useful manner.
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)
- PC or Mac Users: Filezilla
- PC or Mac Users: Cyberduck
- Design Software (recommendations below)
- 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 Canvas 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.
The course schedule is available on the instructor’s teaching website at any time, and there is also a link to it from our Canvas 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.
You will be expected to participate in Discussion Boards frequently and sometimes more than once a week. In a normal classroom environment student-to-student interaction is just as important as student-to-teacher interaction; this is also true in an online learning environment. Because students will not be participating in any group projects for this course, the Discussion Boards are intended to encourage students to communicate with and help one another—just as they would in an on-ground classroom. Discussion board assignments will progressively appear in the course schedule as they are assigned. You can also find them in Canvas under the “Discussions” link within our class.
With the understanding that our class weeks will be Mondays 12a.m. – Sundays 11:55pm, you will make weekly posts according to the instructions in each individual discussion forum. Be aware that each forum has different requirements and due dates, so follow instructions to receive credit. You will NOT receive “late” credit for discussion boards, as they are specifically to engage you at that point in the course, as if you were in class. There is a technical help forum, however, to which you will contribute throughout the semester, which has a much longer-range due date. You may contribute as many posts as you want, as long as you meet these minimum requirements for credit. This participation will help the class stay lively, allow students to play active roles in helping other classmates, and foster a better understanding the course material. These forums are intended to serve several discussion roles:
- Act as technical help boards for peer-to-peer help
- Act as a place for students to share observations about web design techniques, methods, and trends
- Serve as a place for students to share course-relevant design news and links
- Serve as a place for students to share their own web work links and get constructive feedback / critiques
- Discover that other people are experiencing similar problems, and find similar resolutions
- Share observations about problems in scripts, misprints in the book, etc.
Lastly, some common sense rules apply to these forums: always be constructive in your criticism; always be respectful and courteous, and use good judgement so as not to post offensive material.
Synchronous vs. Asynchronous Sessions
“Synchronous meetings” are ones where we log into Canvas’ “Zoom” conferencing tool or other online meeting tool as a group in real-time.
“Asynchronous meetings” are recorded sessions/lectures/demos that students can watch at any time.
This course is primarily asynchronous, but there might be some synchronous open lab times designated during the semester for assistance, discussions, and/or and critiquing.
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 critique assignments for each project, either through discussion boards or Canvas’ “Zoom” conferencing tool. 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 computer design tool (likely Illustrator or Photoshop), or you can can 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 functionality 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.
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.******
This is an online course, so class participation is monitored in a variety of ways. 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 in a timely fashion to the discussion boards
- critique participation
- clear communication with the instructor and peers
Grading Breakdown and Assignments:
- A1 : Beginning HTML (Self Profile : the structure) :: 6%
- A2 : Basic CSS (Self Profile : the presentation) :: 12%
- A3 : Web Image Preparation (An Illustrated Poem) :: 17%
- A4 : Multi-Page Responsive Blocks Site :: 17%
- A6 : Final Student Project :: 20%
- Discussions (in Canvas only) :: 10%
- ***Each project will take participation into account for borderline grades. Participation will be determined by the criteria outlined in the previous section.***
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 by going to http://mat.miracosta.edu/mat125_cotnoir/studentwork_online/ and then navigating to your student folder to find the uploaded assignment.
Letter Grade Assignments
|Letter Value||Numerical Value|
Completed projects will be graded on the following criteria (OVERVIEW):
- Instructions (did you follow technical instructions for the assignment?)
- Craftsmanship (is the finished piece and presentation clean and well-crafted?)
- 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 Canvas.
- 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.
Class Orientation Videos
YouTube Tips and Tricks
NOTE: This was recorded during a previous semester, but it is still relevant. Just be aware that the dates in this orientation video are not accurate. For correct dates and timelines for this course, you will refer to the Course Schedule. Also, the MiraCosta College “ONLINE ED” link is now available directly on the home page. You can also log into Canvas directly here: http://miracosta.instructure.com
This class orientation video playlist covers the following:
- how the course is set up online
- where to find all resources for the class
- how and where to turn in assignments for this class
- how to get started online in this class
Frequently Asked Questions (FAQs)
Please read these commonly asked questions. After you have thoroughly read the syllabus, including watching orientation videos and reading FAQs, please feel free to post a question to the “ASK A QUESTION” discussion board in Canvas or email the instructor.
Q: What constitutes “a day”?
A: A full day in this course is from 12am – 11:59pm (or “end of day”).
Q: When do weeks start and end?
A: For the purposes of this class’ due dates, the week starts each Monday at 12:00am and ends each Sunday at 11:55pm.
Q: Are the lessons in the textbook graded?
A: No. They are simply for practice. Graded assignments are listed in both the syllabus and course schedule.
Q: Do I have to buy the book?
A: Textbook readings are required, and there will be discussion questions based on readings. So, yes, the book is required.
Q: How do I know when things are due?
A: You need to follow the course schedule every week. Most due dates are on Sunday evenings, but there are other important due dates on other days sprinkled throughout the semester. For more info, read about the Course Timeline in this syllabus above.
Q: How do I turn work in?
A: If it is a regular “assignment” (see grading section above), then you will upload work to the server following the exact directions on each assignment’s individual page. If it is a discussion board assignment, then you need to log into Canvas, go to the “Discussions” link on the left, select the correct discussion, and make an entry according to the discussion board’s instructions.
Q: How do I connect to the server?
A: Using an SFTP program, you will use the following credentials to connect to the class server…
username: YOUR SURF “W” NUMBER
password: YOUR SURF PASSWORD
port #: 22
For a tutorial in connecting to the MAT server, check out “SFTP with Cyberduck“.
Q: What Goes On the Server?
A: To turn in your assignments, you will need to upload your website files to the MAT server.
Q: How Can I View My Websites On the Web?
A: After you have uploaded them (see the tutorial below for complete instructions), you can open a web browser and go to the following address:
From there, navigate to your own student directory to find the files you uploaded. You should be able to see them live on the web from there.
Q: More Information About the Server:
A: This “Server Connection” information gives you the connection info you need to get onto the Miracosta MAT student web server so that you can upload your web files to your student web directory. Once your files are uploaded, you can view them from anywhere on the web using the “web viewing url” listed below.
Your server account might not be ready until the first day of class, depending on when the IT staff create the new semester’s login permissions. Feel free to check as soon as you want, but don’t worry if the connection doesn’t work unless it is after the first day of class.
It is imperative, however, that you test your login by the first Wednesday of class, in the event something is wrong with your access. We will need to contact the server admin to fix it during the week. Please let the instructor know immediately if you are having problems connecting. To learn how to connect, please refer to the tutorials below, in “Using SFTP Software.” Also, if you were a “Late Add,” it is possible that your account hasn’t been set up…please let the instructor know right away. For problems getting into the MAT server, please refer to the server’s web help page. You can test the status of the server to see if it is down, as well as get login info and many other helpful tips.
Q: Can I take this class as Pass/No-Pass?
A: Yes, you can switch your status in the class to Credit / No-Credit (Pass / No-Pass), which will not affect your GPA. If you really want to stay in the class but are concerned you might fall behind due to work or other school commitments, you can switch your status up until the deadline. After that, you would have to receive a letter grade for the class.
IMPORTANT NOTE: Deadline: 30% through session. You must contact the enrollment office to change this yourself. See the date above in syllabus. If you have any questions regarding this option, call Admissions and Records at 769-757-2121 ext. 6620.
Q: If I have a Chromebook, can I still take this class?
A: If you have a Chromebook and no other access to Windows, Mac, or Linux computers, here is a helpful article about resources that will allow you to still do the work for this class.
Q: Do I have to have PhotoShop, or is there an alternative?
A: While it is not REQUIRED to have Photoshop for this course, it is highly recommended. Creating complex quality graphics for the web is not easy to do without the use of a tool like Adobe Photoshop (or Adobe Illustrator). Here is what the instructor recommends for purchase:
Creative Cloud subscription for Photoshop
If you are taking other Graphic or Web Design classes, it it might be worth it to you to buy the full CC subscription because it comes with several other applications you will be using. But if you can only afford Photoshop, you can choose to just purchase the single application.
You can buy the software subscription directly from Adobe, but it is substantially cheaper to buy it from the Foundation for CCCC’s CollegeBuys special institutional link if you can afford to buy the entire year at once. A 30-day trial is also available from Adobe before committing to a purchase.
For those of you not interested in paying for software just yet, you can try Pixlr (free).