Preamble
- Course Title: Foundations of Web Design
- Location: 43 West 23rd St, Mac lab
- Day and Time: Sundays, 1:00 PM — 4:00 PM
- Instructor: Roy Vanegas
- Email Address: roy.vanegas@touro.edu
Prerequisite
None.
Description
An exhaustive study of HTML5 and CSS3 using open source tools, Foundations of Web Design will teach students proper semantic markup practices, excellent code design, and the ability to work with other front-end technologies, such as JavaScript, AJAX, jQuery, and Sass.
Learning Outcomes
At the completion of this course, you will understand how to...
- Read and hand-code HTML5 and CSS3.
- Gain a mastery of core and advanced CSS concepts.
- Understand the DOM.
- Author semantically rich HTML.
Schedule
- Where: Mac lab (room 207), Graduate School of Technology, Touro College, 43 W 23rd St (map)
- Day: Sunday
- Dates: 2 February 2014 — 18 May 2014
- Time: 1:00 PM — 4:00 PM, with a 15-minute break given at the halfway point of each session
Note: our class will not meet on 16 February, 16 March, and 20 April.
Note: the topics listed below will be covered in the order listed, time permitting. It’s possible — based on the cadence of the class — that some topics will be overlooked or that other topics may be discussed.
The Topics section below lists the material we’ll cover during the week listed to the left. The Homework items listed to the topics’ right indicate work due the following week.
| Week | Topics | Homework |
|---|---|---|
| 1 (2 Feb 14) |
|
|
| 2 (9 Feb 14) |
|
|
| 3 (23 Feb 14) |
|
|
| 4 (2 Mar 14) |
|
|
| 5 (9 Mar 14) |
|
|
| 6 (23 Mar 14) |
|
|
| 7 (30 Mar 14) |
|
|
| 8 (6 Apr 14) |
|
|
| 9 (13 Apr 14) |
|
|
| 10 (27 Apr 14) |
|
|
| 11 (4 May 14) |
|
|
| 12 (11 May 14) |
|
|
| 12 (18 May 14) |
|
|
Code
Any code I need to share with you, including code I write during class, will be added to this section for you to download.
- 11 May 2014
- Positioning
- 4 May 2014
- The nth selectors; a project 2 solution
- 6 April 2014
- Intro to floats; backgrounds; intro to gradients
- 30 March 2014
- !important declarations vs normal declarations; more CSS
- 23 March 2014
- Everything tables
- 9 March 2014
- The div and span tags; HTML entities; Font Awesome; some random intro CSS
- 2 March 2014
- Block-level elements; inline elements; content-based styles
- 23 February 2014
- The outlining algorithm; the HTML validator; the head section
- 9 February 2014
- Boilerplate HTML stuff
- 2 February 2014
- Some basic HTML stuff
Assigned Readings
There is no required textbook for this course. All readings will appear in the Schedule section of this syllabus.
Assignments
Announcements
Important announcements are made on our Google group, and the most important ones will appear here, as well.
9 March 2014- Remember: there is no class next week, 16 March 2014.
- 7 March 2014
- Ignore the due date mentioned in your first project instructions. It’s now due on 6 April.
- 29 January 2014
- This is a test; welcome to class.
Software Requirements
Whether you use Windows or Mac, all the necessary software for this course is listed below. It’s all free and downloadable from their respective links.
Browsers
Download all the browsers available at Browse Happy. For Firefox, you’ll need to add all the plugins you see here.
Text Editor
The code you write will require a text editor. Mac users should download TextWrangler and Windows users should download Notepad++, choosing the “Notepad++ Installer” link from the download page.
Web Developer Tools
Chris Pederick’s Web Developer Firefox add-on is a helpful HTML and CSS debugging tool.
A Link Checker
The W3’s Link Checker isn’t software you download, but a utility that verifies links on a web page so you don’t have to. Bookmark it.
A Compression/Decompression Utility
If you’re using Windows and you don’t have a compression/decompression utility, download 7-Zip, which is free and open source. Mac and Linux/UNIX users already have free compression utilities installed at the command line.
Grading Standards
Grading Formula
Your grade for this course will be computed entirely on the following formula, which will be adhered to very closely:
- Attendance/participation/caring (20%)
- First project (20%)
- Second project (20%)
- Final project (40%)
The A Range
A (“Work of exceptional quality”)
Students who earn an “A” produce work that is impressive, goes beyond what is required of the course, and exemplifies a superb work ethic. Their work is exceptional. “A” students might — or should — share their knowledge with their classmates, and they are active participants in class discussions. “A”-grade students do not spend time distracted by others or digital devices, and are contributing members of the class. Lastly, “A”-level students demonstrate an evolving understanding of the material through iterative efforts of their work.
A- (“Work of high quality”)
In the “A-” range, a student has performed very closely to the level of his or her “A”-level counterpart, but has produced at least one project/homework/component of the grading scheme that was below a grade of “A.” Perhaps the student missed too many classes, showed up to class late too often, or submitted an assignment/homework that was not “A”-level.
The B Range
B+ (“Very good work”)
Students earning grades of “B+” produce very good work, which is close with that of their counterparts earning in the “C” range, but offer a sustained and meaningful structure to a critical user experience and design that is more complex than students earning a grade in the “C” range. “B+” students’ work is logically organized, responds to assignments in thoughtful and distinctive ways, and offers a sound user experience. Although minor coding and layout errors may be present, they are under control and do not impede user experience or content.
B (“Good work; satisfies course requirements”)
Overall, “B” range students produce work with good results. He or she possesses a strong understanding of the course’s content and shows a high level of competence in the skill set taught in the course.
B- (“Below-average work”)
Students in the “B-” range are producing work that is above adequate but below average. Their work shows flashes of very good work, but, overall, is not compelling for a grade of a “B.”
The C Range
C+ (“Less than adequate work”)
“These are average assignments. They will demonstrate some success in engaging with the assigned material. The document will show that the student can identify and work with key frameworks and methods with a particular set of content and apply them to ideas and examples found in other precedents, or other outside interactive experiences. Additionally, the assignment will demonstrate effort in the areas of user experience, interaction design. Typical of a “C/C+” assignment, however, is a disjointed sense of content hierarchy and user experience in connection with the page. Generally these assignments contain general coding errors which create unwanted or negative rendering, however, the assignments still work and an effort to debug and fix errors is present.”
C (“Well below average work”)
In the “C” range, a student has show more than minimal progress to pass, but not quite on the level of a “C+” student.
C- (“Poor work; lowest possible passing grade”)
A student who earns a grade of “C-” has performed the bare minimum to pass the course. He or she has performed very near to that of a student who would typically fail, but has some basic understanding of important concepts related to the course. He or she has also shown some attempt at trying to grasp the material of the course. In essence, the student has produced work that shows evidence of minimal effort expended.
F (“Failure”)
Failing grades are earned by students who do not submit required work, produce incomplete work, and/or do not take examinations (without prior notification and approval). Grades of “F” are also earned by students who show no comprehension of the topics discussed in class and no forthcomingness to attempt to comprehend. Students who fail show no interest in learning, make no effort to remedy problem areas, are continually distracted in class by other students and/or mobile electronic devices, and interrupt class.
Important Note
Please, please do not try to negotiate a grade with me — before or after — any work due. By asking me to favor you (“I can’t have this class hurt my GPA,” “My student status depends on my doing well in this class,” or, “I need a B or better for my student loans”), you’re asking me to put you above your classmates. It’s a form of extortion, and I will remember your having asked me to treat you better than your peers.
Web Programming Resources
HTML
CSS
- Chris Coyier’s CSS-Tricks
- The CSS Validation Service
- Sitepoint’s CSS Reference
- A CSS3 gradient generator
- A JavaScript-based specificity calculator
- Sass basics
Class Policies
- Responsibility: Students are responsible for all assignments, even if they are absent. Late assignments, failure to complete the assignments for class discussion and/or critique, and lack of preparedness for in-class discussions, presentations and/or critiques will jeopardize their successful completion of this course.
- Participation: Class participation is an essential part of class and includes: keeping up with reading, assignments, projects, contributing meaningfully to class discussions, active participation in group work, and attending class regularly and on time.
- Attendance: Faculty members may fail any student who is absent for a significant portion of class time. A significant portion of class time is defined as three absences for classes that meet once per week. Lateness or early departure from class may also translate into one full absence.
- Delays: In rare instances, your instructor may be delayed arriving to class. If he or she has not arrived by the time class is scheduled to start, you must wait a minimum of thirty minutes for his/her arrival. In the event that your instructor misses class entirely, a sign will be posted at the classroom entrance indicating your assignment for the next class meeting.
- Electronic Devices: Use of electronic devices (phones, tablets, laptops) is permitted when the device is being used in relation to the course’s work. All other uses are prohibited in the classroom and devices should be turned off before class starts.
- Academic Honesty and Integrity: Touro views “academic honesty and integrity” as the duty of every member of an academic community to claim authorship for his or her own work and only for that work, and to recognize the contributions of others accurately and completely. This obligation is fundamental to the integrity of intellectual debate, and creative and academic pursuits. Academic honesty and integrity includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of faculty members and other students). Academic dishonesty results from infractions of this “accurate use.” The standards of academic honesty and integrity, and citation of sources, apply to all forms of academic work, including submissions of drafts of final papers or projects. All members of the University community are expected to conduct themselves in accord with the standards of academic honesty and integrity. It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the University, or dismissal from the University.
Contact and Office Hours
My email address is roy dot vanegas at touro dot edu. However, you’re strongly advised to see me if you have questions, as I rarely do email nowadays. I’m available by appointment in person or via Skype.