COMD 3551 E246 WEB DESIGN II | ADVANCED HTML & CSS

Day & Time:	Thursday, 6:00PM – 9:20PM
Instructor:	Jerron Smith
Email:	JISmith@CityTech.Cuny.Edu or thepixelsmith@gmail.com
Website:	https://openlab.citytech.cuny.edu/smithcomd3551fa2017/

COURSE DESCRIPTION

Advanced web design is a continuation of ADV2450 Web I, a prerequisite of this course. Students will study, in further detail, HTML and CSS to ensure that they have a solid foundation. It is assumed that students have a solid grasp of Photoshop and Illustrator, and understand the proper web design workflow, but if not we will cover that a bit too. The course is focused on completing a website, from researching it’s competitors, wireframing it’s content, to designing and building it using HTML, CSS, and maybe some Javascript and PHP. We will even cover implementing a responsive strategy into your work and the strengths and weaknesses of it.

This is the first course for students majoring in the Web Design module. Students will learn to use both graphics software, such as Photoshop (for mock–ups and image optimization), and to write HTML &  CSS manually to create efficient and reusable web site code. Forms and integration of other technologies will be introduced during this course.

ADDITIONAL COURSE DESCRIPTION

Coding is cool, and fun too…but mostly cool…Basically in a nutshell I just want to say that coding is your friend…A good friend too not like the kind of friend who takes the last nacho or drinks the last beer in a six pack…We all hate those types of friends…Coding is more like the type of friend who when you show up at their door with a body doesn’t ask any questions, they just grab a shovel and follow you…Yeah, that what kind of friend coding is.

ATTENDANCE AND LATENESS POLICIES

A class roster roll will be taken at the beginning of each class. Only two absences may be allowed. After two absences, a student may be withdrawn because of unsatisfactory attendance (code WU). Students arriving after the roll is taken will be marked “late.” Students may be notified at the earliest opportunity in class after they have been absent or late. After being absent two times or equivalent (2 lateness = 1 absence), a student may be asked to withdraw from the class (code W before the College drop deadline) or may be withdrawn from the class (code WU).

ACADEMIC INTEGRITY STANDARDS

You are responsible for reading, understanding and abiding by the NYC College of Technology Student Handbook, “Student Rights & Responsibilities,” section “Academic Integrity Standards.” Academic dishonesty of any type, including cheating and plagiarism is unacceptable. “Cheating” is misrepresenting another student’s efforts/work as your own. “Plagiarism” is the representation of another person’s work, words or concepts as your own.

RESEARCH

A large emphasis will be placed on awareness of the design world by observing the state of design in our community: books, publications, web sources, museums and graphic art organizations. Students are expected to gather reference materials for all their projects and are encouraged to use the college’s library resources. http://library.citytech.cuny.edu

CLASS POLICIES

Unless otherwise noted, projects given as Homework Assignments are due at the beginning of class and must be handed in (if physical), placed on the server, Flash Drive or sent in email to be reviewed; otherwise it is considered late.
ANY MISSED ASSIGNMENTS WILL EARN ZERO POINTS. Assignments received after the deadline will drop a grade at the end of the class. After that time period, any late assignment will earn a zero. A final folder of all projects will be handed in via DropBox, Google Drive, Creative Cloud or other file storage/sharing service along with the final project at the end of the semester.

CLASS PARTICIPATION

You are expected to give thoughtful, constructive feedback in class. You are to be prepared for each session, meaning you will have read all required selections, performed all appointed tasks, and completed all homework. You are to do your homework with professionalism and to seek help as soon as possible.

INSTRUCTOR’S RECOMMENDATIONS

Come to class on time: Students arriving more than 15 minutes late may be marked absent.

Attend all classes: Each week we will build on the work learned the week before. If you must miss a class, please let me know ahead of time. It is your responsibility to obtain any missed material from your fellow classmates, and to turn assignments in on time even if you are absent. Students missing more than two classes risk failing the course.

Turn in assignments on time: Homework turned in late will lose 10 points for every day that it is late. Work turned in more than two weeks from the due date will not be accepted. Project 1 and Project 2 may not be turned in late. Missing projects may result in a failing grade for the project.

Ask Questions: This is a technical class, and we will be covering a lot of information in a short time. If you are confused, lost, need clarification, etc, please don’t hesitate to ask questions in class. Chances are your fellow students will benefit from the answers AND this will add to your class participation grade! I am also available between classes via email.

SAVE, SAVE, AND SAVE AGAIN: There will be no sympathy for work lost for not saving properly.

BACK UP YOUR WORK: Murphy’s Law Applies In All Things–You will lose your flash drive or it will become corrupted. Save your work in at least two places. Cloud-based services like dropbox can work as well if not better than a computer at home.

INSTRUCTOR’S PREROGATIVE

I reserve the right to change the syllabus or grading formula as I see fit, given the composition and progress of the class. I will notify the class as to these changes in writing in a timely fashion.

CLASS SUPPLIES

FLASH DRIVE: or other portable storage device. This will be used to transfer your work from home and class. Image files can be large, so make sure your flash drive is at least 8gb.

SKETCHBOOK/NOTEBOOK: For taking notes during technical demonstrations, brainstorming sessions, and for sketching ideas for projects. YOU WILL HAVE TO PUT PENCIL TO PAPER AND DRAW. I highly recommend you use a gridded sketchbook.

