Treehouse – CSS Basics – learning lots!

A quick post. I have been learning CSS Basics on Treehouse for the last couple of weeks. Bits here and there. Kind of skipped through their Getting Started with CSS, then through Basic Selectors, Understanding Values and Units, The Box Model and Basic Layout.

As I was going through these tutorials I was thinking about my CV/resume site and how I could improve. Have played a little bit with it…think it is looking better!

Just got as far as the mobile size at the moment. Trying to think about the structure of the layout and what ids and classes to have that would make sense for the mobile size and the bigger screen sizes. Might also stick with not using a colour.


Coding online – YOOBEE: HTML and CSS Beyond the Basics


I have been working through Yoobee’s online course ‘HTML and CSS Beyond the Basics’. It has covered using wireframes to design your site to ending with responsive design.

Screen Shot 2015-01-20 at 9.37.41 am

There were 7 sections in total and I learned a number of things. What I am particularly happy about is learning more about responsive design.

Some screenshots…

… positioning, typography, hybrid layouts, CSS downdown menus and different ways of creating buttons.

The final project was to create your own site based on your wireframe from the first lesson. My aim was to create a CV/resume site for myself.

Here is my original wireframe (done in Photoshop) and my adjusted one after doing more of the course (done in Pixlr Editor – great online photo editing tool).

Screenshots of my final site:

I tried to make it a responsive design, which works when making the browser window smaller. However, I have hosted it up on Google Drive and Github and when I look at them on my iPhone it is not coming up with the mobile layout! I’m not sure why this is, anyone got any ideas?

I had a thought that there must be sites out there that can imitate what a website would look like on different devices and with a quick search found this site –, you can paste in a website url and change the device and also share that link. Of course you can do the same thing using the developer tools in Chome or Firefox, although I have found Chrome a bit of hassle as I go down in devices sizes, sometimes it doesn’t load the responsive design.

Overall I enjoyed doing this course. The video tutorials were good and activities/tasks useful. I liked that the aim was for participants to have built a site (even if one page) by the end of the course. I personally like to create sites rather then just go through learning of the code without an tangible outcome. And I got a certificate!

Screen Shot 2015-01-20 at 11.55.34 am

The online course was run using Moodle and again it is a great example of how Moodle is an excellent platform for a completely online course – easy to use, navigate and communicate.

I have now started with Treehouse with a free trial. Have picked up some good theory, deeper understanding of how CSS selectors work already.

Preparing for Enspiral Dev Academy

This year I am on a journey to learn to code – like really learn to code. I have taken leave from school and have enrolled in the Enspiral Dev Academy.



Just before Christmas I got an email from them about starting the pre Phase 0 prep, so I have started looking into what will be best for me.

I started with learning some basic HTML/CSS when I started teaching unit standards at Level 2 back in 2010. Using tables to do  page layouts (rather ugly and hard to work with), to in 2014 learning more about CSS, elements, divs (with it also being the second year of teaching achievement standards at Level 2!).

In 2014 I had quite a step up in my coding/programming experience. In March I attend the RailsGirls Wellington weekend, which was an explosion of coolness. Due to the requirement at school to teach programming in our Level 2 course, I also completed, in the first semester, the Introduction to Programming (Python) via the University of Canterbury. Made myself a bit sick doing this but completed it and rather happy with how will I did.

Once I started exploring the idea of doing the Dev Academy seriously I started doing some stuff on Codecademy. I preferred doing the HTML/CSS course rather then the ‘Make a website’ option as it made more sense to me doing stuff in order. I also started on the Javascript course. I found it a bit tendency and basic in what the content was but this was maybe due to having a good base already.

I than started having a play with the HTML/CSS Code Avengers course. Again, I started at the beginning and found the interactive layout more suited to me then Codecademy. I like it because it outlines when you start what everything is and where to find help. It gives hints in the tasks and output examples of what you are creating. I found all of these useful when I got stuck at particular points. As I went through the Level 1 course, even though I knew most of the stuff that it covered, there were a few little things that I picked up that I thought would be useful. It also outlined industry standards or expectations.

In December 2014 I attended the Computer Science 4 High Schools conference in Christchurch, run by the Computer Science department at the University of Canterbury, led by Prof Tim Bell. During this I was able to attend a few workshops, one of which was with Mike Walmsley, the creator of Code Avengers. We did some stuff with Game Development in Javascript (which can be used for NCEA Level 1/2/3 programming) and did a fun challenge with JS. I can imagine that the camps they run would be pretty cool. The game development was cool as well, as you could deploy it and send out the link (see previous post on CS4HS).

The other workshop that I attended was run by Tanya Gray from Gather Workshops – jQuery Taster: Enhancing Websites with jQuery. I found this lots of fun. As the information was online I was able to go a bit ahead as there were different levels of experience in the room. I found this really useful. It was a lot to get done in a couple of hours but doable. It was exciting to add some cool stuff to a site – here is my attempt.

With both of these workshops, even though they were great fun because of the interactivity, it would take me a lot of time to create something similar by myself, as I don’t yet feel I have the knowledge OR understanding of how it all works to be able to create something from scratch. This is the gap in my own experience/knowledge that I want to fill.

I have also had a look at CodeSmashers. This is a new start up that is looking to fill a gap in helping people learn to create their own websites. They use HTML/CSS with a bootstrap framework and by the end of a weekend you can come out with a cool looking site. You may not have a complete understanding of how and why it works the way it does but it is a pretty cool start and there is also an online platform for help from the tutors as well as other participants from your course and all the other courses that CodeSmashers have run. It will be exciting to see where they go next.

Another online course I have access to is Yoobee’s HTML AND CSS BEYOND THE BASICS. I have found this useful in thinking about how I want my site to look as the first task is going a mock up. However, they use a lot of videos and don’t have an online coding area. So the tasks you compete in a text editor then you upload what you have done to a forum and get feedback. By the end of it I should have a good looking site and hopefully learnt new stuff.

Now, back to the email from EDA for the pre Phase 0 prep and where to from here. They have recommended a few sites:

I have done both the Try Ruby (which was okay but a bit strange in how it worked) and Try Git (loved this, the way this was layout and worked was great for me!).

So, the question is where should I go to from here? Have I done enough in HTML/CSS? Should I jump into Ruby or JS first? Which resource should I go for? Should I go back to Codecademy or Code Avengers and start some of their courses further along and skip the basic parts?

What online training have you done? Do you have any recommendations or advice?

(This post is hopefully the first in a few. Planning on updating about online resources I have used once I have completed the prep phase).