Image Gallery

Introduction

In this assignment, you will be fixing the paths to service files, images, and pages of a Digital Art website. The website showcases modern frontend features, including mobile responsiveness using media queries, a Flexbox layout, mobile navigation, and CSS transparency.

The StackBlitz documentation says that the project should be opened in Google Chrome Browser to let the WebContainer load properly. Please make sure you use Google Chrome.

Please wait for the Project Web container to complete loading on the right =>>>>

After completing the assignment, feel free to explore the CSS and JS files to get a glimpse of the technologies you will learn in future modules of the Devslopes curriculum.

!!! NOTE: You will find the "TODO" items in every html file of the current project (index.html and all html files in the /pages/ location).

Learning Objectives

This assignment should prove that a student is able to:

• Use relative paths based on the current file location.
  • Half step.
  • Full step.
• Use absolute paths based on the project root.
• Link files to your static HTML document.
  • CSS files.
  • JS files.
  • Images.
• Construct paths to navigate through pages of a static website.
• Link external pages to your Website.

Standard requirements

• Fork the project to your StackBlitz account
• All the tasks of the "Specific requirements" section MUST be solved
• The project's file/folder structure should NOT be edited!
• StackBlitz IDE MUST have 0 code problems listed (spelling problems are fine)
• The code MUST be formatted with Prettier
• Submit a txt file with the StackBlitz project secret url.

Specific requirements

For the index.html file:

• Connect the scripts.js file
• Connect the layout.css file
• Connect the image-lists.css file
• Add the image external path for each gallery item's image
  • Plants: plant-image.jpg
  • Nature: nature-image.jpg
  • Modern Design: design-image.jpg
  • Space: space-image.jpg
• Add the detail page path for each gallery item's "Details" link to page files located in /pages/:
  • Plants: plants.html
  • Nature: nature.html
  • Modern Design: modern-design.html
  • Space: space.html
• Add the detail page path for each top navigation item:
  • Plants: plants.html
  • Nature: nature.html
  • Modern Design: modern-design.html
  • Space: space.html

For each page:

• Connect the scripts.js file
• Connect the layout.css file
• Connect the image-details.css file
• Add the external image path to let them show up
  • Plants: plant-image.jpg
  • Nature: nature-image.jpg
  • Modern Design: design-image.jpg
  • Space: space-image.jpg
• Add the detail page path for each top navigation item to redirect to a proper file located in /pages/:
  • Plants: plants.html
  • Nature: nature.html
  • Modern Design: modern-design.html
  • Space: space.html
• Add the path to the index.html file for the "Back to Home Page" link
• Add the absolute unsplash.com path to the collection page for the "More <collection-name> Images" link.
  • More Plants Images
  • More Nature Images
  • More Space Images
  • More ModernDesign Images
• Add the detail page path for each bottom navigation item:
  • Plants: plants.html
  • Nature: nature.html
  • Modern Design: modern-design.html
  • Space: space.html