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 http://referrals.trhou.se/libbyschumacherknight. For every person that signs up I can get 20% off my monthly subscription! That would be cool!

Advertisements

One thought on “Treehouse – How to Make a Website

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s