When I first started developing websites I put of learning JavaScript for so long it hindered my own personal development. Early in my career most of my roles required me to create Wordpress Websites and I relied heavily on plugins ‘to do the job’ rather than look into code and understand better ways to do things. Over the past few years I have put some time aside to improve my JavaScript and push myself to learn new things… and guess what? It’s actually not as hard as you may think and I actually find it one of the more enjoyable parts of being a Front End Developer.
However jumping into JavaScript for the first time will be tough for a number of people so I have put together a small list of tips below which helped me improve.
1). Create a Codepen with an ever-growing list of functions & snippets you find
The first tip I would give to beginners is to create a codepen which you can update regularly with functions and code you use. Until you are able to write JavaScript freehand, having a codepen with general functions/snippets you use often will help a lot.
Another trick with codepen is to make sure you describe exactly what each function does in your growing list. For example if you are tasked to ‘Change all elements with the class ‘active’ to ‘in-active’, on click’, make sure your code in codepen has descriptions so that you can be confident copying it across and changing IDs as required.
Here is my growing JavaScript cheat sheet on codepen I have been building with some functions and snippets ready to go if I need them.
2). Start with the basics
When learning JavaScript there is no better resource on the web than W3Schools. This website has absolutely everything you need to get started learning JavaScript from tutorials to more advanced JavaScript courses the further you progress. Originally I set myself targets to hit before I moved onto new sections.
An example of tasks to learn first
- Toggle a class to all list-items from ‘in-active’ to ‘active’ on a click of a button. - W3Schools Tutorial
- Hide and show elements based on a button click. - W3Schools Tutorial
- Change the inner HTML of a < span > tag when a user scrolls beyond a certain number pixels on the screen. - W3Schools Tutorial
- Learn all the different ways of getting elements by either (id, class, name, tag), and the appropriate time to use them. - W3Schools Tutorial
- Storing data in variables - W3Schools Tutorial
These are some basic JavaScript tasks that you can learn first. Once you progress through some of these you can then move onto to more advanced JavaScript like getting values on input fields, storing data, using Javascript to fetch API data and displaying it and much more!
Once you get the understandings nailed down, you can then look at learning a JavaScript Framework such as Vuejs or Angular.
3). Google & Stack Overflow are your friends
When you are new to JavaScript and you run into a console error it can be frustrating but the chances are hundreds of people have ran into the issue before and that’s where Google & Stack Overflow come in. Stack Overflow is a development community where people can post their coding issues and request help from other developers. It doesn’t matter if you are an experienced developer or a beginner, stack overflow is used as a daily resource to help people.
If you run into issues when debugging your JavaScript, try pasting the console error you are getting into stack overflow and the chances are the answer will be there.
4). If you work with a team ask your seniors for advice and training sessions
Not everyone can pick-up a new coding language right away and some people learn better from someone demonstrating and talking them through code. If your place of work has a big team and you have seniors in your team then try asking them for some help and to do workshop lessons if you can.
Luckily for me at Ocean Finance our Lead Front End Developer Nick Mcburney hosts a weekly Front End Development catch-up where we showcase new code we have learnt during the week or anything interesting related to Front End Development. It’s surprising how much you learn when you sit with others in your field and do a question and answer session with practical demonstrations.
5). Try coding challenges
This is actually something I have come across recently through the Front End Development team at Ocean Finance. There are a number of websites online that offer coding challenges and briefs which you can do for free.
These challenges act like a real-world brief you would get from a client where they give you the assets/functionality they want and it’s down to you to build the project! These projects utilise HTML/CSS & JavaScript which is a really good way of testing yourself!
Coding Challenge Websites
These coding challenges are a great way of seeing how well you have progressed with your skills. They have different difficulty levels and link through to various resources to help you on the brief.
I recently took part in a coding challenge from Front End Mentor and you an view my code on my github account here: https://github.com/oceangreg/rest-countries. This project was to display Country Based API Data (such as population, currency, regions & the country flag). You had to build this using a JavaScript library of your choice. For this project I used Vuejs and you can see a working version of the project here: https://silly-davinci-408001.netlify.app/#/index (ignore the wacky url its using the amazing Netlify for app deployments).
26th May 2020 *Edit* - I just wanted to edit the blog post to show another example of a Front End Mentor Challenge utilising JavaScript. I created a simple landing page based on one of the challenges at: frontendmentor.io.
For this project I built the landing page using Vuejs. You can view the live site here: https://hopeful-poincare-759b7d.netlify.app/ and you can download the repository here: https://github.com/oceangreg/front-end-mentor.
6). And finally…don’t give up!
It can be hard. You won’t become a master of JavaScript overnight, in fact it might take several months before you feel comfortable with JavaScript but the only way to improve is to constantly code and learn new techniques!