Semester project 1

GalaxyGenius Museum Website 🏛️

this was our first semester project for the first semester of front-end development at Noroff technological School. Welcome to the GalaxyGenius Museum Website repository! This project showcases an interactive and educational platform designed for a museum dedicated to all human beeings who wants to explore the wonders of the world. Deployed on netlify here: GalaxyGenius Museum

Table of Content 🗒️

• About
• Features
• Technology used
• File Structure
• Setup
• Step-by-Step how we did it
• Improvements

• Reflection

  About 📔

  Brief

• An interactive science museum is opening in yout townn/city. its Core Target audience is primary and middle school children (7-15) and famiies with young children. The museum website should be informative,appealing, engaging and responsive, that will attract both middle school pupils and their parents.

  Requirements

  Requirements

• The site must have a design that appeals to the target audience.
• The site must have at least 4-6 pages.
• Compositional principles, typography, and color schemes must be considered.
• Your HTML should be semantic and neatly indented.
• The site should use external CSS style sheets which follow the DRY principle.
• The site should download quickly, and not be overly "heavy". Images should not be over 200kb.
• The site should take WCAG principles into consideration, especially regarding hierarchy, navigation, and color usage.
• The site should be responsive, attractive, and easy to use on a variety of devices.
• The site should show consideration for content strategy and SEO (consider your use of meta tags and alt text).
• The GitHub repo for the project should be set to public.

Features 🫵

• Select a Category: Click one of the catgoryes and it will display information about that category.
• article browsing: Browse down and see some of the articles regarding exhibitions.

• Navigiation Bar: use the navigation bar, it will take you whereever you want to go, tap the hamburgermenu on mobile and tablet to get the same result.

  Technology used ⚙️

  1. 📝 HTML: Structured, Sematic and clean markup.
  2. ✍️CSS: Custum properties, Grid and Flexbox used for a responisve design.
  3. 🧞‍♂️JavaScript: A hint of JavaScript used for navigation and Map.

  Other tools used

  • FIGMA was used for the mid fidelity and high fidelity design.
  • VS code and Webstorm: were the develpment tools used for coding.
  • Sourcetree/github: version controll for managing the branches and commits. Merging were done with github and generated pullrequests to sourcetree
  • Chat GPT3.5: were used for descriptive phrases and content on the website.
  • FontAwsome: were used for icons
  • Google fonts: were used for the fonts on the website Montserat

  File Structure 🗂️

  • Images: contains all the images divided in to folders for each device, mobile, tablet and desktop.
  • CSS folder: one css file for each HTML doc, styles.css is linked to index.html.

  Step-by-step how we did it ✅

  We commenced with project methodology, outlining our approach to the task. Setting up a print board and a timeline provided a structured framework, and the use of labels enhanced organization.

  Design:

  Initiating the website design phase, we drew inspiration from various museum websites and utilized Mobbin for additional insights. After reaching a consensus on the design, we invested time in sketching a mid-fidelity version for clarity. Task allocation facilitated the commencement of website design, ensuring alignment with our envisioned outcome.

  Coding and GitHub:

  We created a repository and established a branch for HTML and CSS setup. Subsequently, we incorporated all images with the correct dimensions as per the specified criteria. Tasks were distributed across three pages each, with Tom handling the footer, index, product, and program pages, while Marius focused on the nav-bar, tickets, about, and contact pages. The website underwent testing using Lighthouse, achieving a commendable overall score. Project deployment on Netlify was followed by thorough testing on various devices and browsers, including desktop, phones, and tablets.

  Improvements 🔧

  Key Improvements:

  • Introduction of animations on select pages.
  • Integration of JavaScript functionality and a newsletter feature.
  • Inclusion of links to social media platforms.
  • Enrichment of content on the main page.
  • Implementation of ticket sales and a calendar feature. These enhancements will contribute to a more dynamic and engaging user experience, aligning with our commitment to continuous improvement.

  Reflection

  We're always trying to make the design better since we think it's where we can grow the most. It's easy to get inspired, but things get a bit tricky when you have to follow all these museum rules. Doing both the designing and coding in one big project makes it feel like it's really ours, and it's been a pretty good learning experience. Moving forward, I am committed to refining this project to ensure heightened interactivity and accessibility. I plan to enhance the implementation of JavaScript through a more comprehensive understanding of its capabilities. Additionally, I aim to expand the content by adding more pages to the existing categories and links.