This project is a simple image gallery webpage created using HTML, CSS, and JavaScript. It allows users to view a collection of images in a grid layout and select images using checkboxes.
- Responsive grid layout for displaying images
- Checkbox selection for images
- Cross-browser compatibility
- Git
- Node.js
- npm (Node Package Manager)
-
Clone this repository to your local machine:
git clone https://github.com/your-username/image-library-project.git
-
Navigate to the project directory:
cd image-library-project
-
Install project dependencies:
npm install
- Open the
index.html
file in your web browser. - Use the checkboxes to select images.
- View the selected images in the grid.
Contributions are welcome! If you have any suggestions or improvements, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Images provided by ACRE Image Collections
-
Clone Repository: Clone the project repository to your local machine:
git clone https://github.com/your-username/image-library-project.git
-
Navigate to Project Directory: Open a terminal or command prompt and change to the project directory:
cd image-library-project
-
Setup Project Dependencies: Ensure that you have Node.js installed on your system. Then, install project dependencies using npm:
npm install
-
Development Environment: Use a text editor or IDE of your choice to make changes to the project files located in the
src
directory. -
Run Grunt: Grunt is used to compile SCSS and JavaScript files and generate the distribution files. Run Grunt to compile the files:
grunt
-
View Changes: Open the
index.html
file in your web browser to view the changes you've made. -
Testing: Test your webpage on different screen sizes to ensure responsiveness. Make adjustments to the HTML, CSS, and JavaScript as needed.
-
Optimization: Optimize images for the web to reduce page load time.
-
Validation: Validate your HTML and CSS using online validators to ensure correctness.
-
Git Workflow: Commit your changes to the repository regularly using Git. Remember to add a meaningful commit message describing the changes made.
-
Contributions: Contributions are welcome! If you have any suggestions or improvements, feel free to open an issue or submit a pull request.
To run the project locally with npm http-server, follow these steps:
-
Install npm http-server: Install the npm http-server package globally on your system:
npm install -g http-server
-
Update your package.json: Add a script to start the http-server in your
package.json
file:{ "name": "image-gallery-project", "version": "1.0.0", "description": "Image Gallery Project", "main": "index.js", "scripts": { "start": "http-server dist" }, "author": "Your Name", "license": "ISC", "devDependencies": { "grunt": "^1.4.0", "grunt-contrib-sass": "^2.0.0", "grunt-contrib-uglify": "^5.0.0" // Add other dependencies as needed } }
-
Run the Project: Run the project using npm:
npm start
This will start the http-server, and you can view your image gallery project by navigating to http://localhost:8080 or http://127.0.0.1:8080 in your web browser. Note: Make sure to navigate to the
dist/
on the browser.