WDI Day Ten: Project Week 1, Part 1

Today was the first day of our project week. This week, we’re all expected to get to GA bright and early and work away all day long on our first major project. Our task is to complete a familiar game with HTML and JS. We had the following games to choose from:

  • Tower of Hanoi
  • Trivia
  • Flash Cards
  • Simon
  • Hangman

I decided to go with flash cards, simply because creating a game on its own will be a challenge enough. I’m still struggling to figure out the logic when I start projects, and I’m hoping that will change over time.

Over the weekend I managed to complete most of the project’s functionality, so for the most part I worked on compiling the content for the cards, finding images for the front and back of the cards, and working out some of the styling issues. I kept running into issues with event listeners, since my game involves users guessing the answer to a card in an input, then clicking to view the back of the card, then clicking once more to see the next card. The game includes scoring, a timer, and the option to play again when the game is over.

WDI Day Nine: Scopes, Closures, & User Stories

We reviewed JavaScript scope, context, and closures. It was helpful running through a couple of scope exercises, to ensure we knew when variables were being read locally or globally in different functions. Context involved going over “this,” and what “this” is referring to. I felt like I was able to grasp most of the concepts, although one of our in-class exercises proved to be pretty difficult for me. I feel like whenever something involves math, it takes me a little while to figure out how to get it working properly. Hopefully that will improve with time.

In the afternoon we went over problem solving and user stories in group. We were also told what the requirements will be for our first project which will need to be completed by Thursday of next week. I’ve decided to tackle making a JavaScript flash card game. My goal is actually to finish it early so I can tackle another game like hang man. I’m probably being a little overly ambitious, but we shall see what I can do…

Resources

WDI Day Eight: ATM Lab

I’m definitely out of my comfort zone now when it comes to WDI, which is great – let the learning commence!

Today was another lab day, and it was definitely a struggle. Our assignment was to create an ATM where users could deposit and withdraw funds in a checking and savings account. If the account value was zero, a CSS class needed to be assigned to the ATM that highlighted the balance in red.

At the end of the day, I managed to complete the lab along with the bonus assignments. My biggest issue was being able to make the code cleaner. I was able to get the functionality down right, it was just a matter of writing shorter code. I guess that’s something for me to aspire to?

Overall, I’m pretty proud that I was able to get something to work. Makes you feel like a bit of a magician when your javaScript is functional.

Takeaways:

  • Console.log is really useful in figuring out how the browser is reading variables
  • Figuring out when a user is clicking a button within a specific div
  • Pseudo coding well in the beginning can really help you out later
  • Struggling with an exercise until you figure it out can help solidify some of the overall javaScript concepts

WDI Day Seven: DOM, Debugging, and another Panel

Today proved to be a lot more challenging since it involved more hands-on work. The day started off with a DOM exercise, followed by more javaScript review that included reviewing key events, timing functions, and different error messages.

The big takeaway was, when in doubt, console.log it! Or Google it…

In the afternoon we met with the Outcomes team who had a panel of GA graduates talk to us about their experience in the program. It sounds like there is definitely a struggle in the program – a lot of frustration when you’re beginning to learn complex problems – but ultimately, if you keep at it, things will click and make sense to you.

WDI Day Six: DOM, Events, and Callbacks

I haven’t felt like I’ve been the strongest when it comes to JavaScript, so I was really excited to dive into more code today. We reviewed a few concepts I was familiar with, like working with the DOM (or Document Object Model), events, and callback functions.

Although the lecture didn’t consist of too much new information for me, the hands-on assignments were what really helped. Having to struggle to figure out how to create different functionalities proved to be really useful. One task I tackled included creating a JavaScript stop watch. Sometimes the struggle of getting something to work can be a real headache, but at the same time, once it’s actually functioning properly, it can give you a real sense of relief and accomplishment.

Helpful Resources

WDI Day Five: PseudoCoding and Intro to JS

Finally, the day I was waiting for arrived – working with JavaScript! Although today was also more of a review for me, I did find myself realizing I definitely need to do some extra work in my free time this weekend just to make sure I’m at the level I want to be at with JavaScript.

In the morning we did a few exercises involving PseudoCoding, which I realized is a pretty difficult concept to wrap my mind around. I’ll have to make sure I practice writing pseudo code and will check with my instructors to make sure I’m doing that properly.

We also got to play around with a fun and addictive game, Cookie Clicker:

cookie-clicker

