Professional Documents
Culture Documents
Project Report
Project Report
CENTRAL CAMPUS
Mahendranagar,Kanchanpur
AN INTERNSHIP REPORT
ON
FRONT END WEB DESIGNING
AT
SOFSEE TECH PVT.LTD.
Submitted To:
Karn Dev Bhatt
Submitted by:
Samikshya Bhandari(Symbol No:8080718 )
Registration No: SC-2017-1-1-3387
August 2023
i|Page
CERTIFICATE
Committee
___________________________.. _________________________
Supervisor Head of Department
Dipendra Kumar Ayer Karn Dev. Bhatt
Assistant professor (CSIT) Assistant professor (CSIT)
________________________________ _______________________
Internal Examiner External Examiner
Date:________________ Date:___________________
ii | P a g e
INTERNSHIP CERTIFICATE
iii | P a g e
DECLARATION
I declare that the internship report in the Title “FRONT END WEB
DESIGNING ” is submitted for partial fulfillment of the requirement of
BSC-CSIT Eighth Semester Internship report of far-Western University is my
original work
Samikshya Bhandari
Date: Aug 2023
iv | P a g e
ACKNOWLEDGEMENT
I would like to express my sincere gratitude to all those who contributed to the
successful completion of my internship at Sofsee Tech Pvt. Ltd. It has been an incredible
journey of learning, growth, and practical application in the realm of front-end web
development.
First and foremost, I extend my heartfelt appreciation to Mr. Niraj Bahadur Pal, my
internship supervisor at Sofsee Tech Pvt. Ltd. His guidance, mentorship, and insightful
feedback have been invaluable in shaping my understanding of front-end technologies
and best practices. His patience and willingness to share his expertise have made this
internship an enriching experience.
I am also immensely thankful to Mr. Dipendra Kumar Ayer, my project supervisor, for
his continuous support and encouragement throughout the internship. His input and
direction played a crucial role in helping me navigate through the intricacies of web
development projects.
I would like to acknowledge the Head of the Department, Karn Dev Bhatt, for fostering an
environment of learning and practical exposure at Far-Western University. His
commitment to providing quality education has prepared me to effectively contribute to
real-world projects.
I extend my gratitude to the entire team at Sofsee Tech Pvt. Ltd. for their warm welcome,
constant support, and collaborative spirit. The seamless interactions and shared
experiences have enhanced my learning curve and made me feel like an integral part of
the team.
Lastly, I would like to thank my family and friends for their unwavering encouragement
and belief in my abilities. Their support has been a driving force behind my pursuit of
excellence.
This internship has not only enriched my technical skills but has also given me insights
into the dynamic world of front-end web development. I am truly appreciative of the
opportunity provided by Sofsee Tech Pvt. Ltd. to learn and grow in a professional
setting.
Sincerely,
v|Page
ABSTRACTION
Front-end web design plays a pivotal role in creating visually appealing
and user-friendly websites. This internship report delves into the concept of
abstraction in front-end web design and its significance in elevating user
experience and streamlining development processes.
vi | P a g e
was employed to create a consistent and modular design system for a multi-
page website. The study demonstrates how abstraction enhances
collaboration among design and development teams and expedites the
creation of new web pages with minimal effort.
vii | P a g e
Objectives of Front-End Web Designing:
1. Layout and Structure: Front-end designers are responsible for defining the layout and
structure of web pages. This includes arranging elements like headers, navigation
menus, content sections, and footers.
2. Visual Design: The scope covers selecting color schemes, typography, images, icons,
and other visual elements that contribute to the overall aesthetics and user experience.
3. Interactive Elements: Designers create interactive elements such as buttons, forms,
sliders, and modals that allow users to engage with the website and perform actions.
4. Responsive Design: The scope includes designing websites that adapt seamlessly to
different screen sizes, ensuring consistent user experiences across devices.
viii | P a g e
5. Animation and Transitions: Designers incorporate animations, transitions, and
microinteractions to enhance the user experience, draw attention, and provide feedback
on user actions.
6. Typography: Front-end design involves selecting appropriate fonts, font sizes, line
spacing, and other typographic elements to ensure readability and visual appeal.
7. Performance Optimization: Designers work to optimize images and code to ensure
fast loading times, smooth interactions, and overall better performance.
8. Cross-Browser Compatibility: The scope encompasses ensuring that designs render
consistently and correctly across different web browsers and devices.
9. Collaboration: Front-end designers collaborate closely with UI/UX designers, back-end
developers, and other stakeholders to ensure the successful implementation of designs
and the alignment of visual aesthetics with functionality.
In essence, the objectives and scope of front-end web designing revolve around
creating user-friendly, visually appealing, and accessible interfaces that provide excellent
user experiences and effectively communicate the brand's message and functionalities.
FIGURE INDEX
Figure No.
Title of Figure
Page
Figure1.3.1
Sublime Text Editor
07
Figure 1.3.2
JQuery
08
Figure 3.1
Time Table using HTML
14
Figure 3.2
ix | P a g e
Table list using HTML
14
Figure 3.3
Click on image button
15
Figure 3.4
Website Layout
15
Figure 3.5
Periodic Table
16
FIGURE INDEX
Figure No.
Title of Figure
Page
Figure1.3.1
Sublime Text Editor
07
Figure 1.3.2
JQuery
08
Figure 3.1
Time Table using HTML
14
Figure 3.2
Table list using HTML
14
Figure 3.3
Click on image button
15
Figure 3.4
Website Layout
15
x|Page
Figure 3.5
Periodic Table
16
FIGURE INDEX
Figure No.
Title of Figure
Page
Figure1.3.1
Sublime Text Editor
07
Figure 1.3.2
JQuery
08
Figure 3.1
Time Table using HTML
14
Figure 3.2
Table list using HTML
14
Figure 3.3
Click on image button
15
Figure 3.4
Website Layout
15
Figure 3.5
Periodic Table
16
FIGURE INDEX
xi | P a g e
Figure No.
Title of Figure
Page
Figure1.3.1
Sublime Text Editor
07
Figure 1.3.2
JQuery
08
Figure 3.1
Time Table using HTML
14
Figure 3.2
Table list using HTML
14
Figure 3.3
Click on image button
15
Figure 3.4
Website Layout
15
Figure 3.5
Periodic Table
16
FIGURE INDEX
Figure No.
Title of Figure
Page
xii | P a g e
Figure1.3.1
Sublime Text Editor
07
Figure 1.3.2
JQuery
08
Figure 3.1
Time Table using HTML
14
Figure 3.2
Table list using HTML
14
Figure 3.3
Click on image button
15
Figure 3.4
Website Layout
15
Figure 3.5
Periodic Table
16
xiii | P a g e
TABLE OF CONTENT
Table of Contents
CERTIFICATE....................................................................................................................................................... II
DECLARATION................................................................................................................................................... IV
ACKNOWLEDGEMENT......................................................................................................................................... V
ABSTRACTION.................................................................................................................................................... VI
INTRODUCTION.............................................................................................................................................. 1
COMPANY PROFILE......................................................................................................................................... 3
LIST OF TECHNICAL AND SOFT SKILLS REQUIRED FOR FRONT-END WEB DESIGN..............................................................9
DISCUSSION ON HOW THESE SKILLS WERE APPLIED IN REAL-WORLD PROJECTS.............................................................10
REFLECTION ON THE SKILLS THAT WERE SIGNIFICANTLY IMPROVED DURING THE INTERNSHIP.........................................12
xiv | P a g e
DISCUSSION OF CHALLENGES FACED IN THE FRONT-END DESIGN PROCESS..................................................................25
DESCRIPTION OF THE SOLUTIONS OR STRATEGIES IMPLEMENTED TO OVERCOME THESE CHALLENGES.............................26
PROJECT............................................................................................................................................................ 29
CONCLUSION.................................................................................................................................................... 46
REFERENCES...................................................................................................................................................... 47
xv | P a g e
INTRODUCTION
Duration:
Learning Objectives:
Program Components:
Training Sessions: The program kicks off with training sessions covering the basics of
front-end web development, design principles, and coding techniques.
Real-World Projects: Participants will work on hands-on projects under the guidance of
experienced mentors. These projects will involve designing and coding user interfaces
for actual websites or web applications.
Design Reviews: Regular design reviews will provide participants with valuable
feedback from mentors and peers, enabling iterative improvement of design skills.
Experienced mentors will provide guidance, feedback, and support throughout the
program. Regular check-ins, one-on-one sessions, and open communication channels
will ensure participants receive assistance whenever needed.
Industry Exposure:
Participants will gain insights into the broader field of web development, understanding
the role of front-end design within the context of a larger project. They will also learn
about industry trends and best practices.
2|Page
Outcome:
The internship program is designed to bridge the gap between theoretical knowledge
and practical application, equipping participants with the skills and experiences
necessary to thrive in the dynamic world of front-end web design.
COMPANY PROFILE
Sofsee Tech Pvt. Ltd. is a dynamic and innovative technology company at the forefront
of delivering cutting-edge digital solutions. With a commitment to excellence and a
focus on driving technological advancements, Sofsee Tech stands as a leading player in
the realm of software development and IT services. The company's dedication to quality,
creativity, and client satisfaction positions it as a preferred partner for businesses
seeking transformative digital experiences.
Company Overview:
3|Page
global leader in technology services, the company strives to provide unique and
impactful solutions that drive digital transformation across industries.
Core Services:
Company Culture:
Sofsee Tech fosters a culture of innovation, collaboration, and continuous learning. The
team consists of passionate individuals who are dedicated to pushing boundaries and
exploring new frontiers in technology. The company's commitment to excellence is
evident in its projects, where creativity meets functionality to deliver exceptional
solutions.
As an intern at Sofsee Tech Pvt. Ltd., I had the privilege to be a part of this dynamic
environment, contributing to real-world projects and gaining insights into the world of
4|Page
front-end web design. This experience provided an opportunity to learn, collaborate,
and make a meaningful impact in a company that is shaping the digital landscape.
Activities:
Sofsee Tech engages in a range of activities that contribute to its success and reputation
in the technology landscape:
1. Innovative Solution Development: Sofsee Tech is known for its innovative approach to
problem-solving. The company actively engages in brainstorming sessions, research,
and development to create unique and impactful solutions that meet clients' challenges.
2. Collaborative Work Environment: Collaboration is at the heart of Sofsee Tech's
activities. The company fosters an environment where multidisciplinary teams work
together to ideate, design, develop, and deploy projects.
3. Continuous Learning: Sofsee Tech values continuous learning and professional growth.
The company encourages employees to stay updated with the latest technologies and
trends, fostering a culture of innovation.
Services:
5|Page
3. Mobile App Development: Crafting intuitive and feature-rich mobile applications for
various platforms, ensuring seamless user interactions and functionality.
4. Digital Marketing: Providing digital marketing strategies that boost online visibility,
increase brand engagement, and drive results. Services include SEO, social media
management, and online advertising.
5. E-Commerce Solutions: Designing, developing, and managing e-commerce platforms
that enable businesses to conduct online transactions efficiently and effectively.
6. UI/UX Design: Creating visually appealing and intuitive user interfaces that enhance
user experiences across digital platforms.
Projects:
Sofsee Tech's projects are a testament to its expertise and commitment to excellence.
Some notable projects include:
Front-end web design plays a pivotal role in the operations of Sofsee Tech Pvt. Ltd. as it
serves as the gateway through which clients and users interact with the digital products
and services offered by the company. The visual appeal, usability, and functionality of
the user interfaces significantly impact the overall success of projects and contribute to
the company's reputation as a technology solution provider.
6|Page
Front-end web design directly influences the user experience (UX) of websites,
applications, and platforms. By crafting intuitive and visually engaging interfaces, Sofsee
Tech ensures that users have a seamless and enjoyable experience while interacting with
digital products. A positive UX translates to increased user satisfaction, longer
engagement, and higher conversion rates.
Effective Communication:
Engaging and user-centric designs created by front-end designers are more likely to
captivate users' attention and encourage exploration. By optimizing user engagement
through compelling visuals and intuitive interactions, Sofsee Tech maximizes the
potential for user actions such as inquiries, sign-ups, and purchases. This, in turn,
supports the company's business goals and growth.
Competitive Edge:
7|Page
Front-end web design contributes significantly to client satisfaction and loyalty. A well-
designed and functional interface reflects the company's dedication to providing high-
quality solutions. Positive user experiences create a sense of satisfaction and encourage
clients to return for future projects and recommend Sofsee Tech's services to others.
In conclusion, front-end web design is not only an aesthetic endeavor but a strategic
and integral part of Sofsee Tech Pvt. Ltd.'s operations. The attention to detail, user-
centric approach, and commitment to delivering exceptional user experiences showcase
the company's dedication to excellence and innovation in the digital realm.
Responsibilities:
1. UI/UX Design: Collaborate with UI/UX designers to translate wireframes and mockups
into visually appealing and user-friendly web interfaces. Ensure designs adhere to user-
centered design principles.
2. Responsive Design: Implement responsive design techniques to create web layouts
that adapt seamlessly to various screen sizes and devices, ensuring a consistent user
experience.
3. HTML/CSS Coding: Write clean, semantic HTML and CSS code to transform design
concepts into functional web pages. Ensure code is well-structured, maintainable, and
adheres to industry best practices.
4. Interactive Elements: Develop interactive elements using HTML, CSS, and
JavaScript/jQuery. This includes creating buttons, forms, sliders, and other dynamic
components that enhance user engagement.
8|Page
5. Cross-Browser Compatibility: Test and ensure that designs are compatible with
different web browsers and devices, making necessary adjustments to maintain
consistency and functionality.
6. Performance Optimization: Optimize images and code for faster loading times and
smoother user interactions. Use techniques like image compression, code minification,
and lazy loading.
7. Collaboration: Work closely with back-end developers, UI/UX designers, and project
managers to ensure seamless integration of front-end designs with back-end
functionalities. Participate in design reviews and brainstorming sessions.
8. Version Control: Utilize version control systems like Git to manage code changes,
collaborate with team members, and maintain a history of code revisions.
9. Bug Fixing and Troubleshooting: Identify and address front-end bugs, glitches, and
issues. Debug and troubleshoot code using browser developer tools and testing
environments.
10. User-Centered Design: Prioritize user experience by ensuring user interfaces are
intuitive, easy to navigate, and visually coherent. Implement accessibility features to
make designs usable by individuals with disabilities.
11. Learning and Skill Enhancement: Continuously learn about new front-end
technologies, tools, and design trends. Apply acquired knowledge to enhance the
quality of designs and coding practices.
12. Documentation: Document code and design decisions for future reference. Create user
guides or documentation to help team members understand implemented features and
interactions.
13. Project Management: Adhere to project timelines, milestones, and deadlines. Provide
regular updates on progress to project managers and team leads.
14. Testing and Quality Assurance: Conduct thorough testing of front-end components to
ensure they function as intended and meet quality standards. Test for responsiveness,
compatibility, and user interaction scenarios.
15. Feedback Incorporation: Actively engage in feedback sessions and design critiques.
Implement feedback from mentors and senior designers to improve the quality of
designs.
List of technical and soft skills required for front-end web design
9|Page
Certainly, here's a list of both technical and soft skills that are crucial for a successful
career in front-end web design:
Technical Skills:
Soft Skills:
1. Creativity: The ability to think creatively and come up with innovative design solutions
sets apart exceptional front-end designers.
2. Attention to Detail: Precise attention to details ensures that your designs are visually
appealing and pixel-perfect.
3. User-Centric Approach: Designing with the user in mind leads to interfaces that are
intuitive, user-friendly, and aligned with user expectations.
4. Communication: Effective communication skills are essential for collaborating with
team members, presenting your designs, and understanding client requirements.
5. Problem-Solving: Front-end designers often encounter challenges in implementing
designs. Strong problem-solving skills help you find effective solutions.
10 | P a g e
6. Time Management: Managing multiple projects, deadlines, and iterations requires
efficient time management skills.
7. Adaptability: The web design landscape is constantly evolving. Being open to learning
new tools and techniques is crucial.
8. Teamwork: Collaborating with designers, developers, and other team members
demands effective teamwork and an understanding of each role's contributions.
9. Critical Thinking: Analyzing design choices and understanding their impact on user
experience and functionality requires critical thinking skills.
10. Empathy: Understanding user needs and behaviors through empathy helps in creating
designs that cater to their preferences and requirements.
2. Responsive Design: For a travel agency's website, I ensured that the site's design was
responsive. I used media queries to adjust the layout, typography, and images for
various devices, resulting in a seamless user experience on desktops, tablets, and mobile
phones.
4. Version Control/Git: Throughout the internship, I used Git for version control. It
allowed me to collaborate with the development team smoothly, track changes, and
manage different branches for feature implementation.
11 | P a g e
5. Front-End Frameworks: In a project that required rapid development of a dashboard
interface, I employed Bootstrap. The framework's pre-designed components and
responsive grid system expedited the design and development process.
6. Design Tools: For a health and wellness website redesign, I utilized Adobe XD to
create wireframes and high-fidelity mockups. This facilitated clear communication with
the design and development teams, ensuring the design vision was well understood.
Soft Skills:
12 | P a g e
4. Time Management and Adaptability: Balancing multiple projects with varying
deadlines required effective time management. I adapted to changing priorities and
optimized my workflow to meet project milestones.
5. Empathy: In a project for a healthcare client, I empathized with users' needs for easy
access to vital information. I designed the interface with clear navigation and prominent
calls to action to facilitate users' interactions.
In essence, these skills were not just theoretical concepts but integral components of my
internship experience. Each project offered a unique opportunity to apply technical
skills, collaborate effectively, and demonstrate the soft skills that contribute to successful
front-end web design projects.
2. Responsive Design Expertise: Creating designs that seamlessly adapt to different devices and
screen sizes was a challenging yet rewarding aspect of my internship. I honed my skills in using
media queries, flexible layouts, and viewport units to ensure optimal user experiences across various
platforms.
5. Problem-Solving Abilities: Encountering challenges during the design and coding process
encouraged me to think critically and creatively. I gained the confidence to approach problems
systematically, explore various solutions, and implement the most effective ones.
13 | P a g e
6. Design Software Proficiency: My proficiency in design tools like Adobe XD and Figma improved
significantly. I learned to create detailed wireframes, high-fidelity mockups, and prototypes that
effectively conveyed design concepts to team members and clients.
7. Time Management and Adaptability: Juggling multiple projects with varying timelines improved
my time management skills. I learned to prioritize tasks, meet deadlines, and adapt to changing
project requirements efficiently.
8. Soft Skills Enhancement: While I came into the internship with a foundation in soft skills, I saw
notable growth in areas such as teamwork, empathy, and effective communication. Engaging with
diverse team members and understanding their perspectives fostered a more collaborative and
inclusive work environment.
14 | P a g e
Certainly, here's a list of the tools, software, and technologies that I used during my
front-end web design internship at Sofsee Tech Pvt. Ltd.:
1. Adobe XD
2. Figma
3. Sketch
1. HTML5
2. CSS3 (including Flexbox and Grid)
3. JavaScript
4. jQuery
5. Bootstrap
6. Sass (CSS preprocessor)
7. Git (Version Control)
1. Media Queries
2. Browser Developer Tools (Chrome DevTools, Firefox Developer Tools)
3. Cross-Browser Compatibility Testing
15 | P a g e
Image Editing and Optimization:
1. Adobe Photoshop
2. Image Compression Tools (TinyPNG, ImageOptim)
1. Balsamiq Mockups
1. Google Chrome
2. Mozilla Firefox
3. Microsoft Edge
4. Safari
Performance Optimization:
Text Editors:
16 | P a g e
These tools, software, and technologies played a crucial role in shaping my internship
experience, enabling me to design, code, test, and collaborate effectively on real-world
projects. They provided me with the necessary resources to create user-centered and
visually appealing web interfaces while adhering to industry best practices.
1. Design and Prototyping Tools (Adobe XD, Figma, Sketch): These tools allowed me
to visually conceptualize and create user interfaces. I could design wireframes, mockups,
and prototypes that conveyed design ideas and interactions to team members and
clients. The collaborative features of these tools streamlined feedback and ensured
everyone was on the same page.
5. Git and GitHub: Version control with Git allowed me to track changes, collaborate
seamlessly with the development team, and manage different code branches. GitHub
served as a platform for hosting and reviewing code, facilitating collaboration and code
review.
17 | P a g e
real-time testing of responsive layouts and troubleshooting issues in different browser
environments.
7. JavaScript and jQuery: These scripting languages enhanced user interactions and
animations. jQuery simplified DOM manipulation and provided a library of functions
that expedited development.
8. Project Management Tools (Trello, Asana): These tools helped organize tasks, track
project progress, and allocate responsibilities among team members. They ensured that
everyone was aligned with project milestones and goals.
11. Text Editors (Visual Studio Code, Sublime Text): These editors provided a
conducive environment for coding, with features like syntax highlighting, auto-
completion, and extensions that improved efficiency and accuracy.
In summary, each of these tools played a significant role in different stages of the design
and development process. They streamlined workflows, enhanced collaboration,
improved code quality, optimized performance, and enabled me to create user-centered
and visually appealing web interfaces that aligned with industry standards.
18 | P a g e
Collaboration and Teamwork
1. Team Members: Working closely with fellow designers, developers, and project
managers was a fundamental part of my internship. We collaborated during
brainstorming sessions, design critiques, and project meetings. These interactions
allowed us to discuss design concepts, share insights, and provide feedback on each
other's work. Collaborating with developers was particularly enriching as it provided
insights into the technical aspects of implementing designs and bridged the gap
between design and development.
19 | P a g e
5. Problem-Solving Discussions: When encountering design or coding challenges, I
engaged in discussions with team members to brainstorm solutions. Collaborative
problem-solving sessions often led to creative approaches and innovative solutions that
I wouldn't have thought of on my own.
In conclusion, the interactions I had with team members, mentors, and colleagues were
pivotal in shaping my internship experience. They nurtured a sense of camaraderie,
encouraged a culture of learning, and allowed me to benefit from the collective
knowledge and experience of the Sofsee Tech community. These interactions not only
enriched my technical skills but also reinforced the importance of effective
communication, collaboration, and continuous learning in a professional setting.
20 | P a g e
2. Idea Sharing and Brainstorming: Collaborative discussions provided a platform for
sharing diverse ideas and perspectives. Brainstorming sessions allowed us to explore
innovative design concepts, interactive elements, and usability enhancements that
contributed to more creative and engaging interfaces.
3. Design Feedback and Iteration: Regular design reviews facilitated open discussions
about the design direction. Constructive feedback from colleagues and mentors helped
identify potential improvements, refine designs, and enhance the user experience.
Collaboration ensured that designs were refined iteratively based on collective insights.
5. Problem Solving and Decision Making: Incorporating diverse viewpoints and skills
during collaborative problem-solving discussions allowed us to identify solutions more
effectively. This approach helped us overcome design and development challenges
efficiently and make informed decisions.
6. Efficient Project Management: Collaboration tools like Trello and Asana facilitated
task allocation, tracking, and project milestones. Open communication about progress,
blockers, and deadlines ensured that projects remained on track and met client
expectations.
21 | P a g e
10. Learning and Growth: Collaboration extended beyond project specifics.
Interactions with team members facilitated knowledge sharing, enabling me to learn
new techniques, tools, and industry best practices. This continuous learning enriched my
skill set and contributed to project success.
22 | P a g e
Achievements and Milestones
4. Health and Wellness Website Redesign: Achievement: Redesigned the website for a
health and wellness company, resulting in improved user navigation and engagement.
Contribution: Conducted user research to understand target audience preferences.
Designed an intuitive and modern interface with clear calls to action, enabling users to
easily access relevant health resources.
23 | P a g e
6. Portfolio Development: Achievement: Created a comprehensive portfolio
showcasing completed design projects, demonstrating growth and versatility as a front-
end web designer. Contribution: Curated an online portfolio using HTML, CSS, and
JavaScript, highlighting projects, design decisions, and technical skills. The portfolio
served as evidence of proficiency and potential for future opportunities.
24 | P a g e
creativity in implementing interactive elements and animations that enhanced user
engagement and overall aesthetics.
25 | P a g e
Challenges and Solutions
During my front-end web design internship at Sofsee Tech Pvt. Ltd., I encountered
several challenges in the design process that provided valuable learning opportunities.
Overcoming these challenges required creative problem-solving, effective
communication, and a willingness to adapt. Here's a discussion of some of the
challenges I faced and how I addressed them:
1. Responsive Design Complexity: Creating designs that were visually appealing and
functional across a wide range of devices and screen sizes posed a significant challenge.
Ensuring that the layout, typography, and images scaled appropriately without
compromising the user experience demanded careful planning.
Solution: I utilized media queries to adapt the design based on breakpoints, conducted
thorough testing on different devices, and sought feedback from colleagues during
design reviews to identify any inconsistencies and make necessary adjustments.
Solution: I utilized browser developer tools to identify and address issues specific to
each browser. I also researched and applied browser-specific CSS fixes and fallbacks to
ensure a consistent experience.
4. Incorporating User Feedback: Adapting designs based on user feedback and client
preferences while maintaining the integrity of the original design vision required
balancing multiple considerations.
26 | P a g e
Solution: I engaged in open communication with clients and team members, seeking
clarification on feedback and iterating on designs based on shared insights. I focused on
addressing user needs while ensuring that design decisions aligned with project goals.
Solution: I organized tasks using project management tools, set clear priorities, and
allocated time blocks for each project. Regularly revisiting the project schedule and
adjusting priorities based on emerging requirements ensured timely completion.
6. Designing for Accessibility: Creating designs that were inclusive and accessible to
users with disabilities posed a challenge in terms of implementing proper color contrast,
text readability, and keyboard navigation.
Solution: I researched web accessibility guidelines, utilized tools to assess color contrast
ratios, and implemented keyboard navigation in interactive elements. Incorporating
accessible design practices early in the process became a standard part of my workflow.
27 | P a g e
Media queries were used to apply styles at specific breakpoints. Regular testing on
various devices and browser sizes helped identify any layout issues early on.
5. Time Management with Multiple Projects: Solution: I organized tasks using project
management tools like Trello and Asana, breaking down projects into manageable tasks
with clear deadlines. I established a routine of setting daily goals and reviewing progress
at the end of each day to ensure that all projects were on track.
28 | P a g e
on project progress. Clear and concise communication helped ensure that all team
members were aligned.
29 | P a g e
PROJECT
ONLINE COSMETIC SHOP
An online cosmetic shop is a virtual platform that offers a wide range of cosmetic and
beauty products to customers through the internet. This digital marketplace provides
consumers with the convenience of browsing and purchasing a diverse selection of
cosmetics, skincare products, fragrances, and beauty accessories from the comfort of
their own homes. As the beauty and cosmetics industry continues to flourish, online
cosmetic shops have emerged as a dynamic and lucrative sector, catering to a global
customer base.
1. Product Catalog: The heart of the online cosmetic shop is its extensive product catalog.
This catalog encompasses a variety of products, including makeup products like
foundation, lipsticks, eyeshadows, skincare products like cleansers, moisturizers, serums,
and various beauty accessories such as brushes, applicators, and mirrors.
2. User-friendly Interface: The online cosmetic shop is designed to provide users with an
intuitive and user-friendly experience. The interface features categories, filters, and
search functionalities that allow customers to easily navigate and find the products
they're looking for.
3. Product Pages: Each product is displayed on its dedicated product page, featuring
detailed descriptions, high-resolution images, ingredient lists, usage instructions, and
customer reviews. This information helps customers make informed purchasing
decisions.
4. Shopping Cart and Checkout: Once customers have selected their desired products,
they can add them to their virtual shopping cart. The checkout process involves
selecting payment options, providing shipping details, and confirming the purchase.
5. Secure Payment Gateways: Online cosmetic shops integrate secure payment gateways
that ensure customers' sensitive payment information is encrypted and protected during
transactions.
6. Personalization: Many online cosmetic shops offer personalized product
recommendations based on customers' preferences, previous purchases, and browsing
history, enhancing the shopping experience.
7. Customer Reviews and Ratings: Customers have the opportunity to leave reviews and
ratings for products they have purchased, helping others make informed choices and
building trust in the products.
30 | P a g e
8. Customer Support: Online cosmetic shops often provide customer support through
various channels, including live chat, email, and phone, to assist customers with
inquiries, issues, and returns.
9. Promotions and Discounts: These shops regularly feature promotions, discounts, and
special offers, encouraging customer engagement and boosting sales.
1. Convenience: Customers can shop for their favorite cosmetics and beauty products
24/7, eliminating the need to visit physical stores.
2. Global Access: Online cosmetic shops break down geographical barriers, allowing
customers worldwide to access a wide range of products.
3. Diverse Selection: Customers have access to an extensive variety of cosmetic brands,
products, and shades that may not be available locally.
4. Detailed Information: Product pages provide detailed information, empowering
customers to make educated purchasing decisions.
5. Time and Cost Savings: Online shopping saves time and money that would otherwise
be spent on commuting and in-store shopping.
6. Customer Reviews: Access to customer reviews helps customers gauge the quality and
effectiveness of products before purchase.
In conclusion, the concept of an online cosmetic shop has revolutionized the cosmetics
industry, offering customers convenience, variety, and accessibility. As an intern, working
on the front-end design of such a platform would involve creating user-friendly
interfaces, optimizing product pages for visuals and usability, and ensuring a seamless
shopping experience that reflects the brand's identity and values.
31 | P a g e
USE CASE DIAGRAM OF ONLINE COSMETIC SHOP
32 | P a g e
Flow Chart of Online Cosmetic Shop
33 | P a g e
Screenshot of web pages
34 | P a g e
35 | P a g e
36 | P a g e
CODE SAMPLE OF WEB PAGES
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>Cosmatic</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- style css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Responsive-->
<link rel="stylesheet" href="css/responsive.css">
<!-- fevicon -->
<link rel="icon" href="images/fevicon.png" type="image/gif" />
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
<!-- Tweaks for older IEs-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Open+Sans:400,700&display=swap&subset=latin-ext"
rel="stylesheet">
<!-- owl stylesheets -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"
media="screen">
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- header section start -->
<div class="header_section">
<div class="container-fluid">
<nav class="navbar navbar-light bg-light justify-content-between">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a href="products.html">Products</a>
<a href="about.html">About</a>
<a href="client.html">Client</a>
<a href="contact.html">Contact</a>
</div>
37 | P a g e
<span class="toggle_icon" onclick="openNav()"><img src="images/toggle-icon.png"></span>
<!-- <a class="logo" href="index.html"><img src="images/logo.png"></a> -->
<p id="cosmatic">ONLINE COSMETIC SHOP</p>
</a>
<form class="form-inline ">
<div class="login_text">
<ul>
<li>
<a href="#"><img src="images/user-icon.png"></a>
</li>
<li>
<a href="#"><img src="images/bag-icon.png"></a>
</li>
<li>
<a href="#"><img src="images/search-icon.png"></a>
</li>
</ul>
</div>
</form>
</nav>
</div>
</div>
<!-- header section end -->
<!-- banner section start -->
<div class="banner_section layout_padding">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1 class="banner_taital">Beauty <br>Kit</h1>
<p class="banner_text">Ncididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<div class="read_bt"><a href="#">Buy Now</a></div>
</div>
<div class="col-sm-6">
<div class="banner_img"><img src="images/banner-img.png"></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1 class="banner_taital">Beauty <br>Kit</h1>
<p class="banner_text">Ncididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<div class="read_bt"><a href="#">Buy Now</a></div>
</div>
<div class="col-sm-6">
<div class="banner_img"><img src="images/banner-img.png"></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
38 | P a g e
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1 class="banner_taital">Beauty <br>Kit</h1>
<p class="banner_text">Ncididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<div class="read_bt"><a href="#">Buy Now</a></div>
</div>
<div class="col-sm-6">
<div class="banner_img"><img src="images/banner-img.png"></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1 class="banner_taital">Beauty <br>Kit</h1>
<p class="banner_text">Ncididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<div class="read_bt"><a href="#">Buy Now</a></div>
</div>
<div class="col-sm-6">
<div class="banner_img"><img src="images/banner-img.png"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- banner section end -->
<!-- product section start -->
<div class="product_section layout_padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="product_taital">Our Products</h1>
<p class="product_text">incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation</p>
</div>
</div>
<div class="product_section_2 layout_padding">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 1</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-1.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
39 | P a g e
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 2</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-2.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price</h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 3</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-3.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 4</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-4.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 5</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-5.png" class="image_1">
40 | P a g e
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 6</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-6.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 7</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-7.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 8</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-8.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price 9</h3>
</div>
</div>
41 | P a g e
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 10</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-9.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 11</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-10.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 12</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-11.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty 13</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim </p>
<img src="images/img-12.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
42 | P a g e
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price </h3>
</div>
</div>
</div>
</div>
<div class="seemore_bt"><a href="#">See More</a></div>
</div>
</div>
</div>
<!-- product section end -->
<!-- about section start -->
<div class="about_section layout_padding">
<div class="container">
<div class="about_section_main">
<div class="row">
<div class="col-md-6">
<div class="about_taital_main">
<h1 class="about_taital">About Our beauty store</h1>
<p class="about_text">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequatlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequatlabore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<div class="readmore_bt"><a href="#">Read More</a></div>
</div>
</div>
<div class="col-md-6">
<div><img src="images/about-img.png" class="image_3"></div>
</div>
</div>
</div>
</div>
</div>
<!-- about section end -->
<!-- customer section start -->
<div class="customer_section layout_padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="customer_taital">What says customers</h1>
</div>
</div>
<div id="main_slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="client_section_2">
<div class="client_main">
<div class="client_left">
</div>
<div class="client_right">
<h3 class="name_text">three</h3>
43 | P a g e
<p class="dolor_text">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation eu </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="client_section_2">
<div class="client_main">
<div class="client_left">
</div>
<div class="client_right">
<h3 class="name_text">one</h3>
<p class="dolor_text">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation eu </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="client_section_2">
<div class="client_main">
<div class="client_left">
</div>
<div class="client_right">
<h3 class="name_text">two</h3>
<p class="dolor_text">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation eu </p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#main_slider" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control-next" href="#main_slider" role="button" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
<!-- customer section end -->
<!-- contact section start -->
<div class="contact_section layout_padding">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="contact_taital">Get In Touch</h1>
<p class="contact_text">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation eu </p>
</div>
<div class="col-md-6">
<div class="contact_main">
<div class="contact_bt"><a href="#">Contact Form</a></div>
<div class="newletter_bt"><a href="#">Newletter</a></div>
44 | P a g e
</div>
</div>
</div>
</div>
<div class="map_main">
<div class="map-responsive">
</div>
</div>
</div>
<!-- contact section end -->
<!-- footer section start -->
<div class="footer_section layout_padding">
<div class="container">
<div class="footer_logo">
</div>
<div class="contact_section_2">
<div class="row">
<div class="col-sm-4">
<h3 class="address_text">Contact Us</h3>
<div class="address_bt">
<ul>
<li>
<a href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i><span class="padding_left10">Address </span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-phone" aria-hidden="true"></i><span class="padding_left10">Call : +977</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope" aria-hidden="true"></i><span class="padding_left10">Email :
xyz@mail.com</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="footer_logo_1">
</div>
<p class="dummy_text">commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p>
</div>
<div class="col-sm-4">
<div class="main">
<h3 class="address_text">Best Products</h3>
<p class="ipsum_text">dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p>
</div>
</div>
</div>
</div>
<div class="social_icon">
<ul>
45 | P a g e
<li>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- footer section end -->
<!-- copyright section start -->
<div class="copyright_section">
<div class="container">
<p class="copyright_text">2023 All Rights Reserved. </a>
</p>
</div>
</div>
<!-- copyright section end -->
<!-- Javascript files-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/plugin.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
<!-- javascript -->
<script src="js/owl.carousel.js"></script>
<script src="https:cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
46 | P a g e
CONCLUSION
In conclusion, my internship experience in front-end development has been
incredibly enriching and educational. Over the course of this internship, I have had
the opportunity to delve into the dynamic world of web development, gaining
hands-on experience in creating user-centric and visually appealing interfaces.
Through various projects and tasks, I have honed my skills in HTML, CSS, and
JavaScript, and have become proficient in using popular front-end frameworks and
tools.
The internship has provided me with invaluable insights into the importance of
collaboration within a development team, as well as the significance of effective
communication and problem-solving in real-world scenarios. I have had the chance
to work closely with experienced developers, learning from their expertise and
integrating feedback to enhance the quality of my work.
Furthermore, I have come to understand the pivotal role that user experience plays
in shaping the success of a website or application. Designing responsive layouts,
optimizing performance, and ensuring cross-browser compatibility have all been
crucial aspects that I have focused on during my internship.
47 | P a g e
REFERENCES
Books:
These books and websites are excellent resources for expanding your knowledge in
front-end web development and staying up-to-date with the latest industry trends
and best practices.
The
End
48 | P a g e