How to create a html template for file serving Options

[jfirestorm44]

Hello all I am completely new to html/css/js or any other language related to building a website. I want to learn this stuff and thought maybe starting by creating/editing a file serving html file would be a good way. Right now the server I use has a template it uses when no index file is provided, and it does the job, but isn't appealing. https://github.com/caddyserver/caddy/blob/m...er/browsetpl.go

Since I want to learn some html/css anyways I though maybe I could alter it and make my own version to use. The problem I'm facing is I can't figure out which portion I need to keep in order to get the html to automatically detect(?) new files and folders and update them when the screen is refreshed. I also do not want the files/folders listed in a table but instead a grid layout. Unfortunately looking at CSS grid it seems I need to provide how many rows and columns I want. I am looking more for an automatic grid that just displays the files and folders that are located in a given directory in a grid format instead of a table and creates however many rows/columns are needed.

I would like to have my display look more like the images here. If you scroll down just a bit there's 4 images and the middle two are the type of layout I am looking to do. Essentially I want the functions of the html.tmpl provided above but the looks of something similar to those pictures.

I have been breaking down the html.tmpl above and changing things one by one to see what does what. I've also used w3schools quite a bit to understand what exactly things mean.

What is the best way to approach accomplishing this?
Should I use the html.tmpl already made as a template for what I want or would it be better to start from scratch?
What part of this html is allowing it to auto-detect the files and folders so they don't have to be listed?
Is this something a bit too advanced for someone with 0 knowledge of web building?

Thank you in advance

[Christian J]

Hello!

I can't figure out which portion I need to keep in order to get the html to automatically detect(?) new files and folders and update them when the screen is refreshed.

You need server-side scripting for that (like PHP). HTML is just a markup language, it can't do such things.

I also do not want the files/folders listed in a table but instead a grid layout. Unfortunately looking at CSS grid it seems I need to provide how many rows and columns I want. I am looking more for an automatic grid that just displays the files and folders that are located in a given directory in a grid format instead of a table and creates however many rows/columns are needed.

CSS "display: inline-block" or "float: left" (in either case together with a width specified) could let you display each item in boxes of the same size, boxes that would arrange themselves in a grid automatically. But you still need a server-side script to get the folder contents into the HTML.

Is this something a bit too advanced for someone with 0 knowledge of web building?

Yes I think so.

[jfirestorm44]

Hello!

I can't figure out which portion I need to keep in order to get the html to automatically detect(?) new files and folders and update them when the screen is refreshed.

You need server-side scripting for that (like PHP). HTML is just a markup language, it can't do such things.

I also do not want the files/folders listed in a table but instead a grid layout. Unfortunately looking at CSS grid it seems I need to provide how many rows and columns I want. I am looking more for an automatic grid that just displays the files and folders that are located in a given directory in a grid format instead of a table and creates however many rows/columns are needed.

CSS "display: inline-block" or "float: left" (in either case together with a width specified) could let you display each item in boxes of the same size, boxes that would arrange themselves in a grid automatically. But you still need a server-side script to get the folder contents into the HTML.

Is this something a bit too advanced for someone with 0 knowledge of web building?

Yes I think so.

Ok it did seem a bit difficult but thought I’d check just to be sure I wasn’t nuking it. I’ll find a different project to play with for now then. Thank you.