Website basics (HTML/CSS)

Have you ever wondered what the websites you visit every day are really made of? Look past the thousands of cat GIFs and you’ll discover that websites are actually pretty simple: they’re just a bunch of files, like the ones you see in Finder or Windows Explorer. The magical goodness of the internet comes from the way these files interact with each other in your browser to create web pages.

In this hands-on workshop we’re going to create our very own websites from scratch using two of the web’s most essential building blocks: HTML & CSS. If you’re easily intimidated by anything that looks like code, then this workshop is the perfect opportunity to help you get rid of that fear - HTML and CSS can be learned by anyone, and we’re here to help.

Please bring your own laptop (Mac or PC) to the session, and be prepared to look at websites in a completely different way.


Slide deck:

Download this folder: HTML CSS

Create a Dropbox account:


My Projects

Oct 20 2016 Read →

myRIO Robotics Kit

Originally from here. The goal of this project is to lower the "getting started" barrier required to create electronics and robotics projects with National Instruments' myRIO. The myRIO Robotics Kit provides an entry-level system for students who a…

Aug 13 2016 Read →

DI-Wire Computer Stand

A 6’7″ friend of mine came to me asking if I could build a more elegant solution to his makeshift cardboard box computer stand. So I decided to make a stand for him using the DI-wire. I started with brainstorming ideas and settled on a final geometric triangula…

Aug 12 2016 Read →

Bray Lab Storage Rack Dividers

One of the goals for this summer at Bray was to find a way to help organize the material in the machine shop. We noticed the rack near the laser cutter held three disorderly piles of acrylic which were difficult to sift through to find the right piece. To fix this, we decided to create…

Aug 11 2016 Read →

Inverted Pendulum

Anu Gamage, an electrical engineer at Tufts, came to Bray Lab asking for help building an inverted pendulum for research she was doing this summer through Tufts Summer Scholars. She brought in a base that she originally thought she could use, but found that it did not move fast enough for her purpos…

Jul 29 2016 Read →

Play & Education

A gallery of images from David Alsdorf's website and tumblr. (gallery: hero.jpg, tumblr_nvpdvphewr1r0wdhlo1_1280.jpg, tumblr_nvyk2eQGXP1r0wdhlo1_1280.jpg, tumblr_nwaddezqYg1r0wdhlo11280.jpg, tumblr…

Jul 28 2016 Read →

Revitalizing Malden High School’s Workbenches

Jonathan Rooney: One of the largest engineering spaces currently missing from the Tufts campus is a student-accessible wood shop. But over at Malden High School, professors and Tufts students are working to create a fully-equipped wood shop/makerspace in Nedlam’s Workshop, a mere ten-minute drive f…

Jun 30 2016 Read →

Coffee Table

One of the larger projects of the summer is to build a full-size coffee table using the ShopBot CNC Router. This project will allow us to explore all different kinds of machining techniques on the CNC Router. We are aiming to make the table between 40" and 60" long and sin…

Jun 23 2016 Read →

Redesigning Bray Lab's Training Projects

Our team was tasked with redesigning the original Yellow Zone Training Project - the Wall Hook. The wall hook had many advantages: low-cost, small number of parts, and required a wide range of skills to manufacture correctly. But it also had issues: Large number of holes led to long lines at th…

Jun 23 2016 Read →

Othermill Exploration

A mill is a machine used to cut material using a rapidly spinning cutter. The idea is that the cutter removes material in a process known as subtractive manufacturing. The head of the mill moves based on a computer model, removing material until only the desired model is left.

Jun 23 2016 Read →

Maker Tools

Maker Tools is a suite of makerspace technologies that tackle many of the common problems that makerspaces encounter within universities, libraries, and classrooms. These tools are being developed by graduate and undergraduate students at the [Center for Engineering Education and Outreach (CEEO)]…

Jun 22 2016 Read →

Biomimetic Creature

The first team project of this summer is to create a walking robot. These first few days were focused on designing the skeleton with moving legs. Later on in the summer, we will be revising these prototypes and adding electrical components. In order to be able to mimic an animal-like movement, we f…

Jun 16 2016 Read →

Documentation Station

The documentation station I'm prototyping is currently being catered towards/tested in a 5th grade Novel Engineering classroom. Where we are with the Doc Station now... Raspberry pi running python code (currently using, a giant green push button which takes or deletes photos, and a US…

Jun 16 2016 Read →

Baby BB-8

In late January a video of a bluetooth-controlled BB-8 droid created by Angelo Casimiro started circulating around the tech news circuit. Angelo's detailed instructions and wel…

Mar 6 2016 Read →


