Clever Geek Handbook

How to become a front-end developer? A step-by-step guide to the world of the frontend





Greetings to all! My name is Anastasia Puchnina, I am a lead developer at DomClick, I am engaged in the ad showcase frontend. Today I would like to share with you my opinion on what is important for a front-end developer to know. This article will be useful for those who are just starting their journey in development, or have programming experience in another area and decided to switch to the front-end side.



Content:



  1. Who is a frontend and what does he do?
  2. Where to start and what to read? Training checklist
  3. What difficulties can there be? Errors at the beginning of the path
  4. Preparing for a Junior Developer Interview




Who is a frontend and what does he do?



Let's say you want to rent an apartment: you have a computer with Internet access, you know the address of another, more powerful computer that stores a huge number of ads. If you imagine that the usual sites do not exist and you cannot, for example, see ads on the map, filter out unnecessary ones by filling out a convenient form, you will have to compose a network request yourself and figure out how and where to send data.



Fortunately, engineers have come up with browsers, and web technologies are developing, and you just need to use the convenient interface provided by developers from different companies. It remains to make a couple of clicks, and the necessary information has been found.



Front-end developers are programmers who are responsible for creating such a front-end website. This is the client side of the site with which the user interacts directly on his computer or phone (client).



Many people know that sites include the markup and styles that are necessary to provide a clear page structure and design, but front-end development doesn't stop there. Most of the sites we constantly use are full-fledged web applications: mail, online banking, online cinemas, photo editors, notes. For such applications to work, front-end developers add code that runs in the browser, implements the desired functionality and, if necessary, interacts with the server, dynamically receiving the necessary information.





Front-end developer:



  • creates user interface, adds markup and styles of site pages;
  • programs the logic that runs on the client device, develops the architecture of the client application;
  • optimizes front-end performance so that the project loads quickly, search engines raise the site in the SERP, and users do not feel delays in navigation and interaction with the interface;
  • tests the developed functionality and writes automated tests to ensure high quality and avoid errors when changing the code;
  • configures the build of the project, which allows you to automate additional processing of code and files before starting the application;
  • performs application deployment: uploads it to the server so that the application is available on the network and users can use it;
  • monitors emerging errors using monitoring tools and eliminates them in time :)


In different teams, front-end developers can solve completely different tasks, for example:



  • Develop the front end of a business web application (what end users see when they use various online services).
  • Develop a library of interface components: individual blocks that other developers use in their projects (for example, buttons, pop-up windows, form fields, or elements for graphs). This can be open source libraries that are connected by developers around the world, or an internal library of components of a company with a specific design.
  • . , , - -, . !


? -



Regardless of what area you want to work in and what solutions to create, there is a certain base that, in my opinion, any front-end developer should know.



At the beginning of the journey, some are intimidated by the list of technologies, names and abbreviations in the frontend. There are a lot of them. But even an experienced developer does not know, and should not know absolutely all the technologies and libraries that exist (there are rumors that every second in the frontend world a new library is released :)







Three whales of development for browsers are HTML, CSS and JavaScript, with which are worth starting.



If you have no experience in development and find it difficult to learn on your own, it would be a good solution to take a front-end developer course with a mentor at one of the well-known programming schools. There are also good courses on layout and front-end development on Udemy and Coursera. However, this is not at all necessary, there are many free materials and sources on the Internet on the necessary topics.



To help you navigate, I've put together a step-by-step checklist to gain the knowledge you need to interview for a beginner front-end developer. Also attached links to materials and sources in Russian and English, which may be useful to you.



Save to bookmarks and use.



1. How the Web works



Before you start developing sites, you need to have an understanding of what happens when you open a site in a browser, how the client-server model works, and what the HTTP protocol is.





2. Development environment



You can even write code and markup in notepad, but it is more convenient to use special editors. Most popular among frontend developers:



  • VSCode is a free fast editor with many add-ons for development;
  • JetBrains WebStorm - full-fledged IDE, there is a trial period and the ability to get access under a student license;
  • If you need to send another person a piece of code, quickly check or save the code online, you can use an online editor such as Codepen .


3. HTML basics



Learn the structure of an HTML document, what tags are and what they are, meta tags, attributes, how to add images, create forms. Semantics and accessibility are important points in layout.





4. CSS





Adding styles for page elements. We study the block model, positioning, cascading styles, selector specificity, pseudo-elements, adaptive layout (for computers, tablets and phones). Learn to typeset modern layouts with Flexbox and Grid.





5. Git version control system



Git can help you take your coding process to the next level. This is an indispensable tool for developers that allows you to step by step save information about all changes in the code, return to a different state, and much more. It is advisable to learn how to work with Git in the terminal, as well as to practice: create a repository on Github or Gitlab and try out the basic features of Git on your test repository.





