DevAcademy: final two weeks of Phase 0!

Week 8: Databases + Review

We did this stuff:

  1. Treehouse: Database Foundations
  2. Review JavaScript Objects with Codecademy: JavaScript – Data Structures, Objects I, and Objects II.
  3. JavaScript Gradebook
  4. JavaScript Tally Votes
  5. Fizz Buzz Super Edition
  6. Nums to Words
  7. Javascript Olympics

I quite liked learning more about SQL as I had learnt a little bit while teaching, so wasn’t anything that was new to me.

I have enjoyed learning JS but find it a very steep learning curve going into objects and OOP after not doing any JS for a few weeks. My head was well in Ruby-land.

Ruby seems so much easier – but is that only because I have been working with it intently for the last 3-4 weeks??

The challenges I enjoyed the most in Week 8 where doing the Fizz Buzz Super Edition and Nums to Words – these were Ruby challenges

Felt I learnt a lot during Week 8. I am still looking forward to seeing how all of these things work together in making a website or app.

Week 9: Review

Intro for this weeks challenges:

These challenges are difficult. If you feel like you need extra understanding to complete them, check out the optional but suggested activity below:

  1. OO-Basics
  2. Triangle-Debugger
  3. Reverse Words
  4. Rectangle Class
  5. Translate Ruby to Javascript
  6. Revisit Your Website

Most of these challenges were in Ruby, except for the translating. It seemed like they were in reverse order though, as the first one was a lot harder then the last ones.

I surprised myself quite a lot during these challenges as firstly we were told they were difficult and secondly at first glance they looked difficult. At least the OO-Basics did. But got them all done within two days, except for revisiting my website.

Every so often they throw in a challenge which has all or most of the code but needs debugging. I quite like these as I don’t need to worry about getting my code to work, I just need to try and found the errors in code given to me. I also really enjoyed making code look really neat and tidy as I think this makes a big difference to its readability.

It was fun translating some Ruby code to JavaScript. I ended up doing this with another guy in my cohort as we hadn’t done any pair coding and I was keen to have a go at this before starting Phase 1.

I chose a Ruby exercise on reversing words…

Screen Shot 2015-05-02 at 5.54.50 pm

…and did it in JS with Kyle and then refactored twice by myself…

Screen Shot 2015-05-02 at 5.55.13 pm

Screen Shot 2015-05-02 at 5.55.25 pm

Screen Shot 2015-05-02 at 5.55.36 pm

… quite happy with myself in finding the .map function in the JS documentation and getting it done to fewer lines.

The last challenge of the week was revisiting our website that we built and worked on in Week 2 and Week 3. After those weeks my site was looking like this:

After this week it is looking like this:

I’m pretty happy with how it looks at the moment. There are a few things I do want to do are to :

  1. add a drop down menu for smaller screens. I came across this post – Drop-Down Navigation: Responsive and Touch-Friendly, and it seems like it would be pretty easy to implement. They also have a demo site. When I have some spare time I will try to add this in.
  2. redo the photo, as think it takes too long to load
  3. tidy up the code as it is messy, as started with old site.

The change in design happened for a few reasons:

  1. initial one was too simpler and boring
  2. had used initial one for trying things out – e.g. JQuery drop down menu
  3. initial one didn’t have a clear purpose / context

A couple of sites that I took inspiration from where http://kendallflutey.com/# and http://amy.palamounta.in/about/. I was also thinking about how to present or “brand” me, as I was working on this.

During this process I discovered Font Awesome! I was looking for an icon to add an angle-up to use to get back to the top of the page and came across it. How cool! What other great sites are there out there for using when working on building a website?

So, that is Phase 0. Bootcamp / Phase 1 starts on Monday.

Phase 1 consists of:

  • Programming Fundamentals: Learn How to Think Like a Programmer
  • Introduction to the Dev Academy experience
  • Ruby, SQL, Active Record
  • Solving problems on the command line
  • Engineering Empathy: Explore your inner world

Phase 2:

  • Programming for the Web: Bring Your Applications to Life
  • Javascript, HTML, CSS and Sinatra
  • Learn to rebuild Twitter or create your own Hacker News
  • Engineering Empathy: Maximizing effectiveness with others

Phase 3:

  • Making Beautiful and Meaningful Things
  • Agile software development, user stories, scrum, and sprint planning
  • Introduction to the Rails framework
  • Final project pitches, lightning talks and demo day

The phases are three weeks long. I am hoping to do at least a post a phase. If not, there will be one very big one at the end of bootcamp! See you all on the other side!

More JQuery – mobile drop down menu

Note: 2 May – whoops, this one has been sitting in my drafts for about 5 weeks!

Last week I learnt a lot about JavaScript and JQuery. One of the challenges for Week 3 of Phase 0 (for Dev Academy) was adding interactivity to our own site/s. I added a simple Lightbox effect to my photo portfolio site.

Screen Shot 2015-03-22 at 5.39.20 pm

Another of the projects I did during the JQuery course on Treehouse was ‘Creating a Mobile Drop Down Menu’. I really like the look of drop down menus for smaller screen dimensions and was keen to add this to one of my sites. I decided to add it to my personal site (which is still a work in progress).

Here is two screenshots from the course project site:

And two from my site:

I am pleased that I have managed to add a drop down menu, although I am going to explore using straight HTML5/CSS3 for this in the future. I think it will look better. I am also going to be redoing the pages as well.

I would like to make a drop down menu that looks a bit like this:

And have the menu on a large screen like this:

It maybe awhile before I get it this good though!

Here are shots of portfolio site, moving from the large screen design of my photo portfolio site to the small screen design. The aim will be to add a drop down menu for the smaller screens:

Anyone know of any good tutorials or site going through how to make a good mobile drop down menu?