Finished Mock Up Page – Review

So I thought it would be beneficial for me to go over some of the aspects of the project I was assigned.

Overview: Create a Single Page Application (SPA)[basically a single web page with purposed functionality].  It must have the information given presented.  Each menu item is associated with a specific panel.  Each time a menu item is clicked, there should be an animation for both the menu selection and the changing of panels.  The information on the panels is given in a JSON file.  So you just use JavaScript is acquire the JSON to use it.  There are different possibilities for images to use.  Some have text while others don’t (meaning adding text over image).  There are also shadows added as images to make the webpage stand out.

The languages used were HTML, CSS, and JavaScript.  jQuery was chosen as the framework of choice.  The files where hosted locally and displayed via Node.js and Grunt.  JSlint, CSSlint, mocha, and jasmine were available for testing.  LiveReload was available for instant refreshing. All the code would be uploaded using Github (creating a pull request).

The one thing  that I did great on: I did WAY better getting the JSON than I thought I would.  It was the first time I had a reason to acquire JSON for a project, so I was worried my total inexperience would kill me here.  But I was able to get what I needed pretty nicely.  Definitely the most excited I got on the project is where I was just rolling here and getting everything I needed.

The one thing that I did poorly on:  Getting LiveReload to work.  I don’t know if it was because I use a Windows PC running Windows 8, the files, or just my ineptitude, but I could not get it to work.  I probably spend 5 hours alone trying to fix this without desired results.

The one thing that I ran into by surprise: While trying to fix LiveReload, I ran into testing my JavaScript and CSS.  This was an awesome surprise.  I have heard of and messed with testing for these things, but they were always already set up and controlled for me.  While this was set up already, it was not apparent how to run them (Not in the project files.  I know you can google these things though.).  This allowed me to see some things on my files that I could clean up.  Thankfully all the code worked before and after doing this, making me feel real good.

The biggest thing I learned:  I need to do more project oriented learning.  I learned so much just from this project alone. I have been doing tutorials on Treehouse and Codecademy.  I have also watch videos on Code School and Youtube.  These are really tools though.  Actually going through a project allowed me to run into problems/issues and determine the best way to solve the problem with the knowledge and experience I have.

Posted in Blog Posts Tagged with: , , , ,