1

CERTIFICATE

2
 ACKNOWLEGEMENT

I would like to acknowledge the contributions of the following people, without whose
help and guidance this report would not have been completed. I acknowledge the
counsel and support of our trainer, (Name, Designation, Department) , with respect
and gratitude, whose expertise, guidance, support, encouragement, and enthusiasm
has made this report possible. Their feedback vastly improved the quality of this report
and provided an enthralling experience. I am indeed proud and fortunate to be
supported by them .

I am also thankful to Prof. (Dr.) Rajiv Sharma, H.O.D of Electronics and

Communication Engineering Department, Bhagwan Parshuram Institute of
Technology, New Delhi for his constant encouragement, valuable suggestions and
moral support and blessings. Although it is not possible to name individually, I shall
ever remain indebted to the faculty members of Bhagwan Parshuram Institute of
Technology, New Delhi for their persistent support and cooperation extended during
this work.

This acknowledgement will remain incomplete if I fail to express our deep sense of
obligation to my parents and God for their consistent blessings and encouragement.

Name of Student : SHUBHAM SHARMA

Enrollment No : 09120802822

3
 ABSTRACT

This report details the outcomes and experiences gained during a six-week internship
focused on front-end development, specifically through the execution of two significant
projects: the Modern Chair E-Commerce Page and the Parallax Scrolling Website.
The objective of the internship was to enhance practical skills in HTML5, CSS3, and
JavaScript, while also applying contemporary design principles to create user-centric
web interfaces.
The Modern Chair Project aimed to develop an interactive product page that allows
users to select product configurations, such as color options, and observe real-time
price updates. This project successfully demonstrated the integration of responsive
design principles, ensuring usability across various devices and enhancing user
engagement.
In contrast, the Parallax Website Project focused on implementing advanced CSS3
techniques to create a visually appealing scrolling effect that enhances the user
experience. By utilizing the parallax scrolling technique, this project effectively
showcased the importance of aesthetics and interactivity in modern web design.
The report encompasses a comprehensive overview of the technologies learned,
detailed discussions of the project outcomes, challenges encountered, and a critical
evaluation of the merits, demerits, and applications of both projects. The experiences
gained during this internship not only solidified my understanding of front-end
development but also provided valuable insights into the collaborative and iterative
nature of web design

4
 TABLE OF CONTENTS

Certificate ....................................................................................... 2
Acknowledgement ......................................................................... 3
Abstract ........................................................................................... 4
Table of Contents ........................................................................... 5-6

CHAPTER 1: INTRODUCTION AND LITERATURE SURVEY

1.1 Introduction ................................................................................ 7
1.2 Literature Survey ...................................................................... 7

CHAPTER 2: TECHNOLOGY IMPLEMENTED

2 HTML5 CSS JavaScript ............................................................ 8
2.1 Project Structure ....................................................................... 9-10

CHAPTER 3: RESULTS DISCUSSION

3.1 Overview of Projects .................................................................. 11
3.2 Modern Chair Project ................................................................ 11
3.2.1 Project Features ....................................................... 11
3.2.2 User Interaction ........................................................ 11
3.2.3 Design Implementation ............................................... 12-16
3.3 Parallax Website Project ............................................................. 17-19

CHAPTER 4: CONCLUSION AND FUTURE SCOPE

4.1 Conclusion ..............................................................................................20
4.2 Future Scope .......................................................................................... 20-22

CHAPTER 5: MERITS, DEMERITS, AND APPLICATIONS

5.1 Merits of Modern Chair Project ........................................................... 23
5.2 Merits of Parallax Website .......................................................... 23-24
5.3 Demerits of Modern Chair Project.......................................... 24

5
5.4 Demerits of Parallax Website............................................................... 24
5.5 Applications of Modern Chair Project.................................................... 25
5.6 Applications of Parallax Website ................................................ 25-26

APPENDIX ....................................................................................... 27-29

REFERENCES …………………………………………………… 30

