SYLLABUS – Spring 2017

DGMD E-27 (formerly “Beyond the Basics of Front-End Web Design”)

Last Updated: 1/19/17 to add grading scale

Course Description

With HTML and CSS mastered, this course features a comprehensive exploration of responsive design. Students build their own layout grids, explore media queries, and understand proper responsive image management. Students also explore Sass, a CSS preprocessing language that combines logic and variables with CSS to create dynamic styling. Students also explore UI Kit, a responsive design framework that incorporates Sass and jQuery, for building dynamic web pages. Additional topics include advanced CSS topics like CSS animation and SVG.

Course Prerequisite

DGMD E-20, or permission of instructor. Permission is granted based on a pre-class assignment. If you feel you can complete this assignment adequately, you can join this class.

What is the course prerequisite assignment?

Instructors

Jen Kramer, Instructor
Email: jkramer@fas.harvard.edu
Twitter: @jen4web
Facebook: www.facebook.com/webdesignjen

Kourtnie J. Sanders, Teaching Assistant
Email: kourtniesanders@g.harvard.edu 

Contacting the instructors

Please email Jen and/or Kourtnie with any personal issues that are affecting your class experience or with any information you do not wish to share with the rest of the class. Example: death in the family, severe illness, grading issues, etc.

Please do NOT email Jen or Kourtnie with questions about the week’s material or assignment questions. It is better to ask these questions in the forum for the class, where others can benefit from the answer as well. (See “How Class Works” below.)

Class Objectives

• Create a responsive design from scratch, using your own grid system, media queries, and responsive images.
• Explore responsive typography, and understand its impact on excellent web page design and usability.
• Introduce UIKit, a responsive design framework, and understand how tools like this impact modern web development workflows.
• Understand Sass, the CSS preprocessor, and explain how Sass streamlines web development processes.
• Look at the latest cutting edge CSS specifications like Flexbox and SVG.
• Look to the CSS future with new technologies not widely supported today, including CSS Grid and CSS animation.

Lecture Time

Offered wholly online. New lectures will be posted each Tuesday, sometime during the day.

How Class works

1. This class is wholly online, which means there is no synchronous portion of the class. You may do the work whenever you wish.
   
   That having been said, this is a technology class. Do not wait until the last minute to get your work done! In technology, things go wrong all the time, so anticipate this and aim to have your assignments complete a day early... just in case.
   
   Also note that the work is broken into weekly chunks because it’s expected it will take you a week to complete. You can’t cram it all into the 2 days before the assignment is due.
2. For reference, you may use Boston or New York as the city for calculating time and date. The time zone here is US Eastern time. Please refer to http://www.timeanddate.com/worldclock/ (Links to an external site.)for your local time and date for when assignments are due. All dates and times posted in class refer to Eastern time, and you should adjust your time and date accordingly.
3. We have students from around the world in class. We try to make lectures as clear as possible, but sometimes we are not clear to those who are outside the United States. Please ask questions if the lectures or assignments are not clear. This helps us to improve, and we want you to succeed in class!
4. A new class will be posted every Tuesday. When the new class is posted, you will find an entry describing exactly what you should do and what you need to turn in. If you have questions on what you should be doing, what the assignment is, when things are due, ask!
5. There will be a discussion forum posted every week where you can ask questions about the week's assignment, interact with other classmates, and answer each other's questions. 
6. We anticipate that there will nearly be 100 students in this class. Please, do not email Jen or Kourtnie with questions about the assignment, what you should be doing, something you didn't understand in the reading, etc. Post these questions in the forum so we can ALL answer them. We'd rather answer your question once than individually for each student.
   
   We will occasionally ask you to post emailed questions in the forum where they can be answered, rather than answering them by email.
7. This having been said, please email if you have personal issues that will prevent you from completing assignments, pertain to your grade, or contain other personal information you don't wish to share with the class. 

   Jen's email is jkramer@fas.harvard.edu
   
   Kourtnie's email is kourtniesanders@g.harvard.edu 
   
   

