Finished JS Loops, Arrays and Objects – Treehouse

Liked this course, fun playing with loops, arrays and learning about objects. Had a few issues though.

First problem was that sometimes I type too fast or I’m not being careful enough. When I was meant to type ‘ += ‘ I would type ‘ =+ ‘, for when I wanted to add something to a variable. This caused me a few “OMG! Why isn’t it working?!” moments. Luckily though I figure out what I was doing wrong just before posting a question to the Treehouse forum.

Another thing I discovered was about errors showing up! The images below show the code with the error, the error message that came up in the console and the corrected code.

So, this problem has a 2-dimensional array and what I did was missed a comma in the outer array. This made the program throw an error BUT the error message was not coming up saying it was on line 6.

How did I realise I had made this mistake? Again, was about to ask a question in Treehouse and when you do start to ask a question it pops up questions that have already been asked that are similar to yours. Had a look at these and one mention that often errors occur by missing out a comma or semi-colon. So I had a closer, more careful look through my code, not just at the lines that the console and told me their were errors out.

Good to learn that the cause of an error may not be where you think it is! Something to try and remember and to get better at typing without missing out commas etc!! Also, to think about is that even though it the console did not give the line the error was on, with it saying line 17, I could have thought about what variables/objects/functions were in that line and then looked at them. This would be a good way to tackle errors in a large program!

The last thing that I got thinking about while doing this course was when to use/write a function? In the last challenge, in my solution I got it working with a for loop inside a while loop. The solution that Dave from Treehouse showed used a function for the for loop part. I want to know how do you decide when you should create/write/use a function?


JS Visualisation: Online Python Tutor – Visualise Python, Java and JavaScript code!!

Exicting! I have just started the course on JavaScript Loops Arrays and Objects on Treehouse and in the video “Simplify Repetitive Tasks with Loops” they are stepping through a random number while loop.

Screen Shot 2015-02-16 at 7.25.08 pm

This reminded me about the Online Python Visualiser that I was introduced to during a uni paper I took last year –

So, I searched for JavaScript visualiser to find that the online python tutor has the ability to run Java code and JavaScript code!! I am excited about this as I found it very useful in understanding some code and worked out some problems using it as well.

Screen Shot 2015-02-16 at 7.34.29 pm

Plus, you can add in code and then either share the link or embed it. One thing I had to change though was I was writing out the random number to the web page with document.write but this throw an error in the visualiser, so changed it to console.log and this then meant the program output worked.

I can see this being useful for some stuff but perhaps not big things!

HTML Forms – Treehouse

So, have now completed the HTML Forms course in the Front End Web Development track on Treehouse. This course has three stages – Form Basics, Organizing Forms and Choosing Options. This was a nice short sharp course as it took me less than two hours to complete. I enjoyed the coding for the form we made.

Screen Shot 2015-02-16 at 5.05.34 pm

Even though it won’t do anything as I am far away from doing anything with a server side program, it has been cool to create something that people can enter information into. The look of the form comes from the CSS, which was already set up. One of the suggested extensions is to play around with the CSS for the form, as form elements apparently often do odd things! This is what it would look like without any CSS.

Screen Shot 2015-02-16 at 5.17.57 pm

Through most of the courses as well there links to useful resources. For example, for the HTML Forms course the links to the MDN HTML forms guide. As well as specific pages in this guide when I video was focusing on it.

Another part of how Treehouse works I am really enjoying. It appeals to my need to like to have evidence of what I have done. When you complete a stage/achievement it gets added to your profile. Here are the three achievements (stages completed) from the HTML Forms course.

Screen Shot 2015-02-16 at 5.06.27 pm

Also as your work through the different courses you get points for the quizzes and code challenges that you complete. These are then displayed on your profile page as well as on every page you are on, next to the picture of yourself.

Screen Shot 2015-02-16 at 5.23.28 pm Screen Shot 2015-02-16 at 5.25.02 pm

I like this as it shows me how I am going and there is always something more to achieve!

JavaScript Basics – Treehouse

Have just finished this block on the Front End Web Development track on Treehouse.

Screen Shot 2015-02-11 at 5.01.34 pm

My last post was about the Introduction to Programming, which was replaced in this track by the JavaScript Basics that I have just completed. I have to say that I enjoyed the JS Basics more than the Intro to Prog. There was more coding to do in Workspaces and the exercises I found more interesting. I thought the flow of information made more sense, it seemed more logical. Pleased I have done both as it as definitely solidified my learning of the basics in Javascript. And I am enjoying learning JavaScript and playing around with it. Here is the basic quiz I made. I think I particularly like the interactivity and being able to see results straight away that aren’t just lines of of code (like with Python).

One aspect of Treehouse that I really like is that the blocks that you do in a track will count for blocks in other tracks as well. For example, in the Front End Web Development track I have completed the How to Make a Website block, as well as the Introduction to Programming (although this no longer comes up as a block in this track). You get a tick and see that you have done all the stages for that block.

Screen Shot 2015-02-16 at 11.02.39 am

If I look at the Rails Development track, it shows that I have completed the How to Make a Website and the Introduction to Programming blocks. I quite like this as I am ahead in this track already!

Screen Shot 2015-02-16 at 11.01.31 am

Next for me on this track is HTML Forms.

On a side note, Enspiral Dev Academy, which I am starting Phase 0 in March, is now using Treehouse for a lot of its online learning through this initial stage.

Intro to Programming – Treehouse

Have just completed the short block ‘Introduction to Programming’ in the Front End Web Development Track on Treehouse. Enjoyed doing this. Learnt about using the console in Google Chrome and then creating a JS file and running through Chrome and seeing results in the console for the page.

This was a short course but worthwhile doing even with having done some programming before. It was good have a recap and of course learning how things are done in Javascript, as the only other language I know a bit of is Python.

I have been pleased to learn that I have retained quite a bit about the concepts of programming from the Canterbury University Intro to Programming paper I did over the first half of 2014. And more importantly I think, is that I am confident to try out things and search for help when I am stick, rather then just thinking I can’t do it. Had a couple of these moments when working through this block.

Screen Shot 2015-02-11 at 5.01.34 pm

Changing of content – had just finished this Introduction to Programming and went back to the Front End Web Development page to have a pop up saying that changes had been made to the course. You have an opportunity to review the changes before updating to it, which is good. I decided to update, as I kind of think that an update would be an improvement plus it affected mostly blocks I hadn’t done yet, except for the Intro to Programming. Which is now JavaScript Basics and some stuff added later on as well. So now onto JavaScript Basics – I may fly through it!

More Treehouse – CSS Basics

It’s amazing how much you can get done when you don’t have a full time job!

So this morning I completed the CSS Basics block on the Front End Web Development track on Treehouse. I started this before the How to Make a Website block which I completed yesterday.

As I mentioned in my last past I have enjoyed learning little tips and tricks to using CSS to make websites look good. For example, just using a top or bottom border on an element.

from CSS Basics

It was also great to learn about using gradients, how you can change images with CSS (which means you don’t need to be a  whizz at photo manipulation, plus it would be a time saver!), for example make them round by using border radius. Now, some of you reading this might be like ‘doh! yeah!’ but I didn’t know these things and it is opening a new world of coolness! Also, has me looking at  websites differently as well. I was looking at  yesterday and had a look at their people page and the cool coloured circles with images of everybody. Now, would have thought ‘Photoshop’, but actually not so much.

First image is what the page looks like and the second and third images are from after I have played around with the developer tools and styles in Chrome.

I am going to continue on this track with the next block – Introduction to Programming. At some point I am also going to revisit my resume site (only done top bit for mobile size) that I am revamping and apply some of the stuff I have learnt in How to Make a Website and CSS Basics.

The journey continues!

Treehouse – How to Make a Website

I have been learning code now on Treehouse for about two weeks.

Screen Shot 2015-02-04 at 4.21.28 pm

I decided I would start on the Front End Wed Development Track as it covers:

  1. How to Make a Website
  2. CSS Basics
  3. Introduction to Programming
  4. JavaScript Foundations
  5. HTML Forms
  6. jQuery Basics
  7. HTML Tables
  8. HTML Video and Audio
  9. AJAX Basics
  10. Accessibility
  11. Website Optimization
  12. Console Foundations
  13. Git Basics

The time for all of this is 41 hours.

I started at the CSS Basics block as I have made websites before with the code I do know. And had recently finished a Yoobee online course. So I kind of thought I wouldn’t learn much from it.

I got about half way through the CSS Basics and decided to have another look at How to Make a Website (instructor Nick Pettit).

How to Make a Website covers:

  1. Beginning HTML and CSS
  2. HTML First
  3. Creating HTML Content
  4. CSS: Cascading Style Sheets
  5. Customizing Colors and Fonts
  6. Styling Web Pages and Navigation
  7. Adding Pages to a Website
  8. Responsive Web Design and Testing
  9. Sharing a Website
  10. Debugging HTML and CSS Problems

I liked the structure of it in that you can make your own portfolio site as your progress through the tutorials (recently someone suggested that I could sell photos I take, not sure if I could but I decided to use a few of my own photos for this project, which makes it more interesting). So, I decided I would work through this first block.

I am glad I did. A few amount I already knew but I was able to skip through the videos easily. The way that I have learnt HTML and CSS has been quite adhoc. Started by learning to do the layout of pages with tables! Didn’t know anything about divs! So it has been really good to work through a course and not only use better techniques but begin to understand how they all work together.

The techniques/tips that have really stood out for me have been:

  • learning about ids and classes
  • how effective use of margins and paddings can be in styling a page
  • beginning to understand display, float, clear so as to create fluid designs
  • and using simple CSS techniques for design.

For example, the image from CSS Basics, all it is at the top is a orange border, but it looks pretty cool. It would be good to be able to show school students simple tips like this that can really make quite a difference to the look of a site.

The other part that I liked was the Responsive Web Design block. It was not complex at all and something that I think students in NCEA should be getting into early on.

Another part that was useful was the section on Sharing a Website. This covered:

  • Find a Domain
  • Pick a Web Host
  • Upload the Website

This might seem simple to those that have done it and do it regularly, however for me it was useful to be stepped through the process even though I won’t be doing it anytime soon.

This is my attempt at the project for this section – my portfolio site. It should look like this…

Screen Shot 2015-02-04 at 5.08.07 pm

…there are a few things I will fix up at some point and maybe one day it will be a full on site!

Overall, it was worthwhile taking the time to go back and complete the How to Make a Website section. I have about 2 weeks left of my free trial with Treehouse but I will be paying the $25 USD to continue learning. Also, you can pause your enrolment where you aren’t charged until you resume your enrolment. Cool idea.

If you think you might be keen or would like to try it out, help me by using this referral link For every person that signs up I can get 20% off my monthly subscription! That would be cool!