6
CHAPTER 1: Introduction and Literature Survey

1.1 Introduction

In the contemporary digital landscape, web development has emerged as a

fundamental aspect of technology, underscoring the imperative of creating interactive,
dynamic, and responsive web applications. This report endeavours to elucidate the
skills and concepts developed during my internship in front-end development, with a
specific emphasis on utilizing HTML, CSS, and JavaScript to design user-centric
interfaces. The scope of this report encompasses two distinctive projects: the Modern
Chair Project, which accentuates an interactive product display, and the Parallax
Scrolling Website, which exemplifies visually captivating scrolling effects that
contribute to a modern aesthetic in web design.

1.2 Literature Survey

The domain of front-end development has undergone significant evolution in recent

years, adapting to the growing user demand for responsive and interactive web
applications. The quest for intuitive user interfaces has catalyzed the emergence of
advanced technologies, including CSS3 for animations and JavaScript for real-time
interactivity. Modern e-commerce platforms, for instance, capitalize on these
technologies to deliver highly engaging product pages, while parallax scrolling has
gained traction as a popular trend for creating immersive web experiences. Various
studies and industry analyses underscore the necessity of JavaScript frameworks and
CSS animation techniques as essential tools in a developer's arsenal, enhancing both
the visual appeal and functional capabilities of websites.

7
CHAPTER 2: Technology Learned/Project
Throughout the duration of the internship, I garnered hands-on experience in several
pivotal technologies:

 HTML5: This markup language served as the backbone for

structuring web pages. In both the Modern Chair Project and
Parallax Website Project, HTML5 provided a robust framework for
content layout, ensuring optimal rendering across diverse devices.

 CSS3: Employed for the design and presentation of the websites,

CSS3 played a critical role in the Modern Chair Project, facilitating
a responsive, grid-based layout with a strong emphasis on
typography and product representation. In the Parallax Website
Project, CSS3 was instrumental in creating seamless scrolling
effects and layered backgrounds that enhance visual depth and
user engagement.

 JavaScript: This programming language was utilized to manage

dynamic interactions within the websites. For example, in the
Modern Chair Project, users could select product colors and

8
 observe real-time price updates, while JavaScript orchestrated the
parallax scrolling effect in the second project.

2.1 Project Structure

The structure of both projects was carefully organized to ensure clarity and
maintainability of the codebase. Each project followed a modular approach, facilitating
easier updates and enhancements in the future.

Modern Chair Project Structure:

 index.html: The main HTML file that serves as the entry point of
the application. It contains the structure and content of the product
page.

 styles/: A directory containing all CSS files responsible for styling

the application, including:

o main.css: The primary stylesheet for the overall layout.

o responsive.css: Additional styles to ensure responsiveness

across various devices.

 scripts/: A directory housing JavaScript files, including:

o app.js: Contains the logic for dynamic interactions, such as

real-time price updates and color selection functionality.

 images/: A folder containing all product images and assets used in

the project.

Parallax Website Project Structure:

 index.html: The main HTML file featuring the parallax scrolling
design.

 styles/: A directory with CSS files for styling the website, including:

o main.css: The primary stylesheet managing overall styles and

layout.

o parallax.css: Specific styles for the parallax effect and

animations.

9
  scripts/: A directory containing JavaScript files, including:

o parallax.js: Manages the parallax scrolling effects and

interactions.

 images/: A folder containing background images and other visual

assets utilized in the project.

This organized structure not only enhances the readability and

maintainability of the code but also allows for scalable development as
new features are integrated in the future.

Project 1: Modern Chair E-Commerce Page

The focus of this project was to develop an interactive product page that
enables users to select various product configurations, leading to
corresponding price adjustments. Key features included:

 An interactive interface for selecting product colors.

 Real-time price updates facilitated through JavaScript.

 A responsive design ensuring compatibility across multiple devices.

Project 2: Parallax Scrolling Website

