Arcade Game Clone

Look's like you have landed at my Blog *evil grin*!!

Well, Thank You for taking out the time and playing my game :) Happy  to see you!

You may post your high scores in the comments below!

If you have wandered here on your own, I'd like you to try an arcade game clone I developed.

Here's the link:

http://aui3.github.io/frontend-nanodegree-arcade-game/

Happy Playing :)

Feed backs and Project 3 :)

I have received feed backs on my project 1 and project 2 and glad to report that I passed both projects and along with it got certificates for the corresponding courses for both projects.

I have been working on my linked In profile and my Resume, with hopes of applying for jobs to at least get comfortable with the whole interview process and prepping for the interview part. Some of my class mates have amazing profiles and I have been getting inspiration from them.

Also started working on project 3 and it is seriously very addicting. Most of the game features have been left on us. We can personalize the look and game play and as such I have been hooked on it. Almost every day I come up with a new feature that I add to the game. That certainly means I am learning lots of new thing. Just today I used the 'globalAlpha' feature of the canvas context to change the opacity of the display when the game is paused or when the game loop finishes.

Next I am thinking of adding sound when the player collides with the bug or the gem...

I don't know when I will stop :)

Here's a link of the game :

http://aui3.github.io/frontend-nanodegree-arcade-game/

Project 2 Version 2

Keeping up with the spirit of introducing version 2 of projects, we got to try our hands on some java script challenges. These were auto graded and unfortunately, even though the challenges themselves were fairly straightforward, I wasted a lot of time because either the instructions for formatting the result output were unclear or the auto grader was behaving differently.

It took some iterations but eventually our coaches clarified exactly what format of output the grader was accepting.

We learned string manipulation in JavaScript and also how to iterate over JSON data.

Interactive Resume

This second project was a great learning experience. We had to develop an online version of our resume  and most of the action came from JavaScript. Our main index.html was just a skeleton file and most of the page was being populated by JavaScript functions that were reading JSON data.

Resume data is stored in JSON format which provides a key-value pair from of data structure, with the addition that 'values' can hold functions in them.

We used JQuery to access DOM elements and append formatted JSON data into them.

I tweaked the CSS layout a little bit to give the resume a better look and feel.

I explored the d3js library a little bit to add a 'skills chart' to my resume. The d3.js library enables data to be represented in a graphical form. I used a simple example included in the tutorials and modified it to make a bar chart to represent my skills. A higher bar represents a higher command on the particular skill.

Before I started this Nano-Degree, I had bought a Web Development course at Udemy. The course had a good introduction to common javascript and jquery functions and made my course experience for the same at Udacity all the more easier!

Along came version 2....

This was the second version of the first project and I put in a lot of hours in this. If I had any doubts about pursuing this field, they were gone after I did this project. It was challenging and I thoroughly enjoyed doing it.

Even though the task at hand was fairly similar to the first version, there was an addition of the automatic grader. Now this was fun! Nothing like getting your work instantly checked.

So, we were given a design template and we had to reproduce it in HTML and ensure a fairly close resemblance to the design. The automatic grader gives a mismatch percentage between out HTML reproduction and the actual design.

It was a lot of iterations to finally make it below 8%. When I first submitted my code I got a 23% mismatch. I thought my HTML looked fairly similar to the template but since I got that much mismatch, I looked closely at my work and was able to identify some basics mistakes I was making. That brought my mismatch down to around 9% and after this point, it was quite a struggle to bring the mismatch down to 8%.

So I learnt a lot while I was going from 23% down to 9% and not so much after that. Most of what I changed to go from 9% to 7.8% were small pixel changes, padding, margins etc all increased a bit here or decreased here by. It was also a LOT of guess work and hours spent. It seemed like a waste of time to focus on such small changes and spend so much time on them and I wondered what were industry practices.

One 1:1 appointment session I realized that there is plenty of back and forth that happens between  developers and clients and perhaps this is what a mismatch thresh hold of 8% aims to achieve.

Like I mentioned, most of my learning happened while going down from 23% to 9%. This is where I was able to identify mistakes in my basic grid structure, what percentage of the total page to allot to each of the columns/boxes.

Overall, I feel more comfortable working with CSS elements after doing this project.


So I am glad that along came version 2!

Project 1 Mock Up Website Design

This post is about the first project that I submitted as part of the Nano Degree Program. The project involved creating a website from a given mock up design. Since I have very little working knowledge of  HTML & CSS, the project was fairly challenging.

The Intro to HTML & CSS provides necessary information to complete this project. The course was helpful and  so much so that in one of the lectures the instructor actually goes through his own implementation of the project. Now this came in very handy :)

Twitter Bootstrap framework was introduced. Frankly now I feel more comfortable working with this frame work than using for example flex-boxes etc

[Note to self] It might be a good idea to get comfortable with flex design!

So, I turned in the project on October 23rd and received feedback a few days later. My code passed all specification except one that requires the submitted code to adhere to HTML & CSS Style Guidlines. Basically the guidlines tell you how to format your code, what conventions to use when naming variables, how to make your code more readable and elegant.

All in all, a good document and I totally missed reading it before submitting my project. Any how, after reading the code, most of my HTML was good and i just formatted, polished the CSS a litlle bit and submitted the project for a second time (multiple submissions are allowed) on November 7th.

Now, interesting to note that it was almost two weeks before my re-submission even though there wasn't much work to do. This was because...Along came version 2. More on this next :)

Initial Thoughts

Hi All!

Okay, so first things first! I am a little late in starting this Blog. My aim for this blog is to document my journey and learning experience as I go through the Nano Degree Program. Since the program started almost two months ago, I have a lot of catching up to do in this first post. Incidentally, this is also my first blog ever, so this should be interesting.

I will update an About Me section soon since I think it is important to understand how much I already know about Web Development in order to judge how much am I taking away from this program.

First of all, a little bit on the Nano Degree itself. It consists of six modules and at the end of each module there is at least one project to test our understanding of the module. Each module corresponds to one or more courses available on Udacity and in order to complete the module, we have to take the corresponding courses. More about the Nano Degree here!

In addition to course work, there is support from coaches, and student forums which can come in extremely handy when you are stuck:) There are also career events which is one thing that I believe really makes this program stand out!

Okay, that is enough for initial thoughts.

I will start blogging about individual projects and challenges next! Stay tuned!!:)