8. Be warned: each lecture builds on the last one. If you're late turning in an assignment, catch up as fast as you can. If you don't understand something, be sure to ask in the forum. DO NOT GET BEHIND. Complete the weekly homework assignments and you should have no trouble keeping up.

If you have any questions on expectations for this class, please ask!

Grading

94-100

A

93-90

A-

89-87

B+

86-84

B

83-80

B-

79-77

C+

76-74

C

73-70

C-

69-67

D+

66-64

D

63-60

D-

Below 60

Failing

 

Graded assignments

There will be four projects in this course, as described below in the course outline. A detailed description of each project will be distributed at least 2 weeks before the project is due. Each project is worth 25% of your grade. This includes the last project, which is considered the “final” project.

Graduate students will have additional work or additional requirements to complete for each assignment.

Homework assignments

Each week, you will be offered suggestions for ungraded homework assignments. There is no place to submit these assignments, nor will they be viewed or examined by the instructor or the teaching assistant. These small, interim assignments will test your knowledge of the weekly lecture, and in many cases, they will be reusable as elements in the project for the unit. It is strongly recommended you complete the assignments. You will find that if you wait for the end of a unit to build the final project, you will have gaps in your understanding if you simply listen to lectures without practicing the skills that are taught.

Grading procedures

Projects are due on the dates specified in the course outline by 11:59 PM Eastern time that day. It is expected that you will turn the assignment in on time.

Grades will be posted online in Canvas, our online learning environment.

You may turn in assignments 1, 2 or 3 late. (Assignment 4 cannot be late as it is the end of the term.)

"Late" means 3 days late. All assignments are due on Fridays, so the "late" date would be the immediately following Monday at 11:59 PM.

When your assignment is late, we note it in Canvas. There is no penalty for your grade for this late assignment. However, you may only turn in one assignment late. If another assignment is late, it will receive a zero.

If you are dissatisfied with a grade you receive on assignments 1, 2, or 3, you may resubmit the assignment for review. This resubmission must occur within 3 days of receiving your grade.

You may have one regraded assignment per term. Generally, regrades occur because students do not follow directions about how to turn in the assignment. 

Regraded assignments are recorded in Canvas. There is no penalty for your regrade. However, you may only have one per term. 

Regrading is not available for the fourth (“final”) project due to grade submission timing.

Turning in assignments

Your assignment will generally be in the form of a web page or several web pages. You will post these in your web hosting environment (directions provided in the first class). You will then paste the URL for the home page of your assignment in a text file and upload this to the assignment box for this course. Detailed instructions will be provided for your first assignment.

Academic Honesty

Once again, the purpose of this course is to teach you the fundamentals of digital media design and development. This means that copying the files of other students and submitting them as your own work is not only a violation of school academic policies but a real shortchange to your ability to learn what you need to learn.

We fully expect that there will be no issues in this area. We ask that you help keep us out of situations where we might need to take action regarding plagiarism, cheating and other acts of poor academic integrity. 

You are responsible for understanding Harvard Extension School policies on academic integrity and how to use sources responsibly. Not knowing the rules, misunderstanding the rules, running out of time, submitting "the wrong draft", or being overwhelmed with multiple demands are not acceptable excuses. There are no excuses for failure to uphold academic integrity. To support your learning about academic citation rules, please visit the Harvard Extension School Tips to Avoid Plagiarism, where you'll find links to the Harvard Guide to Using Sources and two, free, online 15-minute tutorials to test your knowledge of academic citation policy. The tutorials are anonymous open-learning tools.

Accessibility

The Extension School is committed to providing an accessible academic community. The Disability Services Office offers a variety of accommodations and services to students with documented disabilities. Please visit www.extension.harvard.edu/resources-policies/resources/disability-services-accessibility for more information.

Textbooks & Commercial training video

There is no required textbook for the class. It’s possible that you could complete this course simply by watching the lecture videos and looking up your own resources online. However, a book will help to fill in gaps and supplement the lecture videos. I encourage you to pick as many books as match your learning style.