The Parallax Website Project employed the parallax scrolling technique,
wherein background images move at a different pace than foreground
content, yielding an immersive visual experience. Key features
encompassed:

 Smooth scrolling animations enhancing user engagement.

 Layered backgrounds that create a sense of depth.

 A responsive layout to guarantee optimal user experience across

various devices.

10
CHAPTER 3: Results Discussion
The successful execution of both projects resulted in the fulfillment of their
intended objectives, showcasing the application of modern web
development technologies and principles.

Modern Chair Project

The Modern Chair Project culminated in the development of a fully
functional, interactive e-commerce page that offered a seamless user
experience. This project was designed to enable users to explore detailed
product information while allowing them to customize their selections
based on various options, such as color and configuration.

 User Interaction: The interactive features, particularly the color

selection tool, allowed users to see immediate visual feedback,
enhancing engagement and interactivity. Users could select
different color options for the chair, and the real-time updates
reflected the changes instantly, showcasing the product in a manner
that mimics a real-world shopping experience. This level of
interactivity not only made the shopping experience more enjoyable
but also encouraged users to explore different configurations,
potentially increasing sales conversions.

 Responsive Design: A key aspect of the project was the

implementation of a responsive design that ensured the page
rendered optimally across a range of devices, including desktops,
tablets, and smartphones. This adaptability is crucial in today’s
mobile-centric world, where users access e-commerce platforms
through various devices. By employing CSS media queries and a
flexible grid layout, the design maintained usability and aesthetics
regardless of screen size, thus catering to a broader audience.

 User Experience Enhancements: The integration of JavaScript

facilitated real-time price updates based on user selections, which
significantly enriched the overall user experience. Users were able
to see the updated pricing information dynamically as they
interacted with the product, eliminating any confusion regarding
costs associated with different options. Additionally, detailed
product descriptions and specifications were readily accessible,

11
 providing users with all necessary information to make informed
purchasing decisions.

Overall, the Modern Chair Project exemplified best practices in e-

commerce website design, effectively combining functionality, user
engagement, and responsive design principles to create a compelling
shopping experience.

12
13
14
15
16
Parallax Website
The Parallax Website project distinguished itself through the innovative
use of the parallax scrolling effect, which contributed to a modern and
visually captivating user interface. This technique, where background
images move at a different speed than the foreground content, creates an
illusion of depth and immersion, significantly enhancing the overall
aesthetic appeal of the website.

 Visual Engagement: The integration of parallax scrolling

transformed the website into a dynamic visual experience. As users
scrolled down the page, they encountered layered backgrounds and
animated elements that engaged their attention and invited
exploration. This not only kept users on the site longer but also
fostered a sense of curiosity about the content presented. The
combination of striking visuals and smooth transitions created a
memorable browsing experience.

 Advanced Animations: The project effectively showcased the

application of advanced CSS3 animations combined with
JavaScript-driven interactions. Elements on the page were
designed to animate in response to user actions, such as scrolling,
which added an interactive layer to the visual presentation. This
approach not only enhanced the aesthetic value but also
contributed to storytelling by guiding users through the content in an
engaging manner.

 User-Centric Design: A crucial aspect of the Parallax Website was

its commitment to user-centric design. The layout was meticulously
crafted to ensure intuitive navigation and ease of use. Key
information was presented clearly, allowing users to absorb content
without feeling overwhelmed. The responsive nature of the design
ensured that the parallax effect functioned seamlessly across all
devices, providing a consistent experience regardless of the
platform used.

In summary, the Parallax Website project demonstrated the potential of

modern web design techniques to create engaging and visually rich
experiences. By leveraging the parallax effect and advanced animations,
the project not only showcased aesthetic appeal but also emphasized the
importance of user interaction and experience in web development.

17
18
19
CHAPTER 4: Conclusion and Future Scope
Conclusion
The projects undertaken during this internship stand as a compelling
testament to the practical application of HTML5, CSS3, and JavaScript in
the development of responsive, interactive websites. Through the
execution of the Modern Chair Project and the Parallax Website, I have
gained invaluable insights into the intricacies of front-end development,
including the importance of user experience, design principles, and
responsive design methodologies.

