How to build a frontend build from JavaScript?

Question

css

Hello.
I am a beginner, I have a site layout in two main files - one for html and the other for css. A more experienced friend suggested to me that it is better to collect the layout in one index.html file and from it refer to js files that will return the layout with functions. But unfortunately, he does not know the name of this method so that I can read about it, and he does not have time to explain. Tell me please, where can I read about this method of assembling files or what is it called? Have a nice day, everyone.

Answer 1

A friend tells you about the Single Page Application (SPA) technology, files are usually assembled through webpack, and web frameworks (React, Angular, Vue, Svelte, ...) are used as the main tool.
But! If you are not using a web framework, then it is better to do the layout using js. The thesis "it is better to collect index.html in one file and refer from it to js files that will return the layout as functions" is not true. In many cases it's worse
If you have a simple site and don't need a SPA, keep it simple

Answer 2

A friend advised you something strange, let's say I'm redoing the homepage now. As a result, the following design elements are obtained there, the header, the footer, and the general elements. It's all written in vue typescript, then it's picked up by webpack and published as plain html . The result is a logical editing scheme and no headaches when changing the page layout, webpack does all the layout for me. And swears if something is wrong.