jQuery

Thinkful Week 2: Delving Into jQuery and JavaScript

It’s my second week in with the Thinkful Front-End Developer Career Path Program and I must say, things are going a lot faster than I thought they would. In my first week, I just tried to get the hang of the program and balance my schedule with work and Etsy and y’know…life stuff. But, for my second week, I was truly ready to kick it in high gear. So, how did I do?

jQuery and Manipulating the DOM

Going through Treehouse, I got semi-comfortable with jQuery, at least to the point where I could add plug-ins and attach the functionality to certain elements. Though it took a great deal of finagling, I was able to get most of it to work. But, what I learned after going through the first few lessons of Thinkful was that I wasn’t really using jQuery. I mean, sure I was copying and pasting and this and that, but I wasn’t truly learning it.

So, as I made my first “Hello World” document, got a feel for the Document Object Model (DOM), and practiced some jQuery basics with searching and traversing the DOM, I felt as though I was really getting a feel for the utility and understanding how and when and why to use the jQuery library. With those basic tools in hand, I was able to take on the jQuery Street Fighter Project.

I thought that Thinkful did a great job with the content on this project, showing you the basic set-up and some best practices, but letting you go at a certain point to make it all happen. I was able to put the basic project together, so it looked like most other students’ projects, but I decided to go the extra mile. As a former avid Street Fighter fan, spending much of my youth throwing hadoukens and striking the cool pose with Ryu, I was able to find a level background image to include, as well as the Street Fighter logo, which I thought was pretty cool. And for the finishing touch, some brilliant web philanthropist had posted the Ryu Theme Song as an mp3 for download. Hadouken! Project defeated:

http://jasonwalkow.github.io/jQuery-streetfighter/main.html

More jQuery with The Shopping List

Next up was a project that allowed me to build upon the principles I picked up in the Street Fighter project: The Shopping List. This time, we were told to start with a basic wireframe of the app, then build a static version using HTML and CSS, and then once we got all of that worked out, basically delete all content (minus the divs) and dynamically fill in content using jQuery click and key methods.

This project was a little more difficult and took a bit more work with my mentor Matt. Although I remember building almost the same sort of app using vanilla JavaScript with Treehouse, this was much different. But, as always, Matt was extremely helpful and not only showed me the way to get bugs fixed, but the best way to make sure that each operation was nearly error-proof. That was a huge step and a big learning jump for me. Here’s how it turned out:

http://jasonwalkow.github.io/shopping-list/index.html

Learning the Basics of JavaScript

I hadn’t touched much JavaScript since I stopped learning with Treehouse and I admit that I had pretty much lost most of what I had learned. I hadn’t kept up the practice, which I learned was 100% necessary, and I felt a little overwhelmed. Thinful’s courses started out simple, which was a relief, but I was getting a little worried working toward the section project… The FizzBuzz Challenge.

I had read about the Fizzbuzz Challenge here and there and everywhere. Supposedly, it’s a pretty common interview tool to see how a programmer thinks and processes functions. Some people hated it, some people didn’t mind it, and a lot of people didn’t really seem to understand why it was used as such a barometer of skill. Needless to say, FizzBuzz sounded rough.

The FizzBuzz Challenge

What is the FizzBuzz Challenge? Well, basically, you are assigned the following problem: “For each number from 1 to 100, if it’s not divisible by 3 or 5, print the number. If it’s divisible by 3, print ‘fizz’. If it’s divisible by 5, print ‘buzz’. And finally, if it’s divisible by both 3 and 5, print ‘fizz buzz’.” Sounds…complicated, right? Well, it is, until you break it down to it’s most basic pieces. First, you figure you need a loop. Good, easy, make a for loop: “If, else”. Next, you decide which numbers are divisible 3, then which numbers are divisible by 5, and which numbers are divisible by both – just to get an idea of what result should print out. What’s the magic number? 15. So, I started building the thing and I was able to get a solid loop going using the division operator. But, as I soon found out, I was dead wrong. Sure, the division operator works for 3, and 5, and 15, but what about 6 or 9 or 10 or 30 or 90? You can’t set a parameter to give you the results you need. What you need is the modulo operator. That will give you the remainder of the operation, which of course, you will need to be 0 after dividing each of the denominators.

Even with the stigma surrounding it, I was truly happy to see it as a project goal on Thinkful. It shows that they really create their content based on making you a job-ready developer. And they didn’t just glaze over it, they made it a serious checkpoint. A checkpoint which they prepare you for during the coursework. Again, we were told that we didn’t necessarily need to worry about style, but I couldn’t help it:

http://jasonwalkow.github.io/fizzbuzz-challenge/index.html

Functions and Scope

