The path of the Front End Developer ... How do I become a professional developer in the Front End?

The journey to professionalism in the field of Front End Development is not an easy one, but it is worth the effort to reach what you want. The most important thing through which you know that you have reached your dream in this field is to open any of the required jobs in your field and find in you all the skills required by this company or at least 90% of the skills that qualify you to be accepted in this job easily. Below, we will review the skills that you need as an interface developer to be a valuable addition to any work environment in which you work and add a lot to the work team and the place.

basic web design languages 

You must learn the most important web design languages ​​in which the web page is built, formatted and handled, which are languages

•     HTML, HTML5
•     CSS, CSS3
  

And after learning them, you must do the practical application and make a lot of designs and never stop and do not give yourself a certain number of designs. Consider the topic endless. All you have finished designing, do a more complex design than it and always challenge yourself to do the design in a different way to see if you understood everything in the language And you can do the thing in more than one way or not. There are a lot of features that you should focus on in the Css language, as focusing on them will add to your design skills a lot, and since all websites do not dispense with these features in this era, which are the following features.

•     Flex Box
•     Animation
•     Media Queries
•     Grid
  

And the most thing that adds a lot to you is the art of Animation. It makes the site a soul and is very effective and can shorten you a lot of what you will do using any programming language such as Javascript, so you must master it and do a lot of experiments with it and in this link here you will find the wonders of what can His work Animation Examples. As for the Media Queries, it is a big world and you should study it well and learn the principles of the Responsive Web Design work before you delve into the frameworks and here is a full course to understand the idea of ​​​​responsive designs without any framework and to add to your skill in dealing with Media Queries and controlling the design of your site In all different screen sizes.
Create Responsive Web Design Without A Framework 

Layout design

Before you start any design and work on it, you must know that the right professional way is to have Sketch designed by the UI / UX Designer and it contains everything related to the colors and fonts that are used and everything related to the shape and user experience complete with the user journey User Journey and your knowledge of design will It adds to you a good skill that is not at the core of your work because you write the code that implements the design, but your knowledge of design skills will make you able to discuss with the UI / UX Designer and with the team, and we say again that it is not at the core of your work.

Design frameworks

In the event that you have reached a good level in the design, then you must have your own framework that helps you in the design and contains all the components that you use constantly in your work, and this thing will save you a lot of time and effort. Here is a video that explains the benefit of the framework in general and after you do Create a framework for yourself There are global frameworks that will benefit you in design and save you time and effort and give you everything you need like

•     Bootstrap
•     Foundation
•     Semantic-UI
•     MaterializeCss
•     Tailwind CSS
  

All of these frameworks can be made with time yourself, but the advantage of working on them is that they are famous and most designers in the world work with them, so you must work with them for many reasons, as you cannot make a design with your framework and sell it, for example, or give it to a client who does not know about the framework Your work simply because he will not be able to work on it, unlike if you give him the design with a world-famous framework, he will be able to modify it quite easily if he has knowledge of it, and therefore it is recommended to use global frameworks. As for your professionalism for more than one framework, rest assured that the topic is very easy and your knowledge of design languages ​​will make the topic very easy and you only need to make two or three designs for each framework so that you can know it well. other.

Shorten the time while writing the markup

When you deal with advanced designs, you will find that when distributing elements in the design, there are a lot of repeating elements and there are many possibilities of programming languages ​​that you need in your work to save time while writing the HTML Markup and until you reach the stage of professionalism really and benefit from your time, you must learn one of the HTML Template Engine Existing on the scene like

•     Pugjs
•     Markdown
•     Slim
•     HAML
  

And they all serve the same purpose, and as usual, knowing only one of them will spare you the rest, and you can, as usual, get an idea of ​​the rest so that you can move from one to the other easily. And in case you have a problem installing them all on your device or you want to shorten the time, you can try them all on Codepen and so you don’t get frustrated and get the feeling that they don’t want them, they will add a lot to you like you do a loop for many elements with just one line and like to shorten the code and make it elegant It is very and easily readable, like you can call data by JSON, for example, inside the HTML directly without the need for development or any other techniques, and you can use the most wonderful features of programming languages, which are the If Condition. Html code is written this way.

