Front-End Development Project: Website Contact Page

Welcome to my submission for the Front-End Development task – creating a fully functional Contact Page based on the provided Figma design. This project demonstrates my skills in front-end development, responsive design, and bringing designs to life. Below, you'll find details about the project, the tech stack used, and instructions on how to access the live demo.

Project Overview

This project involves the development of a Contact Page for a website, utilizing HTML5, CSS3, and JavaScript. The primary goal was to faithfully implement the Figma design provided, ensuring responsiveness, interactive elements, and optimized performance.

Figma Design

The project is based on the following Figma design: View Figma Design

Tech Stack

• HTML5
• TailwindCSS
• Typescript
• ReactJS
• NextJS

Features

• Faithful implementation of the Figma design, showcasing attention to detail.
• Fully responsive design ensuring optimal user experience across various devices and screen sizes.
• Clean and semantic HTML/CSS code for maintainability and readability.
• Interactive elements like buttons and a responsive navigation menu implemented using JavaScript.
• Responsive navigation menu that transforms into a hamburger menu on smaller screens.
• Optional subtle animations for enhanced user engagement.
• Cross-browser compatibility, tested on Chrome, Firefox, and Safari.
• Performance optimization for faster page loading times.

How to Access

To view the live demo of the Contact Page, please follow this link: Live Demo

Repository

You can access the project repository on GitHub: Project Repository

Installation

To run the project locally, follow these steps:

1. Clone the repository: git clone https://github.com/ProfessorDy/assessment.git
2. Navigate to the project directory: cd assessment
3. Open the index.html file in your preferred web browser.

Evaluation Criteria

The project will be evaluated based on the following criteria:

• Fidelity to the provided Figma design.
• Responsiveness across different devices.
• Code quality and organization of HTML, CSS, and JavaScript.
• Implementation of interactive elements and navigation.
• Performance, including loading speed and overall optimization.
• Creativity in enhancing the design.

Contact

If you have any questions or need clarification about the project, feel free to reach out to me:

• Email: [email protected]
• GitHub: Visit my Github Profile

Thank you for considering my submission. I look forward to the opportunity to discuss my work in further detail.

Best regards, Destiny Adebayo