At the start of every term, we try to get new students who are working at the DALI Lab onboarded. There's a lot to learn: the DALI Lab project process, design skills, development skills, team skills, and how to collaborate properly using git, slack, etc.
Usually we have a new member orientation which consists of an overview of the lab process and a team building hacktivity (which I'll write about later). However, last term in addition to the orientation we also introduced specific workshops to help with this onboarding.
The goal for this specific workshop was to get both designers and developers up to speed with coding collaboratively. CS classes at Dartmouth by and large don't teach any git flow or much about code version control, so I had to think about how to go through a lot of material quickly, yet enable everyone to feel comfortable with working together on some basic coding.
lets build stuff!
Inspired by http://makethisinanhour.com I decided to do something similar but require groups to make some code changes together and teach them a bit of git and basic html/css in the process.
I threw together a simple but pretty template based on initializr with a bit of parallax using skrollr, and put it up on github with some detailed directions: https://github.com/timofei7/dali-1hr-webdev. The README took by far the longest amount of time to think through.
please don't use textedit
Basic steps of the workshop were as follows:
- In your groups, each person will use git to clone a version of a new landing page template project for your team.
- Then you'll edit some html and css to make this template page reflect what your project is about.
- Each person should add themselves into the team section.
- Then you'll commit and merge your changes of the page with your teammates and push your changes to the git repo.
- Then see your page hosted on github.io automatically.
I had planned on going through all the steps myself in front of them, but once they all got their individual repos they were off and just shouted out questions when needed. It turned out better than expected. Students who were familiar with certain things like coding or photoshop (some studented wanted to make header images) helped those who weren't. It was a great example of the awesome collaborative and supportive environment that exists here.
one of the groups went all out with the design elements and added in some animate.css
Lot of positive feedback and overall throwing the groups in to collaborate using git early had very positive effects on the outcomes of the rest of the term.
Lots of possible modifications/future work for this: Chrome Developer Tools needs to be mentioned, Homebrew would have been better than installing git through the github app (but GitHub app sets up author name and email automatically).