Olá!
A organização de arquivos em uma aplicação web pode ser um tópico complexo, especialmente quando você está começando. Para responder à sua pergunta, vamos fazer uma breve viagem pela história do desenvolvimento web.
Nos primeiros dias da web, cada página era estática e tinha seu próprio arquivo HTML. Se você quisesse mudar algo em uma página, teria que editar manualmente esse arquivo HTML específico. Isso funcionava para sites simples mas rapidamente se tornou impraticável à medida que os sites se tornavam mais complexos.
Por volta dos anos 2000 surgiu a pilha LAMP (Linux, Apache, MySQL e PHP), que permitiu a geração dinâmica de páginas HTML no lado do servidor. Isso possibilitou a criação de aplicações web mais interativas e personalizadas para cada usuário - como o Facebook.
Em 2005 surgiu o Ruby on Rails (RoR) - um framework que revolucionou como construímos aplicações web ao introduzir muitos novos conceitos e fornecer uma estrutura abrangente para organizar seu aplicativo. Uma das razões pelas quais o Rails se tornou tão popular foi sua filosofia "convenção sobre configuração" - ele tinha opiniões fortes sobre como as coisas deveriam ser estruturadas.
Avançamos até meados dos anos 2010 com frameworks JavaScript modernos como React.js ou Vue.js nos permitindo criar Aplicações de Página Única (SPAs). Essas SPAs geram toda interface do usuário - HTML - dinamicamente no navegador via manipulação DOM em tempo real.
Junto com esses frameworks JS vieram os "frameworks de frameworks", como Next.js para React ou Nuxt.js para Vue que fornecem estrutura adicional e recursos avançados aos frameworks base enquanto também têm suas próprias opiniões sobre organização do projeto.
Não podemos esquecer dos Frameworks CSS como Bootstrap (lançado em 2011) ou Tailwind CSS(lançado em 2017). Eles oferecem conjuntos predefinidos de classes CSS facilitando muito estilização das páginas sem precisar arquivos CSS separados por página; ao invés disso adicionando marcadores especiais diretamente no 'template' HTML.
Então "como isso funciona?" depende muito da tecnologia usada na aplicação específica – poderia ser sistema legado LAMP gerando HTML no servidor; poderia ser SPA moderna usando React/Vue; talvez até mesmo seja abordagem híbrida usando Next/Nuxt.js
E aqui estamos nós agora em 2023! Ainda existem grandes quantidades aplicações legadas LAMP rodando por aí enquanto Rails/Django continuam competitivos – na verdade estão ganhando tração novamente à medida que as SPAs começaram parecer muito com o que Rails estava fazendo há quase vinte anos atrás...
Por exemplo: Facebook usa bastante React enquanto Github, StackOverflow e Quora usam extensivamente Ruby on Rails. O Wordpress — responsável por cerca de 43% de todas as aplicações web — ainda é completamente baseado na pilha LAMP.
Para dar visão geral: Qualquer Aplicativo Web funciona através navegador solicitando conjunto arquivos(HTML,CSS & JS) do servidor via protocolo HTTP seguido por pedidos/respostas adicionais levanto até o html final renderizado pelo browser estilizados por descritores CSS e interagindo com o usuário atráves de código JS executado dentro do Browser.
Se você tem interesse aprender desenvolvimento full-stack eu sugeriria seguir este roteiro:
1.Comece criando simples app Lista Tarefas usando scripts PHP aproveitanto mod_php Apache com estilos css básicos e javascript puro.
2.Depois mude pra versão full-stack usando Django/Rails no backend e JQuery com Bootstrap no frontend.
3.Finalmente transforme-o numa API RESTful baseada em uma framrwork de backend acoplado a algum framework de frontend e estilizado via TailwindCSS.
Este exercício deve dar bom entendimento sobre funcionamento interno das diferentes pilhas tecnológicas e paradigmas dando visão holística do Desenvolvimento Full Stack.
Boa sorte!