How to start a career as a frontend developer: a comprehensive guide

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.

Indisputable essentials:

1. 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.
2. JavaScript - add interactive elements
   
   With HTML and CSS you can already make a website or a web app but to give it some functionality, JavaScript (JS) comes to the rescue. Need an audio, video, game, animation, scrolling abilities, pop-up messages, calculator and so on, on your website or in an app? The answer is JavaScript. Anytime you want to trigger an event and makes the elements vivid it is due to JavaScript abilities. This step might take more time than HTML and CSS but nobody said it was easy. After you get the basic JavaScript functions, you should congratulate yourself and keep on moving forward.
   What makes frontend developers’ that deal with JavaScript life easier is jQuery. Instead of coding everything from scratch, you can use a set of ready-made plugins and extensions collected in this library. Knowing jQuery is optional so don’t get too stressed about it.
3. JavaScript frameworks
   
   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.
4. 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.
5. 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.

Keep learning:

There is way more to learn in frontend than HTML, CSS and JavaScript - those should be your starting point. Master them and move on! RESTful services and APIs, responsive and mobile design, CMS and e-commerce platforms - you can’t get bored with web development. Also, usually there is something to debug or improve.

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.

If you don’t mind paying a bit for your knowledge-to-be, try courses at Udemy, Treehouse, Lynda or Coursera.

build things

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.

get inspired

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.

repeat

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.