Practice. Practice. Practice!





At this stage, I suggest you practice more and make your own small project in order to remember the material covered. It is not necessary to come up with a website design yourself, you can take a ready-made layout. Create a landing page or, for example, build a portfolio site, save the code on Github during development, and try hosting the site on free hosting for static sites - Github Pages . If you don't have enough practice, try watching others code and repeat. There are enough video tutorials on this topic on YouTube (for example, for the query "site layout using figma layout").



If you have deeply studied HTML and CSS, then after passing the previous paragraphs you can become a website layout designer. But to learn how to write interactive web applications and become a professional front-end developer, you need to continue your journey in the front-end world and dive into programming .



6. JavaScript programming language



Don't confuse JavaScript with Java. Learn the basics of the language: variables, objects, data types, functions, context and closures, classes. Compare the differences between the old and new EcmaScript specifications. After understanding the basics, move on to more complex things: the intricacies of asynchronous programming (callbacks, promises, async-await) and making requests to the server (XmlHttpRequest, Ajax, Fetch, Cookie).





7. DOM (Document Object Model)



The DOM is the Document Object Model, the tree that the browser builds to render your page on the screen. Once you learn to work with the DOM, you can use JavaScript to create or modify elements on a page, respond to user clicks, and much more. A separate part of LearnJavascript is devoted to working with the DOM and events in the browser .



The DOM topic is also covered in detail in Expressive JavaScript by Marein Haverbeck.



8. Node.js, NPM



Thanks to the Node.js software platform, JavaScript can be used outside of the browser only. With this tool, you can write a console program or a server-side application.



Try to write your own small server .



You can use modules written by other developers in your JavaScript programs. Check out the online repository for NPM packages .



9. Babel



Babel Js is a JavaScript code compiler that allows you to use the latest features of the language, such as arrow functions, classes, optional chaining, without waiting for their full browser support. You just need to properly configure Babel for the desired version of EcmaScript or the list of browsers you support, the source code will be converted automatically.



Try using the online code compiler on the official website to see what modern JavaScript constructs turn into. Set up code compilation for a small JavaScript application by including Babel as an NPM package.



10. Module builders, Webpack



When creating applications, developers divide the code into parts (modules), connect additional code handlers, and configure applications for different environments (development and production). To make this possible, and we did not have to manually connect the modules in the HTML file in the right order and monitor changes, the applications use module collectors (bundlers).



The builders connect and combine modules and their dependencies into one or more files in the correct order, and also allow for additional code transformations.



Webpack is one of the most popular module builders. This is a developer assistant, even though it may seem daunting at first. Its flexibility allows you to customize the build using a huge variety of plugins and loaders (pre- and post-processors CSS and HTML, Babel, etc.), optimize resources, quickly load changes during development using hot module replacement, and much more.





11. CSS preprocessors



The CSS preprocessor is an add-on to CSS that provides convenient new syntax for the developer, adding new features that make it easier and faster to develop and maintain styles.



Most popular preprocessors:





The main advantages of using CSS preprocessors are:



  • Modularity. You will be able to create CSS code in different files and import styles as needed.
  • Nesting. Nest selectors inside each other for compact and logical code structure. This will improve readability and reduce duplication (especially useful if you use BEM methodology to write CSS).
  • Using CSS variables and functions (mixins).
  • You can choose a preprocessor with a syntax that is convenient for you (for example, CSS code without curly braces and semicolons).


I also advise at this stage to familiarize yourself with the PostCSS style transformation tool and, in particular, with the Autoprefixer plugin. This plugin allows you to automatically add vendor prefixes for the CSS properties of your code.



12. HTML preprocessors (templating)



HTML preprocessors have the same benefits as CSS preprocessors. They allow you to write HTML markup more efficiently, break code into modules, and also use conditions, loops, mixins, inheritance.



Popular template engines:





Customize your project by adding loaders to the webpack configuration for preprocessing CSS and HTML code.



13. Code style and linters



Code style is a set of rules that allows you to make your code consistent, as user-friendly as possible, and readable for you and other developers. Such rules describe where and what indents and brackets should be, the maximum length of lines, the names of variables, allow you to determine too confusing or unnecessary code and many other aspects.



Some companies come up with their own coding style. One well-known front-end ruleset is the Airbnb standard , which I advise you to read to improve the quality of your code.



There are special tools that can check your code automatically and make it easy to maintain your code in a specific style by setting up your project configuration once:





Check out the documentation of the tools, try to connect them to your project and IDE, follow a certain style of code in your project to make the application better!



14. Learning the framework / UI library



React, Angular or Vue? For 2020, the main struggle is between these libraries. You can choose any of them. If you are into a particular company that you would like to work for, you can choose the framework they use.



I would advise you to start with React - it is hugely popular among developers and companies, continues to evolve, is easy to understand for novice front-end developers, and has many other tools and a large community around it.



