How to learn front-end framework?

Question

Frontend

Good afternoon. I am a beginner backend developer. I know html, css, js/jquery. I want to start learning the front-end in more detail. I ran into the problem that we need download managers, npm, webpack, yarn... All this is confusing and does not fit in my head. After all, in order to connect jquery, you need to register the path in the script and that's it. you can use. Can you tell me how to start delving into the front-end, where to start?

Answer 1

I understand that when you started learning JS, then immediately "like a slave in the water"?
If so, then I can say with great confidence that you do not know even a little JS.
Learning a particular technology is no different. Read articles/tutorials. Write your code. Delete. Read articles. Write code... and so on.
Project builders are powered by nodeJS. This is JS. You are "familiar" with him - so nothing should be difficult. Read the docs and write the functions you need
https://www.npmjs.com/package/gulp - comments on every line. A bunch of plugins that show how to connect. Try to write your own simple builder that builds preprocessors . Then add modules as needed.
You can watch webpack'y tutorials:
en - https://www.youtube.com/watch?v=aYo7YymudpE
ru - https://www.youtube.com/watch?v=MRlBKfGktwI
Eng. talks about the technology in an accessible way. I can’t say anything in Russian - I haven’t looked.

Answer 2

First you need to understand one thing:
In modern projects, Front-end is no longer static HTML+CSS+JS
For example, Modern Front-end development assumes constant interaction with the Back-end and reshaping the visual part "on the fly" from the manipulations of all users, not just the current one.
If we talk about git, npm, webpack, etc... - then in fact these are tools that help during development - you can do without them, if you can of course.
As a result, we get the same JS and CSS at the output
* You can do without all this and type in notepad, but is it more convenient when the syntax is highlighted?
* You can do without all this and each time compile and minify JS and Less files and reload the page to see the changes, but when the system does it for you, it's more convenient.
* You can do without all this and continue to work under Windows, but honestly it's more pleasant under MacOS, and more interesting under Unix.