Udacity Web Development course

Like many other Londoners, on my daily commute I plug in my earphones and listen to a variety of podcasts in an attempt to block out the what-I-like-to-call "post-apocalyptic nightmare" that is travelling on the London Underground during rush hour (when your transport infrastructure is more than 100 years old, it's always rush hour).  One of my favourite podcasts is TEDTalks, which is a series of short videos of "Ideas worth spreading" and I like it because they cover such a vast range of topics, some are serious, some more entertaining, they do vary in quality, but I always learn something new from watching a TED video (the acronym stands for Technology, Entertainment and Design).

One I watched recently was about what makes a new word officially a word, and one of the examples was "adorkable" (A guy that is a nerd, but in a very cute/adorable way), and this word actually made it into the Collins English Dictionary very recently.  For me, the embodiment of adorkable is Steve Huffman, co-founder of reddit, who is the instructor for a great Web Development course I took this year with Udacity.com.

What is printed in the dictionary, under the definition of "adorkable"

This course requires basic knowledge of Python and is a good follow-on to Udacity's Intro to Computer Science 101 course that I did a few months ago.  The course is focused on building a basic blog website as a web application from the ground up, using Google App Engine to develop and host the site.  You start off by learning some basic HTML, but the majority of the course is not focused on the appearance of the website (i.e. "the front-end"), rather you learn the programming associated with creating and storing new blog posts, displaying these posts, as well as creating user accounts and how cookies work (i.e. "back-end" development).  As a side-project that compliments the main blog-building part of the course, you also learn how to build a website that allows users to submit ASCII art.  You can see my code for both the blog assignment and the ascii art website on my GitHub account.

For your enjoyment, here's a pretty awesome retro-cool example of a simple ASCII art piece:
             

             |\_|\
             | a_a\
             | | "]
         ____| '-\___
        /.----.___.-'\
       //        _    \
      //   .-. (~v~) /|
     |'|  /\:  .--  / \
    // |-/  \_/____/\/~|
   |/  \ |  []_|_|_] \ |
   | \  | \ |___   _\ ]_}
   | |  '-' /   '.'  |
   | |     /    /|:  |
   | |     |   / |:  /\
   | |     /  /  |  /  \
   | |    |  /  /  |    \
   \ |    |/\/  |/|/\    \
    \|\ |\|  |  | / /\/\__\
     \ \| | /   | |__
   snd    / |   |____)
          |_/

