Hershey-UI

thehersheycompany.com :chocolate_bar:

HOSTED LINK OF OUR PROJECT

To explore the project, visit the https://sudhanshusudan33.github.io/Hershey-UI/

Table of Contents:

1. INTRODUCTION
2. FEATURES
3. TECHNOLOGIES
4. INSTALLATION
5. CHALLENGES
6. REFERENCES
7. WEBSITE UI
8. LICENSE
9. CONCLUSION

   :medal_sports: INTRODUCTION

   “Welcome to the Hershey Company Clone project! This project aims to replicate the renowned Hershey official website using HTML and CSS. Whether you’re a Cholocate lover, a web developer looking to practice your skills, or simply curious about web development, this project offers an opportunity to explore the world of web design by recreating the layout and design of the HErshey’s Website.

By delving into this project, you’ll gain hands-on experience in building responsive web pages, implementing navigation menus, structuring content layouts, and styling elements using CSS. The project serves as a practical exercise to hone your HTML and CSS skills while offering insight into the intricacies of web development.

Throughout this README file, you’ll find details on how to install and run the project locally, instructions on exploring the cloned website, guidelines for contributing to the project, and information about the project’s licensing.

Let’s embark on this journey to recreate the Hershey Company website together, learning and growing as web developers along the way!”</i>

:gift: It was an exciting opportunity for all of us to apply our skills and collaborate with each other to create a polished website.:earth_asia:

:artificial_satellite:FEATURES

#### 1. Responsive Design:

The website is responsive to different screen sizes and devices, providing a seamless experience for users on desktops, tablets, and mobile devices.

#### 2. Navigation Menu:

Implemented an intuitive and well-organized navigation menu to help users easily explore different sections of the website.

#### 3. Product Listings:

Displays clear images, concise descriptions, and relevant information about Hershey's updates.

4. Product Pages:

individual pages with detailed information about distinct contexts, schedule in order to stay updated.

6. Social Media Integration:

Integrated social media buttons to encourage users to follow the brand on social platforms.

7. Footer:

A footer containing essential links assosicated with Hershey's rules and regulations, tickets and other relevant information.

:computer:TECHNOLOGIES

#### 1. HTML

HTML is a programming language which is used for structuring web Pages including headers, navigation bars, content sections, and footers.

#### 2. CSS

Applied for styling and layout with different CSS properties

#### 4. FONT AWESOME

Font Awesome is a comprehensive icon library that offers a vast selection of icons for various purposes, such as user interface design, web development and graphic design. #### Usage:
• Include the CSS: Add the Font Awesome CSS stylesheet to your HTML document by including a link in the section.
• Add Icons: Insert icons into your HTML using the element with the appropriate class. Customize their appearance using CSS.
• Customize Icons: You can modify icons' size, color, and alignment by adding extra classes and applying CSS styles.
• Explore Icons: Visit the Font Awesome website or documentation to find the icons that suit your project's needs.</ul></ul> #### 5. GOOGLE FONTS AND ICONS
  Google Fonts is a free and extensive collection of web fonts that allows developers to easily integrate diverse and visually appealing fonts into their websites. With a simple inclusion of a link or stylesheet in the HTML, users can access a wide range of fonts hosted by Google.
  Google Icons, on the other hand, are typically referenced from the Material Design Icons library. These are vector icons that can be easily customized and scaled for use in web and mobile applications. Developers can integrate these icons into their projects by including the appropriate link or script in the HTML.
  ## :calling:INSTALLATION To get started with this website clone, follow these steps:
  1. Install Visual Studio Code for coding.
  2. Clone git Repository.
  3. Open Project Directory.
  4. Open VS Code.
  5. Open the project folder.
  6. Start the Application : Open the index.html file in your web browser or use a local development server if you have one configured.
  7. The application should now be running locally rendering HTML, CSS and JavaScript. </ol> ## :roller_coaster:CHALLENGES :runner: Throughout the development of our project, our team encountered various challenges and obstacles. Here, we document some of the major issues we faced: #### 1. COMMUNICATION :smile:
     Coordinating tasks, updates, and changes among team members requires effective communication to ensure everyone is on the same page.
     #### 2. CONSISTENCY :confused:
     Maintaining consistency in coding styles, naming conventions, and overall structure is crucial.
     #### 3. VERSION CONTROL :sunglasses:
     Handling version control with tools like Git helps prevent conflicts and allows for collaboration, but it requires careful management to avoid code conflicts.
     #### 4. BROWSER COMPATIBILITY :smiley:
     Ensuring the website functions correctly across different browsers can be challenging due to varying levels of support for HTML, CSS, and JavaScript features.
     #### 5. RESPONSIVENESS :cyclone:
     Creating a responsive design that works well on different devices and screen sizes requires careful planning and testing.
     #### 6. TESTING AND DEBUGGING :relieved:
     Rigorous testing and debugging are necessary to identify and fix issues promptly
     ## :airplane:WEBSITE UI #### 1. NAVBAR  ##### UI Description: "A navigation menu is implemented to allow users to easily navigate between different sections of the website." #### 2. BRANDS  ##### UI Description: "One of the notable features of the Hersshey Website Clone is the "Brands" section, which showcases curated content about our Brands. This section emulates the functionality and presentation of the Brands section found on the official Hershey's website." #### 3. INNOVATION(Licensing)  ##### UI Description: "The section is designed to help users to know the innovation in lisensing program." #### 4. FOOTER  ##### UI Description: "The Footer section is designed help users to easily navigate throught the pages linked to each section . The UI focuses on user-friendly navigation, allowing users to easily access services." ## LEARNINGS ### 1. Understanding User Requirements - Clearly defined user requirements at the beginning led to a more focused development process. ### 2. Agile Development - Embracing an agile development approach allowed for flexibility in adapting to changing project needs. ### 3. Collaboration and Communication - Effective comminication within the tean and regular collaboration meetings improved overall project coordination. ### 4. Technology - Experimenting with HTML, CSS provided valuable insights into its benefits and limitations. ### 5. Problem Solving - Encountering and solving errors enhanced problem-solving skills among team members. ## :books:REFERENCES
     • W3 Schools </ul> ## :link:LICENSE
       • There is no license for this project as it is created under major project @Geekster.
       • You are free to use and modify the code based on your requirements. </ul> ## :hourglass_flowing_sand:CONCLUSION In conclusion, the Hershey Company Website Clone project offers a valuable learning experience for both novice and experienced web developers alike. By recreating the layout, design, and functionality of the official Formula 1 website using HTML and CSS, developers can sharpen their skills while gaining insights into modern web development practices. #### Achievements
         • Practice HTML markup for structuring content and organizing page layouts.
         • Explore CSS styling techniques to achieve visually appealing designs and responsive layouts.
         • Implement interactive features using JavaScript to enhance user experience and engagement.
         • Gain familiarity with web design principles such as typography, color theory, and layout composition. </ul>
           As developers progress through this project, they not only enhance their technical skills but also cultivate a deeper understanding of the intricacies involved in crafting compelling and user-friendly web experiences. Whether used for personal skill development, portfolio enhancement, or educational purposes, the Formula 1 Website Clone project offers a rewarding journey into the world of web development. So, let's embark on this journey together, embracing challenges, honing skills, and celebrating the achievements along the way. Happy coding!