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
What is front-end?
Front-end is the visual part of a site or system, and where we can interact with the user.
Generally, a front-end developer is responsible for coding a new interface, using languages like: HTML, CSS and Javascript.
But 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).
But now let's get to the point!
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!
Hint 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!
Quite a lot, right? But stay calm that as you study 1 item everything fits together.
Internet and how does it work?
Today it's very important to know the basics of internet and understand how it works under the cloths.
The 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:
- HTTP protocols.
- Domains.
- Browsers, how it works and the difference between each.
- Hosting.
Basic: HTML, CSS and JS
Usually most of the front-end developers use these 3 languages, to encode sites, styles, structure of a site:
- HTML (base of everything)
- CSS (style)
- Javascirpt (For interaction)
General development skills
Now I will list some skills that you will need in your front-end career!
- Learn the basic commands of GitHub, share your codes with the community.
- Learn about HTTP protocols and REST API Basics (GET, POST, PUT, DELETE...)
- Learn about Google, StackOverflow.
- Use good terminal (bash, zsh)
- Study on date structure
- Study design standards
Style: Pre-processor and CSS architecture
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:
Familiarize yourself with the tools
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:
CSS Frameworks
A css framework abstracts common web design and makes design easier for the developer to implement.
Frameworks
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?
Testing your application
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 date 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
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.
Static site generator
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.
Mobile Application
Well, here the front end interacts directly with the user, including design elements such as wireframes, mockups, cache and datebase synchronization. It offers a smooth user experience in various screen sizes and orientations.
Desktop Application
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
Keep on learning
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!
