Web Development | Which path to follow in Front-End studies?

Web Development, an ever-growing universe that always leaves us with the question: "What now? Which path should I follow? What should I study?".

If you have ever asked yourself this question, rest assured that it is completely normal, every week is new, every month is something new! And the doubts and uncertainties only grow! So let's get together!

The idea of this post is to try to show you a path to follow in Front-End, what to study, how to evolve, where to start. And rest assured that this post is not just for beginners, but for all who are even at a more advanced level and want to know what to do in the next steps.

Even if you are already a Web developer, share your experience with me here, no doubt it will help me a lot.

And I'm going to talk only about Front-End, so it's already quite a lot, I'll leave Back-end for a next post, and then put the two together in a Full Stack.

This post reflects my personal opinion and my studies, but not only my opinion, I also brought statistical data to help you make the next decisions. So in this post you will find

• The Roadmap to learn and evolve in Front-End
• Data from the State of CSS report
• Data from the State of JS report
• Free and paid courses tips for you to study.

Roadmap for studying the Front-End

I could throw you a giant picture here, with a Mind Map, full of strange words, all mixed up and so on. But that's not the idea, the idea is to navigate together with you through all the possible paths... So let's go.

The Basics

Surely you have heard about the basics of Web development, and it is the basics that I want to start with: HTML, CSS and JavaScript.

And within each of these three I will show you the paths and possibilities.

If you are a beginner, no doubt this part is for you. Now if you're already a Web developer, you'll want to skip it! No problem!

HTML

Simply put, HTML (HyperText Markup Language) is a markup language (that's right, it's not a programming language 😃), responsible for the page structure.

My tip here is for you to study and research more about the HTML 5 BoilerPlate template:

https://html5boilerplate.com/

CSS

CSS (Cascading Style Sheets), in a nutshell, is responsible for the styling of a web application, it is with it that you will give life, color and shape to your application.

In CSS the following topics are important and you should have at least a notion of them, and try to deepen in some.

CSS - Preprocessors

CSS preprocessors provide a lot of additional features to CSS, making it easier and more efficient to write code.

You can find several preprocessors, but I would like to highlight the following:

