My Review of Coursera’s Full Stack Web Dev Specialization Course I

In the past, I never been serious about sticking to a particular development stack.  I’ve explored and studied enough to realize what I was good at and what I needed to do to obtain clients and projects, which left me uncommitted.  I can’t say I didn’t try; I as really gunning for LAMP stack and even spent some time learning more about MySQL and Apache this past spring.  I also played around with Django after being encouraged by other python enthusiasts to give it a try.  Still, I kept my options open, and after being given the opportunity to do a couple of freelance projects over the summer building websites for a friend’s charity organization, a local food club community,  and a transportation non-for-profit, I’ve been gravitating more towards front-end development and really diving into JavaScript.

Studying JavaScript led to me taking up a specialization in the MEAN stack.  The MEAN stack is JavaScript based, using MongoDB as the database, Express as the framework, AngularJS as the MVC app environment, and NodeJS to handle the back-end in web and application development.  After 2 weeks of researching learning resources that would best suit my introduction to MEAN, I was able to plan a route that would get me to advanced beginner (perhaps intermediate?) level by January 2016.  In right timing, Coursera had just organized their first set of specializations focusing on front-end web development that were released this fall.

I reviewed the curriculum to make sure I would not be repeating myself as far as learning something I had already learned before.  Specializations offered by London University and Hong Kong University factored in advanced JavaScript functionality and NodeJS which would help me progress.  The difference is London U chose Meteor as their app environment, and HKU chose AngularJS.   Since AngularJS is growing more in popularity, I went with HKU.

Each course in the specialization is around $80 each, for a total around $480 including the capstone project.  What I love about Coursera is they offer scholarships if you can write a great essay about how you intend to use what you learned in the class.  I applied, got a scholarship, and was able to start the specialization at the beginning of September.

Week 1 of Course I: HTML & CSS

I was not excited about going over HTML and CSS in the first week of the course. I have been using those two in my design work and didn’t want to spend the course rehearsing what I’ve already become proficient in.  The course was geared towards advanced learners though, and gave brief overviews instead of going into full detail about specifications.  Professor Rossiter focused on HTML5 forms and we built a dating application form as our first assignment.

My Dating App HTML5 Form

My Dating App HTML5 Form

Week 2 of Course I: JavaScript Intro

The second week focused on JavaScript, giving a brief overview of variables, scope, arrays, and loops.  Prof. Rossiter had us concentrate on functional programming, developing iteration loops through arrays and using methods in the lecture part of the course.  I had previously finished up Toni Alicea’s course on understanding JavaScript’s weird parts with the CodeBuddies crew and worked my way through by John Pollock’s JS book for beginners, so once again I was glad that Rossiter centered on a few main concepts, most of which I was familiar with.

Week 2 Assignment: My Color Guessing Game

For our second assignment, we had to build a user-prompted game that took responses from the user and gave feedback.  I had to submit the assignment as one file, so I included the in the HTML form and assigned the the onload event handler to start the game once the code had been loaded and recognized in the browser.  Here’s the basic page body*:

<html>
<head>
<title> Color Guessing Game </title>
</head>
<body onload = “onload”>
< script >
….javascript goes here….
< / script >
</body>
</html>

After creating the body of the page, I first assigned a set of global variables for the colors in my game, the user’s guess input, and the number of guesses the user would take to answer correctly (initially set to 0).  I also set a global variable to finish the game that I would use in the while loop of the game to keep it from becoming infinite.   My color guessing game used an array named colors to index each color a number:

var colors = ["blue", "cyan", "gold", "gray", "green", "magenta", "orange", "red", "white", "yellow"]; 
var guess_input;
var guesses = 0;
var finished = false;

I then had to create a function do_game( ) that would generate a random number which represented a color that was targeted as the answer, as well as run the while-loop that would continue to ask the user to guess a color from the list (array) until the correct one was chosen.  The while-loop also counted the number of guesses it took the user to create the right answer:

