On 5th November, I along with the Co-Leads of Firefox at UoK Firefox Club Ebaad Ahmed, Salman Elahi, Kamran Tariq and the Club Lead of Firefox at SSUET Firefox Club Maqbool-ur-Rahim Khan held a Web Development Workshop at Umaer Basha Institute of Technology in University of Karachi. This whole workshop was the idea of Ebaad, Salman & Kamran and it was mostly conducted by Ebaad and Maqbool. Students from 1st and 2nd year of UBIT-KU were invited for this session.
The purpose of this workshop was:
- Introduction of the Firefox Student Ambassadors Program
- Teach students the basics of HTML5, CSS3, JavaScript
- Show them how to convert a sample code written in above mentioned languages into an app for different mobile platforms, namely Firefox OS, Android and Windows Phone.
I started the session by telling students about:
- Mozilla (History and Mission),
- Firefox (Desktop, Android, iOS),
- Firefox OS,
- Mozilla Learning Network and it’s Tools (Thimble, X-Ray Goggles, Webmaker App for Android),
- Contribution Opportunities (Localization, QA, SUMO, MDN, MozStumbling, etc.)
- Firefox Student Ambassadors program (Firefox Clubs, Campaign Challenges, App of the Month Contest, Events, Recognition)
Then I forwarded the session to Ebaad. Ebaad started by introducing the basic concepts of Web Development. To explain about developing websites with HTML, CSS, JavaScript he used the following metaphor:
“When building a house you need to create it’s structure, to make the house beautiful you need to paint the house, to add utilities you need to add some tools and make sure they are working properly like Lights, Fans, etc. Similarly, in order to develop a website you need to create it’s structure using HTML, to make the website beautiful you need to add CSS for styling, to add different features in the website and make sure they are working correctly you use JavaScript.”
Ebaad Ahmed
From there on, Ebaad and Maqbool covered various Tags, Elements, Functions and Classes used in HTML, CSS and JavaScript respectively.
Maqbool-ur-Rahim Khan
The students were trying the code step-by-step as the workshop progressed on the lab’s PCs and were very attentive as shown below.
Now it was time to convert a sample code into apps for different mobile OS. Maqbool continued the session by telling the students that for Firefox OS, first they need to create the App Manifest file. He shared details about how to create the file and what information about the app are necessary to be shared in this file using the MDN article. Unfortunately at this time, the WiFi device stopped working. Luckily we had already opened all the links which we would need during the session in a browser earlier. So he followed this MDN article to show how to submit the app into the Firefox Marketplace. Finally, Ebaad concluded the session by showing how to convert the code into apps for Android and Windows Phone. He uses the Adobe Phonegap website to accomplish this task. But as the net was down, we were not able to upload the code for conversion.
At the end, Ebaad asked the students to join the Firefox Student Ambassador program and become more involved in the FSA program to host, attend & participate in the Firefox at UoK Firefox Club’s more upcoming activities & events in the next semester. All attendees were given the FSA Stickers. He also encouraged the students to dive deeper into Web Development by learning HTML, CSS, JavaScript on W3Schools. He also mentioned names of some Ebooks and posted their links on the Facebook Event Page later that day. He also posted his HTML & CSS slides there as well. Maqbool posted links for conversion of code into a Firefox OS app too.
- Facebook Event Page: https://www.facebook.com/events/1638018646476878/
- Facebook Photo Album: https://www.facebook.com/media/set/?set=a.409075479216983.1073741830.299125646878634
Here is a group photo at the end of the workshop…
Ebaad Ahmed, Owais Karni, Maqbool-ur-Rahim Khan, Muhammed Hasan Ahmed, Kamran Tariq, Salman Elahi, Talha Saleem
Although we ran into some problems:
- venue (we wanted to hold the workshop at the Seminar Hall which has a 100-150 person capacity but it was unavailable this semester as it was being renovated so we had to shift to a lab, however we have inquired and it will be available in the next semester)
- time restriction (there was a class before and after our session),
- internet problems due to which we were unable to upload the code
- shortage of a Firefox OS phone (even if we would have been successful in submitting the app in Firefox Marketplace, we would had to show it on a Simulator and would not have been able to demo it properly as we do not have a Firefox OS phone yet, hopefully we will get one until the next time)
But all in all, the students who attended our workshop were very happy so the event was a success. Capacity in the lab was for 40 students but total 60+ students attended the workshop. Extra seats were unavailable but the students sat on tables or stayed standing. The FSAs who organized the event are still very motivated and want to rectify these problems in the next semester as they are looking to hold the Web Development Workshop 2.0 at KU-UBIT. We will go about 2.0 a bit differently with more time to cover the demos on all mobile OS phones, multiple WiFi devices instead of only one and maybe a bit more educated audience of 3rd and 4th year students who are already proficient with coding in HTML5, CSS3, JavaScript. Time will tell…
Before I windup my report, here are the after-party photos 
