Teaching newbies material design

Today marks 11weeks since our web development training started. By our, I am referring to the 30+ girls that joined the web and mobile development sessions of the community powered program - Code4Impact. I have the privilege of being one of the instructors teaching web development. Together with 3 other instructors, we have covered the basics of HTML, CSS and Javascript and now the girls have started combining this knowledge together to create apps they believe would contribute significantly to the UN's sustainable development goals.

What apps are being curated?

My class has 3 active groups working on 3 web apps.

1. Team Alpha is building a portal to locate emergency centres around you.
2. Team Beta is building a mobile app that will help you detect if a consumer product you bought is fake / expired.
3. Team Theta is building an information portal that will help provide farmers with information that will maximise their yield.

The abstract parts of programming is pretty easy to learn.

It becomes harder when you combine it with an actual programming language. We had girls learning things from variables, to conditionals to iteration to functions within 20mins. They however had trouble when Javascript compiler did not understand the english they were typing into chrome dev tools.

Design is surprisingly hard

It was my initial assumption that designing websites was a relatively simple task. I always focused on the part I thought was harder - backend development. I spent a lot of time before remembering that <link> is different from <style>.

It always pays to prepare

I spent a lot of hours preparing for my first class, however, upon appearing at the class, I found out that much of the knowledge I planned to share would come across as too much. This led me to research a lot on how to introduce web development to complete starters. The experience was both enlightening and refreshing.

Start with the end in mind

Now often, newbie designers tend to just wing it as ideas pop into their heads, what ends up happening is a chaotic design with no clear flow or intention. When approaching design problems, start with one step at a time having a final picture in your mind... The simpler, the better. Then try to complete that picture before pivoting. If it is hard, then you might have missed something. That brings me to the next point

Good design language is your best friend

While we are often tempted to be creative, it would be really helpful to follow design guidelines. One I find helpful is the material design guidelines made popular by google at https://material.google.com. Different aspects of it has been implemented in different frameworks each of which has its unique strengths and weaknesses. For example, google has some really neat paper elements as components for polymer (https://polymer-project.org) - it is neat but a bit tough for someone without JS experience. Materialize css(http://materializecss.com) is simpler but does not contain as much features as paper elements. It comes down to choice.

That's it from me, once again, thanks for taking time to read my article