function do_game() {
   var target_index = Math.random() * colors.length;
   var choice = Math.floor(target_index);
   target = colors[choice];

   while(!finished) {
     guess_input = prompt("I am thinking of one of these colors:\n\n" + "blue, cyan, gold, gray, green, magenta, orange, red, white, yellow\n\n" + "What color am I thinking of?");
     guesses += 1;
     finished = check_guess();
   }
 }

The gist of the code that we were being graded on was to create a function that would check the user’s guess correctly.  I created a function check_guess( ) that would run a series of conditional if-statements comparing the target to the user’s guess as the argument parameter.  Because the colors were already indexed in the array, and the target was set to a random number in the do_game( ) function, I was able to compare the two as if they were numbers.  The if-statements were set to false if the guess was incorrect, which would re-run the while loop prompting the user for another guess. The game continued until the user picked the right color illustrated in the else conditional, in which the user would get a congratulatory screen would change the background to that answer:

function check_guess() {
   if (colors.indexOf(guess_input) == -1) {
     alert("Sorry, I don't recognize that color!\n\n" + "Please try again.");
     return false;
   }
   if (guess_input > target) {
     alert("Your color is alphabetically higher!");
     return false;
   }
   if (guess_input < target) {
     alert("Your color is alphabetically lower!");
     return false;
   } else {
     myBody = document.getElementsByTagName("body")[0];
     myBody.style.background = target;
     alert("Congratulations! The color was " + target + "\n\n It took you " + guesses + " guesses.");
     return true;
   }
 }

Week 3 of Course I: Advanced JavaScript

The course ended with a series of lectures on advanced concepts in JavaScript.  Prof. Rossiter concentrated on node relationships in the DOM structure, teaching us more event handlers and showing how the browser registered handlers.  I paid attention to this part of the course the most because I could easily add event handlers to my existing sites, thus I had a practical incentive to watch all the lectures instead of just a few to get by.  For the final assignment, we had to create another game that would focus on click handler responses from the user.  We were graded on how the game board was created and styled in HTML/CSS, the correct use of images generated and displayed via a set of functions, and the JS code that contained the game’s main functionality.  The code is too long for me to list in this blog, but you can view it the code and play the game through my github repo for it here.

My Matching Game Board

My Matching Game Board

Conclusion

In reviewing the first course of the specialization, I probably wouldn’t suggest it for someone who has never written code before.  I realized that the reason why I did so well in the course was because I had some basic knowledge of the JS concepts being taught in the lectures.  I found the pacing of the course too fast, and I spent a lot of time answering other students questions in the discussion board– a clue that most of the class had trouble understanding.  Even with my past experience, I still had someone review my code before I submitted.  Instead, I recommend going through HTML/CSS and the first 3 parts of Codecademy’s JavaScript track first, as this was clearly not a class for beginners.

I was right in my assumptions that the course would be nothing more than a brief overview of web page components targeted to those who just want to learn the minimal amount of JS necessary to understand how AngularJS and Node.js works.  Knowing this now, I will need to supplement what I learn in the specialization with either books or more detailed tutorials, as I can’t rely on the pacing in the next course to be slowed down for my understanding.

I’ll keep you all updated as I go through the specialization.  The next course starts on October 16th, and will focus on UI frameworks, Gulp, Grunt, and Node.js.  I’ll do a review of each course, so keep on the look out for Part II next month.  Anyone can take the course, regardless if you are enrolled in the specialization or not, so comment below if you would like more information.

Advertisements

Join Me for Live Show and Tell on Bootstrap Tonight

For those who first joined me 3 weeks ago in taking the Microsoft course on Twitter Bootstrap, you will know that tonight is the final day of the course.  I want to wish best of luck to everyone who is completing the final exam and turning in the last few lab projects to get their certificate today.  To celebrate the end of the course, we’ll do a live show and tell of our projects created with Bootstrap tonight in conjunction with Code Buddies via Google Hangout.

This will be a live hangout, so participants should feel free to showcase their site designs built with Bootstrap as well as labs completed for the course.  To those new to using Google Hangout, there is a screen share option that accompanies the voice and video, and I’ll go over briefly how to use those options before we get started.