Shorten the time while writing the style

In order to reach the stage of professionalism in creating a Style file for your design, you must learn one of the Css PreProcessors on the scene such as

•     SASS
•     LESS
•     stylus
•     PostCSS
  

And you will see the difference for yourself between your old way of working and writing the style file and your method after learning one of these plugins and as usual, you do not need to become a professional in all of them at all. All you have to do is learn one of the plugins, the most famous of which is SASS, and then you can take a look at the rest of the other PreProcessors and know the Syntax and their features So that you can move between them and move from one to the other and professionalize it in a simple period to cover the requirements of any company. Here is a complete tutorial to teach you the Sass language and its name
Begin Working With SASS
Here is an educational course for a complete practical application to design and use SASS in a professional manner
Create Web Design With SASS
And now, thanks to God, you have covered one of the most important things that will add to your skill a lot in web design and development. And in case you have a problem installing them all on your device or you want to shorten the time, you can try them all on Codepen.

JavaScript language

The language that is indispensable to any site in the world and your entrance to libraries and frameworks that are indispensable in the labor market today, and your learning of the language will open up a lot for you in the field of Web development, and you must start learning the language itself before you enter into the branches that will add a lot to you.

ES6, ES7, ES8 standards

Every year, improvements are being made in the ES6 standards, which are applied in the JavaScript language, which will help you a lot while writing the code, and you will find many things that are done in a simple and easy way, unlike the past, and many things have been shortened to make the Code clearer and easier to deal with. The language is very similar to most other programming languages and here is an educational course to learn the ES6 standards, which are indispensable to learn, as they are the future and everything that is coming is written in them.

Practical applications of JavaScript

And it is the most important thing in the education stage and more important than the basics themselves because it makes you use everything you learned in theory in a living example and a practical idea to prove the information in your head and never forget it and you can use it always. Applications that contain more than five videos and then a complete practical application for designing a complete site, all of which are functionally based on JavaScript only with ES6 standards

Solve issues and problems

What makes you a professional in the language and in any field in general is solving issues and problems, and these are the most things that they measure the level of the developer and problem-solving. It will help you a lot in doing anything that needs thinking and logic in your work. Register in it, then choose the JavaScript language and start solving problems.

Type Script Language

You must learn the TypeScript language in order to keep pace with the times and be able to work on the famous frameworks that depend on the language and rest assured that you will not get the feeling that you are learning a new language. New you learn, but consider that you are just learning a new Syntax, new features, and another way of dealing with Functions

JavaScript Frameworks

Work frameworks are the most important characteristic of the successful Front-End and are indispensable in any company now, and there are many well-known frameworks on the scene and required in every place and every country in which a framework is distinguished from the other and you choose based on the place you consider a goal to work in and the most important These frameworks are

•      Angular
•      Reactjs
•      Vuejs
•      Svelte

Performance & Accessibility

You can lose all your effort that was wasted in implementing a site design because of the bad performance. Therefore, one of the most important things that any Front-End professional does is to take care of the performance of the site, as the speed adds a lot to the value of the site and saves a lot of time for people, especially if they are service sites For large companies or ministries, every second has its price. Therefore, you must learn a lot about ways to shorten code and compress images, and look for articles that help you speed up your site, and how to do the idea with the least possible code and the fastest programming method that does not cost the browser a lot in terms of speed and avoid errors that occur in many People in the design and as an example of a common mistake, people who do * for all the elements in the Css and put on them properties such as transition, and this is one of the terrible mistakes that slows down the site very much. So with your experience in education and the information you get every day, you will come to know the always correct best practice of doing things within design. As for the accessibility, you must know that it is a big world and you must read about it, learn it and follow it in your work and do every element that expresses its correct usefulness so as not to distract smart devices such as screen readers and so that the code is readable and clear and here is an example that can be your entrance to the world Accessibility Finally, we must not forget the compatibility of other browsers. It is not correct to do your design on one browser and forget the rest of the browsers because the whole world has a special taste and often differs from you. Your design must be compatible with all browsers, and this is one of the simple things that you will not face problems with except in Microsoft browsers and the rest will be minor adjustments. 

