🦘 Australia Zoo — Team Project This website was created as part of our Front-End course assignment at Future Games. The goal of the project was to design and develop a responsive website for an Australian zoo, while applying the fundamentals of:

⦁ Project planning ⦁ ⦁ SCRUM & teamwork ⦁ ⦁ JavaScript basics ⦁ ⦁ HTML/CSS structure ⦁ ⦁ Git & GitHub version control

We worked in a development team, shared responsibilities, tracked tasks on a Scrum board, and reviewed each other's code throughout the project. Our team successfully built all required pages, handled merge conflicts, tested features, and maintained both a development and production environment.

🐾 Project Requirements

The website had to include information about a minimum of 9 animals from 3 different groups (Mammals, Birds, Reptiles). The website consists of the following pages:

🌿 Common Layout for All Pages

⦁ Each page includes: ⦁ ⦁ A header with a logo ⦁ ⦁ A navigation menu (Home, Mammals, Birds, Reptiles, About Us) ⦁ ⦁ A sidebar ⦁ ⦁ A main content area ⦁ ⦁ A footer

Each page shares the same general structure but displays different content.

🏠 Home Page

Sidebar:

⦁ Shows a list of all animal names

Main Content:

⦁ Displays a welcome message on load

Clicking an animal:

⦁ Shows a short summary ⦁ ⦁ Displays image, name, first part of description, diet, and group (with link) ⦁ ⦁ Only one animal can be active at a time ⦁ ⦁ Clicking the active animal again resets to the welcome message

🦘 Mammals / 🦅 Birds / 🐍 Reptiles Pages (Group Pages)

Sidebar:

⦁ Displays only animals belonging to that group

Main Content:

⦁ Shows a description of the group

Clicking an animal:

⦁ Shows a short summary

⦁ Displays a Read More button

Clicking Read More:

⦁ Shows the full summary including all properties of that animal

👥 About Us Page

Sidebar:

⦁ Shows team member names

Main Content:

⦁ Shows team information

Clicking a member:

⦁ Shows details about them

Clicking again hides the info and resets

Only one member can be active at a time

🔹 Website Pages

⦁ Home ⦁ ⦁ Mammals ⦁ ⦁ Birds ⦁ ⦁ Reptiles ⦁ ⦁ About Us

🔹 Functionality

⦁ Fully responsive design ⦁ ⦁ Interactive content using JavaScript

🔹 Scrum & Teamwork

⦁ Created a complete backlog ⦁ ⦁ Tracked tickets on a Miro Scrum board ⦁ ⦁ Added comments ⦁ ⦁ Used different stages (To Do → In Progress → Code Review → Testing → Done) ⦁ ⦁ Every ticket was code reviewed and tested ⦁ ⦁ Held at least one sprint retrospective

🔹 Version Control

⦁ Used Git and GitHub for: ⦁ ⦁ Branching ⦁ ⦁ Code review ⦁ ⦁ Merge conflict resolution ⦁ ⦁ Development & production environments ⦁ ⦁ Any production bug = instant fail, so the production site had to stay stable

🔹 Submission Requirements

👥 Team Contributions

⦁ Member Sevilay – (Write role:Responsible for the birds page (HTML, CSS, and JavaScript) and the About page (HTML, CSS, and JavaScript), including the illustrations on the About page. Also designed the logo, selected the color scheme, arranged the illustrations, and designed the footer on the main page.) ⦁ ⦁ Member Simge – (Write role:In this project, I was responsible to find all the images for the entire page as well as the HTML, CSS, and JavaScript for the reptile page.) ⦁ ⦁ Member Sally – (Write role:Contributed to the initial design of the website. Responsible for the homepage sidebar (HTML, CSS, and JavaScript) and its responsive design. Also was the contact person to ensure all merge conflicts were resolved) ⦁ ⦁ Member Mousumi – (Write role:Responsible for the Mammals page (HTML, CSS, and JavaScript), including the banner video, Read me, navbar, and its responsive design.)

💻 Technologies Used

⦁ HTML – Structure ⦁ ⦁ CSS – Layout & styling ⦁ ⦁ JavaScript (ES6) – Dynamic functionality ⦁ ⦁ Visual Studio Code – Development environment ⦁ ⦁ Git – Local version control ⦁ ⦁ GitHub – Remote repository

📥 How to Run the Project Locally 1️⃣ Clone the repository ⦁ git clone

2️⃣ Navigate to the folder ⦁ cd your-folder-name

3️⃣ Open project in VS Code ⦁ code .

4️⃣ Run the website

⦁ Open index.html in your browser.

📝 Optional: Create Your Own Branch ⦁ git checkout -b feature-branch

Make changes → commit → push:

⦁ git add . ⦁ git commit -m "Describe your changes" ⦁ git push origin feature-branch

🎉 Final Notes

This project taught us:

⦁ How to structure a multi-page website ⦁ ⦁ How to apply JS logic to create interactive content ⦁ ⦁ How to collaborate as a team

⦁ How to work in agile way.

⦁ How to use Git & GitHub professionally ⦁ ⦁ How to work using a Scrum-like process in a real development workflow

We are proud of our teamwork and the final result!