INDEX CARDS & STICKY NOTES: They have a million uses.

WEB HOSTING: All assignments must be uploaded to a live web server. This is the only way in which projects will be graded. If you still have the hosting plan you purchased for your Web Design 1 class that will work for this class as well.

CLASS OBJECTIVES

Instructional Objectives For the successful completion of this course students should be able to:	Assessment Evaluation method/criteria:
Define and explain application of HTML, CSS & Javascript in Web Design.	Students will demonstrate competency in written exercises and/or presentations.
Demonstrate a coherent and efficient web design workflow.	Students will demonstrate competency by completing projects and presenting their process workflow.
Speaking: the student will demonstrate the ability to articulate him/herself using relevant industry-specific vocabulary.	Evaluated through class discussions and project presentations.
Social Interaction: The student will demonstrate the ability to work individually or as part of a team, including people from a variety of backgrounds, and build consensus.	Evaluate the collaboration and integration of the individual and/or the team during the group project, class participation and/or group presentation

 

GRADING FORMULA

Grade	Numerical	Meaning of Grade
A (Excellent)	4.0	Represents exemplary work. Work consistently exceeds expectations of professional craft and quality.
B+	3.5
B (Good)	3.0	Work meets basic expectations of professional craft and quality.
C+	2.5
C (Satisfactory)	2.0	Work does not meet professional expectations of craft and quality.
D (Unsatisfactory)	1.0

GRADING CRITERIA

The final grade for this course will be determined by the grades each student earns on the following projects and assignments. The grading is done using a numerical point system with each gradable assignment worth a certain maximum number of points. The maximum numerical value that is possible exceeds 100, allowing a student to make up for a weak showing in one area with a stronger final project.

Project/Assignment	Maximum Value
Project: News Article Layout	15 pts.
Midterm Exam	20 pts.
Main Project-Web Site Design & Creation	30 pts
Final Exam	20 pts
Homework	10 pts.
Preparation, Attendance & Participation	10 pts.
Total:	105 pts

 

The numerical grades are then converted to alphabetical grades based on the following conversion chart:

Range in %	Letter Grade	Range in %	Letter Grade
95-100	A	72-77	C
90-94	A-	70-71	C-
88-89	B+	68-69	D+
82-87	B	62-67	D
80-81	B-	60-61	D-
78-79	C+	0-59	F

PROJECT BREAKDOWN

Project: News Article Layout — Using text taken from an online news source the student will layout and code a news site article. The student will replicate the header, footer, articles content including images and advertisements on the original page.

Midterm Exam — Written Exam

Main Project: Website Design or Redesign — Student will research, design and code a website with a minimum of 10 pages worth of content. A personal  portfolio website is not acceptable for this project.

Final Exam: Practical Exam — Student will be given assets and mockups with which to create a web site and will have the duration of the class time to complete the assignment.

 

TOPICAL OUTLINE

	Class 1: Introduction to Class Introduction—Review of Syllabus—Review Instructor Expectations—Redesign vs Create from Scratch—Discuss tools available to students—Discuss Domains & Web Hosting—Review of Web 1 content
	Class 2: Concept and Design Frameworks & Methodologies — Discussion of a variety of web design workflows Homework: Conceptualize the project site. Write up a small description. Offer 3 viable options. Be prepared to present the concepts next week  and have questions looking for feedback.
	Class 3: Page Organization with HTML|Styling with CSS—Pt. 1 Understanding how HTML  elements are used to Organize a page – Understanding Layout Types: Static Width, Liquid/Fluid, Adaptive, Responsive. Understanding how web pages are styled—How to style fonts and text—Typography on the Web Homework: Research similar competitor sites to the 1 you have decided to create or recreate. Be prepared to present the concepts next week  and have questions looking for feedback.
	Class 4: Page Organization with HTML|Styling with CSS—Pt.2 Homework: Build a site map and wireframe the layouts of the site pages. Be prepared to present the concepts next week  and have questions looking for feedback.
	Class 5: Page Organization with HTML|Styling with CSS—Pt. 3 Learning in detail how to position elements on a page. Homework: Continue 2-week assignment. Be prepared to present design in class.
	Class 6: EXAM Homework: 2-week assignment: design and layout of news article
	Class 7: Mastering CSS Selectors & Pseudo selectors Homework: Continue Article layout assignment
	Class 8: CSS in depth. How the cascade works. Using selectors, styling tags, selectors, classes and IDs. Homework: Complete exercises in CSS.
	Class 9: Understanding CSS Inheritance & Specificity
	Class 10:  Understanding Typography on the Web | Web based fonts | Using @fontface
	Class 11: Integrating supplementary technologies | Javascript/JQuery | JQuery Widgets — slideshow, image viewers, etc.
	Class 12: Alternative Layout Techniques | Understanding the place of Tables in Modern Web Design | Understanding Floats Working session | Individual instructor-student review of project.
	Class 13: Studio—Project Review|Attendance is required Final Project Due—80% Complete
	Class 14: Working with Forms | Creating Forms and implementing form validation scripts | Server side PHP Integration
	Class 15: Final Exam | Final Project Due