Front End Engineering-II

Project Report

Semester-IV (Batch-2022)

Title of the Project: -

Veterinary Care Design Excellence

Supervised By: Submitted By:

Raveesh Samkaria Shiven Narang
Roll Number: -2210990835
Group - 13

Department of Computer Science and Engineering

Chitkara University Institute of Engineering & Technology,
Chitkara University, Punjab

FEE-II, 22CS0014 1
Abstract

This project summary details the development of a front-end website tailored for a design firm.
Employing HTML, CSS, and JavaScript, the website showcases critical agency details, including
company information, service offerings, project highlights, and contact information. Designed with
user interaction and intuitive navigation in mind, the website's primary objective is to effectively
convey the agency's capabilities and services to prospective clients. The implementation of
responsive design principles and accessibility features underscores the agency's dedication to
providing high-quality digital experiences

FEE-II, 22CS0014 2
Table of Contents

Sr.no Section Page No.

1 Introduction 4

2 Problem Statement 5

3 Technical Details 6

4 Proposed Design 6

5 File Structure 7

6 Result 8-36

7 References 37

FEE-II, 22CS0014 3
Introduction

In today's digital era, establishing a robust online presence holds significant importance for businesses
aiming to effectively showcase their services and connect with their target audience. This is
particularly pertinent for veterinary care facilities seeking to provide comprehensive and accessible
information to pet owners. This report details the creation and deployment of a front-end website for a
veterinary care center, leveraging HTML, CSS, and JavaScript.

The website serves as a virtual platform for the veterinary clinic, offering visitors a comprehensive
view of its services, staff members, patient care philosophy, and contact details. Through thoughtful
design choices and intuitive user interface, the website endeavors to engage visitors and effectively
communicate the clinic's commitment to pet health and welfare.

This introduction sets the stage for the project's objectives, highlighting the significance of a well-
designed website in today's digital landscape for veterinary practices. Following sections will delve
into the technical aspects of website development, outlining key features, design considerations, and
implementation strategies. Additionally, the report will address any encountered challenges and the
corresponding solutions devised, providing valuable insights for future website development
endeavors. Ultimately, this project serves as a testament to the intersection of compassionate care and
technological innovation, underscoring the veterinary clinic's dedication to delivering exceptional
service to its clients and their beloved pets.

FEE-II, 22CS0014 4
Problem Statement

In the domain of veterinary care, establishing a captivating online presence is vital for attracting pet
owners and spotlighting the clinic's unique services and commitment to animal well-being.
Nonetheless, developing a front-end website that adeptly conveys the clinic's brand identity, services,
and patient care while ensuring seamless user interaction poses numerous hurdles.

Firstly, veterinary clinics often grapple with balancing creativity and functionality on their websites.
While it's crucial to showcase the clinic's compassionate approach through engaging designs, it's
equally essential to ensure straightforward navigation and provide pertinent information to visitors
seeking pet care services.

Secondly, crafting a responsive website that seamlessly adapts to diverse devices and screen sizes
proves to be a formidable task. With the widespread use of mobile devices and tablets, pet owners
anticipate a consistent and optimized browsing experience across all platforms. Failing to meet these
expectations may deter potential clients and undermine the clinic's reputation.

Additionally, ensuring accessibility for all pet owners, including those with disabilities, is a
paramount consideration. Veterinary clinics must adhere to accessibility standards to ensure that their
websites are usable by individuals with varying needs, such as utilizing screen readers for visually
impaired users.

In summary, the challenge lies in creating a front-end website for a veterinary care clinic that
effectively blends creativity with functionality, provides seamless responsiveness across devices,
adheres to accessibility standards, and enhances performance to deliver an outstanding user
experience. Overcoming these challenges will be pivotal in attaining the project's goals and bolstering
the clinic's online presence within the community.

FEE-II, 22CS0014 5
Technical Details

The front-end website for the veterinary care clinic was designed with a focus on simplicity,
employing only essential technologies to guarantee a smooth user experience. Here are the key
technical aspects of the project:

• HTML Structure: The website's structure was carefully constructed using semantic HTML markup
to improve accessibility and clarity. Each page was organized with appropriate tags to facilitate easy
navigation and enhance readability for visitors seeking information about pet care services.

• CSS Styling: Cascading Style Sheets (CSS) were employed to style the layout, typography, and
color schemes of the website. Custom CSS rules were implemented to maintain a cohesive visual
design throughout the site while ensuring efficient load times and code simplicity.

• Responsive Design: The website was designed with responsiveness in mind, ensuring compatibility
across a range of devices and screen sizes. Media queries and flexible layouts were utilized to adapt
the content and design elements seamlessly, providing an optimal viewing experience for pet owners
accessing the site from different devices.

• JavaScript Functionality: JavaScript was selectively used to enhance essential functionality,

primarily focusing on features such as smooth scrolling to various sections of the website via the
navigation bar. This lightweight implementation prioritized efficient performance while ensuring a
seamless user experience for visitors exploring the clinic's services and resources.

FEE-II, 22CS0014 6
PROPOSED DESIGN
File Structure: -

 index.html: This file serves as the central hub for the website, housing the HTML
markup that defines the structure and content of the web pages. Within this file,
sections such as the header, navigation bar, main content area, footer, and any
additional elements are meticulously crafted to ensure a cohesive user experience.

 index.css: The CSS file is responsible for orchestrating the visual presentation of the
website. It contains a meticulous set of styling rules governing colors, fonts, layout
properties, and other aesthetic elements. Selectors within this file meticulously target
specific HTML elements or classes to apply the desired styles, harmonizing the
overall look and feel of the website.

 index.js: This JavaScript file holds the key to enhancing user interactivity on the
