Programming Labs

The weekly programming labs will help you get up to speed with the fundamentals of front-end web development and then will give you more hands-on practice with the tech stack for developing dynamic web-based visualization.

Each lab will consist of a 1-hour in-person hands-on activity (held on Thursdays, 3-4pm in 1-190) and then a 2-hour take-home activity to be completed asynchronously. Note: if you are unable to attend the synchronous lab session, you may complete the full 3-hour lab entirely asynchronously. But, we strongly encourage everyone to attend the in-person component to get the most out of the material (especially if you do not have significant experience with frontend web development).

Labs will be graded on a check-off basis for completion. You can earn your check-off by demonstrating your working lab to a TA at any office hour ahead of the next week’s lab.

If you are taking the lab portion of the class, you are strongly encouraged to sign up for 6.S081 (undergraduate) or 11.S942 (graduate) for 3 additional units of credit to reflect the anticipated workload. You grade in these 3 units will match your grade for the overall class.

These materials were primarily developed by Lea Verou.

How to read these labs

In addition to the text, each lab contains certain callouts/admonition blocks. Here’s what they mean:

This is advice for how to do things better. You don’t need to follow it, but it will help you if you do.

This is a warning about something that could go wrong.

Files you will be editing in a given section.

This explains why things work a certain way, in case you were wondering. It’s not necessary to understand this to complete the lab.

This is important and you should pay attention to it.

This is a placeholder for a work in progress or a section that will be filled in later. Check back soon!

This warns you about a certain caveat you could face. Ignoring these will come back to bite you!

These are ideas for further exploration or things you might want to try if you want to go further. You don’t need to do these to complete the lab.

Any type of note that doesn’t fit into the previous categories. This could be:

  • Additional context or information that you should not ignore (whereas an “FYI” block is intended more for information you could ignore).
  • Information about future steps or things you should remember for later.
  • Important information which only applies to some cases.

Table of contents