Once we dug into JavaScript, we reviewed data types, conditionals, and ended the day with objects and functions. One of our homework assignments definitely looks like it will be a lot of fun to fiddle around with – it’s a choose your own adventure where the prompt boxes will change based on user input. I’m excited to get started, and hope I don’t run into too many issues. Getting started with JavaScript for any assignment is usually a little tough for me. I’m hoping that will change fairly soon.

Some Fun Resources

WDI Day Four: Portfolio Website Lab

Today was our first lab day. We started off with a lesson in Git, and then off we went to work on building a site for our portfolio. I’ll admit, I’m at a bit of an advantage when it comes to working with layout. Since I’ve had extensive experience in web design, I happily tackle styling whenever it comes up. I managed to style the basics for my overall portfolio site during the day, and started thinking about how I’d like to rollout JavaScript as a later functionality.

Things to add later:

  • Tabbed browsing for portfolio sections (web, application, and illustration)
  • Sorting filters
  • Transitions for the anchor links
  • Additional scrolling animations
  • Making the site mobile-friendly

Overall, I felt like I accomplished a fair amount, however I’m more excited about starting JavaScript tomorrow since today was yet another review day for me.

You can view the current site here.

WDI Day Three: CSS and the Tech World

Today was yet another review day for me, yet I still had several fun takeaways, not to mention that they had a panel that spoke to us about the tech industry in the DC area. It was great hearing about useful Ruby Meetups like the ones in Silver Spring and Arlington. Also, I liked hearing about how it’s useful to take your previous, unrelated work experience and find a way to spin those skills into something that’s a great asset to your work as a web developer. The book, “The Passionate Programmer,” was also recommended which is something I’ve heard about before and now will definitely read.

With our CSS lesson, I learned a lot more about flexbox which is something I need to fiddle with more. Previously, I had heard of it but had never used it, simply because my work usually involved making sure older browsers could support my CSS styles. Flexbox is a fun way to create clean layouts and center elements. The lesson also reminded me that box sizing is a great thing to use since it makes it so I don’t have to worry about all the math and calculations involved with padding and margins.

Some helpful resources related to the CSS work included:

WDI Day Two: Git & CSS

It’s amazing how it’s only been two days, and already we’ve covered quite a bit of ground. Although I was already familiar with Git, and have used CSS extensively as a web designer, today was still a day where I learned a few new tricks.

First off, there’s the text editor that I use quite a bit, Atom. I’ve never really looked into the keyboard shortcuts involved with it, and realized how there are so many ways that I can improve my workflow:

  • ⌘ + , Open preferences
  • ⌃ + g Go to line
  • ⌘ + p Go to file
  • ⌘ + r Go to symbol
  • ⌘ + ⇧ + p Toggle Command Palette
  • ⌘ + ⌥ + Left/Right Toggle Files/Tabs
  • ⌘ + w Close Current Window/File if Saved
  • ⌘ + s Save current file
  • ⌘ + ] Tab Right
  • ⌘ + [ Tab Left
  • ⌘ + z Undo Change
  • ⌘ + y Redo Change

With Git, I learned a little more about discarding changes made to the staging area – something that I’ve never really played around with much before.

With CSS, I learned a few new things about animations and selectors. First off, playing the FlukeOut game made me realize how many advanced selectors are out there that I haven’t had a chance to really implement in any of my previous work as a designer. And as far as animations go, I realize I have quite a bit of research to do to really feel comfortable with them.

And lastly, I discovered how fun and easy it is to build blogs with Jekyll.

All in all, it was a really busy and productive day. I can’t believe it’s only been two days – it feels like I’ve been coding away at WDI for weeks. It’s safe to say I’m pretty please with the curriculum thus far.

WDI Day One: The Command Line

Today was the first day of class, and I was definitely feeling a bit nervous and giddy. I’ve never done something like this before, taking leave from my company just to delve head-on into learning something.

For the most part the day was filled with team building exercises and getting to know my classmates. The instructors reviewed the format of the course and how GA works. It was all the usual introductory type of day.

The coursework dealt with the command line interface (CLI) and a few of the commands that would really come in handy throughout the duration of the course. This included the following:

ls // list directory contents
cd // current directory
touch // create a file
mkdir // create a directory
cp // copy files
pwd // print working directory

I haven’t had a chance to really jump into navigating the terminal, so even though today was more of a review day for me, I still had a few take aways that will come in handy in the future.