Industry Night Case Study

Overview

Industry Night 2026 is a real Fanshawe College event where IDP (Interactive Media Design and Production) students showcase their skills, knowledge, and portfolios directly to industry professionals. This competitive group project challenged our team to design and build a professional website for the event. The winning team gets to present and showcase their work at Industry Night itself—an incredible opportunity to demonstrate capabilities to potential employers. While we didn't win, the experience taught us invaluable lessons about collaborative development, data management, and real-world web project workflows.

Industry Night Screenshot

My Process & Team Contribution

As part of a collaborative team, I contributed to both technical and creative aspects of the project. We started by brainstorming the user experience—we needed to create a platform that showcased all our IDP classmates' portfolios in a professional way that would impress industry professionals attending the event. A major breakthrough in our development process was moving away from hardcoding student portfolio data directly in HTML. Instead, we learned to structure all student information (names, portfolio links, project descriptions, skills) as arrays in JavaScript and dynamically render the content using loops and functions. This meant we could display an entire class's worth of portfolios with clean, maintainable code. This architectural decision taught us about scalability and maintainability—principles that will serve us throughout our careers. I built the responsive layout using HTML5 and CSS3 in VS Code, while collaborating with teammates through GitHub for version control and code management. We created promotional video content in After Effects to showcase the event's energy and importance.

Design & Technical Architecture

Visual Theme: Professional, corporate aesthetic reflecting Fanshawe's brand while maintaining student-focused energy. Clean, accessible color palettes and modern typography to appeal to both IDP students and industry professionals attending the event.

Data Structure: Student portfolio information (names, portfolio URLs, projects, skills) stored in JavaScript arrays instead of hardcoded HTML—a crucial learning moment that showed us how dynamic data handling makes websites scalable and easier to maintain. If we had 30 students instead of 20, we only needed to update the array, not rewrite HTML.

Layout: Custom responsive grid system for flexible student portfolio showcases, event schedule, and student achievement sections

Version Control: GitHub used for collaboration, allowing team members to work on different sections simultaneously while maintaining code integrity

Solution Implemented

  1. Dynamic Student Portfolio Directory - Data stored in JavaScript arrays, then rendered dynamically on the page. Student information (names, portfolio links, project descriptions, skills) pulled from arrays rather than hardcoded HTML—a fundamental lesson in web development efficiency. Each student's portfolio could be displayed on cards that looped through our array data.
  2. Event Information Hub - Clear presentation of Industry Night details: date (April 2026), venue, time, event objectives, and what students should prepare to showcase at the event
  3. Responsive Navigation - Mobile-friendly menu with smooth scrolling between student portfolio sections, event details, and preparation guides
  4. Team Collaboration Tools - GitHub repository structure allowing multiple team members to work on different components without conflicts
  5. Interactive Student Showcase Section - Space highlighting student portfolios and accomplishments, encouraging attendees to explore IDP student work
  6. Promotional Video Integration - After Effects video content embedded to give a cinematic introduction to Industry Night's purpose and energy
  7. Student-Focused Features - Quick tips, preparation guides, and company insights to help students prepare

Technologies & Tools Used

  • Code Editor: VS Code - Our primary development environment for writing and managing code collaboratively
  • Frontend Development: HTML5 (semantic markup), CSS3 (responsive design), JavaScript (dynamic data handling with arrays and DOM manipulation to render student portfolios)
  • Version Control: GitHub - Essential for team collaboration, allowing us to manage branches, merge code, handle conflicts, and coordinate our student portfolio updates
  • Data Management: JavaScript arrays for storing all class students' portfolio data (names, links, projects), dynamically rendering content without hardcoding
  • Motion Graphics: After Effects - Created promotional video content introducing Industry Night's significance and excitement
  • Responsive Design: Custom CSS Grid ensuring seamless experience across mobile, tablet, and desktop devices enhanced user engagement
  • Development Environment: VS Code with semantic HTML markup
  • Performance: Optimized images and efficient CSS for fast load times

Key Features & Technical Achievements

  • Dynamic Data Rendering - Student portfolio and event information stored in JavaScript arrays and displayed dynamically, eliminating the need for hardcoded HTML
  • Class Student Portfolio Showcase - Professional display of all IDP classmates' portfolios with names, project descriptions, and links pulling from structured JavaScript arrays
  • Event Timeline & Logistics - Date, venue, schedule, parking, and registration information clearly presented
  • Student Preparation Guide - Tips on what to prepare, how to network, and what to expect
  • Responsive Design - Mobile-first approach ensuring accessibility on all devices (phones, tablets, desktops)
  • GitHub Collaboration - Team code management with branches, pull requests, and commit history
  • Promotional Video - After Effects-created content showcasing the event's importance and energy
  • Professional Branding - Consistent design language reflecting Fanshawe College and IDP program identity
  • Smooth animations enhancing user experience
  • Easy-to-use navigation with quick access to event details
  • Professional branding consistent across all pages

Learning Outcomes

While our team didn't win the competition, we created a solid, functional website that demonstrated our understanding of modern web development practices. More importantly, this project was a masterclass in collaborative development and real-world problem-solving. We successfully built a dynamic website that served a real purpose for a real event, showcasing IDP students' capabilities to industry professionals in April 2026. The experience of working with GitHub, managing data structures in JavaScript, and coordinating as a team prepared us far better than any classroom lecture could.

Results & Impact

The Industry Night website successfully created a professional platform for student-business networking. The clean design and ease of navigation helped students feel confident about attending, while companies appreciated the professional presentation. The responsive design ensured accessibility from any device, whether students were browsing from a computer or mobile device the day of the event.

Key Lessons Learned

  • Data-Driven Development: Moving student portfolio data from hardcoded HTML to JavaScript arrays was transformative. This taught us scalability—if our class had 50 students instead of 20, we'd only need to update the data array, not rewrite HTML. This is a fundamental principle in web development.
  • Collaborative Workflow: Working as a team on GitHub taught us version control discipline—committing regularly, writing clear messages, handling merge conflicts, and reviewing each other's code.
  • Brainstorming & Problem-Solving: Group brainstorming sessions helped us design a user experience that served both students and industry professionals, showing how diverse perspectives create better solutions.
  • Real-World Relevance: Building a website for an actual event made the project feel meaningful. We weren't just completing an assignment; we were creating something that would be used by real people.
  • Event Website Architecture: Event sites require clear hierarchy—information architecture matters. Users need to quickly find what/when/where without getting lost.
  • Not Every Project is Won, But Every Project Teaches: Despite not winning, the skills and teamwork experience gained are invaluable for our IT careers ahead.
  • Event websites require clear information hierarchy to serve multiple stakeholder groups
  • Mobile responsiveness is critical for real-time event information access
  • Professional design doesn't have to be boring—thoughtful animations enhance engagement