Alguien sabe porque carga primero el JS y después el HTML, teniéndolo claramente justo antes de </body>

Luego en el curso Profesional de JavaScript te explican más a profundidad atributos para que cargue en simultaneo con el HTML, al final, etc...

Lo que pasa es que empieza cargando el HTML y al llegar a la etiqueta

empieza a ejecutar el javascript lo cual puede retardar un poco la carga de la página. Lo mejor es ponerlo al final (antes de cerrar el body)

Lo mismo pasa con el css con la etiqueta

pero eso te lo enseñan en el curso de Optimización Web

Hola @ANZ504.

De hecho carga primero el HTML pero lo hace tan rápido que no nos damos cuenta, también hay que tener en cuenta que esta cargando el mismo archivo así al cargarlo todo ejecuta de una vez el JS, pero en caso contrario que el código JS viniera de fuera, de otro archivo se vería primero el HTML y después el JS ya que como no se encuentra en el mismo archivo le da tiempo para mostrarte en pantalla el HTML y después ejecutar el JS.

Has la siguiente prueba copia todo lo que esta dentro de las etiquetas JS y ponlo en otro archivo y guárdalo con cualquiernombre pero con la extensión ".js", ahora en la etiqueta Script pon lo siguiente:

<script src="./nombredelarchivo.js"></script>

y abres el archivo HTML y veras que te carga primero el HTML.

Espero haberte ayudado y suerte en tus estudios.