Becoming a developer is a dream of many that want to retrain and change their current career path. Maybe you are just at the beginning of your adult life and don’t know exactly what to do or which studies to chose. Perhaps you are a UI designer and want to gain other skills and be more attractive on a job market. No matter what is your motivation, give it a shot. We have prepared a comprehensive guide on how to become a frontend developer - step by step.
Why becoming a frontend developer?
The demand on the market is huge and there are plenty of possibilities. Speaking of salaries, it depends on the location, skills, experience, and the company but the time invested in learning usually pays off - you can check the average salaries on websites like NoFluffJobs [PL], Pracuj.pl, Glassdoor and so on. In case you would like to try in backend or full-stack development, well, most likely you are also going to have some frontend basics or at least start with them your programming journey. The coolest thing about programming is that you can start regardless your age, current economic status and background. The learning process is demanding but doable so no matter how demotivated you feel, don’t give up.
You don’t need to invest much in gear - a regular PC or a laptop with an internet connection will do. If you are already on your way to join some frontend team as a junior dev, you might also use some of those bits of advice to enhance your skills. There is a lot to cover on this topic, just check out this really awesome diagram about web development or take a look at this infographic - we will try to keep it short and simple.
Skills a frontend developer should have
Ever entered a website and tried to figure out how this button works or how the popup message appears? What is the trigger for each action in the web application? Why the website looks so good also on the mobile screen? The frontend has many areas to cover and this is why it is important to start with the basics and go step by step to understand it all. Just remember, you don’t need to learn it by heart but you have to understand the process. Thanks to the internet we can always check the right command or even by using IDE (Integrated Programming Environment) like WebStorm or Visual Studio Code - you can check some command lines or a structure in a breeze. You can start to write your first website or a web app in a notepad but you can also get familiar with any environment you wish to make the work smoother.
- HTML - the salt of the Internet + CSS to make it look great
If you want to read a book, you need to know the alphabet first. HTML is like the alphabet, not exactly a programming language but definitely essential for a web developer. HTML stands for Hyper Text Markup Language and it is a set of blocks which help you in defining the website’s structure.
CSS (Cascading Style Sheets), basically it is the visual part of the website or web app. Briefly, it is dealing with elements (HTML blocks) in a matter of size, color, background and so on. You need the HTML skeleton for that. HTML together with CSS is necessary if you consider your career path in web development. There is a lot to learn still but hey, even knowing only the HTML and CSS will let you build some basic websites!
Best way to become a frontend developer (or any other kind of a developer) is to learn by doing. Regardless of courses which will be mentioned later on, you can already start playing at the Codepen.io. Create your own designs or check the structure and code of others in the community.
Need a jumping-off point to code more efficiently? Frameworks are commonly used and quite helpful. The only downside is that you need to learn how to navigate in them first but after that everything will be way easier. There are many frameworks and all have some pros and cons but for the beginning, it is best to learn the most popular. JS frameworks would include i.e. Angular, React, Backbone, Ember, Vue. Let’s not dig into each framework now but if you want to know how it actually works, check out the elementary guide for Angular - a must-read for every frontend developer beginner.
Pair it with another framework, let’s say Bootstrap which is quite popular and will definitely help with CSS, responsive design and so on - and here you have, easily made and ready to use web application.
- Browser developer tools - make your life easier
Browser developer tools (like DevTools for Chrome), no matter which browser you use, will help you to learn and to improve. First of all, you can check your own page, edit it on-the-fly and find bugs which make the page perform in the browser worse than expected. Secondly, you can check the code of the pages you would like to mimic during your educational process. Usually, in a dev tool, you get an inspector (checking HTML and CSS) and JS console. You might not see everything you need but for the beginning, this should be enough. Learn how to use DevTools and trust us, your life as a frontend dev will be easier.
- Git and GitHub - why you should really bother
This is a huge topic and it is basically changing the way you work on a software, app, website. However, what is important for you at the beginning of your frontend career, is firstly to have a version control (Git) and secondly a way to present your portfolio. The code speaks for the developer and there is no difference when it comes to the frontend. To present your work, create a repository and share your code on GitHub. We don’t insist that this is an essential step but knowing how to use GitHub will be also helpful in the future.
Without getting too deep into technicalities, most of your additional skills depend on the project and in what you would like to specialize.
Where and how to learn frontend craft?
Feeling overwhelmed? All frontend developers have been there so don’t worry and choose the most suitable path to learn how to build websites and web apps.
read and watch a lot
Learning new things requires a lot of reading: manuals, articles, tutorials and so on. There are plenty of how-to articles on the web but start with those which guarantee quality like MDN web docs, Code Academy, freeCodeCamp - it is free but you need to invest your time and focus. You can check other free courses in computer science at Open Culture.
In case it is not enough, here you have some kickass blogs for frontend developers.
After you mastered the basics, do stuff. No matter how demotivating it might be, learning how to program might be achieved only by actually doing. Open your fav IDE and code. Just remember to prepare the structure of the website before, so you know exactly what to do and thanks to the knowledge you gained - you know how. If you have doubts or questions, get involved into communities on Stack Overflow, Facebook Groups, find meetups in your area or free bootcamps and talk to more experienced people.
Regardless of checking with browser developer tools, find websites or apps which you would like to recreate and just do it for practice. In this way you can build your portfolio, put it on GitHub and spread the good news to the world - I want to be a frontend developer, here is what I can do! If you don’t know how to start, get inspired by interesting repositories on GitHub or simply follow developers with great skillset. Also, there are plenty of open source projects which you can *read*. You can also help others and join their initiative.
Learning is a process of understanding and constant repetition to finally master skills in a particular area. When you get there, try to solve other issues.
Find a way to join the frontend team
After some point, you will feel confident enough to start searching for internships or even a junior frontend developer position. Regardless of the basics like HTML, CSS and JS, requirements vary depending on the project you want to join. Check some of the most popular job interview tasks and try to solve them at home. Bear in mind that not only the code is important but also the thinking pattern. You might not know it all, yet, but an experienced dev team will help you to improve. Don’t give up even if you fail often - this is the beauty of the learning process.