Keep in mind we are learning HTML5 and CSS3, and you probably want to get a recently published book. I recommend a book published no earlier than 2014, and preferably in 2015 or this year, for the most recent information.

I will recommend other books and resources as we continue through the semester. None of the books are required, but you may find them helpful for reference and additional help.

You will also be given a subscription to lynda.com for the duration of this course. These online training videos are also there to supplement the lecture material. You can register for this resource at lynda.harvard.edu.

You may also find the Safari library from O’Reilly to be of help. http://proquest.safaribooksonline.com.ezp-prod1.hul.harvard.edu/

You will need a HUID and PIN to access the O’Reilly resources.

 

Course Outline (subject to change)

Class #/date	Agenda
01- 01/24	Review Class will review principles from DGMD E-20, including floats, clears, positioning, advanced selectors, and CSS3 effects.
02-01/31	Responsive Design: Grids Responsive design is defined by 3 characteristics: layout grids, media queries, and images that resize. This lecture covers grid creation, as well as working in relative size units (like em, rem and %, as well as the new viewport units).
03-02/07	Responsive Design: Media queries and responsive images This lecture takes our grid from the previous week and makes it responsive by adding media queries. We will also explore how to manage images using Picturefill, a JavaScript-based polyfill for the <picture> element. We'll also look at responsive forms.
04-02/14	Getting Started with Sass part 1 Sass, Syntactically Awesome Stylesheets, is emerging as the most popular CSS preprocessor for keeping your CSS code DRY (don't repeat yourself). We will start looking at Sass, including configuring your computer, variables, nesting, and extends.
02/17	Assignment 1: Responsive Design  You will create a website with responsive design.
05-02/21	Getting Started with Sass part 2 We continue with Sass, including mixins and if/else statements.
06-02/28	Working with Bourbon, a Sass framework We'll look at Bourbon, a general Sass frameworks, and explore how this can enhance your Sass process.
07-03/07	Responsive Design and Sass: Next level With the basics of responsive design mastered, we'll look at responsive typography and choosing colors for our site via some Sass code.
03/14	Spring break, no lecture
08-03/21/16	UIKit part 1 UIKit is the #3 responsive design framework on the market today, after Foundation and Bootstrap. In part 1, we'll look at some of the framework's basic characteristics ("Core"), like the grid system, styling, text effects, navigation bars with hamburger buttons and dropdowns, responsive forms, and more. We'll work with the most recent stable version of UIKit.
03/24	Assignment 2: Sass, Bourbon, and more You will create a website leveraging Sass and Bourbon, as well as choosing colors with Sass and using responsive typography.
09-03/28	UIKit part 2 In week 2 of UIKit, we'll look at some of the Components that come with UIKit, including parallax and dynamic grids, lightbox, sliders, and much more.
10-04/04	Working with Sass in UIKit Sass is used in UIKit, so we'll explore Sass's integration here. There's lots to learn by looking at their code, and this will help you easily customize your Foundation site.
11-04/11	Flexbox Flexbox is part of the future of web layouts. Flexbox is almost ready for regular use. Look at these new spec and understand why they are way better than floats and positioning.
04/14	Assignment 3: UIKit Build a website in UIKit, using Sass for customizing the styling.
12-04/18	CSS Grid Systems The new CSS grid system is part of the future of web layouts. The grid system is cutting edge and not quite ready for prime time, but it's exciting to explore. Look at this new spec and understand its positives and negatives.
13-04/25	CSS animation CSS animation is part of the new CSS3 spec. Still leaving much to be desired as far as browser support, there are some useful animation properties here to leverage. We'll look at a few examples.
14-05/02	SVG Guest lecture with Ed Hebert. Understand SVG-specific 'CSS-like' properties (like 'fill', 'stroke', etc.). Unlike raster images, individual components of an SVG can be modified and animated using CSS. Learn how you can build those animations right into the file itself, to make a self-animating vector that can live on its own.
05/12	Assignment 4/Final Project Build a final website incorporating CSS animation, Flexbox, Grid, and SVG.