What are some of the best practice folder/file structure for web development?

Recently, I've been digging deeper into best practice file/folder stuctures for Web Deveolpment, due to a couple of my clients asking me if I was using them in my work.

Before I describe the folder stucture I use, and the other's I have heard of, I feel that it's important to mention what languages, frameworks, etc. that I use in my projects.

The vast majority of my work uses pure HTML, SCSS that compiles into CSS, TypeScript that compiles into JavaScript, and Firebase to host everything and for the database. On top of this, I'm starting to get into backend development, so I will have a server for each project either in Node.js or Python (2 languages I know really well) or potentially in PHP, Ruby, or Java (since I have a decent experience with those as well).

In terms of my current folder structure, it kind of looks like the following.

• Public
  • HTML Files
  • Assets
    • Stylesheets
      • CSS
        • CSS Files
      • SCSS
        • SCSS Files
    • Scripts
      • JS
        • JS Files
      • TS
        • TS Files
    • Images
      • Image Files
    • Icons
      • Icon Files
    • Videos
      • Video Files
    • Fonts
      • Font Files
• Other files (tsconfig.json, package.json, firebase.json, etc)

The only other structure I have heard of is the src/dist method, which although I'm not to familiar with, I believe entails you keep all of the files you code in in a src directory, and all of the files that the client sees in the dist directory.

In short, if someone could share some tips on file structure, and a good resource on the best practices, that would be much appreciated! Let me know if you need anymore info! Thanks!