How to approach the organization of the code for the site?

Question

JavaScript

Hello! This isn't the first time I've run into this issue. It is not clear to me how, depending on the type of site, we select the technology for organizing the code. How to understand which technology is appropriate for which site. And in general, what technologies exist?
How to implement sites correctly, how to properly break the code, and what approach is used and where? Not just, "and then a framework" - no! In order to calmly understand the same framework, you need a deep understanding of how it all works. As the code was broken before, the approach was used. Did it all depend on the type of site (landing page, news site, online store), or was there something else? What approaches were used, what problems were created that contributed to the emergence of new approaches. You can answer that all this can be found on the Internet, but for a beginner it is difficult. There is no normal article / video on this topic on the network. A little lower, I will simply write a list of incomprehensible words, phrases that drive many into a stupor.
"approaches code splitting, templating, modules, MVC, state, code organization, binding, reactive programming, SPA, MPA, Virtual DOM, Node, Web Components, Templates, Custom Elements API.” ... What and where does it come from? Are there any block diagrams where it can be seen ... books? Can it all be described in one word - Patterns?
Ideally, if you have it, of course, a flowchart would be perfect, as a clear demonstration of what and where it comes from. Having such a block diagram, it would be easier to move along it, learning each block separately, but already understanding where to move and why

Answer 1

How to approach the organization of the code for the site?

Depending on the tasks, budget, time and desire of the customer.

It is not clear to me how, depending on the type of site, we select the technology for organizing the code. How to understand which technology is appropriate for which site. And in general, what technologies exist?

If you have a selling landing (without logic and incoming data from the server), then it makes no sense to shove abstruse design patterns there - ordinary static will do, or a site planted on a CMS (content management system), if you have a large online store, with a huge amount of logic , huge data coming from the server - you use tools that are created for this task (CMS or frameworks).

There is no normal article / video on this topic on the network. A little lower, I will simply write a list of incomprehensible words, phrases that drive many into a stupor.

The network has everything, it’s just that you, having learned to ride a bicycle, try to sit on a Lamborghini, and ask “why the hell are there so many controls here, I was sitting on a bicycle, and I only saw pedals there.” Everything comes with development experience. There is no need to jump from the ship to the ball.

"approaches code splitting, templating, modules, MVC, state, code organization, binding, reactive programming, SPA, MPA, Virtual DOM, Node, Web Components, Templates, Custom Elements API.” ... What and where does it come from? Are there any block diagrams on which it can be seen ... books? Can it all be described in one word - Patterns?

Most people's eyes will bleed and their ears will bleed. All these incomprehensible words are googled, and are explained in a very simple language.

Ideally, if you have it, of course, a flowchart would be perfect, as a clear demonstration of what and where it comes from. Having such a block diagram, it would be easier to move along it, learning each block separately, but already understanding where to move and why

Yes, there is such a block diagram. Depending on the language you choose, it is called RoadMap. For example, you have chosen Java or PHP for yourself - your way to the Java Developer Roadmap or Php developer roadmap.