For the first time ever, the Mozilla Philippines Community organized a month-long workshop series to teach the Web! The team dedicated all Saturdays on the month of May for fun afternoons of teaching basic web design to the members of the Messiah Community Church in Taytay, Rizal. It was also the first time for the team to have an event east of Manila.
The Messiah Community Church is a Christian church in Taytay which houses Little Jewels Christian School, an educational institution which offers pre-school to high school education.
We started off by of course making sure all the computers have an updated Firefox!
After we’re done with all the housekeeping, we introduced Mozilla, what the local community does in the Philippines and what Mozilla’s education initiative is about. We then proceeded to introduce the Webmaker tools!
For the 5-day series of afternoon seminars, we created an agenda which we can adjust depending on the learning pace of the students:
Day 1: Intro to HTML and CSS
Day 2: More HTML and CSS practice
Day 3: Intro to WordPress
Day 4: Building your WordPress site
Day 5: Continue building your WordPress site.
The huge challenge for us was to make the jargons as less intimidating as possible and the dev mentors who have a strong IT foundation have to ensure that they make everything look easy than it seems. As we were given a little time to explain everything in the sessions, we encouraged everyone to join our Facebook group, Teach the Web PH, where we will provide support when they try learning by themselves in their own homes.
We used a lot of Thimble so students will immediately jump to the fun part of coding instead of having to think about how to save files and other technicalities that might make them intimidated on the task.
We started the lessons with an introduction to HTML and how it works.
Cheat sheets were so they’ll be given the freedom to try codes that interest them.
Mentors, who were mostly Firefox Student Ambassadors, were also around and students have at least one mentor that guides them throughout the workshop.
Mozilla Rep Ryan Ermita introduced CSS and how it affects the HTML codes that we have written so far.
For the second day, we had an HTML Tag Puzzle Game to refresh the students on what was discussed last week.
We then proceeded to practice more what we have learned last week. We had an influx of participants that day, some participants had to share computers.
For the third day we moved on to the one of the most tricky parts of web design and one of the fundamentals of creating WordPress themes, positioning divs.
Mozilla PH volunteer CK Luna explained how to simply position divs using Thimble.
We also taught using web fonts in adding more style to their web pages.
The participants are now ready to make their HTML files offline! We had an activity where they have to create an index.html, about.html, contact.html and style.css files where they will put their codes to build their own multi-page websites!
On the the fourth day, Firefox Student Ambassador Marcus Ang gave out notebooks for the participants, just in time for the coming start of school year!
For this day, we explored hosting WordPress locally to test the basic themes that they created. It proved to be really tricky for everyone.
FSA Marcus Ang gave a very basic introduction to PHP, in order for the participants to get started with the WordPress syntax.
On the last day, the participants were given the best shortcuts and tricks to launch their own WordPress site without having to deal with the nitty gritty backend. They continued working on their sites as well.
Only four participants managed to attend all the workshop days and they were all given shirts as their prize! Keep up the diligence guys!
And to our surprise, the Messiah Community Church also gave us Firefox mugs as a token of appreciation for holding this event at their place!
\
It was definitely a fun-filled month for the Mozilla PH community. We are so excited with what the Messiah Community Church will come up on their website and what the participants will come up individually!
