https://github.com/bccpadge/image-gallery

Image gallery using HTML, CSS & JavaScript
https://github.com/bccpadge/image-gallery

html-css-javascript responsive-web-design

Last synced: 15 days ago
JSON representation

Image gallery using HTML, CSS & JavaScript

• Host: GitHub
• URL: https://github.com/bccpadge/image-gallery
• Owner: bccpadge
• Created: 2023-09-01T21:04:59.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-04T13:29:04.000Z (over 1 year ago)
• Last Synced: 2023-09-05T03:22:17.595Z (over 1 year ago)
• Topics: html-css-javascript, responsive-web-design
• Language: CSS
• Homepage: https://bccpadge.github.io/image-gallery/
• Size: 4.89 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Image Gallery

## Table of contents

- [Project Description](#project-description)

- [Screenshot](#screenshot)

- [View website](#view-website)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Video Credits](#video-credits)

## Project Description

In this project, I built image gallery using HTML, CSS, and JavaScript.

## Screenshot

![](./desktop-image-gallery.png)

## View website 

- Live Demo: [Github Pages](https://bccpadge.github.io/image-gallery/)

## My process

### Built with



 

 





### What I learned

When I started, I tried to follow this [tutorial](https://www.youtube.com/watch?v=sHG3Sf6XN9g&pp=ygUhaW1hZ2UgZ2FsbGVyeSBodG1sIGNzcyBqYXZhc2NyaXB0) and didn't understand the JavaScript portion of the video. The video linked in video credits below helped me out and I learned you can dynamically insert images via JavaScript with ease.

## Useful Resources

- Make your Favicon icon - [Favicon.io](https://favicon.io/favicon-generator/)

- Drag and Drop images to compress the them - [tinypng](https://tinypng.com/)

## Author

















## Video Credits

In depth YouTube Tutorial - [Image Gallery using HTML, CSS, and JavaScript](https://www.youtube.com/watch?v=vQc3EmFCWRw)

How to optimize your images - [DON'T Serve Unoptimized Images - Webp, Srcset, ImageKit, and more!](https://www.youtube.com/watch?v=pfHG6HL1GBw)