In 2019 the Berlin chapter of RailsGirls [a free coding workshops initiative] renamed itself to “CodeCurious” to allow participants to explore and study a variety of technologies beyond Rails.

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 specifically asked: What interests you? What do you like to learn today? One attendee answered: We have this Wordpress page and I would like to learn how I can contribute to our website. The other attendee was also interested in websites and how the internet works.

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 proposed building a small Glitch website project. While one attendee loved it right away the other one hesitated as she had spent a lot of time installing Rails.

I explained that sometimes during software development we spend a lot of time on some technology and then figure out that we have to do something else but the time is never wasted. We always gain new knowledge in the process and experience. The attendee was relieved to hear this and thanked me afterwards for these words.

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.

Groundwork

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.

Laptops connecting to routers in Berlin, Frankfurt, London, New York and LA to a server.

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.

One laptop sending a request over the routers to the server.

Then we started talking about how our computer sends a request (e.g. for glitch.com) and how the server would return a response. The response may be simple plain text files of the format HTML, CSS and JavaScript. After receiving these files it is the task of the browser to read these files and decide how to display all the retrieved information on screen.

The route back from the server to the computer sending 3 files.

The very high level explanation was the important ground work to understand what we would learn today and why we would have a look at these 3 file formats/technologies (HTML/ CSS/ JavaScript).

Questions

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.

3 Super Marios walking through the level. One asks: So what is DNS? Also a green tube leading to a room full of coins is displayed. Especially for German speakers the analogy with the Super Mario tubes worked better than the industry terms of “rabbit holes” (or “yak shaving”).

Using Glitch

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.

One attendee said: my image is upside down. How can I change it? I proposed to google it with "CSS rotate image". And so they found some code to use.

The result

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
  • Spoke about JavaScript
  • 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

That’s it. It was enough. It was an empowering experience. If you are a seasoned software developer you may think that we didn’t do much but the big thing we did was demystifying coding: Is HTML coding? Yes, it is and it is accessible because attendees can see results right away. HTML can be the entry point to explore JavaScript, Ruby, Clojure etc.

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?

Thank you

A big thanks to the CodeCurious organizers Ferdous, Amr and Kaja!! Your work means a lot! ♥︎



Creative Commons License

All artworks licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.