Doing Front-End Web Development with Thinkful

I have been a contract programmer in London for 18 years. What I love most about contracting work is the flexibility it gives me. Sometimes I will finish one contract on a Friday and start the next one on the following Monday. Other times I might take a few months off to visit New Zealand with my wife (we both grew up in New Zealand and all our family are there) or do some other travelling. On a couple of occasions I’ve taken even longer “sabbatical” breaks. They have given me a chance to get away from work altogether and focus on other things. I call them sabbatical breaks because invariably I find myself keen to do some sort of personal development, like get Microsoft Certification, or learn a new technology.

I am just drawing near the end of a sabbatical now, and the thing I am really interested in is AngularJS. Although I’ve been an ASP.Net developer since .Net came out (around the year 2000) I didn’t really appreciate how much it is a “back-end” technology, and that there is a whole other world of “front-end” web development once you start looking. I highly recommend Joe Eames’ Pluralsight course, Front-End Web Development: Get Started, to understand the difference between the two. In it, he describes the things he would have liked to have been told when he started the move from back-end to front-end.

Thinkful Front-End Web Development Course

I decided that before I looked at Angular I should focus on the front-end. My goal was not to become a front-end web developer, but to gain more skills to complement my existing ones. Thinkful provide a course focusing on HTML, CSS, JavaScript, jQuery, Ajax, JSON and Git, which seemed just the thing. Thinkful is one of a host of new online training companies that have been springing up recently. The Thinkful website says that they are "on a mission to reinvent education" and they are definitely worth checking out. I got a lot more from the course than I expected and I would highly recommend Thinkful to anybody wanting to build their technical skills.

The Thinkful method of online teaching emphasises practical, sustainable skills. There is a heavy emphasis on project work and you complete 8 separate projects during the course, as well as several other practical programming tasks (including a Street Fighter game which is great for whetting your aspiration for what is possible with JavaScript). You have to have a GitHub account to host your source code and sites online. I use Git a lot in my open source projects and it is great to see Git included in this course. Git and GitHub are becoming essential skills these days. The last project you do is a portfolio of all your work. You can see my course portfolio here. I wasn’t too impressed with my first project – a rather rudimentary HTML resume - but looking back now I feel better about it as I think it highlights the progress I made. :-)

The Thinkful course has four units of work that you can complete at your own pace and is designed so that you can do the four units in three months of part-time work outside your normal job hours. As I am not working right now, I found it quite motivating to do one unit per week and completed the course in a month. Having a course structure, projects to build, and deadlines to meet, is really useful to keep you focussed. You use Google Hangouts to meet up with your own mentor once a week, so the weekly cadence was very effective. I really enjoyed my meet ups with my mentor Justin. He had a lot of real world front-end web development experience and was a mine full of great information, both with feedback about my own project work and other related topics. Justin was based in Florida and I think it’s great that this sort of technology breaks down geographic barriers and that I can get one-on-one mentoring from my apartment in London.

UPDATE 17 November 2016: Thinkful now has their own full-fledged curriculum as part of their Web Development Bootcamp, covering everything from HTML/CSS down to Node, MongoDB, and React. You can read their essay on the Thinkful curriculum that explains its teaching methods and data-driven approach.

The Thinkful curriculum mixes the best free and paid sources available online with their own content. Again, the emphasis is on practice over theory and so is structured for you to learn just enough basic theory to start applying your knowledge in projects. The idea of paying for free resources on the net seems to be pretty crazy, right? To me though, this touches on the key benefit of what Thinkful offer, and why I am more than happy to pay the fee. Thinkful curate their content to find the best content that will get you to your goal the fastest. I have spent my whole career constantly learning new technologies and know that the hardest thing is not finding resources – especially these days when the number of resources is vast and can be quite overwhelming – but in working out what to learn (you don’t know what you don’t know) and filtering through all of the different resources to put together your own curriculum. While you can certainly develop your own learning curation skills (John Sonmez actually has a great course on this) it is a valuable commodity to have provided for you which can save you a lot of time and wrong paths.

As well as mentors, Thinkful also have a Google+ community where all of the course members can meet to discuss the course and find answers to problems they are trying to solve. This community includes all the mentors and I found feedback on my projects and answers to my questions to be very responsive.

Tools

The recommended tools for the course are Sublime Text 3 and Chrome. I was keen to try Sublime Text because I had heard good things about it and it is interesting to see alternatives to Visual Studio. I found it really good in a lot of ways. When you are creating small projects with a few files it felt quite nice and lightweight.

As the course wore on I decided to try JetBrains WebStorm, another popular Visual Studio alternative. WebStorm is a dedicated front-end development IDE, with built-in support for AngularJS and Grunt and Bower integration, and even support for Git. There’s a lot to like about WebStorm and I could see myself using it quite happily for front-end web development if necessary. There are a lot more features I didn’t tap into and it’s a credible alternative to Visual Studio. However, as a long term Visual Studio user, and with some fantastic front-end support being added recently to Visual Studio and the Web Essentials extension, Visual Studio is still my IDE of choice.

At first, I steered clear of Twitter Bootstrap as I felt it was an important part of the course to write all of the CSS myself. As the emphasis of the projects moved into the programming side, I decided to start incorporating Twitter Bootstrap into my projects. This is something that I am very likely to use in real world projects, and another string I wanted to add to my bow. I think this shows another benefit of the flexibility of a course like the Thinkful one. Each person comes to the course with a different background and with different objectives and it makes sense to me to make the experience as close to my real world projects as I can. Certainly, it was an ideal time to take a look at Twitter Bootstrap when I was already focussing on CSS and JavaScript.

Resources

Like I said, front-end web development is a whole other world, so I needed to start plugging into some additional resources.

Podcasts

I listen to a lot of technical podcasts - at 1.5x speed for maximum productivity! :-) I’ve found a couple of great new front-end podcasts. I’m still struggling with the new vocabulary of this world, but things make more sense the more you listen:

JavaScript Jabber: Has guests on from different open source JavaScript projects so lots to learn. Several regular hosts too, including Joe Eames, whose Pluralsight courses on front-end web development I have found particularly useful:
Shop Talk Show: Have a few guests on, but less than JavaScript Jabber. Often have Rapid Fire episodes, where they just answer listeners’ questions. Again, really insightful into the front-end world.
YapCast: Actually, Jesse Liberty’s YapCast is one of my old faithful podcasts that I was already listening to. Recently though, Jesse has had a lot of interest in AngularJS and other front-end topics and some great guests from the .Net community discussing these topics. John Papa has recently joined as a regular co-host and he has some excellent Single Page Application courses on Pluralsight, including some with AngularJS.

Newsletters

If weekly email newsletters is more your thing, these newsletters give links to interesting topics in the world of front-end web development:

Where to Next?

This course is a great introduction to front-end web development and from what I can see a lot of former students move on to junior level front-end roles. For me personally, I think it is great preparation to start looking at skills that are complementary to my server-side background, such as AngularJS and other Single Page Application solutions. I think it would be great to do a role with ASP.Net MVC or Web API on the back-end and AngularJS on the front-end, for instance. Either way, I plan to do the new Thinkful AngularJS course, which is designed to pick up where this course left off.

Update (14 June, 2014)

Thinkful provide an online certificate to course graduates.