Bloombot is an autonomous hydroponic gardening system. We designed and built Bloombot for the 2009 RICC competition at WPI. Check out the Bloombot Wiki, [slides from our presentation](…

Mar 6 2016 Read →

MOST: Make, Organize & Storage Tray

(originally from here) MOST (Make Organize & Storage Tray) is a system for helping students and teachers spend more time MAKING than setting-up and cleaning-up when they use a Makerspace. This is specially true when a ful…

Mar 6 2016 Read →

Maker Network status board

I'm interested in building a status board webapp that can use the Maker Network site's API to display each makerspace's upcoming events, who's in each space, and recent photos taken within that space. Each of Tufts' makerspaces would get one of these status boards. Panic Inc. makes an iOS app cal…

Jan 1 2016 Read →

Tufts TIHRA: Tele-operable in-home Robotic Assistant

(Originally from here) We are a group of mechanical engineers from Tufts University, who are working on building a tele-operable soft robotic manipulator and arm to assist a quadriplegic person with daily activities. We are currently involved in the [R…

Dec 24 2015 Read →


Whiteboards and Post-Its are great for organizing thoughts, capturing ideas, and getting everyone on the same page, but in public spaces (like makerspaces) they frequently get erased or tampered with, despite any "Don't Erase!" warnings. For project teams working week-to-week, losing the…

Aug 13 2015 Read →

Jumbo's Maker Studio

**Note: The Maker Studio is currently closed for the fall semester of 2016.** Jumbo’s Maker Studio is an interdisciplinary makerspace on the third floor of the Collaborative Learning and Innovation Complex (CLIC) in the Human Factors Lab. Join our [Facebook page](…

Jul 4 2015 Read →

How can a cloud hold water?

Fourth graders become animated discussing water, clouds, and evaporation. Fourth-graders Jordan and Elea convince their class to ask how a cloud holds water. This is another episode is from the project Responsive Teaching in Science, which was funded by the National …

Oct 1 2014 Read →

Box Projector

During Tufts MAKE's first general interest meeting we had students think of project ideas they'd like to work on. One student was interested in creating an inexpensive portable projector, so we built this shoebox prototype using instructions we found online. The prototype is made…

Mar 29 2014 Read →

Tufts Dash

“All of Tufts at a glance” Year after year, Tufts students are increasingly relying on their smartphones to check their dining hall’s menu, look up the Joey’s schedule, and find Tufts-based events to attend. The problem is that doing so is a big pain using a smartphone’s web br…

Mar 29 2014 Read →

Cardboard Sleds

During Tufts MAKE's first general interest meeting we had students think of project ideas they'd like to work on. One student noticed that many Tufts students used plastic bins or lids as makeshift sleds during the winter, and that they often left behind sharp bits of plastic when those sleds inevit…

Jan 20 2014 Read →

Adaptive Cutting Board

This was a final project for ENP 105 - Assistive Technology in the Fall of 2013. The goal was to design and create an assistive technology device that could help someone either in the workplace or with everyday life. Emily and I were directed to Outside the Lines Studio in Medford, MA, where we met …

Jan 1 2014 Read →

De-lux & Irrelephant

Makers: Quinn Wongkew, Riley Wood, Brook Nichols, Zack Pagel De-Lux and Irrelephant are the Tufts Robotics Club's latest entries into the Trinity Firefighting competition of Spring 2014 held by Trinity College. The goal of the competition is to design and build a robot capable of na…

Jan 1 2014 Read →

The Jumbonator

Jumbonator is a 12lb battlebot designed by Jon Gowa, CAD'd by Will Langford, and built by the two of them. It first competed at Motorama 2009 and later the same year at the Franklin Cup. To our knowledge is the only hobby-weight pneumatic flipper in the Northeast Region. For Motorama 2010 we rede…

Jan 1 2014 Read →

Oreo De-creamer

When our group met with Dan Hannon to discuss the idea of starting a new product and making-oriented club, he suggested that we test out the idea with something small and fun. A [video of an Oreo cookie separator](htt…

Mar 29 2013 Read →

Jumbo Shrimp v1.0

Jumbo Shrimp v1.0 is our new experimental robot. It uses an omni-directional drive that allows it to move in any direction while maintaining the same orientation/heading. Jonah took the lead on this and used cardboard prototypes to test the robot's feasibility until eventually settling on the final …

Jan 1 2011 Read →

Precipitating Pachyderm v2.0

The Precipitating Pachyderm v2.0 is more or less the same as last year's robot but has a new smaller/lighter extinguishing system and totally redesigned electronics. Work was done to filter and calibrate sensors for better precision and to achieve better robustness and reliability. We first took …

Jan 1 2011 Read →


This was a relatively short project in which we designed and 3D printed mini-sumo robots. They will be featured in a Tufts web communications video. Future work lies in iterating the design a few more times and assembling kits to sell to raise funds for more club projects. See the [working wik…

Jan 1 2011 Read →

Precipitating Pachyderm v1.0

This was the Tufts Robotic's Club entry for the Trinity Fire Fighting Robot Competition in 2010. Google Docs Folder with working documents (these are the source documents for what's shown below)…

Jan 1 2010 Read →