Oslo Community Science Museum

The site is available at: larstp.github.io/Oslo-Community-Science-Museum

Contents

Table of Contents

• Description
• Built With
• Getting Started
  • Installing
  • Running
• Features
• Page Layout
• Folder Structure
• Figma
• Accessibility & SEO
• Known Issues / Limitations
• Credits
• Contact

Description

An engaging, informative, and user-friendly website for a new interactive science museum opening in Oslo. The site is fully static, designed for accessibility, and optimized for GitHub Pages hosting.11

This is a repo for the Semester Project 1 at NOROFF FED1, OCT24FT.

In this assignment we are to design and program a webpage for a fictitious Community Science Museum, with a focus on teaching kids science.

The project is to show that we understand branding, target audience, hierarchy, semantic code, DRY principle, image optimization and everything else we have learned so far this semester.

---

Oslo Community Science Museum is a modern, interactive website for a new science museum in Oslo. The project demonstrates skills in:

• Semantic, accessible HTML5
• Responsive, DRY CSS (no frameworks)
• Media-rich content (images, video, SVG)
• Accessibility and SEO best practices
• Deployment to GitHub Pages

The site is designed to be visually appealing, robust, and easy to maintain, with all resource paths and assets optimized for GitHub Pages hosting.

Built With

• HTML5, CSS3
• Figma

Getting Started

Installing

1. Clone the repo:

   git clone https://github.com/larstp/Oslo-Community-Science-Museum.git

2. Open index.html in your browser (or use Live Server for local development).

Or visit the deployed site: larstp.github.io/Oslo-Community-Science-Museum

Running

No build steps required. All code is static and client-side. Just open the site in your browser.

Features

• Informative pages for visitors, teachers, researchers, and kids
• Event and exhibition listings
• Accessibility information
• Responsive design for desktop and mobile
• Media galleries (images, video)
• Accessibility features (labels, contrast, keyboard navigation)
• SEO meta tags and semantic HTML

Page Layout

The site consists of the following main pages:

• Home (index.html)
• Explore (explore.html)
• Explore: For Kids (explore-kids.html)
• Explore: For Teachers (explore-teachers.html)
• Explore: For Researchers (explore-researchers.html)
• Spaces (spaces.html)
• Events (events.html)
• Visit (visit.html)
• Get Involved (get-involved.html)
• Contact + Buy Tickets (contact.html)

In addition I have added a placeholder site for the empty links that would lead to something else if this was a proper webpage. (placeholder.html)

Folder Structure

• /videos/ — Video assets
• /css/ — Stylesheets
• /fonts/ — Web fonts
• /images/ — Static assets (images, icons, etc.)
• /videos/ — Video assets

Figma

Here are the Figma prototypes and design resources for this project:

Mobile Prototype	Desktop Prototype	High Fidelity Wireframes	Stylesheet
View Mobile Prototype	View Desktop Prototype	View High Fidelity Wireframes	View Stylesheet

Note: Some prototypes may require a reload for images to display correctly. The high fidelity wireframes include both desktop and mobile versions.

Accessibility & SEO

• All forms and navigation are accessible
• Sufficient color contrast and focus states
• Semantic HTML structure
• Meta tags for SEO and social sharing

Known Issues / Limitations

• No backend or dynamic content (fully static site)
• The calendar is a mockup representing what I later want to insert in the page, once I've learned how

Credits

• Images: Unsplash, Pixabay, and others as credited in the site
• Design: Figma
• Code suggestions: GitHub Copilot

Contact

• Author: larstp