I found the course very engaging (not just because of Steve Huffman - he actually wasn't the best lecturer!). Although the set-up was obviously a lot simpler than what is used by "real" websites, understanding how to create user accounts with passwords, logging users in and out, storing and retrieving the blog posts using a database, caching pages etc was really interesting and gives you a basic understanding of how web applications work.  It was also encouraging and inspiring to know that when Steve Huffman co-founded reddit, his experience in web development was about the same as the pre-requisite level of knowledge for this course!

Although overall this is a course that I would thoroughly recommend, and given that it's a totally free resource, I feel bad about complaining, but there were some aspects that I found lacking.  First of all, it was a downright pain installing and running Google App Engine on my Windows laptop - if it wasn't for the advice that was posted on the Udacity forums by other users and answers I found via in-depth googling, I would not have been able to get it to work.  Google App Engine is a platform that you use to write the back-end code for your web application and get it functioning on a real life website. However, Google have now come up with something called Cloud Playground, which looks like it would give you all the functionality of App Engine without having to install anything! This brings me onto my main gripe about this course - it was created a few years ago and the world of web development is evolving so fast that some of the course content is already not as relevant as it could be.

You might be wondering by now why I'm not using the content of the course to host this blog.  As I mentioned earlier, the course focuses almost entirely on the back-end, which means the appearance of the blog that you build with the course leaves a lot to be desired.  To help improve the front end, I went along to a few Codebar sessions to get some expert input.  Codebar is a fantastic (and free!) initiative set up to give free one-on-one coding advice and tutorials to people who are under-represented in the tech industry (i.e. women, ethnic minorities and LGBT).  These sessions take place on a weekly basis around the Silicon Roundabout, where students are paired up with coaches, who are all full-time professional web developers, plus there's free pizza!

FREE PIZZA!!!!!!!!!!

On a serious note, the Codebar organisers and coaches are actually *amazing* and I feel so lucky and grateful I live near to such an incredible and generous resource, that I haven't done anything to deserve!!!

When I rocked up with my  blog web application, no one had heard of  Google App Engine or the template language (Jinja) that was used in the course to build the basic framework of the individual blog pages.  It was also very difficult and frustrating to get the back-end stuff that I had written to work with some of the commonly used "industry standard" templates.  After a while, I also began to realise that I was basically re-inventing the wheel and while I was learning a lot along the way, it would be productive to get to grips with a more widely used set up and learn how to customise that rather than committing to a project where I had built the back end....this is still a work in progress, so, watch this space!

Codeacademy courses

After completing the CS101 Udacity course that I wrote about in my previous blog entry,  I tried out a course with codeacademy.com, another commonly used free learning resource for programming.  They are famous for having a course called the Code Year where people who have made it their New Year’s Resolution to learn coding in one year, can follow a specific track that covers all of the 6 programming languages that Codeacademy offer tutorials on (Python, Ruby, HTML & CSS, Javascript, JQuery and PHP).

For a little bit of a change from the Udacity course which focused on Python, I started out with Codeacademy’s Web Development tutorial, which gives an introduction to HTML and CSS (part of the appeal of doing the course was finding out what these mysterious acronyms stood for! And then being able to feel like a total boffin by casually dropping them into conversation like a pro…or maybe that’s just me).  While the Internet still generally seems more or less to be powered by magic to me, this course helps you understand what the source code behind websites is referring to.  After doing this course, you can pretty much write the code for a website from scratch in Notepad using HTML and make it look pretty using CSS, but in reality, most people would still find it more efficient and convenient to use a template or another helper program.

A section of the codeacademy.com homepage source code....believe it or not, after doing the HTML course, this will no longer be complete gobbledegook!

Having completed the Web Development course, I already felt like I was forgetting the Python that I had already learnt, and given that Codeacademy had a Python track, I thought it might be interesting to blitz through the Codeacademy Python course to see if there was anything that the Udacity course had missed out on.  The main extra material not covered in the Udacity course includes taking a user input, bitwise operators and slightly different ways of writing ‘for’ and ‘while’ loops.  You also get to build quite a cool simple Battleship game too!

 

Compared to the Udacity course, this was more of a very basic introduction into the language and a whistlestop tour of what you can do, rather than giving you a deeper understanding of the syntax.  I found the exercises rather repetitive, with the instructions often telling you exactly what to type, meaning it’s quite easy to forget stuff you’ve learnt after pressing Save & Submit.

Having said that, the benefit of the Codeacademy course is that all the individual chapters are available in easy bitesized chunks, so you can dabble in and out of exercises; which comes in handy when you are trying to fit in your study around a hectic work day.  This is why I stuck with Codeacademy and used it to try out its courses in Javascript and JQuery, hoping these courses would build upon the basic Web Development course.

Rather bizarrely, I thought the Javascript course did not really explain at all how one would go about integrating the simple programs we were writing into a webpage.  In many ways, it was much more like the Python course, and even though Javascript was a new language to me, it was satisfying to be able to pick up the fundamental concepts quickly as a lot of the groundwork overlapped with the previous courses I had done.  However, this did leave me questioning why I was bothering to learn how to do the same things in a new language and how it was in any way relevant to building websites.  This was not helped by the fact that in the final 2 units of the course, there was A LOT of repetition of course content (it looked like it simply had not been edited properly) and there were quite a few bugs with Codeacademy checking the code that you had input was correct.  It wasn’t just my computer/browser! -  I tried using Codeacademy with Internet Explorer / Chrome / Firefox on my laptop as well as my iPad, and I could see from the course forum that there were many other frustrated students experiencing similar issues…

I forced myself to get over the annoyance that my course completion rate was stuck at 99% despite having the right code, after finding out that what I really needed to do was the JQuery course in order to transform my newly acquired Javascript coding knowledge into building an interactive website.   This course really gave much more meaning to the previous Javascript course I had done, and it taught how to translate a user’s key commands and mouse clicking into simple animations of a website’s features (e.g. moving your favourite Nintendo character around a page, or making a planet explode!) 

If you "get" this meme and how it references making planets explode, then you are probably as cool as me.

Overall, the codeacademy courses left me with a thirst to look into more in-depth tutorials and some of their "non-track" content (i.e. self-contained projects designed to let you practice your newly acquired skills) look very interesting.  Despite a few of my "complaints" about the bugs and teaching style, I think it is still unbelievable and absolutely amazing that a resource like codeacademy is available for free!

Pros

• All the teaching is done via coding on the website
• Bitesize chunks and short courses makes learning easier to time manage
• Something about the way it's written is very good at helping to keep you motivated and want to get through all the sections...perhaps it's because they reward you after completing sections of the course with some lovely badges on your account profile (anyone else remember collecting these in the 90s???)

Cons

• Teaching is not as in-depth as I would personally prefer
• Website has bugs with saving and submitting exercises
• Too much hand holding/spoon-feeding. Often the exercises  just tell you exactly what to type, and can be very repetitive.  While this does drill in certain things that you do need to memorise, it can feel like an exercise in copying and pasting