Learn Version Control

This is one of the indispensable things in any professional technical team and its usefulness is great. Git, GitHub Imagine if you were working on a project and there was a problem with the file and ruined the file that all the software depends on, or imagine if someone else intervened in the file and modified the code and ruined a certain thing in your code, what would you do? Normally, you will review the file again to see where the error is and this can take a very long time. That is why I found the Source Control, which allows you to have versions of your project and files that you can refer to any project at any time, and it allows you to save the correct and professional modifications, which allows the project manager to know the most person who has developed and enables him to separate the codes from each other to know the level of each person and evaluate his performance The file is not completely merged, and you do not know who wrote what or who is more professional than the other and the rest of the great benefits that benefit you in your work from saving time and effort. And easily return to any version and modify it or merge one version with another and completely avoid the problems that you could encounter if you were working in the normal ways. Therefore, you must learn Git and learn about the greatest source control sites.

Learn the Task Runners for your personal secretary

Imagine with me if there is a secretary who works for you after completing each design and does Minify for your Css, Js files. Imagine with me if the secretary compresses the images of the design after you have modified them and whenever you modify the file, he does Minify again and saves you time. Imagine with me that you are writing the code and after writing you go to the browser and do a Reload to see the changes. What if the secretary provided you with the Live Reload feature, and you did not need to reload the page at every modification. Imagine with me that you want to solve JsLint problems and errors, rest assured your secretary is there to help you solve them. What if you are working on Sass and you want your secretary to make a compilation of Sass files to produce a Css file for you to read by the design. Rest assured, your secretary is able to do this, and do you know that your secretary can do a proxy work that helps you avoid cross-domain problems resulting from the XHR Request? Therefore, you should learn one of the task runners on the scene and the most famous of them

•     GruntJs
•     GulpJs
•     Web Pack

Programming languages ​​​​that the team deals with

You must first understand the meaning of your job title. It is Front-End, which means that you are responsible for the front part that people see and enter the scope of development and are never responsible for doing full programming in the Back-End or building a database or planning the entire application, this is not your profession But as a professional developer, you should take some information about the programming languages ​​that the team works in as well as the frameworks so that you can modify the design. For example, if you work in a Dot Net and SharePoint work environment, you will not be programming with the team, but you must know how Sharepoint works and how you can modify any Layout and your knowledge of the concept of programming languages. You can modify anything written in terms of design without compromising the code And the same is the case if you are working in a work environment that works in PHP and the Laravel framework, for example. You are never required to be completely professional in this framework, nor to be a professional programmer in PHP, but it is enough to be aware of the basics of the language and how to modify it, and the evidence for that is that You will not write a Function, for example, bring data from the database and show it and then design its shape because this is one of the tasks of the Back-End, but one of your tasks is to modify the output that the Back-End team made and change the design and your knowledge of the basics of the language will make you completely away from my destruction code and everything will work fine. Therefore, it is necessary to warn about the difference between a person who designs the database, creates tables, extracts information from the database and puts it on the page, and the person who can modify anything programmatic by virtue of his experience and change its shape and modify its entire design. The first is the Back-End Developer and the second is Front-End Developer. There is a very important point, which is that with the time you spend in modifying software and design, you will find that you have taken great experience that can qualify you to do what the Back-End does. These are additional skills for you, but you must To know that it is not from the basis of your profession, and if you obtained it, you combined the Front + Back and here the job title will change for you completely and you will be Full Stack Developer. What concerns us at this point is that you must be familiar with the programming languages ​​and frameworks scattered in the market and have the ability To learn the basics and principles of any language or framework from them so that you can work in any work environment easily. 

