![\"https://media.giphy.com/media/l0Exk8EUzSLsrErEQ/giphy.gif\"](\"https://media.giphy.com/media/l0Exk8EUzSLsrErEQ/giphy.gif\")
Are you a beginner in the front-end area? In this post I will explain all the stages of a front-end development! Following a front-end developer roadmap
\nFront-end is the visual part of a site or system, and where we can interact with the user.
\nGenerally, a front-end developer is responsible for coding a new interface, using languages like: HTML, CSS and Javascript.
\nBut nowadays a front-end developer is no longer limited only in web, they can also work on the navigation part of a site, on layouts and even on the appearance of different on mobile devices (responsiveness).
\nBut now let's get to the point!
\n
Below is a chart that demonstrates the possibilities you can follow. This graph was made by Kamran Ahmed. After reading this post do not forget to give a star in the repository to support your work!
\nHint of lores: This map will give you many insights, about which area is best for you! Do not take it as absolute truth, absorb what you identify yourself most because you will understand one tool more suitable for some cases than the other. So read this map and start coding and good luck!
\nThe Internet is a global network of computers connected to each other that communicate through a standardized set of protocols. And you need to understand about: Usually most of the front-end developers use these 3 languages, to encode sites, styles, structure of a site: Now I will list some skills that you will need in your front-end career! A CSS preprocessor is a program that allows you to generate CSS from the unique syntax of the preprocessor itself. Pre-processors can make the CSS code more organized, being them: To become a good front-end developer, you must dedicate yourself as in any area of your life, to debugging tools, unit testing, testing learning front-end technology like React, Vue, Angular, etc. All browsers come with tools to support the developer. And these tools allow you to test and adjust your pages in the browser itself, in a specific way for how the browser is interpreting your code. Some useful tools: Some task performers that I indicate: Linter and formatters that I indicate: A css framework abstracts common web design and makes design easier for the developer to implement. They are packages that contain pre-written code, they force structure and a foundation to build while allowing flexibility with the final design. Most used Frameworks: Do you want to know the difference between React or vue? Click here → React or Vue which one should I choose for my project? The objective of the front-end testing is to test the general functionality to ensure that the presentation layer is defect free with successive updates. End-to-end test In E2E testing, the developer tests the entire application together and tests it as a user would. Basically, here the developer tests the application workflow from start to finish. The goal is to replicate real user scenarios so that the system can be validated for integration and data integrity. Below are some tools: Integration test The integration tests ensure that several parts of the application work together. It is one of the crucial and most important tests. Server-side rendering (SSR) is the ability of an application to contribute by displaying the web page on the server instead of rendering it in the browser. A static site generator is a publishing tool, which is essentially a set of tools for building static sites based on a set of input files. Well, here the front end interacts directly with the user, including design elements such as wireframes, mockups, cache and database synchronization. It offers a smooth user experience in various screen sizes and orientations. Even if cell phones and tablets have the advantage of being useful, you simply cannot ignore PC and desktop applications. Because there are still many users who prefer the PC the best option to explore the applications and sites So, after reading this guide, you can kick off your journey as a front-end web developer for sure. Although the learned is the only key to success. To do so, you have to practice and learn consistently. Good luck in your studies! Send me a suggestion of what you would like to learn at lorenakauanecontato@gmail.com Until the next post! \n
\n\n
\nBasic: HTML, CSS and JS
\n\n
\nGeneral development skills
\n\n
\nStyle: Pre-processor and CSS architecture
\nFamiliarize yourself with the tools
\n\n
\nCSS Frameworks
\n\n
\nFrameworks
\nTesting your application
\n\n
\nServer-side rendering
\nStatic site generator
\n\n
\nMobile Application
\n\n
\nDesktop Application
\n\n
\nKeep on learning
\n![\"https://media.giphy.com/media/qYyJ48I53CUEg/giphy.gif\"](\"https://media.giphy.com/media/qYyJ48I53CUEg/giphy.gif\")
![\"https://media.giphy.com/media/IccrIoCPkphZiYeWVW/giphy.gif\"](\"https://media.giphy.com/media/IccrIoCPkphZiYeWVW/giphy.gif\")