Course Syllabus

DGMD E-20: Modern and Mobile Front-End Web Design 1

Last Updated: 8/29 to reflect our newly minted PhD for TA Dr. Erin Schroeder!!! Woo woo!!!

Course Description

This course dives deeply into HTML5 and cascading style sheets (CSS), so students can better understand their power and flexibility in designing web pages. Students learn about advanced selectors, including general and adjacent sibling selectors, attribute selectors, pseudoselectors, pseudoelements, and CSS specificity and the cascade. Methods for layout are covered extensively, including floats, positioning, Flexbox, and CSS Grid. Students also build their own layout grids, explore media queries, and understand proper responsive image management. The course explores animation and its use in user interfaces, including CSS transforms, CSS animation, and scalable vector graphics (SVG), including filters for CSS. Units on accessibility and forms are included.

Course Prerequisite

CSCI E-12 or permission of the instructor. Instructor grants permission if you can complete Assignment Zero. See: What should I know coming into class?

You should understand HTML5 and CSS fundamentals entering this course. The following lynda.com courses are excellent for learning or review:

• HTML Essential Training
• CSS Essential Training Part 1

Instructors

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

Dr. Erin Schroeder, PhD, Teaching Assistant
Email: erinmarieboyle@gmail.com

Contacting the instructors

Please email Jen and/or Erin 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 and Erin with questions about the week’s material. 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

• Understand the HTML5 standard and use this successfully in building a website, including new standards like canvas and new HTML5 form elements.
• Understand the CSS3 standard, including advanced selectors, specificity, layout, and new features like rounded corners, RGBA, and multicolumn layouts.
• Thoroughly understand responsive page layouts, including layouts using floats, positioning, Flexbox, and CSS Grid.
• Learn about Scalable Vector Graphics (SVG), CSS Transforms, CSS Animation, and CSS and SVG Filters. Compare and contrast their usefulness and processing power with what's available in JavaScript.

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. Many have tried... 
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/ 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 and Erin 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
   Erin's email is erinmarieboyle@gmail.com

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

• Assignment 1 is a series of 3 high-stakes quizzes, for a total of 20% of grade (or 6.67% of your grade per quiz).
• Assignments 2-4 are websites in which you create web pages. Each assignment is worth 20% of the grade.
• For weeks 4-14, you will have a low-stakes weekly exercise to complete. The total of all exercises is worth 20% of your grade, or a little less than 2% of your grade for each quiz.

Graduate students will have enhanced requirements for all projects.

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.

Late assignments

You are offered 1 late pass for the term. You may use this on assignment 1a, 1b, 1c, 2, or 3.

"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.

Late exercises

Late exercises are not accepted. These are due on Monday nights. If you miss one, you won't kill your grade, so please don't stress over this. Remember that turning in something is typically better than turning in nothing.

Turning in assignments

Assignments 2-4 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.

Regrading of assignments

If you are dissatisfied with a grade you receive on assignments 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 assignment 1a, 1b, and 1c, as this is a test more than a project.

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

Regrading of exercises

