Dynamic Gallery

Follow along tutorial on creating a dynamic image gallery using html, css (+ bootstrap css) & javascript.

Structure

│ project-folder/
│   README.md
│   index.html - our main html file, the one that's gone opened first when the site is visited     
│
└─── css/
|       style.css - custom css, for things bootstrap doesn't provide us
|
└─── js/
|       main.js - our javascript which will make our gallery dynamic        
|
└─── images/ - all images that are needed for the website
|
└─── steps/ 
        | *.markdown - instructions written in markdown
        | 
        └─ previews/ - images showing previews at certain points
        

Get started

1. Download the starter template from here Open link & Click Code > Download ZIP
2. Unzip the downloaded archive and rename the folder from: follow-along-dynamic-gallery-bd5fc39232ba600f9c90ddec2428436ff397e22a to something more human friendly like dynamic-gallery.
3. Open the folder in your favorite code editor (Visual Studio Code is recommended).
4. Proceed with the steps below

Follow along

Each step listed below is a link to another Markdown document. There's also a link to the code of th final result for each step.

Steps

1. Create initial layout with HTML + Bootstrap | Final Source code
2. Use JS to create HTML tags and add classes | Final Source code
3. fetch images from json file | Final Source code

Result

At the end you will have a web page which displays images and an easy way to add more images just by adding the files to the images/ folder and updating the json file by adding the names of the images.

But why?

Because

• editing HTML markup can lead to problems, such as: unclosed tags break the page or file becoming too big and hard to read
• separating the logic between multiple files makes the maintenance of a website easier
• JSON file can be easily replaced by an API endpoint or list of images coming from a database, without ever touching the index.html
• practice (makes perfect)