Webmaker Party IP Workshop In Tîrgu Mureș Romania

This article is by Gabriel Ivanica, a Mozilla Representative doing some good work in Romania and was previously posted onGabrielIvanica.

This month I held my first Webmaker event in Targu Mures, Romania. The event was part of IP Workshop, an annual summer workshop for students. At the event, more than 120 students, from middle school, high school and college, had the opportunity to learn new thinks and make awesome projects. There were 5 different workshops : robotics, graphics editing, android programming, embedded and web development. Each student had the opportunity to sign up for a workshop based on his knowledge and his preferred topics.

I was invited to hold the Web an HTML5 workshop for beginners. It was meant to be an introduction to web development, exactly what a web-making event should be, so I accepted.

The following weeks I tried to prepare some materials for the event. Sadly I had no idea what to expect. I knew that It should be an introductory course, but to whom ? There were a series of question that I was asking myself.

The course consisted of around 8 days of teaching including working on a project. Each day was split into 2 sessions of teaching, the first one: 2 and a half hours and the second one of 2 hours.The programs was fixed and the same for everyone, all workshops taking place at the same time, different classrooms.

So I had roughly 8 * 4,5 = 36 hours of teaching (including projects). What to do with them? Well I can say that I had some little experience being a mentor in different programs, but I have never experienced teaching an entire classroom or for such a log time.

Webmaker Mentor program

I knew about the Mozilla’s Webmaker project but I was not really involved into it, until this year when I started to read and learn more about the project. I followed the Mozilla Webmaker Mentor Program because I was really interested to became one. Also, I have joined the webmaker group (webmaker@lists.mozilla.org) because I wanted to be up to date with everything about Webmaker, like the future of the project, events around the world and so on.

I have learned a lot about the program, events, the Webmaker Tools like X-Ray Goggles,Thimble or the awesome HTML5 web video editor Popcorn and I’m really glad that I’ve done this.

so… back to the event

I thought for a moment about what to do… I had more than 30 hours of teaching. Should I do this using the Webmaker platform or not ?

Well, Webmaker tools are really great and a powerful way to learn about the web. They give users the opportunity to easily create and/or remix on the web. They are perfect for small events, where everyone gets to work on a project and learns something new about the web, but there’s a but … they are not really meant to be a full walk-through from 0, meaning “what is HTML?” to a “web developer”. I guess you can do great web tutorials on Thimble but, again, the platform doesn’t seem to be made for that. Its not an online IDE but just a great tool to remix and create single pages.

I decided to make my own HTML course, after all I was sure that 30 hours should be more than enough to be able to explain everything about HTML and CSS in depth, lot of time to practice and even some JavaScript. Actually I was hoping for a lot more JavaScript but I was kinda too excited about when I i thought it through and the reality was a little bit different.

As I was saying in the beginning of the post, I was was asking myself some questions:

From where to start ?

Well that’s easy, let’s say the beginning, but how to advance ? Maybe there are a lot of thinks that I consider as being “really easy to understand” but in fact they’re not. How to make this course fun, easy for everyone and why not challenging for those that what to learn more?

What’s the right path to learn about the web, having in mind that you don’t know a think about it?

I’ve done some research to be sure that I will present everything in a logical order:

HTML – structure of a webpage, tags, elements, properties, attributes (almost every single HTML element (not HTML5) was discussed)
CSS – what is CSS, structure, syntax, selectors (tag, id, classes, pseudo-selectors, attributes) CSS relationships (child, direct child, etc), and the most important properties
I insisted a lot on box-modeling, after explaining it I sketched a basic Layout on the blackboard and everyone had to make the layout.
DOM – understanding how webpages are structured in the Browser. DOM tree, DOM nodes, elements, methods
Javascript – syntax, dynamic styling, forms, working with events, basic JavaScript Objects

Do we need a development environment ? What about browsers, development tools ?

From the start, I really wanted from my students to really understand what’s behind those really nice web-pages that we’re surfing daily. Thus, development tools were a must and understanding how to use them was really important, from my point of view.

We used Aptana Studio 3 for coding because it offers a full web-development environment, it is open source, has a nice syntax checker, code highlighting and code completion. Those 3 helped me a lot because students were making lots of syntax mistakes and the IDE helped me most of the time to quickly find the problems.

For testing/running/viewing webpages we used Firefox Aurora, because it offers a lot of great development tools that are not yet available in the release version. I insisted a lot on using the tools and I explained why thy are so important. We used them daily for code inspection, understanding how webpages are built, console logging, live editing, etc.

Because I had some trouble getting demo materials, or exercises to students I decided to use Dropbox to share everything (a shared folder). It saved me a lot of time because almost instantly everyone in the classroom had the materials (demos, templates, web reference links). too bad that I couldn’t lock the writing permissions. Guess what can go wrong with 27 people having read/write access to the same shared folder? A lot of unwanted events!!! Even so, it was a really great idea, and incredibly useful. A constant connection between my computer and student’s computers with the possibility to send files both ways, it was perfect for fast sharing what was needed, easily prototyping a new demo or helping a student by looking over the code he wrote.

The event

At the course I was expecting around 20 students, actually had 27. The teaching part was harder than I expected. Students were between 12 years (7th grade) and 20-21 years ( college ), thus, there were like really, really big difference between knowledge and learning efficiency, Because of that and the fact that I couldn’t help each students (for to long) when there were problems I had to restrict the number and complexity of the courses to something, well less advanced.

I taught web (HTML, CSS, DOM, JavaScript) for the first 5 days, that’s around 20 hours, because on the last 3 days all students had to work on their projects. Students were let to team up to work on the same project to encourage teamwork. On the last day everybody got the chance to present the project (demo and a short presentation) in front of all the students, just 120 .

Firefox and Webmaker swag were the *Starts* of the event . Everyone got Firefox and Webmaker stickers, lenyard, pins. Students having the best projects were rewarded with Webmaker T-shirts or Firefox backpacks.

Don’t forget to check out the list of the projects, below. All of them are made from scratch by students that didn’t know a think about the web before the event started.

Last

The event was really great. I met a lot of people, made a lot of friends, learned a lot about teaching and organizing a Webmaker event. I hope to repeat the event in the near future.

I can say that I feel like an official Webmaker mentor, just have to get my badge .

Link to Moz Event Page and the photos on Flickr.

Buffer