Learn to Learn Javascript

Image for post
Image for post
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.

Image for post
Image for post
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:

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.

Written by

full-stackish developer, late bloomer coder and power google user

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store