So I’m brand new to PHP and programming in general, but I want to make sure I’m starting with Best Practices so I don’t have to do a mass reorganization later. This has led me down a rabbit hole on how to structure /root and all the things you would typically include.

I understand that there isn’t one “best” way to do this and it largely depends on your project, but I want to create a starting point. I also know there are templates available but the ones I have found don’t really explain what each folder/file is for in ~simple/non-technical~ terms.

I’m trying to understand the purpose of each folder so I can just build on this structure for this and future projects. I wanted to post it here so others who are learning can use this as a guide.

I have brief explanations after folders/files to explain what they do, but if I have any of them wrong, please let me know.

For me, official documentation can be confusing as I am not yet familiar with all the proper terminology. So, if there are some articles/YouTube videos that explain these concepts in more detail, please include them!

I will be updating this continuously as comments come in so any help is amazing help!

root
|-- composer.json >> includes Composer on the project, still not sure exactly how it works
|-- gulpfile.js >> I grabbed this overall structure from a Stack Overflow posted 9 years ago, so I don't know if this is relevant
|-- package.json >> I need to do a lot more research on this, but this is for "descriptive and functional" metadata
|-- changelog.md >> Explains what is different with the current version
|-- readme.md >> Basic overview of the project with the Project Title, Purpose, Status, Tech Stack, Features, Installation Instructions, Credits
|-- /src
|   |-- /app
|   |   |-- /controllers
|   |   |-- /models
|   |   `-- <other_framework_stuff>
|   |-- /assets >> Self-explanatory when you see the internal folders >> this is for assets used across the website
|   |   |-- /fonts >> Self-explanatory
|   |   |   |-- my-font.otf
|   |   |-- /styles >> Global CSS
|   |   |   |-- style.css
|   |   |-- /images >> Self-explanatory
|   |   |   |-- img.png
|   |-- /scripts >> Global JavaScript
|   |   |-- script.js
|   |-- /components >> individual components to be used multiple times, like a button
|   |   |-- /form
|   |   |-- /ui
|   |-- /features >> still learning what a feature is
|   |   |-- /about
|   |   |   |-- style.css
|   |   |   |-- index.js
|   |-- /layouts >> elements that can be referenced across multiple pages
|   |   |-- /header
|   |   |   |-- header.html
|   |   |   |-- header.css
|   |   |   |-- header.js
|   |-- /lib >> useful for something called a "facade pattern"
|   |   |-- fetch.js
|   |-- /services >> used to organize APIs
|   |   |-- analytics.js
|   |-- /pages >> the different web pages available
|   |   |-- about.php
|   |   |-- contact.php
|   |-- /data >> No idea
|   |   |-- file.json
|   |-- /utils >> No idea, heard they should be a "peer function" (whatever that is)
|   |   |-- file.json
|   |-- /features
|   |   |-- modal.js
|   /config
|   /build 
|   |   |--phpcs.xml
|   |   |--phpdocx.xml
|-- /public
|   |-- index.php
|-- /tests
|   |   |--acceptance
|   |   |--integration
|   |   |--unit
|-- /vendor