/Front_end_assignment

Primary LanguageHTML

Front-End Assignment for Hermanos

Live Project

You can view the live project here.

Description

This project is a web page developed as part of the test assignment for Hermanos. It aims to demonstrate proficiency in HTML, CSS, and JavaScript, including the use of jQuery and the Owl Carousel plugin.

Requirements

The project adheres to the following requirements:

  • Use HTML5 tags only.
  • Make the webpage responsive.
  • Implement lazy loading for images.
  • Utilize Owl Carousel for the sliders.
  • Ensure compatibility with all modern browsers (Chrome, Firefox, Opera, Microsoft Edge).
  • Use dummy images and dummy content wherever required.
  • Build the menu for mobile resolution using pure JavaScript or jQuery.
  • Include a page loader that covers the entire screen and fades after the page loads.

Features

  • Responsive Design: Ensures the webpage is responsive and works seamlessly across different devices and modern browsers.
  • Lazy Loading: Images are lazy-loaded to improve page performance.
  • Owl Carousel: Integrated Owl Carousel for smooth and responsive sliders.
  • Mobile Navigation: Menu for mobile resolution.
  • Page Loader: A page loader that covers the screen and fades out once the page has fully loaded.

Technologies Used

  • HTML5
  • CSS3
  • JavaScript (jQuery)
  • Owl Carousel
  • Netlify for Deployment

Installation

  1. Clone the repository: 
    git clone git@github.com:sahilshityalkar/Front_end_assignment.git
  2. Navigate to the project directory: 
    cd Front_end_assignment
  3. Open index.html in your browser to view the project locally.

Usage

  1. View the Live Project: Access the live version at Netlify Link.
  2. Modify the Code: Make changes as needed and test locally.

Known Issues

  • Some issues with responsiveness, fonts, and image resolution were encountered. These can be improved with additional experience and refinement.

Future Improvements

  • Enhance responsiveness and address issues with fonts and image resolution.
  • Optimize performance and user experience further.

Submission Details

  • Screen Recording: A screen recording of the project has been shared via a Google Drive link.
  • Code Repository: The code has been shared as a Git repository and includes a database dump.
  • README.md: This file provides comprehensive project details and a list of routes/links.

Contact

For any questions or feedback, please reach out to: