A

Mid Review Project Report

Project Semester March - June 2024

On

“NutriFood”

Submitted in for the partial fulfilment of the degree

By

Priyanshu Agarwal 20BCZN023

Faculty Internship Guide: Industry Guide:

Mrs. Neha Mishra Mr. Abhay Singh
Assistant Professor (CSE)

Department of Computer Science Engineering

JECRC UNIVERSITY, JAIPUR

Ramchandrapura, Sitapura Industrial Area Extn, Jaipur-303905 (Raj.) India

www.jecrcuniversity.edu.in

May 2024
 CERTIFICATE

Certified that the Mid Review Project Report entitled “Frontend Developer” submitted by PRIYANSHU
AGARWAL bearing roll no. 20BCZN023. In partial fulfilment of the requirements for the award of the degree of
Bachelor of Technology of JECRC University, Jaipur is a record of the student’s own work carried out under my
supervision and guidance. To the best of our knowledge, this Mid Review Project work has not been submitted to
JECRC University or any other university for the award of the degree. It is further understood that by this
certificate, the undersigned does not endorse or approve of any statement made, opinion expressed or conclusion
drawn therein but approve Mid Review Project for the purpose for which it is submitted.

Faculty Internship Guide: Industry Guide:

Mrs. Neha Mishra Mr. Abhay Singh
Assistant Professor (CSE)
 DECLARATION
I, Priyanshu Agarwal, bearing roll number 20BCZN023, hereby declare that the work which is being presented
in the Project, entitled “Frontend Developer” in partial fulfilment for award of Degree of “Bachelor of
Technology” in Department of Computer Science Engineering, is submitted to the Department of Computer
Science & Engineering, JECRC University as a record of Mid Review Project work carried under Mrs. Neha
Mishra Ma’am, Assistant Professor in Department of Computer Science & Engineering at JECRC University and
Mr. Abhay Singh, at Webvor. I have not submitted the matter presented in this work anywhere for the award
ofany other Degree.

Priyanshu Agarwal B.Tech

C.S.E 20BCZN023
 ACKNOWLEDGEMENT
I would like to express my heartfelt gratitude and appreciation to all those who have contributed
to the successful completion of this project. It is with great pleasure that I acknowledge the
invaluable support, guidance, and effort of numerous individuals of our organisation that have
made this endeavour possible.

First and foremost, I extend my deepest thanks to Mr. Abhay Singh, Industry Guide and Mrs.
Neha Mishra, Faculty Internship Guide, C.S.E for their unwavering support and belief in the
vision of this project. Their guidance and commitment have been instrumental in steering the
project towards success.

I am immensely grateful to my team members at Webvor. for their dedication, hard work, and
collaborative spirit throughout the project. Their expertise and commitment to excellence have
been essential in overcoming challenges and achieving the project objectives. Together our
collective efforts and synergistic collaboration have truly made a significant difference.

However, it would not have been possible without the kind support of many individuals of the
organisations. I would like to extend my sincere thanks to each and every members related to the
JECRC University and Webvor.

Finally, I would like to express my gratitude to my family, friends, and loved ones for their
unwavering support, understanding, and encouragement throughout the project. Their patience
and belief in me have been a constant source of motivation and
inspiration.

Priyanshu Agarwal
20BCZN023
 Preface
Frontend development is an integral aspect of modern web development, focusing on the visual and
interactive elements of a website that users interact with directly. It encompasses the design, layout,
and functionality of web pages, ensuring a seamless and engaging user experience across various
devices and platforms.

In today's digital landscape, where user expectations are higher than ever, mastering frontend
development is essential for creating compelling and user-friendly web experiences. This preface
aims to provide an overview of frontend development, its significance, key technologies, and best
practices.

Significance of Frontend Development:

The frontend of a website serves as the interface between users and the underlying data and
functionality. A well-designed and responsive frontend can significantly impact user engagement,
retention, and conversion rates. As such, frontend development plays a crucial role in shaping the
overall success of a web application or site.

Key Technologies in Frontend Development:

Frontend development relies on a combination of languages, frameworks, and tools to bring designs
to life and create interactive user experiences. Some of the key technologies in frontend development
include:

• HTML (Hypertext Markup Language): Used for structuring the content of web pages.
• CSS (Cascading Style Sheets): Used for styling and formatting the visual presentation of
HTML elements.
• JavaScript: A programming language that enables interactive and dynamic functionality on
web pages.
• Frontend Frameworks: Such as React, Angular, and Vue.js, which provide pre-built
components and tools for building interactive user interfaces.
• Responsive Design: Techniques like media queries and flexible grids, which ensure that
websites adapt seamlessly to different screen sizes and devices.
Let this project serve as a beacon of inspiration for all those who dare to dream of a future where technology and
tradition converge to shape a better tomorrow.
 ABSTRACT

Frontend development stands at the forefront of digital innovation, shaping the interactive experiences that users
encounter daily on the web. This abstract provides a succinct overview of frontend development, its significance,
challenges, and evolving trends in the digital era.

Frontend development plays a pivotal role in translating design concepts into functional, user-friendly interfaces. It
encompasses the creation of visually appealing layouts, responsive designs, and seamless interactions, all of which
are essential for engaging users and driving conversions. As the digital landscape continues to evolve, the demand for
skilled frontend developers remains high, making frontend development a critical discipline in modern web
development.

Frontend development presents its share of challenges, ranging from browser compatibility issues to the need for
responsive designs that cater to diverse devices and screen sizes. Ensuring accessibility and usability for users with
disabilities, optimizing performance for faster loading times, and maintaining consistency across different platforms
add further complexity to the frontend development process. Additionally, keeping pace with rapid technological
advancements and emerging best practices requires frontend developers to stay updated and adaptable.
 TABLE OF CONTENTS

S. No. Component Page

No.

1 Title Page I

2 Certificate II

3 Declaration III

4 Acknowledgment IV

5 Abstract VII

6 Introduction 8

7 Project Scope and Objective 9

7.1 User Research Analysis 10

7.2 Methodologies 10

8 HTML Methodologies 11-12

9 CSS Methodologies 12-19

10 Reference 20
 LIST OF FIGURES

Figure Number Title

Figure 1 Cloud Computing

Figure 2 Service Models of Cloud Computing

Figure 4 Scrum Methodology

Figure 5 Multi-Tenancy

Figure 6 Different Editions

Figure 7 Salesforce Mobile App

Figure 8 Salesforce security features

Figure 9 Benefits of Salesforce

Figure 10 Home Page of Salesforce

Figure 11 An example of a Master-Detail relationship.

Figure 12 Relationships between objects

Figure 13 Ruler manager app

Figure 14 System analysis design

Figure 15 Lookup relationship

 INTRODUCTION

In the digital age, where information is abundant and lifestyles are increasingly health-conscious, the
role of frontend development in shaping user experiences cannot be overstated. As more individuals
turn to the internet for guidance on nutrition and wellness, companies like NutriFood have emerged
as beacons of knowledge and providers of quality products. This introduction sets the stage for
understanding the significance of frontend development within the context of NutriFood's mission
and the evolving landscape of health and wellness.

NutriFood has established itself as a prominent player in the health and wellness industry, offering a
diverse array of nutritional supplements and wholesome food products. With a commitment to
quality, innovation, and consumer education, NutriFood has garnered a loyal customer base seeking
to enhance their well-being through informed choices.
 Project Scope and Objectives

The NutriFood frontend project encompasses a holistic redesign of the website's

frontend interface, focusing on optimizing user experience, enhancing visual appeal,
and improving overall usability. Key objectives include:

• Streamlining navigation for intuitive browsing

• Implementing responsive design for seamless accessibility across devices

• Integrating interactive elements to engage users

• Enhancing product presentation and showcasing nutritional benefits

• Ensuring compatibility with various browsers and devices.

User Research and Analysis: Understanding NutriFood's Audience

User research and analysis form the cornerstone of the NutriFood frontend project,
providing invaluable insights into the needs, preferences, and behaviors of the
brand's target audience. This section delves into the methodologies employed, key
findings, and the implications for the design and development of the frontend interface .

Methodology:

• UI Design: Emphasise UI design principles to create visually appealing and intuitive layouts.
• Responsive Design: Prioritise responsive design to ensure adaptability across devices and
screen sizes.
• Integration: Seamlessly integrate functionalities such as input validation and security protocols.
• Testing: Conduct rigorous testing across devices, browsers, and network conditions.
• Feedback Incorporation: Solicit and incorporate user feedback throughout the development
process.

