Museum Landing Page

Introduction

Welcome to the Museum Landing Page project, according to Figma design. This is a single-page website designed to showcase various aspects of a museum, including its exhibitions, events, and contact details. The landing page is crafted to offer an engaging and informative experience for visitors, using modern web technologies and adhering to design specifications.

Key Features

• Responsive Design: The page is optimized for multiple screen sizes, including desktop (1280px), tablet (640px), and mobile (>320px).
• Header with Hamburger Menu: Provides a navigable interface that adapts to different screen sizes.
• Exhibitions and Events Sections: Features blocks for current exhibitions and events, with interactive elements and detailed information.
• Gallery Slider: Showcases images of exhibits and museum highlights with a smooth, interactive slider.
• Subscription Block: Allows visitors to sign up for updates and newsletters.
• Footer: Contains links to social media, contact information, and additional resources.

The project leverages technologies such as HTML5, CSS3, Sass, JavaScript (ES6), and Parcel for building and optimizing the website. The design and implementation follow the Figma design and utilize fonts IBM Plex Sans and Montserrat.

Challenges

As this was my first experience with creating a comprehensive landing page for a museum, several challenges emerged throughout the development process. One notable challenge was implementing a fully responsive design that accurately reflects the Figma mockups.

Key Challenges:

1. Responsive Design Complexity: Ensuring the page looked and functioned well across various devices required meticulous attention to detail. Adapting the design to fit the specified screen sizes (desktop, tablet, and mobile) involved extensive testing and fine-tuning of CSS styles.

2. Hamburger Menu Implementation: Integrating a hamburger menu that worked seamlessly across different screen sizes posed some technical difficulties. Ensuring that the menu was both functional and aesthetically pleasing required implementing JavaScript for interactivity and CSS for styling.

3. Gallery Slider Functionality: Implementing a smooth and interactive gallery slider was challenging. The slider needed to be both performant and visually appealing, which involved using JavaScript and CSS to achieve the desired user experience.

4. Form Validation and Submission: Ensuring that forms were user-friendly and validated correctly was another hurdle. The forms needed to handle various input types and provide clear feedback to users. Implementing smooth scroll and ensuring forms did not produce errors on submission required thorough testing and debugging.

5. Browser Compatibility: Testing and ensuring compatibility across different browsers and devices was time-consuming. Each browser had its quirks, which required specific adjustments to ensure a consistent experience for all users.

Despite these challenges, overcoming them significantly contributed to my growth as a developer. The experience enhanced my skills in responsive design, JavaScript interactions, and cross-browser compatibility, and it provided valuable insights into the practical aspects of web development.

Technical Requirements

To run this project, you will need:

• Node.js (version 14.x or newer)
• NPM (version 6.x or newer)

Installation and Setup

To install the project and run it locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/username/museum-landing-page.git

2. Navigate to the project directory:

   cd museum-landing-page

3. Install dependencies:

   npm install

4. Start the local development server:

   npm start

Usage

After starting the project, it will be available at http://localhost:8080. You can use this project to showcase information about the museum and interact with various elements.

Example

• DEMO LINK

Technologies Used

This project was built using the following technologies:

• HTML5: For structuring the content on the web page.
• CSS3: For styling the web page and making it responsive.
• Sass (SCSS): A CSS preprocessor used for writing cleaner and more manageable CSS.
• JavaScript (ES6): For adding interactivity to the web page.
• Node.js: For running JavaScript on the server side.
• NPM: For managing project dependencies.
• Parcel: A web application bundler used for building and optimizing the project.
• Git: For version control.
• GitHub: For hosting the repository and project management.

Design Specifications

• Design Sizes:
  • Desktop: 1280px
  • Tablet: 640px
  • Mobile: > 320px
• Fonts:
  • IBM Plex Sans
  • Montserrat