How to create a universal site folder nesting structure for php, Bootstrap, SASS?

Question

PHP

Good day to all.

I am learning web programming. For some time I wrote everything "by hand", suffered with floats, adaptive design, markup, adding changes to each HTML page, and one day I got sick of it all. I decided to somehow simplify the learning process. And away we go...
Starting to look for an answer to the question of how it is possible to add changes in HTML documents not manually to each file, I came across JavaScript, from there to jQuery, and began to study jQuery. Something went wrong and began to look further and learned about PHP and phpmyadmin, began to study PHP. I learned about the existence of frameworks.
Wanting to make a normal ready-made template for PHP practice, I saw Bootstrap and realized that this is what was missing for so long, here it is magic. But no... There are videos about Layout Grid, Toast Grid, Flexbox, Smart Grid. The advantages of other grids over Bootstrap were obvious to me, but I still settled on Bootstrap to start learning a new approach to layout. In the future, I was going to switch to Toast Grid.
From there, I already learned about preprocessors. There was a choice between LESS, SASS, Stylus. After reviewing dozens of videos, I settled on SASS. It turned out not everything is so simple. It turned out that between the start of work there is still Node.js and Gulp. Having dealt with them, reviewing the tutorials and reading the articles, I came to the conclusion that all this requires a universal folder nesting structure. Now the index.html method and the CSS folder in the project folder are no longer suitable for study and practice, and how it goes. We need a good framework to work with SASS and Bootstrap and using PHP and frameworks in the future, where video authors have their own folder structure: controllers, views, models. In order not to redo everything later, you need to immediately organize some kind of site skeleton, but how to combine it all together?
In general, at one point, Bootstrap, PHP, MVC, Gulp, node.js, SASS, jQuery, etc. fell on me, and now I'm in a stupor. I will not grab everything and start by mastering Bootstrap and SASS, and then I will redo everything in PHP. I understand that there is no single universal structure in nature, everyone does it in their own way, but after all, all advanced web developers have already mastered all of the above and even more, and I ask for advice on how I can organize everything at the nesting level of folders and files and what to put where? For example: index.php, CSS, JS, img to the libs or public folder, because there is also .htaccess; Gulp files to the app folder, and there will also be PHP with controllers, views, models...

How do you organize your projects? Is there a pre-made template for future projects? Do you take everything into account at once or gradually implement and add everything as needed? How can a beginner start correctly so as not to redo everything from scratch and have an idea in his head about how it all works and understand the general concept of site building and nesting levels?

At the moment there is a folder with the project, let's call it Global.

• css /
  
  • bootstrap.css
    
  • font-awesome.min.css
    
  • style.css
    
  
  
  
• img /
  
• js/
  
  • bootstrap.js
    
  • font-awesome.min.css
    
  • jquery-3.2.0.slim.min.js
    
  • npm.js
    
  
  
  
• .access /
  
• gulpfile.js
  
• index.html
  
• package.json
  

And then everything will be redone in PHP. I haven’t even installed SASS yet ... It was just before installing it that I realized that I needed a competent framework.

Thank you in advance for your advice

Answer 1

Few people write in pure PHP anymore.
Use any framework - for example, laravel . There, the folder structure is already built as expected, you just need to study and use it, and not reinvent the next wheel.

Answer 2

For the frontend, it's better to have 2 separate folders: dev and production with duplicate subfolders.
In the dev folder, store SASS (styles folder), pure JS (scripts or js folder) ("clean", in the sense of "original", you can also have babel, and anything similar here) and pictures (img) in original resolution. There's also a folder with pure html/php.
Let Gulp collect everything in the production folder, where CSS is poured into styles, processed JS (for example, lint, prefixer and minifier), compressed images in img and html / php into scripts.
For the back, everything is simple: use, if possible, one require in each page, and collect that script from all the others. Everything related to the front should be placed in the global views folder, and scripts for the back should be placed in the model and controller folders. Hope I explained everything clearly