A selection of tools for effective frontend development. Front-End Developer Tools
If you want to change your specialty to get a new, higher-paying job, the IT and front end fields are the best fit for this.
Key benefits: high pay, creative work and flexible hours. But there are a number of other reasons why the IT sector is an attractive option.
Now I want to focus on front-end development. Generally speaking, front-end developers write websites using HTML, CSS and JavaScript. They also implement ready-made design Online.
A quick review of current openings for front-end developers shows that there is a clear set of skills that employers are looking for. For example, the lists of requirements for the first three vacancies for front-end developers that I found on Glassdoor.com are largely identical: knowledge of HTML, CSS and Javascript, version control, frameworks.
These are the terms you'll become familiar with when you start learning front-end development. Below is a list of 10 essential skills every front-end developer needs.
1. HTML/CSS
It is a standard markup language used to create web pages. A markup language is a way of specifying markup in a digital document that can be distinguished from plain text. This is the foundation you will need to develop websites.
CSS ( cascading style sheets) is a language used to represent a document created with using HTML. CSS is used to define page layout, colors, fonts and other styles!
2. JavaScript / jQuery
Another main tool in the arsenal of a beginning front end developer should be JavaScript ( JS). If HTML is a markup language and CSS is a styling language, then JS is a programming language. While HTML and CSS define the presentation of a page, JS defines its functionality.
For simple websites or web pages, HTML/CSS will be sufficient. But for interactive functions ( audio and video, games, scrolling, page animation) will need JS.
One interesting thing to know about JS is the presence of libraries such as jQuery. Libraries are collections of plugins and extensions that make it easier and faster to use JS on a website.
JQuery takes common tasks that require multiple lines of JS code to implement and compresses them so that they can be done in a single line.
3. CSS and JavaScript frameworks
CSS and JavaScript frameworks are sets CSS files or JS, which do a huge amount of work while providing basic functionality. For example, registration forms on a website or blog. Instead of starting with a blank document, you start with a file that already has generic JS code.
Front end development and that it is difficult is evidenced by the fact that frameworks have their own strengths and weak sides. For example, some JS frameworks are great for creating complex user interfaces, and others to display site content.
To simplify things even further, frameworks can be used together. Typically used to pair Bootstrap with another JavaScript framework such as AngularJS. The content is handled by Angular and appearance— Bootstrap ( with some changes in CSS).
You'll be using CSS and JS all the time, and since many projects start with similar elements, these frameworks are critical to being an effective developer.
4. CSS Preprocessing
One of CSS restrictions is the fact that you cannot define variables, functions or perform arithmetic operations. Similar to CSS (and JS) frameworks, CSS preprocessing is another way to make your life easier.
By using CSS preprocessors such as Sass, LESS, or Stylus, you can write code in the preprocessor language, trusting it to do things that might take a long time with CSS. The preprocessor then converts the code into CSS to make it work on the site.
Let's say you decide to change the shade of blue that is used on the site. Using the CSS preprocessor, just change hexadecimal value In one place. Instead of going through all the styles and changing color values everywhere.
5. Version control / Git
After writing HTML, CSS and JS programming, the front end web developer will need to review the work done. If something goes wrong, the last thing you want to do is start over. Version control is the process of tracking and controlling changes to source code.
Version control software such as Open Source Stalwart Git is a tool for tracking changes so you can go back to a previous version and figure out what went wrong.
6. Responsive design
Today we use a large number of computers, smartphones and tablets for browsing the web. Have you ever noticed how web pages adapt to the device you are using. It's connected with adaptive design. Understanding responsive design principles and how to implement them is key to interface design.
Responsive design is an integral part of CSS frameworks such as Bootstrap mentioned above.
7. Testing/debugging
To make everything work properly, you need to test your code for errors. Therefore, testing and debugging skills are a must for front-end developers.
There are several various methods testing. Functional testing checks the specific functionality of the site ( for example a form or database).
Unit testing is another method. It checks code fragments that are responsible for just one thing on the site to ensure they work correctly.
Testing - an important part front end development process in Java. But this is another area where there are various frameworks to help you. Programs such as Mocha and Jasmine are designed to speed up and simplify the testing process.
8. Browser Tools for Developers
How your site is displayed by browsers will greatly determine its success. Similar to testing and debugging, modern browsers equipped with developer tools. These tools allow you to test and customize pages based on how the browser interprets the code.
The developer tools built into modern browsers usually consist of an inspector and JavaScript console. The inspector allows you to see what the HTML code on the page looks like and what CSS is associated with a specific element on the page. It also allows you to edit HTML and CSS, and view changes that have occurred in real time.
The JS console allows you to view errors that occur when the browser tries to execute JS code.
9. Build and Automation/Productivity Tools
The performance of a website depends on the amount of time it takes to load it. If you encounter runtime problems during front-end programming, you need to take steps to resolve them. For example, image optimization ( scaling and compressing images for maximum performance ), minify CSS and JavaScript ( removing unnecessary symbols from code without changing functionality).
Performing tasks that lead to increased productivity can also be time-consuming. But this is where building and automation tools come to the rescue. Programs like Grunt and gulp can be used to automate image optimization, CSS and JS minification, and other tasks.
10. Command line
Using GUIs can seem like a tempting idea when it comes to web development. And they are often quite convenient. But universal GUI will have its limitations for some specific applications. Sometimes you will need to open a terminal on your computer and enter typed command line commands.
This is the difference: through the GUI you can only enter what is available to you, but through command line you can make basic settings.
The fundamental technologies are HTML (for creating page structure), CSS (for styling), and JavaScript (for interactivity). For this reason basic knowledge in the above areas you definitely need. However, in 2019 you need to know what frameworks, version control systems and many other things that make life easier to the modern developer. Let's take a closer look at each of them.
HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) are the basis of web development. Without these two technologies, you will not be able to create a web design and the output will be simple text on the screen. You can't even add an image to a page without HTML!
Before you start your web development career, you must become an expert in HTML and CSS. Good news, confident knowledge of these technologies can be obtained in just a few weeks of study. You can come through with us!
JavaScript allows you to add a huge amount of functionality to your web page. You can create quite functional web applications using just HTML, CSS and JavaScript (JS for short). Actually basic level JS allows you to add interactivity. You can use it to create a map that updates in real time, interactive elements and online games. Sites like Pinterest make full use of JavaScript to create a friendly user interface.
Plus, it's the most popular programming language in the world, so even with your career plans, it's a super useful language to learn.
JQuery is a JavaScript library: a set of plugins and extensions that make developing with JavaScript faster and easier. Instead of having to write everything from scratch, JQuery allows you to add pre-built elements to your project, which you can then modify to suit your needs (one of the reasons why knowing JavaScript is so important). JQuery is used when you need to add a countdown timer to your page, a search form with autocomplete, or even a table that automatically rearranges and resizes to fit the content.
JavaScript frameworks
JS frameworks (including AngularJS, Backbone, Ember and ReactJS) provide a ready-made structure for your JavaScript code. Exist Various types frameworks for a variety of needs, but the four above are the most popular on the list of job requirements in 2019. Frameworks really speed up the development process, giving you a jump start, and can be used in conjunction with libraries like JQuery to minimize the time spent writing standard blocks.
Frontend frameworks
CSS and Frontend frameworks (the most popular is Bootstrap) do for CSS what JS frameworks do for JavaScript: they speed up development by providing a starting point with a ready-made starting project structure. Since the basic CSS blocks are repeated from project to project, a framework that defines everything for you is very useful. Most employers require knowledge of what frontend frameworks are and how to work with them.
RESTful services and APIs
Without going into technical details, REST stands for Representational State Transfer. In general terms, it is a technology that makes it easier for components to communicate in a network. Both RESTful services and APIs are REST architecture services. You can read more about this here.
Let's say you decide to write an application that will sort all your friends into social network by date added. You can make a request to the VKontakte RESTful API to get a list of your friends. The same is possible with Twitter and Facebook, which also use RESTful APIs.
Content management systems and E-commerce platforms
Almost every website is built on a content management system (CMS). E-commerce platforms are one of the types of CMS. The world's most popular CMS is WordPress, which is behind the curtain of millions of sites, almost 60% of all sites using a CMS are built on WordPress. Other popular CMS these are Joomla, Drupal and Magento. Even a superficial knowledge of these systems will give you an advantage when applying for a job.
Testing and Debugging
Mistakes happen - this is a universally accepted fact. Being familiar with testing and debugging processes is vital.
Unit tests are the process of testing individual blocks source code and specialized frameworks for this kind of testing provide quite convenient functionality. There are different frameworks for different languages programming.
Another type of testing is UI tests, also known as functional tests. This tests the overall behavior of a website when a user interacts with it.
Debugging is the process of eliminating all errors (bugs) found during testing. Different companies take different approaches to testing and debugging, but if you've ever done it before, you won't have a hard time adjusting.
Git and version control systems
Version control systems allow you to track changes made to your code over time. They also make it easy to return to previous versions code if you mess anything up. Git is the most common version control system. Knowledge of Git for a developer is necessary requirement in almost every company. You can study here.
What a professional front-end developer should know today
Over the past few years, React, one of the JavaScript libraries, has become the frontend development standard - and this benefits cross-platform developers, with React Native benefits such as:
- a simple and intuitive philosophy for declaring views and states, making the code clean, readable and easy to debug;
- Smart and efficient rendering that redraws components only when necessary when state changes.
Speaking in simple language, React binds HTML and JavaScript together.
When it comes to CSS, no one writes in CSS anymore. pure CSS these days, so knowledge of preprocessor languages like Sass or Less is, so to speak, a necessity for a front-end developer in 2019.
Given the ubiquity of multiple form factors of different devices ( Cell phones, tablets, desktop PCs), we would also recommend studying ways to build adaptive web pages. There are a wide variety of JavaScript and CSS libraries that do this job well. Many of them are based on Google's Material Design guidelines.
There are many related topics and libraries worthy of your time and attention. For example:
- Webpack for modular builds (though the Webpack experience is pretty terrible and the community's build choices change every 1-2 years);
- JSON Web Token for authorization (a kind of replacement for cookies that were previously standard);
- Relay/GraphQL or Redux or Flux, depending on how deep you want to dive into data streams and samples;
As well as a wide variety of libraries for debugging, performance optimization, testing, project management, etc.
Thus, these days, in order to be a sought-after developer, you need to know not only the fundamentals, but also be able to use the existing work of colleagues in the form of various libraries and frameworks that significantly speed up development processes.
Our advice: if you are just getting started with frontend development, go through ours.
In this material, I want to present a list of tools that help me when developing the client side of an application or website. It's about about Front-End development.
Who is a Front-End Developer?
After you have generated the required template, it’s time to layout and work with the style sheet.
Working with CSS.
There are a lot of tools and generators for working with CSS. Some of them are collected in this article “Selection of CSS generators”.
Website: http://habrahabr.ru/post/118056
In my work I use only one generator, this is the CSSsir browser extension Mozilla Firefox. A simple and easy-to-use tool that allows you to generate cross-browser code for basic CSS properties in a few clicks. This CSS3 generator will be useful not only for webmasters and designers, but also for ordinary users.
Website: https://addons.mozilla.org/ru/firefox/addon/csssir
CSS Reference
Working with website dynamics JavaScript and jQuery
Services for working with the jQuery API.
jQuery Cheatsheet - Oscar Otero
JQuery Cheatsheet in HTML with links to the original API documentation. It’s convenient because everything is collected in one mset, you can select versions of the jQuery library and see which version supports what. Description of functions opens the original documentation in a new window.
I started my journey into web development using educational video materials. However, the videos were deprived of the most important thing - full practice. I want to inspire you to learn web development and for this I have created several projects for beginner front-end developers that will help hone their skills. I hope this guide will help those new to learning front-end development.
Project 1 – One-page adaptive layout
Target: recreate pixel perfect design and solve adaptive layout problems
For a faster start in web development, evaluate the project: Quick start in web development
Project 3 - A small quiz game written in JavaScript
Target: Create simple game in JavaScript and jQuery.
Peculiarity learning JavaScript For beginner front-end developers, the problem is that it can be difficult to choose a project that suits your strengths. An excellent option for a novice web programmer would be to develop a quiz. This will help you understand the Document Object Model. The difficulty level of the quiz will depend only on you. Start by creating a simple game with several multiple choice questions. You will learn a lot about working with data. This time, don't spend a lot of time on the design of what you're creating. I would recommend that you use a CSS framework such as Bootstrap to quickly style your game.
Project 4 - Make an analogue of Giphy using open API
Target: Create a web application that uses Giphy's API
Once you have experience working with the DOM and JavaScript, I recommend learning about templating data and displaying it in the DOM. A great goal for new front-end developers is to create a similar giphy website using the Giphy API. I recommend their API because they have no problem retrieving the key and the request-response formats are quite simple. Using their API, create a small web application that will do the following:
- Show popular gifs when loading the app
- Allow you to search for specific gifs
- Create a "Load More" button
You will learn a lot during the development of this project. One of the key things is working with asynchronous requests. You can use JavaScript or jQuery for this. Your goal is to get started with asynchronous code. As your application grows and becomes more complex, you need to think about how to organize your code. For this I recommend using the name spacing pattern.
Project 5 - Punk Beer Web Application
Target: Use the Punk Beer API to create a project that uses templating to display data on a page. Try using some front-end framework, for example React.
In this project you will also work with APIs. The Punk API does not require a key to use and provides a lot of information in its responses.
Layout of this project will be in many ways similar to the layout of the previous one. What’s new: the “shopping cart” or “favorite product” functions. Add the opportunity to view a selected list of products. I would recommend for beginner front-end developers to delve into learning frameworks - this will help expand your capabilities and gain general idea about modern web development. Since I'm actively working with Facebook's React, I'd recommend starting there. This may seem like a difficult task at first, so focus on building your web application step by step:
- Place data on the page from an API request
- Add a search string (via a separate API request)
- Add a “favorite product” feature
- Connect react router and add functionality to view “favorite products”
Solving these problems will allow serious progress in web development. Here I also recommend using a CSS framework. I decided to use Bulma for this example.
Improve and create
If you are a beginner in web development and are looking to create your own curriculum, then these five projects will help you achieve your goal.
Based on my experience, I will say that I began to develop most quickly when I was faced with a real project. Therefore, try to put your knowledge into practice as often as possible!
————————————————————————————————————————
Netology editor Svetlana Shapovalova understands who a front-end developer is, what he should be able to do (or should not), and why he is paid an excellent salary (or not so much).
Who is a front-end developer
According to the annual StackOverflow study, the most popular profession among service users in 2017 is Web developer. This is the category that all front-end developers fall into.
StackOverflow data
If you go to the first job search site you come across, for example, hh.ru, you will get the impression that this is a chameleon specialist.
It all starts with confusion in job titles: you can find “front-end developer”, and “front-end developer”, and “front-end developer”, and “front-end developer”, and “web developer”, and “front-end developer”. Sometimes you can even see some “web designer” with requirements for a full-stack developer. There is only one reaction to this: WTF?!
The trouble is that some employers do not distinguish (or do not want to distinguish) a layout designer from a front-end developer - this is clear from the job descriptions. Let's figure out what skills separate a front-end developer from a “workbench” (layout designers, don’t be offended, you’re good too).
A layout designer is a fighter on a narrow front. His task is to layout the layout received from the designer using HTML+CSS. He may know a little JavaScript, but more often he is limited to the ability to install some jQuery plugin.
A front-end developer doesn’t just create layouts. He knows JavaScript well, understands frameworks and libraries (and actively uses some of them), understands what is “under the hood” on the server side. He is not afraid of preprocessors and assemblers LESS, SASS, GRUNT, GULP, he can work with DOM, API, SVG objects, AJAX and CORS, he can write SQL queries and dig into data. It turns out a hodgepodge of skills, to which is added an understanding of the principles of UI/UX design, adaptive and responsive layout, cross-browser and cross-platform, and sometimes skills mobile development.
A front-end developer must be able to work with version control (Git, GitHub, CVS, etc.), use graphic editors, and “play” with various CMS templates.
It is also highly desirable to know English so as not to translate the specification in Google Translator, be able to work in a team, sometimes multilingual, understand web fonts, and understand testers and the testing process itself.
So, what technologies should a front-end developer master:
- HTML and CSS (including grids and CSS frameworks, W3C and WHATWG specifications, HTML5/CSS3 Polyfills)
- CSS preprocessors (Sass, Less, Stylus, etc.)
- JavaScript
- Popular frameworks and libraries: jQuery, Angular.JS, React.JS, Backbone.js, etc.)
- OOCSS/BEM/SMACSS
- HTML5 API
- ECMAScript 6
- Popular CMS (WordPress, Drupal, Joomla, etc.)
- Understand and understand server technologies (Node.js, PHP, Ruby, .NET, etc.)
- Debugging tools (Chrome Dev Tools, Firebug and others)
- JavaScript transpilers (Babel)
- Version control tools (Git, GitHub, CVS, etc.)
- Databases and query languages (SQL, MySql, NoSQL, MongoDB, etc.)
- Graphic editors (Photoshop, Illustrator, etc.)
- cross-browser and cross-platform development;
- progressive improvement and graceful degradation;
- mobile development;
- adaptive and responsive layout;
- web fonts;
- principles of SEO optimization.
What the statistics say
What technologies and tools do front-end developers most often use? Firstly, it’s hard to imagine a front-end developer who doesn’t know JavaScript. Surveys confirm this:- According to StackOverflow, JavaScript leads the list of front-end tools by a huge margin (90.5%)
- A study by O"Reilly, conducted among European programmers at the end of 2016, also puts JavaScript in first place.
StackOverflow data
If we group the most popular tools into stacks, we get the following situation:
StackOverflow data
And the set of the most popular frameworks and libraries of all developers looks like this (see illustration). It's nice to see front-end tools among this list:
StackOverflow data
Career path and salary of a front-end developer
The career path of a front-end developer usually begins with a layout designer - this is the most logical and generally accepted option. First, a bundle is studied, then knowledge, libraries and frameworks are “layered” on it. The future specialist also studies the key concepts of building a server part and adds the tools necessary for the chosen specialization. Then all this is polished by the ability to work with version control, graphic editors and understanding of the principles.There are other options. If a novice programmer initially knows in which area he plans to develop, nothing prevents him from learning a key technology stack at once, and not in parts. It all depends on the goals and time available to the future front-end developer. Any option is acceptable, as long as the end result is an intelligent specialist.
A ready-made front-end developer generally has three main development options:
- horizontal (to improve as a specialist, thereby constantly increasing your value in the labor market);
- vertical (grow up the career ladder);
- diversification (mastering related specialties, becoming a full-stack and retraining).
Which one to choose depends only on the specialist himself and his wishes/skills.
Regarding the salaries of front-end developers: here, as in the entire IT industry, there is no uniform payment standard. It all depends on the skills and ability to present yourself. Well, sometimes from luck :)
Average salary of a front-end specialist in Russia, rubles/month
Average salary of a front-end specialist in Moscow, rubles/month
According to My Circle
Traditionally, the annual salary of front-end developers in the USA is slightly higher than in Russia. However, if you work in a branch foreign company- You are most likely not afraid of such a gap. 
According to PayScale
How to become a front-end developer
First, take off your rose-colored glasses. Learning is hard work and self-discipline. Most beginning IT specialists drop out at the stage “I want to become a programmer and get paid in dollars, but I didn’t think that I would have to study so much.” The uniqueness of programming and any IT specialty in general lies in constant self-learning. This is both the complexity and the beauty of the IT sector. If this doesn't scare you, cool! You have every chance to become an excellent specialist.The main rule of a future specialist is to set realistic goals during the learning process. Planning will help with this. Make a list of the tools you plan to learn and keep it in front of you.
Those who start from scratch need to start with and master them at the level of ideal layout of PSD layouts. At this stage, you also need to learn how to work with text and graphic editors and know the basic principles of design (as a plus). Then take on JavaScript: syntax, architecture and language capabilities. Master popular frameworks and libraries, and at the same time fall in love with version control systems and one of the popular taskrunners. Add preprocessors and CSS frameworks, understand server technologies. And then you can drink smoothies in Bali and polish your acquired knowledge ad infinitum.
An approximate path for a beginning front-end developer.
You will have one of your own.
You can walk this path either alone or with mentors (universities, courses). These are the most popular formats developer training according to StackOverflow: 
StackOverflow data
Online courses are in first place, voted for by 64.7% of surveyed developers, followed by self-study from books, offline courses, open source development and programming camps. I wonder what higher education(Master’s degree) is almost in last place.
Conclusion
is a universal soldier. He will complete the layout, build the web application, and, if necessary, master the server part. You need to know a lot: HTML, CSS, JavaScript, JS libraries and frameworks, CSS preprocessors and frameworks, version control systems and taskrunners, backend technologies, unit testing and much more.In addition, soft skills will be useful: interaction with people and team work, the ability to establish effective workflow and solve assigned tasks in the most optimal way. You can’t do without confident knowledge in English.
The salary of a front-end specialist is quite decent, and the more skills, the higher the chances of getting a “fat” salary.
Anyone who doesn’t give in to self-study can become a front-end developer: as we found out, relying on a university education is difficult. The ideal option is various online and offline courses + literature on the topic, practice and the great Google.
"Netology" launches full-fledged program training front-end specialists - . This is a 6-month course covering basic front-end development technologies: HTML and CSS, JavaScript, Web API, AJAX, web sockets, React library.
At the end of the course, students will create their own single-page web application. The training is conducted by 10 practicing front-end specialists - this allows you to gain a comprehensive understanding of the tools and tasks of front-end development. During the entire training, students will receive at least 100 practical tasks, as close as possible to “combat” ones, and are implementing 3 medium-sized projects and 1 full-fledged project as thesis.
All students who successfully complete the course receive a certificate of advanced training of the established form and a branded diploma of “Netology”.
P.S. In your opinion, what knowledge is vital for a front-end developer, and what knowledge can be mastered as needed?