CG-214, FIT Spring 2017
1.5 credits / 1 hour 50 minutes
Instructor: Rebecca Lieberman
Email: [email protected]
Office Hours: TBD by appointment
Room C309C
Section 103: 11:10AM- 1:00PM
Room C409
Course notes: https://github.com/rlieberman/CG214-2017/wiki
[Course Google group] (https://groups.google.com/forum/#!forum/cg-214-spring-17)
This is a group email list that we'll use for class communication in both my sections of CG-214 this Spring.
The purpose of this list is for course-related announcements, discussion and questions. Feel free to share web-related links, articles and inspiration. This is also a great place to ask questions about what you're working on or things you're struggling with technically. You may of course email me individually, but most likely someone else in the class has the same question so it's a great way to learn from each other.
We'll use it as a group across both sections 102 and 103. I will communicate section-specific announcements separately.
This 15-week course introduces students to the basics of web design and programming for the web. Students will work primarily with HTML and CSS to build the structural and visual components of a website, using CSS to integrate interaction and animation. In the second half of the semester, students will be introduced to other libraries for responsive design (Bootstrap) and languages (JavaScript) to create more complex, interactive websites.
By the end of the course, students should be able to:
- Write HTML to create the structural foundation of a website, and use it at an intermediate level
- Style websites with CSS, and make websites dynamic with CSS transitions
- Create a unique website based on their own designs and visual ideas, considering key aspects of visual systems, interaction and user experience
- Debug their work and know how to search for necessary documentation or supplemental information
- Use Github and Github Pages to post homework
- Know the basic technical vocabulary of the front-end web, so that they can pursue more advanced web programming; this includes understanding the relationship between HTML, CSS and JavaScript and being able to read the HTML / CSS of other websites using browser’s developer tools
- Incorporate libraries such as Bootstrap to create responsive designs
- Develop a critical vocabulary for looking at and talking about web experiences
1. Weekly Homework
Each week you’ll have a homework assignment that requires mastery of the material we covered in class the week before. These will be primarily design and technical exercises, with an occasional reading assignment.
Homework assignments must be posted on GitHub by 7pm on Wednesday evenings, so that I have enough time to look them over before class. I will not accept late homework.
2. Presentation: Website Design Review (1 person per week)
Every student will have to give an individual 5-minute presentation on a website that you feel is interesting, groundbreaking and innovative. You’ll talk about the design, concept, messaging, navigation and usability.
There will be at least 1 student presenting per week, depending on the number of students in the class.
Please read the presentation guidelines and sign up for a slot [here] (https://github.com/rlieberman/CG214-2017/wiki/Presentation-Assignment:-Guidelines-&-Signup).
3. Midterm Project (Due Week 8)
Your midterm project will be a website responding to one of the following assignment prompts:
- An interactive self portrait
- A piece of hypertext narrative
- A redesign of an existing site
There will be a set of additional technical requirements you must meet for this assignment, to be reviewed later in the semester.
4. Final Project (Due Week 14)
Your final project will be full-scale website design and implementation that can either be a development of your midterm or a portfolio site for yourself. Unlike the midterm, which is a shorter assignment, we will go through a full design process of sketching, wireframing, designing and then building out this site.
Attendance is mandatory and will be taken at the beginning of each class.
This class meets for 1 hour and 50 minutes per week. We have a ton of material to cover, so come on time. Students who come in later than 30 minutes after the class started will be marked absent.
If you know in advance that you will not be able to attend a class, email me beforehand.
- 3 unexcused latenesses = one absence.
- 3 unexcused absences = one half grade decrease (e.g. an A becomes an A-).
- More than 3 unexcused absences a student will receive a failing grade.
The full academic calendar is here for your reference.
Participation is imperative in this class. You are expected to engage actively in class discussions, presentations and technical demos. We have a lot of material to cover, so please come each week prepared to pay attention and participate actively in class.
Asking questions is highly encouraged. There are no stupid questions; if you have a question, most likely somebody else in the room has the same one.
Students will be assessed on both technical skills as well as critical thinking, creativity and presentation. Grades are based on completion and quality of projects, homework assignments, class participation and attendance. Assignment due dates are hard dates, which means points will be deducted for late assignments and homework.
Final grades in the course will reflect the following:
- Participation and Attendance - 20%
- Weekly homework assignments - 20%
- Website presentation - 10%
- Midterm Project - 20%
- Final Project - 30%
And in general, grades are determined according to the following breakdown:
- A = 90-100%, excellent work
- B = 80-89%, above average work
- C= 70-79%, average or competent work
- D = 60-69%, below average work
- F = 0-59%, unsatisfactory work
Please note: Assignments must be posted on GitHub by 7pm on Wednesday evenings, so that I have enough time to look them over before class. 5% will be deducted per late assignment per day.
As an instructor, and part of FIT, I am committed to maintaining a positive learning environment where people can safely ask questions, engage in thoughtful discussion and challenge themselves both academically and creatively.
- No eating or drinking is allowed in the classrooms or computer labs.
- No email, social media or cell phone use in class.
- Additional lab hours are available in the Library, CC15, CC15A and C220 if these labs are not being used for instructional purposes.
Academic integrity is a serious thing. Please read over FIT’s Academic Honor Code here.
In the world of programming, sharing and repurposing code is often encouraged. It’s fine to look at other people’s code or refer to examples, but be sure to always give credit and acknowledge your sources.
Students with learning, hearing, visual, physical/mobility, and medical disabilities are invited to meet with the staff of FIT-ABLE, the College’s Office of Disability Services in A570 or call 212.217.4090.
Discrimination and harassment are behaviors that are incompatible with the standard of conduct required of a member of the FIT community in the workplace or in any college-related setting, including but not limited to off-campus, college-related events and activities. More information on the FIT website here.
- Syllabus Review and Class Introductions
- Intro to the web: how it all works
- HTML Structure
- Basic HTML Tags
Week 1 slides and homework are here.
- Review HTML Tags
- Intro to Brackets
- Intro to Github
- File Structure and Website Boilerplate
- HTML Images
- Additional HTML Tags
- HTML Media Elements
- Audio
- Video
- iFrames
- HTML Tables
- Working with multiple HTML Pages
- Review: Github and Github Pages
- HTML Forms and Inputs
- HTML Buttons
- Intro to Developer Tools
- Intro to IDs and Classes
- CSS Selectors
- CSS Syntax
- Inline vs External CSS
- Design Topic: Wireframes
- Intro Midterm Assignment
- CSS Color
- CSS Fonts
- Text Properties
- Custom Fonts - Using Google Fonts
- Hover States
- Midterm Meetings
- Introducing CSS Box Model
- Block vs Inline Elements
- Divs and Spans in HTML
- Boxes and layout
- Design Topic: Grids and Visual Systems
- Review CSS Box Model
- Block v Inline
- Border, Margin, Padding
- Box-sizing: border-box
- Intro to positioning
- position property
- z-index
- float
- Review Instagram assignment
- Advanced Positioning
- Intro to Grids
- Review Final Project Assignment
Our main tools in this class will be a text editor (Brackets) and a browser (Google Chrome). You’re free to use additional tools such as Adobe Creative Suite for asset creation, or Sketch (which we’ll learn about later in the semester) for mocking up designs.
- Text Editors: Sublime Text or Brackets (we will use Brackets in class)
- Browser: Chrome
- GitHub
- Adobe Photoshop or Illustrator for creating assets
- Notebook and pen for sketching and note-taking
There is no official textbook for this class. Students interested in textbook resources should consider this HTML and CSS book and this JavaScript and JQuery book. You should also consult the Mozilla or W3 schools documentation.
For an abundant list of additional resources, tutorials and web design inspiration, please visit the course Resources page.