Frontend: website for a poultry factory

Yandex.Map API | JavaScript | HTML5 | CSS3 | jQuery

Project Challenge

1. My client tasked me with creating a frontend for a poultry factory website. The primary requirement was to design a layout that incorporated the latest design trends and adhered to industry best practices.

2. Additionally, the project necessitated the integration of an interactive map with overlapping areas. After careful consideration, we decided to implement the Yandex map API to achieve this functionality.

3. The project encompassed the development of 7 distinct pages, all initially conceived in Adobe Photoshop with files saved in PSD format.

4. Notably, the client expressed a preference for avoiding the use of any CSS framework. Consequently, the entire layout had to be meticulously crafted from scratch, relying solely on plain CSS and HTML. Furthermore, the main page of the website required the inclusion of a cross-browser compatible slider.

Project Solution

To address the challenge of creating the frontend for the poultry factory website, I initiated the project by conducting a comprehensive analysis of the client's requirements and industry design trends. My goal was to ensure that the website's layout would not only meet but exceed the client's expectations while adhering to the latest design trends and best practices.

The integration of the interactive map was executed flawlessly using the Yandex map API. This feature enabled the display of geographical information with seamless overlapping areas, enhancing user interaction and understanding.

With 7 unique pages to design, all initially visualized in Adobe Photoshop as PSD format files, I dedicated meticulous attention to detail to ensure that each page was visually cohesive and user-friendly.

Given the client's preference for eschewing CSS frameworks, I embraced the challenge of creating the entire layout from the ground up using plain CSS and HTML. This approach provided maximum customization and control over the website's design, allowing us to precisely align it with the client's vision.

On the main page, I successfully implemented a cross-browser compatible slider. This slider was developed with precision, ensuring a uniform and engaging user experience across various web browsers.

I have used a normalizing CSS library written by Nicolas Gallagher that does useful basic layout fixes and makes the default styling of elements more consistent across browsers.

Home page

Page: About

Page: Contacts

Page: Supplies

Page: Production details

Page: News

Page: Production

Involved skills

HTML5
CSS3
Yandex.Maps
jQuery
JavaScript