Learn to Learn Javascript

Switching from HTML and CSS to JS can feel a little intimidating — like you’ve started learning web development all over again

On the road to learning web development, the ride can be fairly smooth right up to the point where you begin to focus less on the look and feel of the page and more on the user interactions and manipulation of elements. The transition to a more abstract and much deeper part of the web can be jarring and it’s where a lot of students I’ve worked with tend to feel lost. I remember this pain quite well.

About 5 years ago, when I was learning to code at the ripe age of 30, I figured I could avoid Javascript altogether. I would just find a job that required HTML and CSS. Yeah, that’s the ticket, I told myself. Then I ended up in a full stack role using C#, Javascript, SQL, AngularJS… and some HTML and CSS of course. Funny how life works out. Luckily, I had learned enough JS to be not so dangerous and after some years of study, I think I’m actually pretty good at it now.

Along the way I’ve taught JS at a a few bootcamps and self-taught, well, myself all those things I didn’t learn in the computer science program I did not attend. Before you write another if/else program to run in your console or some repl environment you might want to try a method that’s worked for me.

I know JS can seem pretty opaque when you first begin learning about variables, arrays and conditional statements, especially because HTML and CSS are much easier to mentally digest: div goes here, color goes there and voila there’s something on the page. Since you’ve likely learned some basic HTML and CSS before embarking on the road to JS, it’s a good idea to leverage these languages when picking up JS.

I’m a firm believer in learning by doing and have built a lot of throwaway projects to really internalize a concept, as my codepen.io profile will reveal. I suggest you get a codepen profile as well, it’s a great environment to quickly write some code and immediately see the output without the overhead of creating a project and file structure on your own machine.

Oakland, pay attention, this could still be your site for the right amount of pizza 😉

Taking an existing project and adding some JS — like I did in the example above from about 5 years ago is a great place to start. Simple animations using Jquery can add some flare to your project but often I’ve started learning a new concept with my tried and true input/button combo:

A lot of interaction on a web page has to do with handling user input: whether a user is searching for an item, filling out an actual form or writing a two bit article like this, hence it made sense to begin with these basic elements of a button and an input to make something happen on screen. To me, this made working with arrays, objects, vars and conditional statements a lot more concrete as I could see their real world application.

Try it yourself! Here area a few small projects using this one two punch:

1. Create a small div with no color and a button. When a user clicks the button, the div should change colors. As a bonus, have the color come from an array of colors and be picked at random
2. Create an input and a button 😉- when a user enters some text in the input and clicks the button, show the text on the page. For bonus points, capitalize the input. For extra bonus, truncate the text if it’s more than 10 characters.
3. Create a small form with a few inputs to create a character (name, height, origin, age…) and once a user clicks the button to submit the form, store this information as an object and display it on the screen in a nice format. For super, extra bonus points persist this object to local storage and when a user first loads the page, check local storage and if an object is there, show it on the screen…

You can continue to pound your head with Javascript books and attempt to learn through osmosis, study abstract concepts that don’t have much real life application or build something to internalize the concepts.

I definitely think that once you move beyond the beginning stages of JS, there is much to learn in the way of the abstract like asynchronous programming, the browser API and using the call stack as well as all those pesky comp-sci fundamentals that will inevitably pop up during interviews, but at this exploratory stage, just making something appear on the screen can be incredibly satisfying and an efficient way to learn.