What I did:

I completed The Web Developer Bootcamp, “the most comprehensive” online course on web development. I did this as a part of my self directed software engineering course for my Graduate Unschool project. I added this course (and a few others I will not be writing about at length: Angular 4, React from the Ground Up, The Full Stack Web Developer) because I realized it’s important to learn relevant technologies when pursuing a career in software. Web development is also a practical skill that I can combine with what I learn in the MIT courses or personal interests to build projects to show and test my knowledge.

This course has had a serious impact on my life. Since finishing it I have: started working as a full stack web developer and developed and launched my own website.

I strongly recommend this course to anyone, with any background, who wants to learn to develop web applications.

What I learned:

I made a custom project based to showcase everything I learned in this course: FindSkateparks.com

Users can easily search the database of skateparks, find the closest or top rated parks, or add their own skatepark to the website.

The website uses geolocation to find the user’s location and show the parks closest to them.

The most useful information is at the top: location, hours, and required equipment. This is so users can easily find how and when to visit a skatepark without having to search through inconsistently structured pages. Users can also add comments and ratings, which will change the park’s overall rating over time.

Simply put, I learned everything you need to know to build a website or web-based application from scratch.

This includes experience and understanding using the following technologies:

  • HTML5
  • CSS3
  • JavaScript
  • Bootstrap
  • SemanticUI
  • DOM Manipulation
  • JQuery
  • Unix
  • NodeJS
  • NPM
  • ExpressJS
  • REST
  • MongoDB
  • Database Associations
  • Authentication
  • PassportJS
  • Authorization

Here are some of the many projects I built as a part of the course:

  • YelpCamp:

    The capstone project for the course. I based my skatepark site off of this.

  • ToDoList:

    A simple web application for making editable lists.

  • Patatap Clone:

    A visual beat pad. This is actually pretty fun to use. Click the link and use your keyboard to make beats and interesting patterns. This was the first project that made me feel like I could build something cool and useful.

How I did it:

Although I typically approach my Software Engineering Graduate Unschool courses using a modified deliberate practice method, this course had a different format, so I took an approach that was more in line with the natural layout of the course, and added a section to experiment with a new learning strategy. The following sections were completed sequentially.

  • Coverage & Practice (50 %)
    • The course is structured as a series of video lectures, most of which were code-alongs, and exercises. I have always been critical of the wastefulness of passive learning, and the code-alongs take the passiveness of a lecture and turn it into an engaging process where you are guided though building something that demonstrates an underlying idea, helps you gain experience with a certain concept, or will be used as a useful reference when you’re developing something outside of the course. A code-along is where the instructor has you solve a problem together while he guides you through the steps he takes and the reasons for his approach. You’ve probably experienced this lecture style in science classes in the past. It’s important to note that when taking this approach the problems the instructor chooses to solve ultimately make or break the course. Ideally an instructor would carefully select each problem to demonstrate the core concepts and skills in the course and order them in a sequence such that every problem is challenging enough to be interesting and engaging (so guidance is welcomed), but not so challenging that it is overwhelming and disorienting (so students shut down). Colt Steele, the instructor of this course, choose the problems perfectly. Each code-along builds on the last, it’s always engaging, and I walked away every single day feeling as though I was a better developer than the day before. This was the best lecture/coverage section I’ve ever seen in an online course, and I think this course can be used an example for how anything should be taught.
  • Creative Project (45%)
    • This section was an experiment for me, and was not part of the course as it was presented. Typically I’d end the bulk of the skill development section after completing difficult practice exercises and be left with the synthesis section to demonstrate my knowledge (in a way that I have been dissatisfied with so far). However, I realized that we all have personal reasons for learning something, so I took everything I learned in this course and spent almost as much time personalizing the skills I had developed to create something I was interested in. I ended up learning as much in this phase as I did in the previous phase, building on top of what I’d already covered in the course. My creative project for this course is: findskateparks.com
    • Creating a personal project really helped me connect with the usefulness of the skills I developed in the course, and forced me to practice them in a realistic way, as opposed to the rote way they are typically practiced though textbook problems or assigned exercises. Of the courses I’ve completed so far, I can most easily apply the skills I’ve learned from this one. I believe that is a direct result of investing my time building something I care about using the course knowledge. I will be adding creative projects as a potentially crucial part of the learning method.
  • Synthesis (5%)
    • I procrastinated for months then painfully wrote this article outlining what I did and what I learned in the course.

What I learned about learning:

  • Web development is an awesome connector skill that can be combined with any other skill to further one’s pursuit of both. Examples: my creative project (skateboarding), this blog (learning and writing), your favorite website, your favorite web application.
  • Directed problem solving, where the students are physically solving problems along with the instructor, is an excellent way to turn the passive and mostly useless lecture phases of a course into a more active, engaging, useful phase. Especially so when the problems are selected in a way such that they are challenging, but not intimidating, for students, and demonstrate the core concepts of the course in a way in which they’ll be realistically used.
  • Creative projects turn new skills into long term skills by forcing you apply them in a realistic way.
  • A creative project is the best way that I’ve found (so far) to showcase your knowledge. It is much more impactful to say, I made this, and show your work, than to say, I can probably do this because I learned how to do code in JavaScript, style webpages in CSS, …
  • We want to learn new skills so we can do something with them. Every directed learning resource you encounter will fall short of the specific reason you wanted to learn your new skill. Reconnect with your “why” and use the skills acquired in the course in a more direct way to reach your personal goals before moving on.