I am new at front end development. I have been learning HTML/CSS/JS for the past three months, mostly by trying to solve real life problems, while trying to complete sample projects.
Right now, I am trying to make a portfolio website for graphics design. I need to make a section which will display all my previous works in an infinite scroll div with hidden overflow, where only three rows of thumbnails will be visible.
I am trying to automate the process of creating divs and each div will contain one thumbnail as an IMG element, based upon the first picture in each of the folders, so that in the future, I can simply upload a folder into my Works directory, which will contain 3 Images and I want only the first image in each folder to be the source of the img contained in each dynamically created div.
I want to dynamically create 1 div for each folder inside the WORKS directory (ex. DIV1 has h2-Project1-/h2 and -img src=img1-, DIV2 has h2-Project2-/h2 and -img src=img2-, etc. (please check the picture)
My folder structure looks like this
The webpage should look something like this, after dynamic population
I also want to click one of the dynamically created divs and be redirected to a new page in the same window, where the image used in the thumbnail will now be larger and placed inside a carousel, along with the other two pictures from that folder. Below that carousel div, I also want to have a carousel populated based on the folders (same as on the previous page), except the folder I am currently viewing images from.
The structure of that page should look something like this
I apologize for such a long question. This is my first post here and I am still completely new to Front End development. I hope that I was able to explain what I am trying to do and I hope that I am able to do it simply with JavaScript.
Any kind of direction or help is highly appreciated. I have searched a lot, but I was not able to find an answer, but again, maybe I simply didn't know what to search for.
Thank you in advance for your advice.