Popular Content Management Systems

Many companies do not work on the private software system and turn to the Open Source system, and most companies work on the WordPress system, as it is very famous and is used by many international sites, and since it contains great features and many themes in the markets and very many additions as well, and there are many content management systems on the scene Such as

•     WordPress
•     Joomla
•     Drupal
  

Therefore, as usual, you should learn the system of one of them very professionally, and do not forget to look at the rest of the systems and rest assured, as usual, your knowledge of the programming language programmed in the system, for example PHP, will make it easier for you to learn the system as long as there is its documentation with the presence of sites such as Stackoverflow to search for problems and things that you face. Therefore, you should cover the point of content management systems so as not to lose a job opportunity. You require an interface developer who has experience in the WordPress system or any other system. After you know about Syntax and the way the system works, you will start working directly and nothing will hinder you.

Time management and project planning software

Time management programs are indispensable and most respected companies work with them, as they save you time and effort, follow the status of the elements you work on, organize your time and the way you solve problems, and help you determine the time for each problem or suggestion. The rest should be so that the program is familiar to you and is not new to you if you work in a new work environment. There is a Trello program, which is light and gentle, and has all the features that help the work team to communicate and solve problems together. There is also a program that has more features than Jira, and many work environments work on it to manage items, problems, and time. In respectable work environments, you must have knowledge of Agile Software Development and the Scrum Framework to know how to deliver your project for you and your team professionally and ahead of time as well. Talking about Agile is not enough for a line or an article, as it is a big world. You can take a look at this site AgileInNutshell

The most important skills that companies require

learnability

One of the most important things that companies like in any employee is their ability to learn and learn new skills. There are many professionals who enter the company and after years their level does not increase and they do not know new skills. Many companies hate this situation, so you must have a passion to learn new things every day and develop your skills and languages that I learned every day.

Avoid the word can't

You should stay away from the word “cannot”, as this word annoys your manager and annoys any professional person in your team. Therefore, if you work in a company and say this word a lot, you are completely far from professionalism. Try first before you say no. There is a stage if you reach it in design or programming in general. You will be able to do anything, no matter what, and in the event that it is impossible with your experience, you will find an alternative to it, so forget the word “can not do this”.

time saving

One of the things that companies love the most is saving time, because saving time equals an increase in income for the company and the work team in the future. Saving time comes with professionalism, experiences, and problem solving. Whenever you encounter a problem and solve it, you will save time if the problem comes again, as well as whenever you make a new idea, you will save time. In case you want to do it again or even make an idea similar to it, therefore more learning + problem solving + developing your skills daily equals saving a lot of time and effort.
Of course, the field is developing daily and a lot of techniques appear in it and the article I talked about the most important indispensable skills and now you can see the full list of skills, including professional skills, which will add a lot to you as well

•     HTML, HTML
•     CSS, CSS3
•     JavaScript, DOM, BOM
•     ECMAScript [ 6, 7, 8, ... ]
•     JSON, AJAX
•     JavaScript Frameworks [ Angular || Reactjs || Vuejs]
•     Front-End Frameworks [ Bootstrap || Foundation || Bulma || Tailwind CSS ]
•     CSS Preprocessor [ SASS || LESS || PostCSS ]
•     HTML Template Engine [ Pugjs || HAML || Slim ]
•     Task Runner [ Gulpjs || Gruntjs || Web Pack
  

Professional skills that make you a very skilled Front-End Developer

•     JavaScript Unit Testing [ Jasmine || Jest
•     Command Line
•     Git, Github
•     Problem Solving
•     RESTful Services and APIs
•     GraphQL
•     Algorithm + Data Structure
•     Design Patterns => Free Book