• SASS (https://sass-lang.com/)
• SCSS
• LESS (https://lesscss.org/)

CSS - Frameworks

Frameworks are sets of components that can be reused. They facilitate and standardize the stylization of your application's pages.

Among the main ones are:

• Bootstrap (https://getbootstrap.com/docs/3.4/css/)
• Tailwind CSS (https://tailwindcss.com/)
• Materialize CSS (https://materializecss.com/)
• Foundation (https://get.foundation/)
• Bulma (https://bulma.io/)

CSS-in-JS

CSS-in-JS brings advantages in organizing and styling specific components, and you can manipulate it within your JS code, making the handling of components more dynamic.

The highlight here, and certainly my favorite, is "Styled-Components":

• Styled-Components (https://styled-components.com/)
• CSS Modules (https://github.com/css-modules/css-modules)
• Styled JSX (https://github.com/vercel/styled-jsx)

JavaScript (https://www.javascript.com/)

It is a high-level, interpreted, object-based, and weakly typed programming language that joins HTML and CSS to make it possible to insert the programming logic you need into your application. For example, controlling the page, "talking" to the back-end, accessing an API, doing calculations, and so on.

And without a doubt this is the most important part you need to learn before moving on to the JS Frameworks.

It is important to have a good knowledge of HTML and CSS, but you will acquire this over time. But you need to focus your studies on JavaScript so that you have a good base, and start working with the frameworks that I will present here. No doubt everything will be much easier afterwards.

JS e TypeScript (https://www.typescriptlang.org/)

It is also a programming language, only in this case you can add optional static typing to the language. In many projects you can work only with JavaScript, but many others will ask you for a good knowledge of TypeScript, so it's definitely worth studying.

JS - Frameworks

As with CSS, JavaScript frameworks contain a set of reusable codes that facilitate development, speeding up and standardizing your applications.

Among the most popular are:

• React JS
• Angular
• Vue JS
• Svelte

Meta-Frameworks

Besides the frameworks, there are the so-called "meta-frameworks" that run on top of a framework, bringing even more ease and options when developing your application.

As an example, for React we have "Next.JS" and for Vue we have: "NuxtJS", "Gatsby" and "Quasar".

https://nextjs.org/

https://nuxtjs.org/

https://www.gatsbyjs.com/

https://quasar.dev/

JavaScript Libraries

Like frameworks, libraries are of paramount importance in JavaScript, bringing various functionality out-of-the-box, and can also help with coding speed and quality. Examples:

• ESLint (Validation of your code, will do a "linter" on it) - https://eslint.org/
• Prettier (Code Organization) - https://prettier.io/

And I also want to highlight the Automation libraries, either automated processes or automated tests which are also very important:

• Selenium (https://www.selenium.dev/)
• Cypress (https://www.cypress.io/)
• Jest (https://jestjs.io/)
• Testing Library (https://testing-library.com/)

Other important technologies

Besides all the technologies already presented here, it is important to have knowledge and know how to work with the other technologies that I will describe below.

It is good to have knowledge in some code builder tools, such as WebPack and Babel, that for sure will be present in most projects.

Code Versioning

It is fundamental that you know how to work with code versioning. Keep track of changes, etc. Mainly when working in teams.

• Git (https://git-scm.com/)
• Subversion (https://subversion.apache.org/)
• CVS (https://www.gnu.org/software/trans-coord/manual/cvs/cvs.html)

Code Repositories:

• Github (https://github.com/)
• GitLab (https://about.gitlab.com/)
• Bitbucket (https://bitbucket.org/)

Package Manager

You will deal daily with package managers for various functions, among the most popular are:

• NPM (https://www.npmjs.com/)
• YARN (https://yarnpkg.com/)

Tools

Of course, you can't work without good tools, right?

No doubt you will work with editors like VSCode, Atom and so on. And you will need to analyze your applications using the Dev Tools for both Chrome and Firefox.

Conclusion

This is the moment when I can show you here that beautiful picture of the complete roadmap, for you to wallpaper your machine or put as a poster in your room! Just kidding...lol

But before I show you the complete roadmap, let me tell you which is my favorite stack within all that I've shown here. Let's go:

Editor: VSCode
Browser: Chrome
Package Manager: NPM
JS Framework: ReactJS + NextJS
Testing Lib: Jest + Cypress
CSS: Styled-Components

Well, that's the preferred for now right, tomorrow might already have changed. 😃

State of JS Report

This report shows the level of usage of JS frameworks. Visit the site and see many other indicators:

Source: https://2020.stateofjs.com/

State of CSS Report

This report shows the level of usage of CSS frameworks. Visit the site and check out several other indicators, such as Preprocessors and CSS-in-JS:

Source: https://2021.stateofcss.com/

Free and paid courses and tips to study

No doubt you can find many sources of studies on the internet, from free courses to paid courses (some cheap, some not so cheap). Here is my recommendation:

• Youtube (https://www.youtube.com/) - Courses for beginners, usually free.
• Udemy (https://www.udemy.com/) - Cheap and complete courses, choose well.
• CodeCademy (https://www.codecademy.com/) - Has free courses for basic level, and it is definitely worth paying for the other courses, they are very complete.
• Alura (https://www.alura.com.br/) - Paid courses, but very good and complete, I recommend.

Subscribe to my Youtube channel:
Youtube: Pena Rocks

Follow me on social networks:
Instagram: https://www.instagram.com/pena.rocks/
Twitter: https://twitter.com/nandopena
LinkedIn: https://www.linkedin.com/in/nandopena/

More Information:

https://www.pena.rocks/

Thank you!