After finishing the FizzBuzz Challenge, we learned a little more about JavaScript in the way of functions. Practice, practice, practice…that’s all I can say about functions. That’s really the only way to understand it and get a hang of the syntax and the methods. For a small project, we had to refactor our FizzBuzz Challenge to allow for the user to enter a max number (I set mine between 1 and 1000), and the function would print out the FizzBuzz up until that max. It took a little bit of jQuery, and a few little JavaScript changes here and there, but I got it to work and learned the power of functions and how much time and energy it saves both you and your program. Take a look:

http://jasonwalkow.github.io/fizzbuzz-refactor/index.html

Lastly, as a finish up project, we were assigned the Hot or Cold App, which generates a number between 100 and allows the user to guess the number, telling them along the way if they are getting “warmer” or “colder” to the number. This project was a little different than the rest, as the static page was provided for us (set-up and design) and we just had to add functionality. We were supposed to focus solely on the JavaScript. Now, the design piece is often a big part for me. I love designing things from start to finish and tinkering away until they’re perfect – so I wasn’t nearly as excited for this project. But, then I noticed that the app was designed by a former student named Jeya Karthika. If you don’t know about Jeya, she wrote a pretty solid blog post discussing her learning journey with both Thinkful and Bloc and is also a pretty great designer. A lot of what I read from her journey helped me to choose Thinkful in the first place, so I really dig her work. This made me totally okay with working from a template. And, the programming was pretty straightforward and fairly similar to the things we had already built on, so I won’t go into it much here. Here’s the finished project:

http://jasonwalkow.github.io/hot-cold-app/index.html

Stay Tuned

Well, that seems like enough for this week’s post, so I’ll go ahead and wrap it up. Thinkful’s courses for jQuery and beginning JavaScript were extremely helpful and I hardly had to look at other sites for help or extended learning. I really can’t explain the importance of having a mentor through all of this. As the lessons have gotten more and more complex, Matt has really helped to break things down practically and show me some cool extra things along the way. Knowing that I have three separate days of “safety net talks” with Matt every week really takes the pressure off and allows me to just learn and practice and learn and practice some more. Again, if you’re thinking about taking a course with Thinkful, don’t be afraid to contact me and get an idea about the program. Thanks for reading!

Coming Next Week: Object Oriented Programming, AJAX, and APIs

Advertisements

Thinkful Check-In: My First Week

pSJ2dTf

Well, I definitely meant to write this sooner, but better late than never. After a little over a month of going it on my own and learning programming through codeacademy and Treehouse, I decided to take the next step and really get serious about the journey and do a Massive Online Open Course (MOOC). If you’re wondering how far I got on my own, check out my current portfolio site:

http://jasonwalkow.com/

I did a painstaking amount of research, reading everything I could on Quora and Course Report, speaking with representatives from each school, and deciding what I could handle while working a full-time job and running my Etsy shop. Sure, I looked into intensive bootcamps. The romance of it all was very appealing – the idea of being completely and utterly wrapped up in coding for 12 weeks – but I just couldn’t swing the time, cost, and serious effect on my work-life balance. So, I narrowed it down to two programs: Bloc Front-End Development Path and Thinkful’s Front-End Developer Career Path. So, how did I decide?

The Decision

Now, I could state it plainly and say…cost. But, that’s not really fair. Bloc’s program was not that much more than Thinkful’s in the end. And, if you’re going to plunk down more than a couple thousand dollars on a program, the minor difference in cost shouldn’t really be that big of a deciding factor. So, I guess a more honest answer would be value. After speaking with people from both programs, Thinkful seemed more up to the task of taking you from 20-120 en route to getting you career ready. I get Bloc’s thinking…they do not want to advertise everywhere that they will undoubtedly make you job-ready, because who can guarantee that?

In the end, I guess I chose Thinkful because of the number of projects they offer and the breadth of topics they cover in their program. I think Bloc goes more into detail and really focuses on making you an expert in a few areas, but for me it is much easier to be introduced to a bunch of different topics and then do the hard work on my own (for free). And so I joined up with Thinkful.

My advice: If you are on the fence about which program to join, and you think you might be leaning towards Thinkful but you just can’t decide… speak with Derek Fogge at Thinkful. He’s the Career Path Program Manager at Thinkful and it just one of the nicest guys you’ll ever meet. He started out as a designer and ending up learning code through a few different ways, then became a Thinkful student, then a Thinkful mentor, and now a Thinkful leader. When I spoke with him, he was full of so much passion and inspiration that it was, well, inspiring. He was really concerned with where I wanted to go with Thinkful, what I wanted to learn, and how they could help me get there. Thinkful is really focused on helping you learn your way and the Career Path gives you access not only to that particular curriculum, but really all of their content and beyond. I spoke with Derek about possibly getting into Node and React and maybe even some UX/UI. He was more than happy to help me through my journey and will regularly check in with your progress. He helped seal the deal for me.

Learning with Thinkful

