Museum website project

• Take a look at the website here

Description

This is my semester project for the first semester of Front-End Development. The website is responsive and engaging. It was designed for a children's museum, targeting kids aged 7-15 and families. It features a playful yet simple design, optimized for fast loading and accessibility (WCAG compliance). The website includes six pages: Home, Explore, Exhibitions, Events, Involvement, and Visit. Built using HTML and CSS (Flexbox), the project emphasizes clean code, SEO optimization, and a mobile-first approach.

This project taught me valuable lessons in project management, accessibility, and responsive design. I faced challenges, particularly with time constraints, but learned to prioritize effectively and focus on delivering a product that met the project’s core requirements.

Features

• 6 Pages: Home, Explore, Exhibitions, Events, Involvement, Visit
• Responsive Design: Optimized for mobile and desktop
• WCAG Compliance: Follows accessibility principles for color contrast, hierarchy, and navigation
• SEO Optimized: Meta tags, alt text for images, and content strategy in place
• Fast Loading: All images optimized to be under 200kb
• Google Maps Integration: Interactive map on the Visit page

Technologies used

• Figma
• HTML5
• CSS3
• Gantt (project planning)
• GitHub for version control
• Netlify for deployment

Getting Started

Installing

1. Clone the repository:

git clone  https://github.com/torehirth/semester-project-1.git

Running

To run the app locally, run the following commands:

npm run start

Contact

My LinkedIn profile | My GitHub profile