The Modern Chair Project showcased the potential of modern web

technologies to create dynamic e-commerce experiences, allowing users
to interact with product configurations in real-time. The project’s success
highlighted the necessity of intuitive design and functionality in fostering
user engagement and satisfaction.

Conversely, the Parallax Website demonstrated the power of visual

storytelling through advanced animations and interactive effects,
illustrating how thoughtful design can enhance user interaction and
retention. This project emphasized the importance of aesthetics and
interactivity in contemporary web design, reinforcing my understanding of
how these elements work in tandem to create immersive user
experiences.

Overall, these projects have equipped me with the essential knowledge

and skills needed to construct structured, visually appealing web pages
that not only cater to user needs but also align with current web
development trends. I am now more adept at employing best practices in
responsive design, ensuring accessibility across a range of devices, and
utilizing modern technologies to deliver engaging digital experiences.

Future Scope
Modern Chair Project:
While the Modern Chair Project successfully achieved its objectives, there
exists considerable potential for future enhancements that could
significantly elevate the functionality and user experience of the platform:

20
  Back-End Integration: Future iterations of the project could focus on
integrating back-end functionality using technologies such as
Node.js or Django. This enhancement would facilitate real-time
order processing, enabling users to complete transactions directly
through the product page. Additionally, a back-end system would
allow for inventory management, ensuring that product availability
is accurately reflected in real-time, thereby improving operational
efficiency.

 User Accounts and Personalization: Implementing user account

features would provide a personalized shopping experience,
allowing users to save their preferences, view past orders, and
receive tailored recommendations based on their browsing history.
This could encourage repeat visits and foster customer loyalty.

 Payment Gateway Integration: Incorporating secure payment

gateways would enable users to make purchases directly on the
site, streamlining the checkout process. This could include options
for various payment methods, enhancing user convenience and
satisfaction.

 Enhanced Analytics: Integrating analytics tools would allow for

better tracking of user interactions, preferences, and behavior on
the site. This data could inform future design and feature decisions,
helping to optimize the user experience further.

Parallax Website:
The Parallax Website has ample opportunities for enhancement that
could increase interactivity and user engagement:

 Incorporation of Multimedia Elements: Future developments could

include integrating multimedia elements such as video content,
animations, and interactive widgets. For instance, short videos
demonstrating product features or customer testimonials could be
embedded within the parallax sections, providing deeper insights
and enhancing user engagement.

 Interactive Widgets: Adding interactive widgets, such as quizzes or

polls, could provide users with an engaging way to interact with the
content. These elements could not only enhance user involvement

21
 but also gather valuable feedback and data for continuous
improvement of the site.

 Accessibility Improvements: Ensuring that the website is fully

accessible to users with disabilities is paramount. Future iterations
could focus on implementing accessibility best practices, such as
keyboard navigation support, screen reader compatibility, and
alternative text for images, thereby reaching a broader audience.

 Performance Optimization: As multimedia elements are

incorporated, it will be essential to optimize the website for
performance. Techniques such as lazy loading for images and
asynchronous loading for scripts could be implemented to ensure
that the website remains fast and responsive, even with rich
content.

In summary, both projects possess significant potential for future

enhancement, allowing for the evolution of a more robust and user-centric
digital experience. By incorporating back-end functionality, multimedia
elements, and user-focused features, these projects can transform into
fully realized platforms that not only meet but exceed user expectations.

22
CHAPTER 5: Merits, Demerits, and Applications
Merits
Modern Chair Project:
The Modern Chair Project stands out for its user-friendly design and
interactive interface, which are key components in creating a positive user
experience. The following merits highlight its strengths:

 Real-Time Interaction: The project allows users to engage with the

