1). Create a Codepen with an ever-growing list of functions & snippets you find
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.
2). Start with the basics
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
3). Google & Stack Overflow are your friends
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.
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.
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!