Start learning React with the official documentation , it's pretty detailed. If you find it insufficient, you can find a full course on Udemy (for example, Modern React and Redux- in English, with a very clear and detailed explanation for beginners, practical exercises and all the necessary material on React and libraries).



Pay attention to describing the types of input parameters for React components ( type checking with PropTypes ), as well as writing comments on the JSDoc standard (a series of articles on using JSDoc).



As you progress, you will need to learn how to manage application state. Libraries that help with this: Redux and Mobx. I recommend starting with Redux - this is the most popular library in conjunction with React. Check out the official documentation or translation . I also recommend a course from one of the authors of the library (Getting Started with Redux by Dan Abramov).



Then start exploring the library for conveniently performing asynchronous actions (for example, requests to the server). The easiest library to start with is Redux Thunk ( documentation ).



15. Automatic testing



Testing is the process of evaluating that all modules of an application behave as expected. Through testing, you can avoid a lot of errors that you might not notice. Learn what testing is and what types are ( Testing for dummies ). Learn to write unit tests for your code using one of the testing libraries like Jest .



16. In-depth





What difficulties can there be? Errors at the beginning of the path







Learning frameworks instead of basic knowledge



Sometimes it will seem like it’s better to learn a popular framework or library right away. This is a fairly common mistake, especially in the front-end: people start learning React or coding with Bootstrap and Material UI without understanding the basics and not having enough knowledge of HTML, CSS and JavaScript. You can use this approach if you are "running short distance" and need to quickly complete a project. But if you are planning to become a developer, it will not bring the desired result.





You don't need to know by heart absolutely every CSS property or method in JS, you can search for them if you forget. Understanding the basic concepts and intricacies is important: this is what will be your solid foundation in front-end development.



Learning is hard work, self-discipline and a lot of practice



It is a mistake to expect that you will deal with all the material in a week or learn JS in one day. The amount of time you need is a very individual matter, and most likely, the process will take more than one month.



Do not be alarmed, learn step by step and gradually, practice more - this way you will be able to advance faster in learning. Everyone needs some time to learn new things.



Decide why and why you want to become a front-end developer. Frontend is an area where you can implement interesting solutions and work on projects that will be used by a huge number of people around the world! In addition to this, the more knowledge and experience you gain, the higher your pay will be.



Remember the moments that motivate you, when your code will not work, and the next block will not align the way you want it :) If you like to see the result of your work, study the material through practical tasks or creating your own project, this way you will be faster get a return.



Copying someone else's code



If you run into problems and errors that you cannot solve, then feel free to seek help on Google. Learn to use search and find the cause of the problem, but do not blindly copy someone else's code.



Be sure to figure out what's going on in the solution you find, and why it is. It will be longer and more costly, but if you do not understand it, you are more likely to face a similar problem and again cannot solve it yourself, and your code will turn into noodles with different styles due to copying someone else's code.



Don't 100% trust the code you find



Other people may be wrong or lack experience too. If you find a video tutorial from a Master in JavaScript or Layout, it doesn't always mean that what you're being presented is the perfect solution and the best possible code.



Look at various sources and be critical of whatever you find. As you gain experience, you will understand which code and approaches are better and which only complicates your application and adds crutches that you will stumble over later.



Preparing for a Junior Developer Interview



Interviews in different companies can take place in completely different ways, I would like to talk about the necessary knowledge, based on my experience.



The areas most often interviewed for the position of a front-end developer are layout, JavaScript, in particular, asynchrony and knowledge of one of the front-end frameworks or libraries. For the Junior position, more attention is paid to layout and JavaScript.



Questions can be both theoretical and practical, for solving small problems.



The developer community has compiled a sample list of interview questions . Go through all the questions and try to give an answer. If you could not answer something, this is a signal to repeat the topic.



Programming problem sites can help you prepare for solving JavaScript problems, where you can practice online and test your skills (start with the easy problems section). Particularly popular tasks are tasks involving the application of methods for working with arrays. An example of such tasks: checking for a palindrome or anagram.



Websites with programming tasks:





Telegram channels with JavaScript tasks and tests (for example, @js_test) can also help in checking knowledge.



The tasks of applying really complex algorithms and knowledge of data structures such as trees and graphs are almost never given in an interview for a junior front-end developer. So don't be afraid: even if the interview seems very scary to you, in fact, if you were able to answer all the questions above, then you will most likely be able to get the interview.



A little tip: if you are not confident in your abilities, still get an interview with some company. And even if you do not get an offer, you will understand your weaknesses. You can prepare even better for your next interview!





Thanks for reading to the end. I hope the article was helpful to you. If you know that it can be useful to someone else, then share it.



I wish you good luck in conquering new peaks!


More articles:


All Articles