page dynamically, offering immediate feedback on their
interactions, such as selecting colors and viewing price
adjustments. This real-time interaction not only makes the shopping
experience more enjoyable but also empowers users to make
informed decisions, thereby enhancing customer satisfaction and
potentially increasing conversion rates.

 Visual Appeal: The aesthetically pleasing layout, coupled with

thoughtful design elements, contributes to an engaging shopping
environment. The use of high-quality images and a clean, organized
structure draws users in and keeps their attention focused on the
product.

 Responsive Design: The implementation of a responsive design

ensures that the website is accessible across a wide range of
devices, from desktop computers to smartphones. This versatility
allows for a broader audience reach, accommodating various user
preferences and enhancing overall usability.

Parallax Website:
The Parallax Website employs innovative design techniques that
significantly enhance its visual and interactive appeal:

 Depth and Visual Intrigue: The parallax effect creates a sense of

depth, making the browsing experience more immersive. As users
scroll, the layered backgrounds move at different speeds, which
captivates attention and encourages exploration of the site’s
content.

23
  Enhanced User Engagement: The visually dynamic nature of the
parallax effect has been shown to increase user engagement.
Visitors are likely to spend more time on the site, as the engaging
animations and transitions can spark curiosity and lead to further
exploration of the content.

 Brand Storytelling: This project provides an excellent platform for

brand storytelling through visuals. The parallax effect allows for a
narrative-driven experience, guiding users through the content in a
way that is both compelling and memorable, thereby fostering a
stronger connection to the brand.

Demerits
Modern Chair Project:
Despite its strengths, the Modern Chair Project has notable limitations:

 Lack of Back-End Functionality: The absence of a back-end system

means that the project is restricted to a purely front-end display.
This limitation hinders its effectiveness in real transactional
contexts, as users are unable to complete purchases or have their
selections processed. The lack of order management and inventory
tracking restricts the project’s utility as a fully functional e-commerce
solution.

 Limited Data Insights: Without back-end integration, there is no

capacity to collect user data or analyze behavior patterns. This
absence of analytics limits the ability to make informed
improvements to the user experience based on actual user
interactions.

Parallax Website:
The Parallax Website also presents certain challenges:

 Performance Issues: The use of high-resolution images and

complex animations can result in increased page load times,
particularly for users with lower processing capabilities or slower
internet connections. This performance issue can lead to frustration
and potentially deter users from engaging with the site.

24
  Compatibility Concerns: Some older devices or browsers may
struggle with the parallax effect, which could lead to inconsistent
user experiences. Ensuring compatibility across a diverse range of
platforms can be challenging and may require additional
development resources.

Applications
Modern Chair Project:
The Modern Chair Project serves as an exemplary framework for various
applications, particularly in the realm of e-commerce:

 E-Commerce Platforms: The project is ideally suited for online retail

stores, allowing businesses to create visually appealing and user-
friendly product pages. By employing similar design principles,
retailers can enhance the shopping experience, ultimately leading
to increased sales and customer satisfaction.

 Product Showcases: This project framework can be adapted for

product showcase websites, where the focus is on presenting
products in an engaging manner. Businesses can highlight features
and specifications, allowing potential customers to explore products
in detail before making purchasing decisions.

 Online Retail Stores: The interactive nature of the project lends itself
well to any online retail scenario where customer engagement is
crucial. By providing real-time feedback and customization options,
retailers can create a more personalized shopping experience that
resonates with users.

Parallax Website:
The Parallax Website has a wide range of applications across various
digital platforms:

 Portfolio Websites: Designers, artists, and creative professionals

can leverage the parallax effect to create visually stunning portfolio
websites that showcase their work. The immersive design not only
highlights their creativity but also provides an engaging way for
potential clients to experience their projects.

25
  Landing Pages: Businesses can utilize the parallax scrolling effect
in landing pages to capture user attention and drive conversions.
The engaging visuals can help communicate key messages and
guide users toward taking desired actions, such as signing up for
newsletters or making purchases.

 Promotional Sites: The parallax effect is also highly effective in