The hangout is an hour long and starts at 6:30pm CST // 7:30pm EST // 5:30pm GMT // 4:30pm PT. To RSVP, visit the Code Buddies site here.

I want to personally thank Code Buddies for allowing me to host the course with their platform. It’s been great and I hope to organize more study sessions in the future!

Want to Learn Bootstrap? Join me on CodeBuddies Tonight

I’ve been hanging out with the Code Buddies community this year as part of my goal to network with other designers and developers over knowledge share.  It’s a great pair programming resource for newbs who want to learn new languages with others via Google Hangouts.  Through Code Buddies, I’ve had the chance to join others in designing side projects, studying data structures in python, learning more about testing and Rspec, and trying out frameworks such as MeteorJS.  I decided to create a session on Bootstrap, since Microsoft just launched their latest MOOC on it.  I have working knowledge of bootstrap, and even designed a template or two with it, but it’s always cool to improve.

If you want to join me, we’ll be meeting virtually on Code Buddies every Tuesday night at 6:30pm CST beginning today.  We’ll be using the Bootstrap MOOC as our main learning source and sharing our projects in the Hangouts over the next 3 weeks. To register for the course (DEV203x), go to EdX to enroll now.  To sign up for the hangout and vid chat with yours truly about course material, click here.

New Updates Added to Our Code Wiki

Hello all,

I updated Our Code Wiki with some goodies for you learning pleasure.  It’s been a while since I updated, so I added plenty to keep you all busy.  Enjoy and have a great holiday season!

Open2Study’s course UX for Web

CS258 Software Testing Methodology course

CS253 Web Dev: How to Build a Blog course

CS262 Programming Languages: Building a Web Browser course

CS255 HTML5 Game Development course

CS271 Intro to Artificial Intelligence course

CS215 Into to Algorithms course

Reference Guide on Linux Command Line

Reference Guide on Unix

Google’s Guide for Technical Development

Checklist for Responsive Web Design Projects

Stanford’s Practical Unix course

Links to Code School and Google Developers University

If you would like to join as a member of the wiki or contribute, subscribe to Our Code Blog, or check out instructions here.

Learn Python in your PJs with PyLadies

The Washington D.C. chapter of PyLadies have been “experimenting” with online education. The result: a Saturday morning Intro to Python class available via Google Hangouts.  There is no cost for the class and all who register will be sent a link to the Hangout to take it online.

Intro To Python

Saturday, November 15th, 2014

9:00AM – 12:30PM

via Google Hangouts

To RSVP, register here on meetup.com. Installation instructions will be sent before the class starts.

New Updates Added to Our Code Wiki

Hello all,

New goodies were added to Our Code Wiki for your learning pleasure:

“Diversifying Competitiveness Technology” video

Udemy course: Make a Splash Page in HTML

52 Question Checklist & Guide for Responsive Web Design Projects

Stanford U course: Practical Unix

Google Developers University links

Code School links

I update the Wiki several times a month, so be sure to check Our Updates page.  If you would like to join as a member of the wiki or contribute, subscribe to Our Code Blog, or check out instructions here.

New Updates on Our Code Wiki

Just added the following updates to Our Code Wiki which are available now:

Browser Compatibility guide

The Silver Lining APEX and Salesforce web tutorials

Learn to Code: Advanced HTML5 CSS3 web tutorial

MIT course: Introduction to Algorithms

Github’s Programming Free Ebook List

Github’s JavaScript Frameworks Free Ebook List

Pycrumb’s Free Python Ebook List

Google’s Python course

Google’s C++ course

UC Berkeley course: Structure and Interpretation of Computer Programs

MIT course: Introduction to Programming with Java

Udemy course: Learn HTML5 from Scratch

AppCoda link

The Odin Project link

I update the Wiki several times a month, so be sure to check Our Updates page.  If you would like to join as a member of the wiki, subscribe to Our Code Blog, or check out instructions here.