As I have my very own history with Railsgirls [tldr: I joined their workshops when I was close to dropping out of university] I was delighted when I finally found time for coaching, after a longer break.
I am not a big fan of the official tutorial of RailsGirls as it often leaves attendees confused and the risk of running into frustrating bugs is high. So I followed a new coaching style this time and would like to share it to inspire you :)
Before we jumped right in I asked my 2 attendees what they would like to learn…
I think it is important to ask attendees why they joined the workshop so that the coach can build on top of what they know and what they can relate to. We also spoke about their work and projects they were involved in. So it turned out both attendees were interested in web technologies but had not coded before. Therefore, I introduced them to Glitch. A free in-browser website and web app editor. But one attendee had some worries…
I want to clarify here that I gave them the choice to follow the official tutorial building a Rails app or building a website on Glitch. I layed out the pros and cons. After a short discussion they both landed on the second option, also because one of the attendees still had installation issues with Rails.
Before we started coding we spoke about the internet and how it works. On paper I started drawing all devices in front of us which could connect to the internet. I then explained that these devices connect to the nearest router which will then connect to other routers.
I explained that servers are also computers but they are on and reachable all the time. They store the code for the websites and apps and the data.
The attendees asked many, many questions which I all tried to all address briefly e.g.
- What is a browser engine?
- What is DNS and how does it work?
- What would be frontend and backend(which was mentioned in the workshop introduction) in this drawing?
- Which programming languages are used for what?
But because the time at the workshop is limited I had to tell them that diving deeper into a specific topic may be like sliding into a tube in Super Mario, like a bonus level. We could dive deeper into it (“and collect more coins :D”) but sometimes we have to move on to reach our goal to build a small website.
Especially for German speakers the analogy with the Super Mario tubes worked better than the industry terms of “rabbit holes” (or “yak shaving”).
Glitch is amazing because you don’t need to install any additional software. Attendees can use their favorite browser to edit files! Glitch gives you templates for HTML, CSS and JS. So you can start reading some code before writing it. All changes you will make are live deployed at a human readable URL.
What can I say? I LOVE GLITCH 😍
Learning to find information
Encouraging attendees to search for solutions is very important. It empowers them and informs them that there are many resources out there. We searched for almost all the elements, styles and interactions we wanted to add and the attendees liked this way of learning a lot.
In the end we had an awesome new website created. We had used a variety of HTML elements such as headlines, paragraphs and images. We had attached some styling and added some fun interactions such as playing a mysterious sound when hovering over the image.
So what did we do?
- We used the hello-webpage template from Glitch
- Talked about HTML and tags: <html> <head> <body>
- Changed the <h1> tag and noticed the change
- Introduced the MDN web documentation and others
- Added more tags: <h1> <p> <img>
- Changed some styles in the CSS file (colors, font families, image rotation)
- Downloaded a CC-0 music file from freesound.org
- Added a JS event handler for hovering over the image
- Added an event handler for clicking on a form submit to show a gif
- ANSWERED A LOT OF QUESTIONS
- Talked a bit about Web Virtual Reality and a-frame
- Pointed to learning resources such as Free Code Camp
The attendees were more than delighted about what they had learned. They wrote down almost everything we talked about. In the end they were tired but felt really inspired :)
So maybe you want to try this method as well next time?
All artworks licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.