Facilities required for proposed work:

1. Software: Utilize HTML, CSS, and Bootstrap framework for development, alongside
web development tools.
2. Hardware: Standard computer system with internet connectivity for development
and testing across various devices.
HTML5 and Semantic Markup

HTML5 serves as the foundation of NutriFood's web pages, providing the

structural framework upon which the frontend interface is built. Within the
context of the frontend technology project, HTML5 is leveraged not only for
its syntactical improvements but also for its support of semantic markup,
which plays a crucial role in enhancing accessibility, SEO, and overall user
experience.

Semantic Markup for Accessibility:

Semantic HTML elements are utilized throughout NutriFood's web pages to

ensure accessibility for users of all abilities. By employing elements such as
<nav>, <header>, <footer>, and <main>, the structure of the webpage
becomes more meaningful, allowing screen readers and other assistive
technologies to interpret and navigate the content more effectively. Semantic
markup enhances the overall accessibility of the frontend interface, making
it easier for users with disabilities to access and interact with the website.

Best Practices for Semantic Markup:

NutriFood adheres to best practices for semantic markup, ensuring

consistency and clarity across its web pages. Each HTML element is used
purposefully to convey the meaning and hierarchy of content, avoiding the
misuse of generic or non-semantic elements. Additionally, HTML5 features
such as <article>, <section>, and <aside> are utilized to further delineate
and organize content, enhancing both accessibility and SEO.
Semantic Markup in Action:

For example, on NutriFood's product pages, semantic markup is used to

structure the content in a logical and hierarchical manner. The <article>
element encapsulates each product, containing information such as the
product name, description, and nutritional details. Within the <article>,
semantic elements like <h1>, <h2>, <p>, and <ul> are used to markup
headings, paragraphs, and lists, providing clear and structured content for
users and search engines alike.

CSS3 and Styling Methodologies

In the NutriFood frontend technology project, CSS3 plays a pivotal role in

defining the visual presentation and styling of the website's frontend
interface. By leveraging CSS3 features and employing structured styling
methodologies, NutriFood aims to create a visually appealing, consistent,
and maintainable design system that enhances user experience across all
devices and screen sizes.

Utilization of CSS3 Features:

CSS3 offers a wide array of features and capabilities that enable NutriFood
to implement sophisticated styling and layout techniques. Some key features
utilized in the project include:
Flexbox and Grid Layouts: Flexbox and CSS Grid Layouts are employed to
create flexible and responsive layouts that adapt to different viewport sizes
and device orientations. These layout models provide greater control over
the positioning and alignment of elements, facilitating the creation of
complex and dynamic designs.

Transitions and Animations: CSS transitions and animations are used to add
subtle visual effects and interactivity to NutriFood's frontend interface.
Smooth transitions between states, animated hover effects, and dynamic
page elements enhance user engagement and provide feedback for user
interactions.

Custom Properties (CSS Variables): CSS custom properties, also known as

CSS variables, are utilized to define reusable values such as colors, font
sizes, and spacing throughout NutriFood's stylesheets. This modular
approach to styling enables easier maintenance and facilitates consistency
across the frontend interface.

Styling Methodologies for Maintainability:

To ensure consistency, scalability, and maintainability in the styling of

NutriFood's frontend interface, various styling methodologies are employed.
These methodologies provide a structured approach to organizing and
managing CSS code, resulting in a more efficient development process and
easier collaboration among team members. Some key methodologies
include:
CSS3 is instrumental in implementing responsive design principles to ensure
that NutriFood's frontend interface is accessible and visually consistent
across various devices and browsers. Media queries, viewport units, and
fluid layouts are used to create flexible and adaptive designs that adjust
seamlessly to different screen sizes and resolutions.
Snaps of Projects
Bibliography/References:

• Bootstrap Documentation: https://getbootstrap.com/docs/5.3/getting-started/ introduction/

• HTML & CSS Tutorials: https://www.w3schools.com/html/

• Responsive Web Design: https://www.smashingmagazine.com/2011/01/guidelinesfor-responsive-

web-design/