Week 5: Building a Treehouse

Treehouse Banner

Week 5 was a bit of a reset as I switched to Team Treehouse as my primary learning site.

My original plan was to try Code School but I decided to hold off on that after finding out that my local library offers free memberships to Treehouse. While I still plan to try Code School at some point, I have been pleased with Treehouse so far. I have a trip planned each of the next two weeks so I will probably wait until after those trips are over.

Once I check out Code School my plan is two write a post comparing Codecademy, Treehouse, and Code School.

More on Treehouse

If you have been keeping up with my blog you know that I have been working on lessons at Codecademy.

Codecademy’s lessons are text-based, but I have learned over the last few weeks that I prefer video lessons. I feel like they hold my attention better, which is important when you are working on lessons for several hours at a time. Both Treehouse and Code School offer video lessons.

I decided to start with Treehouse’s Front End Web Development course. The course is made up of 22 different modules totaling 65 hours worth of instruction. The program starts with HTML, CSS, and JavaScript basics. It then moves on to things like Flexbox, Bootstrap4, jQuery and Git.

I really like how Treehouse is set up. The videos are short and concise. Most range from four to seven minutes in length. Sprinkled in between are quizzes and challenges to reinforce what you are learning. I particularly like that the quizzes aren’t just multiple choice. They also include fill in the blank questions. Challenges are mini-coding exercises in a browser.

The best part of Treehouse may be the Workspaces tool, which students can use to code along with the lessons. Using Workspaces is a lot like using a standard text-editor and it is a huge improvement over the Codecademy browser-based interface. Treehouse takes advantage of Workspaces to make the lessons more than just inserting code snippets where instructed. They also teach things like how to create and manage files, which students need to learn to progress beyond the confines of their lessons. Since Wordspaces is separate from the lessons, students can also use it to create and work on new projects.

Between how the lessons are structured and the Workspaces tool, I feel like Treehouse does a much better job of helping students understand how everything ties together. With Codecademy I often felt the lessons were independent exercises that lacked a big picture concept.

I am still curious to try Code School at some point, but it will be in addition to Treehouse, not instead of it.

Note Taking 2.0

I mentioned last week that I have started using Visual Studio Code to practice coding outside of my normal lessons. This week I learned that text-editors are also a great way to take coding related notes.

Instead of typing everything in Microsoft Word or a Google Doc, use your text-editor. Not only is this a great way to practice writing code, but you don’t have to worry about things being auto-corrected or marked as errors because your word processor doesn’t know what to make of all the weird punctuation and symbols.

All you have to do is write code snippet and use the comment tag to mark up your notes. Here is one example of a CSS note I made that causes a picture to increase in size and rotate when hovered over:

Example of a coding note.

The one downside to this method is that you don’t have the option to add an index, but it is still searchable using CTRL + F.

It doesn’t matter whether you use Visual Studio Code, Sublime, or Atom. You can do this will any text-editor. You could even use Wordspaces if you are a Treehouse member.

Hold My Place

Have you ever been working on a project and needed to find an image? Maybe you are writing code and you know you want to link to an image but you haven’t decided what that image will be. Rather than stop writing code to look for a picture you could just insert a placeholder image.

PlaceIMG.com is a great site I learned about in one of my Treehouse lessons. Just enter the size of the image you want and pick a category. PlaceIMG will generate a link to a random image in that fits that theme.

This is a great tool if you are working on a practice project and don’t want to have to worry about picking out specific images. Here is an example of a header I made one day as part of my #100DaysOfCode challenge.

PlaceIMG example.

Thanks for reading and let me know in the comments or on Twitter what interesting things you learned last week.

Sharing is caring!

Author: Lee

Hi, my name is Lee and I am a 40-something who recently made the decision to become a self-taught programmer. This site was set up to chronicle that journey and my experiences along the way. Feel free to contact me with any comments, questions, or suggestions.

One thought on “Week 5: Building a Treehouse”

Leave a Reply

Your email address will not be published. Required fields are marked *

nine − 7 =