The world of web development is divided into two clans: front-end and back-end. If you want to create sites and web applications, then at some point you will need to make a choice and go down one path. Of course, you can become a full-stack developer, but at first, it’s better to specialize and be the best in one field.
Who is a front-end developer?
The difference is that the front-end code interacts with the user, and the backend code interacts with the data on the server. Front-end developers deal not only with layout but also with more global things related to the site and web application. This is a kind of universal soldier who understands, among other things, JavaScript libraries and frameworks, CSS preprocessors and frameworks, as well as backend technologies, unit testing.
What does a front-end developer do?
A front-end developer must be able to make a layout, build a web application, not be afraid of the server side of the site, as well as develop a user interface, inject scripts into it.
How to begin?
In order to become a front-end developer you need to learn:
HTML + CSS
These languages are responsible for how the site will look in the browser. You can learn them yourself using Internet resources. The main thing is to immediately apply it in practice, creating similar sites. The most important thing at this stage is not to learn everything by heart, but to get an idea of languages, their work, attributes and capabilities. When you understand what you specifically need, you can quickly google the required tag, it is more important to understand the structure as a whole.
jQuery
This is a JavaScript library that handles the interaction between JavaScript and HTML and makes it easier to work with DOM elements.
Creating layouts
You can find layout guides online and learn step by step how to turn PSD layouts into web pages.
At this stage, you can already try for the position of HTML coder.
JavaScript
Don’t forget about JavaScript – nowhere without it. The main thing here is not to overdo it with theory: if you have mastered the topic, fix it in practice. Come up with tasks that require the use of JS: hide an element on the page when the button is clicked; show or hide elements on the page by timeout.
What Junior front-end developer should be able to do?
In some companies this position is called front-end developer, in others, you can see its division into HTML-coder and JS-developer.
A beginner frontend developer should know:
- basics of HTML, CSS
- knowledge and experience with CSS frameworks (Twitter Bootstrap / Foundation)
- Website layout
- experience with jQuery (plugin installation, animation, validation, pop-ups)
- JavaScript programming experience
- knowledge / understanding of the basic principles of ReactJS + Redux / AngularJS / Backbone or Node.js + MongoDB
- practical skills in working with GIT
- Chai / Jasmine, Enzyme, Karma / Mocha basics
- A high level of English
What else do you need to know?
There is also such a thing as Webpack – a module collector. It is used on projects with many included files and dependencies between them.
It would be nice to learn the Sass / SCSS and Less preprocessors as well. They optimize working with CSS: with variables, nesting rules, functions and logical blocks.
I will add that not all browsers will display your website layouts the same way. For example, IE IInternet Explorer) is not friendly with flexboxes, and not all modern browsers fully support the grid. So always check your layouts in Chrome, Mozilla Firefox, Opera, Safari, IE, and Edge.
If you are comfortable with JavaScript, you can start choosing a framework to learn. In the whole world, as I see it, the most popular is React. Next to it are Vue and Angular. Each of them is somehow better and somehow worse than the others – it all depends on the problem that needs to be solved.
How to get your first job?
To become a high-level front-end developer, I recommend going to work for a web development company. It is important for them to see your theoretical knowledge in practice, so prepare a portfolio of your work. If you worked in a team or on an open project, add this work experience, indicating your role.
Find out what frameworks and libraries the company works with and study them – this will be a great plus. It is also useful to have experience in layout for key CMS, on which the company makes sites.
Some more tips for front-end developers
Learn and practice deeper
Each browser renders the same code differently, but to work efficiently, you need your code to be cross-browser and render adequately to all users. To do this, spend a little more time and figure out in which of the browsers the code works correctly and correct it for adequate display in the rest. Thus, you will draw the right conclusions and save time in the future. This also applies to situations where you blindly add something to the code until you get the desired result. Make sure you don’t step on a rake every time.
Read the code
As you read code written by other developers, you improve your skills, you see that problems have more than one kind of solution. You can also take part in open source projects, the code of which is supplemented and edited by different developers. It improves your skills, adds the ability to critically look at the code.
Work as a team
Freelancing is the dream of all developers, but working as a team gives you a great opportunity to learn from senior developers, learn, get a piece of advice and improve yourself.
As you can see, the skill set of a front-end developer is quite wide and takes a lot of time to learn, so I advise you to delve into the basics and work on the skills in practice. You have to google a lot and that’s okay – it’s much more important to know where to find information than to waste time memorizing it in practice.
Already got a base – you need to try to create test pages. Google “free PSD website layouts”, download and typeset them. Don’t forget about adaptability.
The chrome browser has a developer panel. Google it and use it – it makes life easier.
Download and install the source code editor – now it’s your main tool at work. I have used the Atom and VS Code. These are free editors. They are easily optimized for themselves by different extensions.
At this stage, criticism is needed. Search your community or forums for front-end developers and show them your layouts. Feedback from an expert will help you find weaknesses and gaps in your knowledge.
Putting your favorite layouts in your portfolio will be a plus when looking for a job.
Thanks for being interested in the skills you need to become a front-end developer. Visit now to hire front end developer: https://www.ava.codes/hire-frontend-developer