promotional sites, where storytelling and user engagement are
paramount. Brands can create campaigns that resonate with users
on a deeper level, utilizing interactive visuals to convey their
message and create a memorable user experience.

In conclusion, both projects demonstrate significant strengths in user

engagement and visual appeal while also presenting specific challenges
that can be addressed in future iterations. Their applications across e-
commerce, portfolio, and promotional domains highlight their versatility
and potential for further development.

26
Appendices
Appendix A: Project Structure

The following outlines the overall structure of both projects, highlighting key
components and file organization:

1. Modern Chair Project:

o index.html: The main HTML file containing the structure and content of
the product page.

o styles.css: The primary CSS file for styling the layout, typography, and
interactive elements.

o script.js: The JavaScript file managing user interactions, including color

selection and real-time price updates.

o images/: A folder containing all product images used in the project,

organized by categories.

o assets/: A folder for additional assets such as icons and fonts.

2. Parallax Website:

o index.html: The main HTML file that includes sections for parallax
scrolling.

o styles.css: The CSS file containing styles for parallax effects,

animations, and layout design.

o script.js: The JavaScript file that implements scrolling animations and

interactive features.

o images/: A folder with background images and other graphics used

throughout the site.

o fonts/: A folder for any custom fonts used in the design.

Appendix B: Code Snippets

Below are selected code snippets that exemplify key features of both projects:

27
 1. Modern Chair Project – Real-Time Price Update (JavaScript):

javascript

Copy code

const colorOptions = document.querySelectorAll('.color-option');

const priceDisplay = document.getElementById('price');

colorOptions.forEach(option => {

option.addEventListener('click', function() {

const newPrice = this.getAttribute('data-price');

priceDisplay.textContent = `$${newPrice}`;

});

});

This snippet demonstrates how JavaScript is used to update the displayed price in
real-time based on user-selected color options.

2. Parallax Website – CSS for Parallax Effect:

css

Copy code

.parallax {

background-image: url('images/background.jpg');

28
 height: 500px;

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

This CSS rule applies the parallax effect to a section of the website by fixing the
background image during scrolling, creating a sense of depth.

Appendix C: User Feedback and Testing

Feedback collected during user testing revealed insights into the user
experience for both projects:

 Modern Chair Project: Users appreciated the real-time price updates and
found the color selection feature intuitive. However, some expressed a desire
for more product information and clearer navigation.

 Parallax Website: Testers enjoyed the visual engagement provided by the

parallax effect but noted that loading times were longer than expected on
mobile devices. Suggestions for improvement included optimizing images and
simplifying animations to enhance performance.

29
 References

1. W3Schools. (2023). HTML5 Tutorial. Retrieved from

https://www.w3schools.com/html/
This resource provides an extensive overview of HTML5, detailing its
features and best practices in web development. It serves as a
foundational reference for understanding the structure and semantics of
web pages.
2. MDN Web Docs. (2023). CSS: Cascading Style Sheets. Retrieved
from https://developer.mozilla.org/en-US/docs/Web/CSS
The Mozilla Developer Network (MDN) offers comprehensive
documentation on CSS, including syntax, properties, and examples of
advanced techniques. This resource was instrumental in understanding
the nuances of CSS3 used in the projects.
3. JavaScript.info. (2023). The Modern JavaScript Tutorial. Retrieved
from https://javascript.info/
This tutorial provides a thorough introduction to JavaScript, covering its
fundamentals and advanced topics. It was utilized as a guide during the
implementation of interactive features in both projects.
4. A List Apart. (2022). Responsive Web Design. Retrieved from
https://alistapart.com/article/responsive-web-design/
This foundational article discusses the principles of responsive web
design and its importance in modern web development, guiding the
responsive strategies employed in both projects.
5. CSS-Tricks. (2023). A Complete Guide to Flexbox. Retrieved from
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This resource provides an overview of the Flexbox layout model, which
was utilized in creating responsive layouts in the Modern Chair Project.

30