SkyCadet is a multi-page, responsive website for a fictional full-motion flight simulator center. Designed for aviation enthusiasts, aspiring pilots, and families, the site showcases various flight experiences, provides clear pricing, and allows users to make booking inquiries. This project was built using HTML, CSS, and Bootstrap 5, emphasizing best practices in front-end development, user experience, and accessibility. 🌐💻
- Project Overview
- User Experience (UX)
- Design & Theme
- Features
- Technologies Used
- Testing
- Deployment
- AI-Assisted Development
- Credits
- Acknowledgements
This project serves as a portfolio piece demonstrating proficiency in front-end web development technologies. The goal was to create a professional, engaging, and fully responsive website for a fictional flight simulator center. 🛫
The website is multi-page, providing a clear and organized user journey from initial interest to booking inquiry.
- Aviation Enthusiasts & Beginners: Individuals curious about flying who want to experience a realistic flight simulator for fun or preliminary training.
- Parents & Families: People looking for unique, safe, and exciting activities suitable for a wide range of ages.
The project was guided by user-centric goals, prioritized using the MoSCoW method. Key "Must-Have" stories include:
- As a visitor, I want to see a captivating homepage so I can immediately understand what the service.
- As a user, I need a clear and consistent navigation bar to easily browse the sections.
- As a potential customer, I want to view the available simulator experiences with details and images to help me choose.
- As a budget-conscious user, I want to see a transparent pricing page with different packages.
- As an interested customer, I need a booking/contact form to make an inquiry.
- As a visitor, I want to find the business location easily via an embedded map and address.
- Present the flight simulator center as a professional, safe, and thrilling destination.
- Ensure clear, intuitive navigation across all pages.
- Showcase simulator experiences and pricing transparently to build trust.
- Generate leads via a contact/booking form.
- Establish credibility and excitement through high-quality photos, about me section, FAQ, and well-structured content.
The design is professional, modern, and immersive, evoking the feeling of a sleek aircraft cockpit and the open sky.
| Color | Hex | Usage & Rationale |
|---|---|---|
| Primary Navy | #192A56 |
Headings, important text, footers/headers, CTA backgrounds. |
| Secondary Sky Blue | #3498DB |
Main CTA buttons, hover states, accent features, highlights. |
| Neutral White | #FFFFFF |
Main background, text on dark backgrounds. |
| Neutral Light Gray | #ECF0F1 |
Section dividers, subtle backgrounds, borders. |
| Accent Dark Gray | #34495E |
Body text, secondary headings. |
- Poppins font is used for a clean, modern, and readable aesthetic.
- High-quality images of cockpits, aerial landscapes, and simulators to create an immersive experience.
-
Navigation Bar: Responsive navbar with links to all main sections, collapses to hamburger menu on mobile.
-
Homepage: Hero banner, intro section, simulator highlights.
-
Simulators Page: Bootstrap cards for Boeing 737, Airbus A320, and Viper SD-4.
-
Packages Page: Clear, card-based pricing and feature details.
-
Booking Form: Contact form (static) with validation.
-
Location: Embedded Google Map with address.
-
Footer: Social media links and copyright info.
- HTML5, CSS3, Bootstrap 5
- Git & GitHub
- Visual Studio Code
- Google Fonts
- Font Awesome
- W3C & Jigsaw Validators
- Responsiveness across devices
- Browser compatibility (Chrome, Firefox, Edge)
- HTML & CSS validation
- Accessibility checks
The website is live at: SkyCadet Flight Simulator
- Debugging, content optimization, logo & design assistance, documentation.
- All text content was written specifically for this project. ✍️
- Freepik: Boeing 737 Cockpit images.
- Pixabay: Airbus A320 Cockpit images.
- JetPhotos: VIPER SD4 Cockpit image by Jakub Fedorowicz.
- TomarkAero: Viper SD4 Aircraft images used for exterior and cockpit shots.
- Facebook: Additional Viper SD4 Cockpit image.
- Vliegles.nl: Airbus A320 Simulator photo.
- Reuters: Boeing 737 Takeoff image.
- Wikimedia Commons: Aer Lingus A320 and Aerial Dublin photos.
- Squarespace CDN: Atlantic Sunset image.
- Aro.ie: Ross Castle aerial view.
I would like to thank our bootcamp facilitator for their guidance and support throughout this project. I also extend my gratitude to the Code Institute team and the NetApp team for providing resources, mentorship, and inspiration. My personal background in aviation was a great source of motivation for bringing this flight simulator experience to life.