Class times: Monday & Thursday, 5:30-6:45pm. 4 credits
Room: JMH-342
Instructor: Ruta Kruliauskaite
Email: rutak.fordham@gmail.com
Office hours: Monday after class: 6:45-7:45pm. By appointment for 10min slots, sign up sheet.
Course syllabus: https://github.com/rutaitp/CISC-2350-R01-2017/
Course notes: https://github.com/rutaitp/CISC-2350-R01-2017/wiki
Course Slack channel: cisc-2350-r01.slack.com
To join Slack channel follow this link. If you have trouble joining, send me an email and I’ll send you an invite.
This is a group that we will use for class communication.
The purpose of this group is for course-related announcements, discussion and questions. This is 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.
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 build a fully functional website to share what they are mostly passionate about. To be more specific 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
- Know basics how to use JavaScript to control the behavior of a website
- 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
- Be aware of upper level tools that are available in real web development world (different libraries, web hosting, etc.)
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 or watch video assignment.
Homework assignments must be posted on GitHub by 6pm on Wednesday evenings for me to be able to look them over before class. I will not accept late homework.
2. Presentation: website review (2 students per week)
Every student will have to give an individual 5-7 minute presentation on a website that you feel is interesting and innovative. You will talk about the concept, structure, design, usability and technology behind it.
There will be 2 students presenting per week.
Please read the presentation guidelines and sign up for a slot here.
3. Midterm (Due Week 7)
The midterm project will be a website responding to one of the assignment prompts (for example, your interactive self portrait, redesign of an existing site, a piece of hypertext narrative).
There will be a set of additional technical requirements students must meet for this assignment - they together with assignment prompts will be reviewed later in the semester.
Midterm grading rubric can be found here.
4. Final project (Due Week 15)
The final project will be a full-scale website design and implementation that can either be a development of a midterm or a completely new website (e.g. portfolio site for yourself). Unlike the midterm, which is a shorter assignment, students will be required to go through a full design process of sketching, wireframing, designing and then building out this site. Exact requirements students must meet for this assignment will be reviewed later in the semester.
Attendance is mandatory and will be taken at the beginning of each class.
This class meets for 1 hour and 15 minutes twice per week. Students are expected to come on time, because there is a lot of material to cover. Students who come in later than 20 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 and explain why.
- 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 mandatory in this class. Students are expected to engage actively in class discussions, presentations and technical demos. Students must 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 6pm on Wednesday evenings for me to be able to review them before class. 5% will be deducted per late assignment per day.
When we’re looking at code together or doing an in-class exercise, students will need to be working using a computer. However, when your classmates are presenting and during group discussions, you are expected to refrain from using the computer. Additionally:
- No eating or drinking is allowed in the classrooms or computer labs.
- No email, social media or cell phone use in class.
- Since we’re meeting for 1h 15min only, there most likely won’t be any break. Try to let me know beforehand if you may need to leave a class.
- It’s possible for you to use Computer Lab (330, 331 rooms) for extra work if these labs are not being used for instructional purposes. No signup needed.
Academic integrity is a serious thing. Please read over Fordham University’s Academic Honor Code here.
Fordham University’s policy against plagiarism and copying is very strict; however, in the world of programming, sharing and repurposing code is often encouraged. It’s ok to look at other people’s code or refer to examples, but be sure to always give credit and acknowledge your sources.
Feel free to speak to me in person about special accommodations you may need.
Discrimination and harassment are behaviors that are incompatible with the standard of conduct required of a member of the Fordham University 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 Fordham University website here.
Week1, 8/31 (Thursday): Intro to the Web
- Syllabus review & class introductions
- Intro to the web: how it all works? What is programming?
- Overview of different languages
- Intro to Sublime
Week 1 slides and homework are here.
Week2, 9/6 (Wednesday) & 9/7 (Thursday) / Wednesday follows Labor Day Monday’s schedule: Intro to HTML: structure, tags & images
- Review Sublime
- HTML structure
- HTML tags
- File structure
- HTML Images & linking
Week3, 9/11 (Monday) & 9/14 (Thursday): HTML Media Elements and iFrames, Multiple HTML Pages
- Review: HTML tags & images
- Intro to Github: participating in open source community
- HTML Media Elements:
- Audio
- Video
- iFrames
- Working with multiple HTML Pages
Week4, 9/18 (Monday) & 9/21 (Thursday): HTML Tables, Forms, Inputs and Buttons
- Review: Github & intro to Github pages
- HTML Tables
- HTML Divs and Spans
- HTML Forms and Inputs
- HTML Buttons
- Intro to Developer Tools
- Intro to Midterm Assignment
Week5, 9/25 (Monday) & 9/28 (Thursday): Introduction to CSS
- Intro to IDs and Classes
- CSS Selectors
- CSS Syntax
- Inline vs External CSS
- Midterm meetings
Week6, 10/2 (Monday) RESCHEDULED TO 10/5 & 10/5 (Thursday): CSS Color & Fonts
- CSS Color
- CSS Fonts:
- Text Properties
- Custom Fonts - Using Google Fonts
- Hover States
- Midterm meetings
Week 7, NO MONDAY CLASS-COLUMBUS DAY & 10/12 (Thursday): MIDTERM PRESENTATIONS
Week 8, 10/16 (Monday) NO CLASS & 10/19 (Thursday): Introducing the CSS Box Model
- Introducing CSS Box Model
- Block vs Inline Elements
- Divs and Spans in HTML
- Boxes and layout
Week 9, 10/23 (Monday): & 10/26 (Thursday - CLASS WILL BE RESCHEDULED): CSS Layout & Grids
- Review CSS Box Model: Block vs inline, border, margin, padding, box-sizing: border-box
- Intro to positioning: position property, z-index, float
- Advanced Positioning
- Intro to Grids
Week 10, 10/30 (Monday) & 11/2 (Thursday): More CSS
- CSS Transitions
- CSS Animations
- Styling Forms & Images
- Intro to Responsive Design
Week 11, 11/6 (Monday) & 11/9 (Thursday): Introduction to JavaScript
- Overview: What is JavaScript and what it can do
- Server-side vs. client-side
- Syntax
- Statements & Comments
- Variables
- Operators
- Arithmetic
- Assignment
- Data Types
Week 12, 11/13 (Monday) & 11/16 (Thursday): JavaScript Functions & Objects
- Review: Introduction to JavaScript
- Functions
- More of variables
- Objects
- Arrays
- Events
- DOM
- Intro to Final project assignment
Week 13, 11/20 (Monday) & NO THURSDAY CLASS - THANKSGIVING: JavaScript Logic
- Conditional statements (If, else, else if)
- For & while loops
- Final project meetings
Week 14, 11/27 (Monday) & 11/30 (Thursday): Time, Objects, The Canvas & Looking Ahead
- Time
- The Canvas
- Multiple JavaScript files
- Overview of different JavaScript libraries: p5js, express, etc.
- Design process & looking ahead
Week 15, 12/4 (Monday) & 12/7 (Thursday) - FINAL PROJECT PRESENTATIONS
Our main tools in this class will be a text editor (Sublime Text) and a browser (Google Chrome).
- Text Editors: Sublime Text
- Browser: Chrome
- GitHub
- Adobe Photoshop or Illustrator for creating assets
- Notebook and pen for sketching and note-taking
Tutorials, readings and additional resources will be posted on weekly class notes. 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 for documentation.