This semester I’m teaching 6.813 User Interface Design and Implementation at MIT, as an instructor.
Many of the assignments of this course include Web development and the course included two 2-hour labs to introduce students to these technologies. Since I’m involved this year, I decided to make new labs from scratch and increase the number of labs from 2 to 3. Even so, trying to decide what to include and what not to from the entirety of web development in only 6 hours was really hard, and I still feel I failed to include important bits.
Since many people asked me for the slides on Twitter, I decided to share them. You will find my slides here and an outline of what is covered is here. These slides were also the supporting material the students had on their own laptops and often they had to do exercises in them.
The audience for these slides is beginners in Web development but technical otherwise — people who understand OOP, trees, data structures and have experience in at least one C-like programming language.
Some demos will not make sense as they were live coded, but I included notes (top right or bottom left corner) about what was explained in each part.
Use the arrow keys to navigate. It is also quite big, so do not open this on a phone or on a data plan.
If the “Open in new Tab” button opens a tab which then closes immediately, disable Adblock.
From some quick testing, they seem to work in Firefox and Safari, but in class we were using an updated version of Chrome (since we were talking about developer tools, we needed to all have the same UI), so that’s the browser I’d recommend since they were tested much more there.
I’m sharing them as-is in case someone else finds them useful. Please do not bug me if they don’t work in your setup, or if you do not find them useful or whatever**.** If they don’t tickle your fancy, move on. I cannot provide any support or fixes. If you want to help fix the issue, you can submit a pull request, but be warned: most of the code was written under extreme time pressure (I had to produce this 6 times as fast as I usually need to make talks), so is not my finest moment.
If you want to use them to teach other people that’s fine as long as it’s a non-profit event.
[gallery columns=“2” size=“medium” ids=“2756,2757,2755,2754”]