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

27 thoughts on “My Review of Coursera’s Full Stack Web Dev Specialization Course I

      • I’m enrolled in this exact same class and I’m one of those students who’s been feeling a little overwhelmed due to my lack of prior Javascript experience. Though I have been managing to submit passable work so far, the descriptive thought process behind your solutions here really helped me break down the problem and understand it better. I do feel like the class is moving very quickly, and I can’t tell you how much I appreciated finding a descriptive logical analysis!

      • Thank you for reading, John. I also noticed many students getting overwhelmed by the 2nd week of the course. It’s a lot of JavaScript to master in one week and to be honest, had I not completed prior study in JS, I probably would not have done so well in the class as it’s so advanced. If you continue, I encourage you to get to know people in the course through the discussion boards. I was able to get clarification on some of the JS concepts I didn’t quite understand (such as sorting and parsing items in an array).

        I’m doing the entire specialization, and I plan to do a review for each of the courses in the path. I can tell you that in the 2nd course, things get better, mostly because Prof. Mappala is more involved in the development and comprehension of the coursework.

      • Definitely. I’m mentoring for the AngularJS and Ionic course within the specialization, so you can find me in the discussion forum 🙂

  1. Pingback: In-Depth Review: HTML, CSS and JavaScript from HKUST on Coursera | MOOC Report
  2. Pingback: #100DaysOfCode Day 2: Form Validation with HTML and JavaScript | Our Code
    • Hi Denis. Yes, I’m still enrolled in the specialization. I’m in course 4 now, which covers mobile development using a combo of Ionic and AngularJS. A lot of what I’m learning in the courses are covered in my #100DaysOfCode series. For example, you see what I built in Course 3 which covered AngularJS in this post.

      Be sure to check back into the blog. I plan on covering what I learned in course 4 in its entirety (when I can find the time to write, of course).

  3. I am a beginner to coding, just started trying to learn it about 6 weeks ago. I took the Coursera Course on Responsive Web Design and was able to keep my head above water and successfully completed it. I have a grip on HTML and CSS, but Javascript is out of my league. I wanted to improve my skills, so I signed up for the Full Stack Specialization, not realizing that the JS it covers is completely different than what we learned in the University of London course. I am in way over my head. I have been reading books and doing online exercises, and, of course, I understand it in bits and pieces, but when they throw this project at you where you are expected to go far beyond what you have been taught, in the class, in such a short time frame, it is extremely challenging. So I agree with your assessment that you do need to be familiar with Javascript for this course. I am going to muddle my way through Course 1 and am hoping that, as you mentioned, it will get better. I loved learning about coding, but am finding this extremely frustrating. Thank you for blogging about your experience.

    • Thanks for commenting Catherine. I took 2 of the courses offered through London U’s specialization and I agree the curriculum covered is different. London U focuses on development with Meteor and the courses are fast-paced, only providing a brief overview of JavaScript. This is quite common of Coursera’s treatment of JavaScript in the web development courses in general. If you want a more thorough overview of JS that will help you to become proficient, I would recommend completing Codecademy JS track in full or using Free Code Camp.

      My advice is to become very familiar with the course forum, and ask questions early and often. The specialization was new when I signed on. Therefore, if we needed help, we had to figure things out on our own. The course has been offered 5+ times since then, so there is plenty of documentation in the forum for each module.

      The specialization does get better after course I. Professor Muppala teaches all the other courses and he’s really great. The assignments will be more difficult, but if you push through, you will be fine.

    • Hi Folks,

      I just started the fourth class. it certainly can feel a little overwhelming at times. i took a couple of the london classes before starting this specialization, but felt like my javascript skills were not strong enough to keep up. then i stumbled on the full stack specialization. i plan to finish it first and then circle back around to the meteor work.

      bon chance to both of you!

      • Hi PJ. I had a similar plan. I also started with the Meteor class offered by U of London and then switched to the Full Stack Specialization (I was mostly more interested in working with AngularJS then Meteor). I have the last class left on Node.js, but I’m taking a break to fulfill other obligations at the moment.

  4. Meteor.js is a dead end. It sucks you in on its initial ease of use, but it is fundamentally flawed in philosophy. They may not be aware of it, but they are in direct conflict with a very fast moving code base, and they can only succeed in entrapping you (if you let them) in a quagmire.

    • Haha, I understand your frustration with Meteor.js. I’m involved with CodeBuddies.org, and at the time I took that course, the team was working on redesigning the new site with Meteor.js. I agree, the initial ease of use does suck you in, but I found Handlebars.js is great for templating, and I can use it to perform the same functions I would use Meteor.js for.

      What MVC framework do you like working with? I’m interested in learning about tools other developers use.

  5. hey there I’m interested in this full stack web development course though with low on my financial status I can’t buy the specialization and sadly will loose to have a certificate to get my job ready but what I did…. I enrolled in the individual courses of every course in the specialization

    so i see.. all of the topics being covered there but wyat about peer graded assessment am I able to do that too?
    i’m on week 1 of html, css and javascript and I think when i clicked on peer graded assessment it had a lock and said (this will be available when you purchade the course) so i clicked differently and i was in the assessment and in the android app too there is an assignment so can you explain this to me what is assessment and why is all this happening is it necessay

    and sorry for bad english it’s not my first language…

    • Hi Mak,
      It is true that you now have to purchase the course to have your assignments reviewed. Coursera announced this on their blog earlier this year which you can read here. The good news is that Coursera offers scholarships if you need financial aid. You have to apply and you will be judged on the quality of answers to the application’s essay questions. If you apply and do not get the scholarship, you can ask your employer to cover the costs, or set up a Go Fund Me account to raise money.

  6. Hi. I’m on course 3, week 2 and having issues getting to load the menu website with “gulp watch”. I wrote on the forum section several times but haven’t got any solution to my issue. Would you be able to take a look at it? Did you experience any issues with gulp?

    • I did experience issues with gulp, and ended up removing it from my project (It wasn’t required to pass any of the assignments except the one pertaining to it). I’m sorry I got to this comment late. Not sure if you still need help, but let me know, and I can direct you to the work around I did.

  7. Out of curiosity, does the specialization deal at all with Angular 2? If not, is there any talk of updating to Angular 2 at a later time?

      • Hello .. i am going to register for this course .. did you do the final capstone project yet ?? … what do you think about the course in general is it really good and teach a good stuff that would be beneficial to get employed ? thx

      • I did not do the final capstone project. I got promoted at work before I started it, and that took priority for me. I did finish all the courses however, and was a mentor in the specialization for a few months.

      • I asked this question on course 2’s main discussion forum within the past couple weeks, and one of the course mentors replied, “…professor Muppala is working on Angular 2 course. In what kind of format will it be released (stand alone course or something else), I have no information.” In a follow-up question, I asked the mentor if he knew a timeframe for the new material to be made available, but he couldn’t provide that either.

      • Have they updated the material to reflect Angular 2 yet? It would be best if they keep the material as up to date as possible. I was in the first group of people who enrolled when the specialization launched. Now it has grown very popular on Coursera.

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