Exercises are not available for regrading.

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 (www.extension.harvard.edu/resources-policies/student-conduct/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 (www.extension.harvard.edu/resources-policies/resources/tips-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 2017, and preferably in 2018 or this year, for the most recent information.

I will recommend other materials as we continue through the semester. None of the materials are required to purchase or read, but you may find them helpful for reference and additional help.

All enrolled students have a subscription to lynda.com for the duration of this course. These online training videos are also there to supplement the lecture material. You may access this resource with your Harvard Key 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 Harvard Key to access the O’Reilly resources.

Course Outline (subject to change)

Class #/date	Agenda
01- 09/03	Review of HTML5 and CSS This is one fast week of review. If you are not familiar with the principles introduced in this first lecture, this is not the class for you! It is assumed you know this material coming into the course. Getting started: Review of Syllabus and other materials Grading and attendance policies Download your editor (VSCode) for creating web pages Purchasing and configuring a domain name and web hosting Introduction to FTP and posting your page on a server REVIEW: Introduction to the specific HTML5 tags: header, footer, aside, section, nav, figure Learn about W3C validation and how to use this tool for fixing problems with your HTML Block and inline HTML tags Browser compatibility issues with HTML5 tags and workarounds Classes, IDs, styling HTML tags, external stylesheets ASSIGNMENT 1A: Semantic markup, HTML/CSS review
02-09/10	Understanding selectors When you need to style something on a web page, you don’t necessarily need to add another class or ID. This lecture introduces you to many types of selectors including: Family relationships Universal selector Descendant combinator Child combinator General sibling combinator Adjacent sibling combinator Attribute selector Pseudo-class Pseudo-element ASSIGNMENT 1B: Selectors
9/13 11:59 PM	Assignment 1A due
03-09/17	Understanding inheritance and the cascade Think you understand what style is taking precedence? How about what styles affect the current element you’re examining on the page? What is inheritance and how exactly does it work in CSS? What is the cascade? What overrides what? How is specificity calculated? ASSIGNMENT 1C: Specificity
9/20 11:59 PM	Assignment 1B due
04-09/24	Forms We look at the proper way to code an HTML5 form. This include accessibility features, use of the <label> tag, and some of the new HTML5 attributes and data types. PARTICIPATION QUIZ
9/27 11:59 PM	Assignment 1C due
05-10/01	Accessibility: Guest lecture with Jesse Dugas Accessibility is often mentioned but little understood. Identify and understand different features of HTML5 and UI design to aid in accessibility and understand its importance -- not just to those with disabilities, but to search engines as well! PARTICIPATION QUIZ
06-10/08	Layouts part 1: Box model and floats Over the next 6 weeks, we will look at laying out web pages in detail. We will start with understanding the box model and the current use of floats in web page design. Box model review and new ways of dealing with the box model Floats and clears, including various clearfix methods PARTICIPATION QUIZ
07-10/15	Layouts part 2: Positioning, display property, CSS columns This week we look at some older methodologies for laying out web pages. You will find elements of this useful as we move to more modern layout methods. Absolute, relative, and fixed positioning The display property, visibility, and normal flow Creating columns with CSS3 PARTICIPATION QUIZ
08-10/22	Layouts part 3: Flexbox  Flexbox is the current standard for laying out web pages -- even though its use is a hack. Learn about Flexbox, its properties, and how to lay out an initial grid system using Flexbox. PARTICIPATION QUIZ: Play a game!
10/25	Assignment 2 (20% of grade) Covers correct use of floats and clears, positioning, forms, accessibility, display, and columns.
09-10/29	Layouts part 4: Flexbox, 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 the <picture> tag and how to make responsive background images. PARTICIPATION QUIZ
10-11/05	Layouts part 5: Introducing CSS Grid The new CSS Grid specification is the future of web layouts, and it's nearly ready to use on all websites. Look at this new spec and understand its positives and negatives. Grid overview Layouts using line numbers Layouts using spans PARTICIPATION QUIZ: Mondrian Painting
11-11/12	Layouts part 6: CSS Grid, integrating Flexbox Continue learning common Grid designs and integrate Grid with Flexbox. Nested grid Grid offsets Grid area syntax Integrate Grid and Flexbox PARTICIPATION QUIZ
12a-11/18	CSS Transforms Using CSS, we can change the look of elements using transforms, including rotate, skewing, translating, scaling, and moving. Transforms may happen in 2D or 3D.  PARTICIPATION QUIZ
11/22	Assignment 3 (20% of grade) Assignment covers proper use of Flexbox and Grid in coding a website.
12b-11/25	CSS  Animation Next, we'll look at how to combine some of these transform properties with an animation timeline. CSS animation will be compared with JavaScript animations. PARTICIPATION QUIZ
13-12/2	CSS Filters and CSS Shapes Filters are available for standard CSS elements. Learn more about these types of filters, and apply them to your work. Shapes have to do with shaping text around page elements - and not always in a box. How is this possible where everything in your layout is the box? That's the point of Shapes! PARTICIPATION QUIZ
14-12/9	SVG Scalable vector graphics (SVG) are a new format that may be embedded in HTML. 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. PARTICIPATION QUIZ
12/19	Assignment 4 (20% of grade) Demonstrate transforms, animation, SVG, filters, and shapes.