MAT-225, Web Design: PHP and WordPress
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 #1540
- Fall 2017 semester : 8/21 – 12/14
- 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/4622 (4600 building) -> TBA, 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/).
Advisory: MAT-165 (or equivalent) is a must. MAT 175, MAT 215, and/or MAT 235 will also be very helpful. Students taking this course should have, at a minimum, a good background in HTML and CSS fundamentals. Skill sets in using graphic design software, such as Adobe Photoshop and/or Illustrator, are highly recommended as well. Adobe Dreamweaver or other code editor will be a required tool in this class, so prior knowledge of it will be extremely helpful.
Please note that this is a very time-intensive course! Although this is a 3-unit course like many of your other MAT courses, you should expect to spend more time working on projects and reading lectures than in many of your other classes because it covers advanced material. It is the equivalent of a 400-500 level university course.
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!
- 9/01 : Last day to drop without W and to receive a full refund
- 9/22 : Last day to switch to Pass/No-Pass grading status
- 11/17 : Last day to drop the class and still receive a “W” on transcript
- 12/11 – 12/14 : Final Exam Week
- THIS CLASS’ FINAL CRITIQUE DUE: 12/14
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.
- 9/4 : Labor Day
- 11/10 : Veterans Day (Observance)
- 11/23-24 : Thanksgiving Holiday
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 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 develops skills for building database driven, dynamically generated websites using current dynamic scripting languages, content management system (CMS) applications, and presentation semantics with PHP, WordPress, and CSS, respectively. Students develop dynamic websites and CMS web applications as a basis for creating professional, commercial, or other dynamic, interactive applications. Topics include PHP scripting fundamentals, integrating dynamic content with HTML and CSS, understanding WordPress as a CMS, customizing and creating WordPress themes and plugins, leveraging web design software, such as Dreamweaver and/open-source code editors to create professional data-driven websites, and designing dynamic websites with issues of accessibility and device responsiveness in mind.
After this course, students should be able to do the following with PHP/MySQL:
- Write conditional scripts that can enhance static sites
- Create sites with dynamic image gallery generation
- Create sites that connect to and interact with MySQL databases
- Write “procedural” PHP scripts / sites
- Create WordPress websites
These are some things that this class will not have time to get to:
- Highly refactored sites using “object-oriented” PHP (OOP), which uses objects and classes
- Web security scripting
Students interested in pursuing this topic beyond the scope of this class will have strong foundations to move into object-oriented scripting, to explore back-end WordPress or other CMS software development, or to start jobs that accept foundation-level PHP experience.
The detailed course objectives for MAT-225 Web Design: PHP and WordPress are as follows:
- Evaluate appropriate tools for interactive web database applications
- Apply scripting tools using web database programs
- Evaluate, apply, and/or extend existing web programming code
- Identify and analyze information requirements for distributed web-information applications
- Develop solutions for interactive and distributed web-information
- Develop solutions for a multi-platform, multi-browser environment
- Demonstrate proficiency in the operational environment of at least two different database platforms.
- Develop basic skills for building database driven, dynamically generated Web applications using current database technologies.
- Develop database-driven Web applications as a basis for creating e-commerce and e-learning commercial applications. NOTE: this course will not delve into e-commerce app-creation.
- Test sites using a web server on a multi-browser, multi-platform environments.
- Learn techniques, foundation methodologies, and security practices of dynamic programming using the open-source PHP language.
- Learn to integrate PHP, MySQL, HTML, and CSS for attractive and functional sites.
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:
- Plan, design, and construct web enabled applications that utilize dynamically generated, database-driven content.
- Compose scripts to access and manage data and integrate dynamically generated content into web page designs.
- Examine, analyze, and evaluate dynamic and interactive web applications and processes.
An overview of Institutional Learning Outcomes can be found at http://www.miracosta.edu/instruction/slo/iloutcomes.html.
Need Technical Help or Advice?
It is important to note that in this class we will be using a special server called “matmcc.org”, NOT the traditional “mat.miracosta.edu” server that is managed by the MiraCosta IT office. Therefore, if you are experiencing any server problems this semester, please contact me directly (not the Student Help Desk). The only time it is appropriate to contact the Student Help Desk is for Canvas-related problems, which they DO manage.
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
While the majority of the course is through lecture, web, and video tutorials, there are some required books/subscriptions. For those students who want an additional reference, I have also recommended a good textbook below, as well.
WordPress Responsive Theme Design
ISBN13 : 9781785288456
(NOTE: lessons in this book are for practice only and are not graded materials in the class. This book has been selected for its readings.)
Software and Computer
Because this is an online course, students are expected to have access to a computer that meets the minimum requirements of Miracosta’s browser-ready guidelines. 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)
- PAID Editor Recommendation: Adobe Dreamweaver is has very good color coding, commenting features, balanced braces, and terrific “Find-and-Replace” features. This is a great tool that is available along with other Adobe Creative Cloud bundle offerings.
- Free FTP Program for Connecting to the Server (recommendations below)
- XAMPP server development package (free for Mac, PC, Linux)
- Design Software (recommendations below)
- Browsers (only one required, but several are recommended for testing)
Completion of Work
Please note that this is a very time-intensive course! You are required to check into the class each Monday (at a minimum) to see what you are responsible for doing each week. You will look in the class schedule page to find the current week’s agenda, assignments, and due dates. Weeks will be made available for later projects as we approach them. Almost all assignments will be much easier if you do prep lectures and demos first (or concurrently)!
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) without prior consent or communication with the instructor. As the course progresses, students can expect to spend, at a minimum, approximately ~10 hours a week working on this course’s content to be successful. The final project, however, is different: NO LATE WORK ACCEPTED AT ALL. No exceptions.
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 will be expected to participate in Discussion Boards on a weekly basis, with a minimum of 1 contribution per week (and sometimes more). 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.
With the understanding that our class weeks will be Mondays 12a.m. – Sundays 11:59pm, each week you will make your first post by Thursday night, and you will respond to another person’s post by Sunday night. 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.
If I need troubleshooting help, what steps do I take?
If you get stumped on a technical problem in the class, this is what you should do, in this order:
SEARCH DISCUSSIONS: Go to the current week’s technical discussion board and do a visual search to see if anyone else is having a similar issue to see if there is already a resolution that can help you.
PEER HELP: If you need to post a new thread for a new issue, be as specific as possible in the post about your problem. If the file you are working on is self-contained (lacking dependent files), attach the problem file in the event other students are interested in taking a stab at the issue. The instructor will also scan the discussions as often as possible, but sometimes other folks might see it sooner.
INSTRUCTOR: Go ahead and post your work up on the server in your student directory, including supporting/dependent files (css, images, js, etc). Email the instructor, explaining the specific problem, and provide a direct link to the web address of the work you have posted. Unless the file is self-contained, do not attach files in the email.
SELF-RESPONDING: If you discover your own problem before anyone else can help you, please post your solution as a response to your own post. This is a GREAT way to help in the class community, as students often make many of the same mistakes as each other.
IMPORTANT: If you truly need help looking at your source code, failing to put your work up on the server early-on will likely delay the process of getting help because you will still be asked to do so. Please remember that the instructor cannot see files residing on your “localhost” computer.
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 online 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 or take clean snapshots with your phone. 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:
- Project 1 :: Responsive Web Design with PHP Scripting – 30%
- Project 2 :: WordPress : First site using themes and plugins – 20%
- Project 3 :: Original WordPress Original Theme Creation – 30%
- Discussion Boards (Log into Canvas for discussion assignments) – 10%
- Each project will also take participation into account for borderline grades.
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.
- 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.
Turning Work In and Viewing It on the Web
You will turn all work in on the class server in your individually provided student directory. Each completed project should respectively be in a folder titled exactly as follows:
Practice PHP files that you are required to upload for participation credit in Project-1 should be located in a folder you create on the server called:
The instructor has created a class launch page that will link directly to each student’s directory and projects, so the spelling of the above folder names (case sensitive) are important for functional linking.
You can also view your work separately by going to the following address (substituting your own last name for “lastname”):
Class Orientation Videos
First, take a minute to check out some YouTube tips and tricks that could save you hours later in the semester:
After reading the entire syllabus, please watch the two class orientation videos to learn 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