website. In this minimalist setup, the primary functionalities may include features like
smooth scrolling to different sections of the page, elegantly facilitated by the
navigation bar.

 assets folder: This directory serves as the repository for all image assets utilized
throughout the website. From logos to background images, each visual element is
carefully curated to enrich the design and enhance the presentation of content. By
organizing images methodically within this folder, accessibility and clarity are
maintained, ensuring seamless integration into the website's layout.

 PSD file: This PSD (Photoshop Document) file encapsulates the initial design mockup
crafted using Adobe Photoshop. While not directly integrated into the website's
development process, it serves as a guiding beacon for design elements, layout, and
visual styling, facilitating consistency and fidelity between the envisioned design and
the final product.

FEE-II, 22CS0014 7
Result

Figure 1 Head Tag

Figure 2 HTML- Home Section

FEE-II, 22CS0014 8
 Figure 3 HTML - Introduction Section

FEE-II, 22CS0014 9
 Figure 4 HTML - About Section

FEE-II,22CS0014 10
 Figure 5 HTML – Advertisment Section

FEE-II,22CS0014 11
Figure 6 HTML - Dogs Section
FEE-II,22CS0014 12
 Figure 7 HTML - Service Section

FEE-II,22CS0014 13
 Figure 8 HTML - Success Section

FEE-II,22CS0014 14
 Figure 9 HTML - Posts Section

FEE-II,22CS0014 15
 Figure 10 HTML – Contact/Footer-Section

FEE-II, 22CS0014 16
Desktop-View-Css
Mobile-View-Css

Figure 11 CSS– Home Section Figure 12 CSS-Home Section

FEE-II, 22CS0014 17
17
Desktop-View-Css
Mobile-View-Css

Figure 13 CSS– Introduction Section Figure 14 CSS-Introduction Section

FEE-II, 22CS0014 18
1
Desktop-View-Css
Mobile-View-Css

Figure 15 CSS– About Section Figure 16 CSS-About Section

FEE-II, 22CS0014 19
1
Desktop-View-Css
Mobile-View-Css

Figure 18 CSS- Advertisment Section

Figure 17 CSS– Advertisment Section

FEE-II, 22CS0014 20
1
Desktop-View-Css Mobile-View-Css

Figure 20 CSS- Dogs Section

Figure 19 CSS– Dogs Section

21
FEE-II, 22CS0014
Desktop-View-Css
 Figure 21 CSS- Service Section
Figure 20 CSS– Service Section

FEE-II, 22CS0014 22

Mobile-View-Css Desktop-View-Css
 Figure 23 CSS- Success Section
Figure 22 CSS– Success Section

FEE-II, 22CS0014 23

Mobile-View-Css Desktop-View-Css
 Figure 25 CSS- Posts Section

Figure 24 CSS– Posts Section

24
FEE-II, 22CS0014

Desktop-View-Css
Mobile-View-Css
 Figure 27 CSS- Contact/Footer Section

Figure 26 CSS– Contact/Footer Section

25
FEE-II, 22CS0014

DESKTOP VIEW OUTPUT :-

Mobile-View-Css
FIGURE 28 OUTPUT-HOME SECTION

FIGURE 29 OUTPUT-INTRODUCTION SECTION

1 26
FEE-II, 22CS0014
DESKTOP VIEW OUTPUT :-

FIGURE 30 OUTPUT-ABOUT SECTION

FIGURE 31 OUTPUT-ADVERTISMENT SECTION

1 27
FEE-II, 22CS0014
DESKTOP VIEW OUTPUT :-

FIGURE 32 OUTPUT-DOGS SECTION

FIGURE 33 OUTPUT-SERVICE SECTION

1 28
FEE-II, 22CS0014
DESKTOP VIEW OUTPUT :-

FIGURE 34 OUTPUT-SUCCESS SECTION

FIGURE 35 OUTPUT-POSTS SECTION

1 29
FEE-II, 22CS0014
DESKTOP VIEW OUTPUT :-

FIGURE 37 OUTPUT-CONTACT/POSTS SECTION

1 30
FEE-II, 22CS0014
MOBILE VIEW OUTPUT :-

FIGURE 38 OUTPUT-HOME SECTION FIGURE 39 OUTPUT-INTRODUCTION SECTION

FEE-II, 22CS0014 19 31
MOBILE VIEW OUTPUT :-

FIGURE 40 OUTPUT-ABOUT SECTION FIGURE 41 OUTPUT-ADVERTISMENT SECTION

FEE-II, 22CS0014 19 32
MOBILE VIEW OUTPUT :-

FIGURE 42 OUTPUT-DOGS SECTION FIGURE 43.1 OUTPUT-SERVICE SECTION

FEE-II, 22CS0014 19 33
MOBILE VIEW OUTPUT :-

FIGURE 44 OUTPUT-SUCCESS SECTION

FIGURE 43.2 OUTPUT-SERVICE SECTION

FEE-II, 22CS0014 19 34
MOBILE VIEW OUTPUT :-

FIGURE 45.1 OUTPUT-POSTS SECTION FIGURE 45.2 OUTPUT-POSTS SECTION

FEE-II, 22CS0014 19 35
MOBILE VIEW OUTPUT :-

FIGURE 46 OUTPUT-CONTACT/FOOTER SECTION

FIGURE 45.3 OUTPUT-POSTS SECTION

FEE-II, 22CS0014 19 36
References
1. www.photopea.com
2. www.psdFreebies.com
3. https://fonts.google.com/
4. https://michalsnik.github.io/aos/

FEE-II, 22CS0014 36 37