Innovation rarely happens in a vacuum. It usually starts with an individual brave enough to contribute an idea and a team inspired enough to make it great. This blog provides a forum for all Centrons to contribute ideas, make suggestions, ask questions and inspire others. There are no boundaries. To participate, all you need is the desire to build great products.

Embarking on a Technical Journey: Learning to Code with Treehouse

In an effort to have a better working environment with the development team, and due to my own curiosity I have decided that front-end development would be the first path to tackle for growth.

As a Junior UI Designer at Centro I am encouraged to find paths to develop my skill sets and grow my career. After reviewing my options for growth I began exploring online courses. I felt that online courses offered the most flexibility in terms of when I wanted to work, and what I wanted to work on.

I reviewed Codecademy, Code School, Khan Academy and Lynda, but decided to move forward with Treehouse. It has the one of the largest libraries and from my perspective, the most relevant. This is because Treehouse constantly updates course materials and expands on ones previously introduced. As an auditory learner their video lessons also seemed like a great fit for me.

Screenshot of the course offerings on Treehouse’s website.
Treehouse has a large, well-curated collection of online courses.

Diving In

I started on the Front-End Developer Track, which consists of lessons from HTML and CSS basics to AJAX Basics and Object-Oriented JavaScript. The first course on this track is “How to Make a Website”. The course consists of making your own portfolio site with a few different pages, and making the site responsive. It is roughly 500 minutes and covers HTML and CSS Basics to Responsive Design and Testing.

I was taught HTML and CSS in 2007, but a lot has changed since my beginner lessons of table-based HTML. This course allowed me to review information I had previously studied, and gave me the opportunity to build upon that information while improving my understanding of the different languages from the beginning.

The Work

Building a structured semantic HTML was the first lesson. While simple in theory, coming from old inline styling, non-semantic HTML I was taught makes it a bit more difficult. I found myself falling into old habits from high school web design classes and numerous self-taught lessons. After setting up a couple pages it became much easier to write markup, and I improved the legibility of my code as well.

Using CSS has always been difficult for me. While working through the basics I ran into several issues. Most of these were related to how I used selectors for targeting nested elements. There were several times when something wasn’t working correctly, I would review my markup and find I had separated selectors with a comma when it should have just been a space. Below are examples of the different css selectors I would commonly get mixed up:

.element .symbol
.element, .symbol
.element > .symbol
.element.symbol

Treehouse also provided my first foray into Responsive Design, and it seemed like a daunting subject to tackle in a basic lesson. These fears were unfounded and after I understood the logic and process of the methodology it became natural to me.

Shortly after completing the lesson I began to apply my skills for a project at work. A coworker was able to give me a hands-on tutorial that also helped me build upon the lesson information. The only complications I had were with margin and padding. The math just seemed like it wouldn’t add up, or like there were rules that being applied I wasn’t taking into account.

These small problems caused quite a few headaches that were incredibly frustrating, especially after figuring out how simple the problem was. I still make these mistakes occasionally and sometimes need help writing a very specific CSS rule, but my knowledge and understanding of the language is far greater than it was before I began these courses.

@media screen and (min-width: 480px) {

  /* TWO COLUMN LAYOUT ---------- */

  #primary {
    float: left;
    width: 50%;
  }

  #secondary {
    float: right;
    width: 40%;
  }

  /* PAGE: PORTFOLIO ------------ */

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }

  /* PAGE: ABOUT ---------------- */

  .profile-photo {
    float: left;
    margin: 0 5% 20px 0;
  }

}

Conclusion

My initial leap into Treehouse and growth has been exciting. The developments of the skills are already making an impact in my day-to-day work. Plans for my next steps include continuing the Front-End Development Track in Treehouse, Javascript Basics, and Git Basics. Once I am farther along and more confident in my abilities I would also like to learn Ruby on Rails.

I have really enjoyed the time I spent developing my technical abilities so far and I feel like I am able to contribute more than just visual design. Now I can be a more efficient and effective team member than I was before, which makes work much more enjoyable.