The first two weeks has been a whirlwind. In the beginning, I was very worried about the expected “20-25 hours of coursework” each week. Working a full-time job, running an Etsy shop, managing life balance with my girlfriend and two dogs…I wasn’t quite sure where that 25 hours was going to come from. But, to be honest, you just find the time. As soon as I got access to the curriculum, I started jamming away.

Before I knew it, I had installed Sublime Text, set up my CodePen account, gotten my feet wet in Git, and had started to pump out projects. The beginning projects are more of a refresher if you’ve done HTML and CSS through codeacademy or Treehouse, so I was able to breeze through. Still, I learned the reasoning behind best practices, as Thinkful’s content has a lot of great narrative to explain WHY you are doing things, not just HOW.

HTML and CSS

Next, we got into really thinking about how to develop static pages with a plan in mind. Working from a quick wireframe, using semantic HTML, choosing a color scheme through Adobe Kuler, and using CodePen to its fullest power in designing CSS. Here is the “About Me” project that you end up with:

http://codepen.io/jasonwalkow/full/eNbXaX/

Developer Tools and Command Line

From everything I had read up until Thinkful, knowing how to use Chrome or Firefox’s Developer tools goes a long way in saving you from headaches and dead-ends. Thinkful gets you started early with a cool walk-through on how to hack webpages and find elements using these tools. Here is my “Hack the New York Times” project:

http://prntscr.com/80lv7c

As for the command line, even though I had worked through Treehouse’s courses on Git and Github, I still felt completely out of my depths and was a little scared by the simplicity of the terminal. But, with continuous practice and reinforcement through Thinkful’s course, I began to feel right at home. That’s what is so great about Thinkful: They don’t just teach you something, check a box, and then move on. They make sure that you keep coming back to those principles and make sure that you are using them in your workflow. Deploying and installing from the command line is crucial, and now I understand why.

Building a Modern Landing Page

When you first look at the preview of Karma’s Landing Page, the next project in the course, you might think “How am I ever going to make that happen?” But, lo and behold, you just, well, do. This project really helped me come a long way and create a project that I’m proud to show to my family and friends. It’s a great progress point, really. You build a navigation bar, use Font Awesome, work with background images, and a lot more. If this is sounding a little basic to you and you’re thinking “Well, I already know how to do all that”, let me tell you: so did I. Or, at least I thought I did. If I had done this project on my own without any of the lessons, sure, I might have gotten to the same result. But, it would have taken me three times the amount of work and code, and I wouldn’t have learned anything new. Here’s the “Karma Landing Page Project” I made:

https://jasonwalkow.github.io/startupclone/index.html

Mobile and Responsive Design

Up next is a course on mobile and responsive design. To be honest, I feel Thinkful could have spent a little more time on this part. Something like 70-80% of web pages are viewed on mobile devices, which makes it one of the biggest challenges for early developers. I’m guessing that we get into it more later in the program and this course was just sort of an introduction, but we’ll see. Here’s the updated “About Me Portfolio Page” I made:

https://jasonwalkow.github.io/portfoliopage/index.html

Your Mentor

cpKiYKi

Now is probably a good time to talk a little bit about the Mentor program at Thinkful. It is, I think, their biggest selling point, as you are getting access to a seasoned pro every other day throughout the length of the program. Throughout the HTML and CSS courses, I didn’t really need the help of my mentor. Like I said, it was more of refresher. But, I definitely needed help with Git, and bad. And this is where your mentor comes in to save you.

I set up my mentor sessions for one hour, three times a week, after I got home from work. My mentor is Matt Smith, who I’m pretty sure is one of the smartest and nicest dudes I’ve ever met. Matt is an incredibly friendly and unbelievably knowledgeable mentor to have at such an early stage. It really is a steal-of-a-deal getting to talk with him for three hours a week. Admittedly, at first, I didn’t have a lot of questions working through HTML and CSS, but that didn’t stop Matt from showing me some cool plug-ins for Sublime and helping to hone best practices and time-saving tricks. He also expanded my knowledge by providing me with some great resources and quick go-to-guides for when I get stuck on my own.

Also, one of the most important parts about having a mentor is the motivation they instill in you. It sounds silly, but having a mentor to work with really makes you want to work hard and progress through the program. You want to be able to show your mentor your progress and the cool things you’ve built – so you put in that extra effort and come to the sessions ready with questions. The mentor sessions is the true value of Thinkful, so you’d better make the most of it.

So, when it came to my Git confusion, he was able to break it down for me to the very basic fundamentals of its use. He went slow, kept encouraging me, and totally removed my Git stress. His help has been invaluable, and I think I really lucked out with getting him as a mentor.

Stay Tuned

Now that I’ve wrapped up my first week, I hope I’ve given you some insight into Thinkful’s program. I’ll be posting more and more as I progress through the program, so stay tuned. And if you have any questions or need some advice, please feel free to get in touch with me.

Coming Next Week: Delving into JQuery and JavaScript