VISVESVARAYA TECHNOLOGICAL UNIVERSITY

“Jnana Sangama”, Belagavi-590018, Karnataka

An Internship Report
on
“Responsive Website Development & Search Engine Optimization”
Submitted in partial fulfillment of the requirements for the award of the degree for
professional development in innovation/Entrepreneur/Societal for the course
of
COMPUTER SCIENCE AND ENGINEERING-DATA SCIENCE
For the Academic Year 2023-24

Submitted By

Charitha Deepak (4AD21CD011)

Under the Guidance of

Dr. Anitha D B
Assoc. Professor and Head
Department of CSE-Data Science

13th Kilometer, Mysore – Kanakapura – Bangalore Road,

Mysore – 570 028, Karnataka
Phone: +91-821-25 93 335
 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING-
DATA SCIENCE

CERTIFICATE

Certified that the Internship work entitled “Web Development” carried out by “
Charitha Deepak [4AD21CD011]” students of ATME College of Engineering, Mysuru
in partial fulfillment of the requirements for the award of the degree for professional
development in innovation/Entrepreneur/Societal for the course in Computer Science &
Engineering- Data Science, of the Visvesvaraya Technological University, Belagavi
during the year 2023-24. It is certified that all corrections/suggestions indicated for
Internal Assessment have been incorporated in the Report deposited in the
departmental library. The Internship report has been approved as it satisfies the
academic requirements in respect of Internship work prescribed for the said Degree.

Name & Signature Name & Signature

Guide HOD

Internship Viva-Voce

Name of the Examiners Signature with date

1.
2.
 DEPARTMENT VISION AND MISSION

 To impart technical education in the field of data science of excellent quality with a
high level of professional competence, social responsibility, and global awareness
among the students.

MISSION

 To impart technical education that is up to date, relevant and makes students

competitive and employable at global level
 To provide technical education with a high sense of discipline, social relevance in an
intellectually, ethically and socially challenging environment for better tomorrow
 Educate to the global standards with a benchmark of excellence and to kindle the
spiritBof innovation.

Program Specific Outcomes (PSOs)

At the end of Graduation, the student will be able,

 Develop relevant programming skills to become a successful data scientist

 Apply data science concepts and algorithms to solve real world problems of the
society
 Apply data science techniques in the various domains like agriculture, education
healthcare for better society
 ACKNOWLEDGEMENT

We would like to express our immense gratitude to Dr. A K Murthy, Principal, ATMECE,
Mysuru for his timely help and inspiration during the tenure of the course.

We would like to express our deep gratitude to Dr. Anitha D B, Associate Professor and
Head, Department of Computer Science and Engineering-Data Science, ATMECE, Mysuru for her
timely co-operation while carrying the Internship work. His friendliness made us learn more.

We also extend our sincere thanks to the Internship Coordinator Mrs. Neethi M V,
Department of Computer Science and Engineering-Data Science, ATMECE, Mysuru who have
encouraged us throughout the course.

We would like to express our sincere thanks to the Internship Guides Dr Anitha D B,
Associate Professor and Head, Department of Computer Science Engineering-Data Science,
ATMECE, and External guides/Trainer Mr Dinesh Kumar,D R Technologies, Mysuru for their
guidance, encouragement and suggestions that helped us a lot in completion of the internship.

Last but not the least, we express our heartfelt gratitude to Almighty, our parents for their
love and blessings that helped us complete the Internship work successfully
 TABLE OF CONTENTS

Chapter No. Title Page No.

Chapter 1 INTRODUCTION 2-6

1.1 About the Company 2

1.2 About the Web Development 3

1.3 Objectives of the Internship 5

Chapter 2 WEB DEVELOPMENT 6-10
ENVIRONMENT
2.1 Web Development 6

2.2 Salient features of Web Development 7

2.3 Applications 8

2.4 Advantages 9
Chapter 3 TASKS PERFORMED DURING THE 11-24
INTERNSHIP
3.1 Introduction to website, types of Websites 11

3.2 Projects in FreeCodeCamp 15

3.3 SEO Optimization

3.4 Company Website Development

Chapter 4 REFLECTION NOTES 23

4.1 Conclusion 25

REFERENCES 26
 Web Development

CHAPTER 1

INTRODUCTION

In the ever-evolving landscape of the digital realm, the synergy between responsive website
development and search engine optimization (SEO) stands as a pivotal axis in shaping an
organization's online presence. This internship report delves into the dynamic intersection of
these two crucial domains, shedding light on the symbiotic relationship that fuels the success
of modern businesses in the virtual sphere.
Responsive website development has become a cornerstone in the era of diverse digital
devices. As users engage with content across smartphones, tablets, and desktops, the
imperative for websites to adapt seamlessly to varying screen sizes and resolutions is more
pronounced than ever. The responsive design not only enhances user experience but also
plays a pivotal role in determining a website's search engine ranking.
Complementing this, the report also explores the intricacies of Search Engine Optimization,
an indispensable strategy for enhancing a website's visibility in search engine results. In a
world where the internet serves as the primary gateway for information, the position of a
website on search engine results pages can make or break its online success. The
multifaceted nature of SEO, encompassing technical, on-page, and off-page elements, forms
the backbone of a robust digital marketing strategy.
This internship report is a culmination of hands-on experience, where theoretical knowledge
converges with practical application in the realm of responsive website development and
SEO. The subsequent sections unfold a journey through project implementations, challenges
overcome, and lessons learned, providing a comprehensive overview of the vital role played
by responsive design and SEO in today's digital ecosystem. As we navigate through the
intricacies of crafting user-friendly interfaces and optimizing content for search engines, the
report aims to distill valuable insights and contribute to the ongoing discourse surrounding
effective digital presence.
The digital landscape is a constantly shifting terrain, demanding adaptability, and
innovation. This internship report extends beyond the surface exploration of responsive
website development and search engine optimization, delving into nuanced strategies and
emerging trends that shape the contemporary online experience. By scrutinizing case studies
and real-world applications, this report aims to bridge the gap between theoretical
knowledge and the pragmatic demands of the industry.

Dept. of CSE-DS, ATMECE, Mysuru Page 2

 Web Development
1.1. About the Company
D R Technologies, headquartered in the vibrant city of Mysuru, stands as a
beacon of innovation and technological prowess in the heart of Southern India. Established
with a vision to catalyze digital transformation, D R Technologies has carved a niche for
itself in the dynamic landscape of information technology and services. Since its inception,
the company has been dedicated to delivering cutting-edge solutions that empower
businesses to thrive in the ever-evolving digital era.
Renowned for its commitment to excellence, D R Technologies operates at the forefront of
technology, providing a comprehensive suite of services ranging from software development
and IT consulting to web solutions and digital marketing. The company's strategic location
in Mysuru, a city known for its rich cultural heritage and burgeoning technological
ecosystem, positions it as a key player contributing to the region's technological
advancement.
Embracing a client-centric approach, D R Technologies places paramount importance on
understanding the unique needs of its clients and tailoring bespoke solutions that drive
measurable results. The company's ethos is grounded in a fusion of innovation, reliability,
and a relentless pursuit of customer satisfaction, making it a trusted partner for businesses
seeking to harness the full potential of technology.
As we delve into the fabric of D R Technologies, this introduction sets the stage for a deeper
exploration into the company's history, core competencies, and its pivotal role in shaping the
digital landscape of Mysuru and beyond.

Vision of the Company

At D R Technologies, our vision transcends conventional boundaries, propelling us into the

vanguard of technological innovation and client empowerment. Envisioning a future where
technology serves as an enabler for transformative change, our core vision is to be a global
leader in delivering cutting-edge IT solutions and services. We aspire to be the catalyst for
digital evolution, steering businesses towards unprecedented heights of success in the digital
age.
Our commitment is rooted in the belief that technology, when wielded strategically and
ethically, has the power to revolutionize industries, enhance efficiency, and elevate the
human experience. We envisage a world where businesses seamlessly navigate the digital
landscape, leveraging the latest advancements to achieve unparalleled growth and
sustainability.

Dept. of CSE-DS, ATMECE, Mysuru Page 3

 Web Development
Moreover, our vision extends beyond organizational success to encompass a broader societal
impact. We aim to contribute meaningfully to the communities we serve, fostering
technological literacy, inclusivity, and sustainable practices. Through our endeavors, we
aspire to leave an indelible mark on the world, shaping a future where technology is a force
for positive transformation.

Company Product & Services: D R Technologies, driven by a commitment to provide

comprehensive solutions across the digital spectrum, offers a diverse array of products
and services tailored to meet the dynamic needs of businesses in the contemporary
technological landscape. Driven by a commitment to provide comprehensive solutions
across the digital spectrum, offers a diverse array of products and services tailored to
meet the dynamic needs of businesses in the contemporary technological landscape.

1.2 About the Web Development

Web development is the building and maintenance of websites and web

applications. It involves a wide range of skills and technologies, from front-end
development (the part of the website that users see and interact with) to back-end
development (the server-side logic that makes the website work).

Front-end development: The following are the languages for Front-end development: -

 HTML: Hypertext Markup Language is the basic building block of all websites.
It defines the structure and content of a web page.
 CSS: Cascading Style Sheets control the appearance of a website, including the
layout, colors, fonts, and more.
 JavaScript: This programming language adds interactivity to web pages, making
them more dynamic and engaging.

Back-end development: The following are the applications for Back-end development: -

 Server-side scripting: This code runs on the web server and is responsible for
tasks such as processing user input, storing data, and generating dynamic content.

Dept. of CSE-DS, ATMECE, Mysuru Page 4

 Web Development


 Databases: Websites often store data in databases, such as product information,

user accounts, and blog posts. Back-end developers use programming languages
like SQL to interact with databases. 
 PHP: PHP allows different parts of a website to communicate with each other, as
well as with external services. 

Full-stack development:

Full stack development encompasses the holistic process of creating web

applications, covering both the front-end and back-end aspects. A full stack developer
possesses proficiency in a diverse range of technologies and frameworks necessary for
building every layer of the application stack. On the front-end, they leverage HTML,
CSS, and JavaScript, often utilizing frameworks like Bootstrap to enhance user interfaces
and interactivity. Meanwhile, on the back-end, they employ server-side languages such as
JavaScript ,PHP to handle data processing, business logic, and interactions .It plays a vital
role in their workflow, ensuring efficient collaboration and seamless deployment. Full
stack developers play a pivotal role in the development cycle, bridging the gap between
front- end and back-end development to deliver robust and scalable web applications.

Benefits of tools: The following describes the benefits of the web-development for
individuals and for businesses: -
 For Individuals:

 Creative outlet & in-demand skills

 Continuous learning & flexible work

 Transferable skills & good pay

 For Businesses:

 Strong brand & user experience

 Wider reach & higher conversions

 Data-driven decisions & insights

 Amplifies impact for non-profits

 Enhances education for institutions

Dept. of CSE-DS, ATMECE, Mysuru Page 5
 Web Development

1.3 Objectives of the Internship

D R Technologies offered internships aimed at providing participants with valuable
real-world experience and enhancing their skills, particularly in programming. The
primary goal is to equip interns with the necessary confidence and expertise to tackle
challenges commonly encountered in the professional world. The internship program
focuses on honing the skills of participants, particularly in programming. This could
include learning new programming languages, mastering coding techniques,
understanding software development processes, and improving problem-solving abilities.
The internship aims to familiarize participants with the corporate culture and
environment. This includes exposure to office dynamics, teamwork, communication
protocols, and professional etiquette. By experiencing these aspects firsthand, interns can
better prepare themselves for future careers in the corporate world. By immersing interns
in the office environment, the company facilitates a seamless transition for participants
into the company culture. This integration not only helps interns adapt more effectively
but also allows them to understand the company's values, goals, and expectations.

Dept. of CSE-DS, ATMECE, Mysuru Page 6

 Web Development

CHAPTER 2

WEB DEVELOPMENT ENVIRONMENT

This chapter gives the description of company, its various departments and about Web
Development environment.

2.1 Web Development

Web development encompasses the multifaceted process of creating websites and

web applications, blending technical skills with creativity to deliver compelling online
experiences. At its core, web development is divided into front-end and back-end
development. Front-end developers focus on crafting the user interface, employing
HTML, CSS, and JavaScript to structure content, style elements, and add interactive
functionality. Meanwhile, back-end developers work behind the scenes, managing
servers, databases, and application logic using languages like Python, PHP, or
frameworks such as Bootstrap. Full-stack developers navigate both realms, seamlessly
integrating front-end and back-end components to build cohesive digital solutions.
Responsive design ensures that websites adapt seamlessly to various devices and screen
sizes, while version control systems like Git streamline collaboration and project
management. Continuous learning is paramount in this ever-evolving field, as developers
strive to stay abreast of emerging technologies and industry best practices. Ultimately,
web development offers a dynamic and rewarding career path, empowering developers to
shape the digital landscape and create impactful online experiences for users worldwide.
During my internship at D R Technologies, I learned about HTML, CSS, and
PHP, by using these I developed company website for D R Technologies The project not
only showcased my technical abilities but also demonstrated my capacity to apply them
in practical, real-world contexts. The food ordering system allowed users to seamlessly
browse menus, place orders, and navigate through a smooth checkout process, all
powered by HTML, CSS, JavaScript and Firebase. Meanwhile, my portfolio website
which I developed will serve as a platform to showcase my professional journey and
projects.

Dept. of CSE-DS, ATMECE, Mysuru Page 7

 Web Development

2.2 Salient Features

Web development is the process of creating websites and web applications. It

involves a wide range of skills and technologies, from front-end development (what users
see) to back-end development (how the website functions). Here are some of the salient
features of web development:
 User-centricity: The most important feature of any website is that it is user-
friendly. This means that it should be easy to navigate, understand, and use.
Websites should be designed with the user in mind, and all decisions about the
website's design and functionality should be made with the user's experience in
mind.
 Responsiveness: With the increasing use of mobile devices, it is essential that
websites are responsive. This means that they should be able to adapt to different
screen sizes and devices. A responsive website will look good and function
properly on a desktop computer, a tablet, and a smartphone.
 Performance: Websites should load quickly and perform well. No one wants to
wait for a website to load, so it is important to optimize the website's code and
images to ensure that it loads quickly.
 Security: Websites need to be secure to protect user data and prevent cyber-
attacks. This means using strong passwords, encrypting data, and keeping the
website's software up to date.
 Scalability: Websites need to be able to scale to accommodate growth. This
means that the website's infrastructure should be able to handle an increasing
number of users and traffic.
 Accessibility: Websites should be accessible to everyone, regardless of their
abilities. This means following accessibility guidelines to ensure that the website
is usable by people with disabilities.
 Search engine optimization (SEO): SEO is the process of optimizing a website
to rank higher in search engine results pages (SERPs). This can be done by using
relevant keywords, creating high-quality content, and building backlinks.
 Continuous learning: Web development is a constantly evolving field, so it is
important to stay up-to-date on the latest trends and technologies. This can be
done by reading blogs, attending conferences, and taking online courses.

Dept. of CSE-DS, ATMECE, Mysuru Page 8

 Web Development

2.3 Applications
Web development is a broad field with a wide range of applications across various
industries. Some of the key applications of web development include:
 Websites: This is the most common application of web development. Websites
serve as online platforms for businesses, organizations, individuals, and more to
showcase their products, services, information, and content to a global audience.
 E-commerce: Web development is extensively used in creating online stores and
marketplaces where businesses can sell their products and services directly to
consumers over the internet. E-commerce websites often require complex
functionalities such as shopping carts, payment gateways, inventory management,
and user authentication.
 Web Applications: Web development is used to create web-based applications
that run on web browsers. These applications can range from simple tools like
calculators and to-do lists to complex enterprise-level systems like customer
relationship management (CRM) software, project management tools, and online
collaboration platforms.
 Social Networking Platforms: Social media websites and platforms heavily rely
on web development to create interactive and engaging experiences for users to
connect, share content, and communicate with each other.
 Online Learning Platforms: Web development plays a crucial role in creating e-
learning platforms and educational websites where students can access courses,
lectures, quizzes, and educational resources remotely.
 Booking and Reservation Systems: Websites and web applications for booking
flights, hotels, rental cars, restaurants, appointments, and other services are
developed using web technologies to facilitate online reservations and scheduling.
 Financial Services: Web development is used in creating online banking systems,
investment platforms, payment gateways, and financial management tools that
enable users to manage their finances, make transactions, and monitor their
accounts securely over the internet.
 Healthcare Applications: Web development is applied in building telemedicine
platforms, patient portals, medical record systems, and health information
websites that allow healthcare providers and patients to communicate, access
medical records, schedule appointments, and seek medical advice remotely.

Dept. of CSE-DS, ATMECE, Mysuru Page 9

 Web Development

 Gaming: While traditionally associated with standalone applications, web

development is increasingly being used to create browser-based games that can be
played directly within web browsers without the need for downloads or
installations.

2.4 Advantages

Web development offers numerous advantages across various domains. Here are
some key advantages:
 Global Reach: Websites and web applications can be accessed from anywhere with an
internet connection, allowing businesses to reach a global audience regardless of
geographical barriers.
 Cost-Effectiveness: Compared to traditional brick-and-mortar businesses, setting up and
maintaining a web presence is often more cost-effective. Web development also offers
scalability, allowing businesses to start small and expand as needed.
 Accessibility: Web development allows for the creation of accessible websites and
applications that can be used by people with disabilities. This inclusivity ensures that a
wider range of users can access and interact with digital content.
 Rich User Experience: Advances in web technologies such as HTML5, CSS3, and
JavaScript frameworks enable the creation of rich, interactive user experiences with
features such as animations, multimedia content, real-time updates, and dynamic user
interfaces.
 Data Analytics and Insights: Web development enables the implementation of
analytics tools and tracking mechanisms to gather data on user behavior, interactions,
and preferences. This data can be used to gain insights into audience demographics,
improve user experience, and make data-driven decisions.
 Community Support and Resources: The web development community is vast and
active, providing access to a wealth of resources, tutorials, forums, and open- source
libraries/frameworks. This collaborative environment fosters innovation, knowledge
sharing, and continuous improvement in web development practices.

Dept. of CSE-DS, ATMECE, Mysuru Page 10

 Web Development

CHAPTER 3

TASKS PERFORMED DURING THE INTERNSHIP

3.1 Introduction to Websites and types of websites
 Introduction to website
A website serves as a digital gateway, providing individuals, businesses, and organizations with a
platform to share information, offer services, and connect with a global audience. In essence, it's
a virtual space where content is presented and accessed through web browsers, enabling users to
explore, interact, and engage with diverse resources and experiences. From corporate entities
showcasing their products and values to individuals sharing their passions and expertise,
websites encompass a vast array of purposes and functionalities. With the internet becoming an
integral part of modern life, websites serve as essential tools for communication, commerce,
education, entertainment, and much more, shaping the way we interact and navigate the digital
world.The Aim of a portfolio website is to provide a way to land more clients, whether that
means freelance work, more clients for your agency or employment at a company. We should
decide what you want to accomplish with your website before adding content to it. It allows you
to showcase your work, build personal brand, increase credibility. By investing in a portfolio
website, we can position ourselves as a proactive and highly capable candidate, increasing the
chances of landing on desired job in today's competitivejob market.

 Types of websites:

 Static Website
 Dynamic Website
 Interactive Website
 E-Commerce Website

Dept. of CSE-DS, ATMECE, Mysuru Page 11

 Web Development

 Static Website:
Static websites are foundational elements of the online landscape, offering a straightforward
and efficient means of presenting content on the web. Comprising fixed HTML and CSS
files, these sites display consistent information to visitors, with content remaining unchanged
unless manually updated by developers. While lacking the dynamic capabilities of their
counterparts, static websites excel in simplicity, affordability, and ease of maintenance. They
find favor among small businesses, personal portfolios, and informational platforms seeking
to establish an online presence without the need for complex functionality or ongoing
updates. Despite their static nature, these websites play a vital role in delivering essential
information, showcasing products or services, and sharing ideas and expertise with a global
audience.

 Dynamic Website:
Dynamic websites are the dynamic counterpart to static websites, offering interactive and
personalized experiences to users. Unlike static websites, which display fixed content,
dynamic websites can dynamically generate content based on user input, preferences, or data
from external sources. Powered by server-side scripting languages like PHP, Python, or
JavaScript, dynamic websites can pull information from databases, process user interactions,
and deliver customized content in real-time. This dynamic nature allows for features such as
user authentication, personalized recommendations, e-commerce transactions, and real-time
updates. From social networking platforms to e-commerce portals and online banking
systems, dynamic websites play a crucial role in providing engaging, responsive, and
feature-rich experiences on the web. Their ability to adapt and evolve in real-time makes
them indispensable tools for businesses, organizations, and individuals looking to create
dynamic and interactive web experiences.

 Interactive Website:
Interactive websites are dynamic digital platforms designed to engage users through active
participation and feedback. These sites go beyond static content delivery, offering features
that encourage users to interact, explore, and contribute. From clickable buttons and
animated graphics to forms, quizzes, and games, interactive websites provide various
mechanisms for user engagement. By fostering two-way communication and personalized
experiences, interactive websites can enhance user satisfaction and help in having all the

Dept. of CSE-DS, ATMECE, Mysuru Page 12

 Web Development

support, or interactive maps, these websites aim to create immersive and memorable
experiences that captivate and delight visitors. As the demand for engaging online
experiences continues to grow, interactive websites remain at the forefront of web
development, shaping the way we interact with content and brands in the digital age.

 E-Commerce Website:
E-commerce websites revolutionize the way businesses sell products and services by
providing a virtual marketplace accessible to customers worldwide. These websites facilitate
online transactions, enabling users to browse, select, and purchase items from the comfort of
their homes or on the go. E-commerce platforms offer a wide range of features, including
product catalogs, shopping carts, secure payment gateways, and order tracking systems, to
streamline the purchasing process and enhance user experience. Whether it's retail giants like
Amazon and eBay or niche boutiques specializing in unique products, e-commerce websites
cater to diverse needs and preferences, offering convenience, variety, and competitive
pricing. With the global e-commerce market continuing to expand, these websites play a
crucial role in driving economic growth, empowering businesses of all sizes to reach new
markets and customers in the digital age.

3.2 Projects in FreeCodeCamp

FreeCodeCamp is an online learning platform that offers a wide range of coding coursesand
resources for aspiring developers. It provides a comprehensive curriculum covering web
development, including HTML, CSS, JavaScript, and more advanced topics like React and
Node.js. What sets FreeCodeCamp apart is its emphasis on hands-on projects and real-world
experience, allowing users to apply their skills to practical challenges and build a portfolio
of projects. Additionally, FreeCodeCamp's interactive coding challenges and supportive
community make learning to code accessible and engaging for learners of all levels. Overall,
FreeCodeCamp serves as a valuable resource for individuals looking to kickstart their coding
journey.

Dept. of CSE-DS, ATMECE, Mysuru Page 13

 Web Development

Projects Created:

1) Registration Form:
This involved creating a registration form using HTML elements like form, label, input
types (password, email, number), and button. External CSS was applied for styling,
including hex color codes, font adjustments, and layout properties like max/min width,
padding, margin, and borders. This project demonstrates the effective use of HTML and CSS
to design a functional and visually appealing registration form.

2) Ferris wheel using CSS:

A Ferris wheel was crafted using CSS animation techniques. HTML elements like div and
span tags structured its components. Cascading styles in the external CSS controlled border
elements' appearance. Animation properties like name, duration, and timing function were
employed for smooth movement, with transform and rotate tags for position and orientation.
Precise control over the animation's pivot point was ensured using transform origin Nth-of-
type. Keyframes defined stages of animation, creating lifelike motion. This project
showcases CSS animations' capability in crafting visually engaging web elements.

3) Responsive Piano:
A responsive piano was developed to adapt to different window sizes. The HTML
implementation included the utilization of meta tags for defining viewport properties and
initial scaling, ensuring compatibility across devices. Internal class usage facilitated styling
elements within specific sections of the piano, enhancing organization and maintainability.
In the external CSS stylesheet, before and after pseudo-elements were employed for
additional styling elements. Position elements and media queries were utilized to fine-tune
layout and responsiveness, ensuring optimal display on various screen sizes. This project
exemplifies the effective use of HTML and CSS techniques to create a responsive and
functional web component.

4) Coffee Café Menu:

It is focused on creating a coffee cafe menu, utilizing CSS for styling and introducing
responsive user interface (UI) design principles. External CSS was applied to enhance the
menu's appearance and functionality, including layout adjustments and styling elements. The
article tag was utilized to structure the menu content effectively. Through this project,

Dept. of CSE-DS, ATMECE, Mysuru Page 14

 Web Development

participants gained practical experience in applying CSS for UI design and developing
responsive web layouts.

5) CSS Gallery:
Project 10 involved creating a CSS gallery using HTML and external CSS. The HTML
implementation utilized the "Imagine" concept. External CSS was applied to explore font
family options, enhancing the gallery's typography. Flex-direction and flex-wrap tags were
utilized to control the layout, allowing for flexible and responsive gallery arrangements.
Additionally, the object-fit property was employed to ensure images fit within their
containers while preserving aspect ratios. This project demonstrates the effective use of CSS
styling techniques to design a visually appealing and responsive image gallery.

3.3 SEO Optimization

SEO stands for “Search Engine Optimization”, process of improving your website to
increase its visibility in google or any other search engines whenever people search for it.
People search for:
 Product you sell
 Services you provide
 Information on topic in which you have deep expertise and/or experience

The goal of SEO is to help attract website visitor who will become customers, clients or an
audience that keeps coming back.

SEO Importance
 SEO is a critical marketing channel. First and foremost: Organic search delivers 53% of all
website traffic. That’s one big reason why the global SEO industry is forecast to reach a
staggering $122.11 billion by 2028.SEO drives real business results for brands, business and
organization of sizes.
 Whenever people want to go somewhere, do something, find information, research or buy a
product/service- there journey typically begins with a search but today search is incredibly
fragmented. User may search on traditional web search engines (Ex:Google, Microsoft
Bing), social platform(Ex:Youtube,Instagram) or retailer websites(Ex:Ajio).

Dept. of CSE-DS, ATMECE, Mysuru Page 15

 Web Development

 SEO is also incredibly important because the search engine results pages (or SERPs) are
super competitive – filled with search features (and PPC ads). SERP features include:
1. Knowledge panels.
2. Featured snippets.
3. Maps.
4. Images.
5. Videos.
6. Top stories (news).

 SEO is the foundation of holistic marketing, where everything your company does matters.
Once you understand what your users want, you can then implement that knowledge across
your:
1. Campaigns (paid and organic).
2. Website content.
3. Social media properties.

 SEO is a channel that drives the traffic you need to achieve key business goals (e.g.,
conversions, visits, sales). It also builds trust – a website that ranks well is generally
regarded as authoritative or trustworthy, which are key elements Google wants to reward
with better rankings.

TYPES OF SEO
There are Three types of SEO’s:
1. Technical SEO:
Involves optimizing the technical aspects of your website to ensure that search engines can
easily crawl, index, and understand your content. It plays a critical role in how search
engines rank your website. Key elements of technical SEO includes:
 Website speed and performance optimization
 Mobile-friendliness to cater to mobile user
 Structured data markup(Schema.org) to enhance rich snippets in search results.
 XML sitemaps to help search engines discover and index your page.
 Robots.txt files to control search engines travelers access to specific parts of your site.

Dept. of CSE-DS, ATMECE, Mysuru Page 16

 Web Development

2. On-Site:
On-Page SEO refers to the optimization of individual web pages on your website to improve
their visibility in search engine results. It involves various on-page elements to make your
content and web pages more search engine-friendly, such as:
 Keyword optimization: Researching and strategically using relevant keywords in your
content, headings, Meta tags, and URLs.
 High-quality content: Creating valuable, informative, and engaging content that meets user
intent and provides a great user experience.
 Meta tags: Optimizing meta titles, meta descriptions, and header tags for keyword relevance
and user appeal.
 URL structure: Creating clean and descriptive URLs that are user-friendly and include
keywords.
 Image optimization: Ensuring that images are appropriately compressed, have descriptive alt
text, and load quickly.
 Internal linking: Building a well-structured internal link network to help users navigate your
site and distribute link authority.

3. Off-Site:
Off-Page SEO focuses on activities that occur outside of your website to improve its
authority and reputation. A key aspect of off-page SEO is link building, but it also includes
other strategies like:
 Building high-quality backlinks from authoritative and relevant websites.
 Social media engagement to promote content and build your online presence.
 Online reputation management to monitor and enhance your brand's image.
 Influencer outreach and partnerships to gain exposure and back links.

In addition to these core types of SEO, there are other specialized forms of SEO tailored to
specific needs or niches, including:

 Local SEO:
Local SEO is focused on improving the online visibility of businesses with physical
locations. It includes tactics like optimizing Google My Business listings, acquiring local

Dept. of CSE-DS, ATMECE, Mysuru Page 17

 Web Development

citations, and encouraging customer reviews. The goal is to appear in local search results
when users search for products or services in their geographic area.

 International SEO:
International SEO is for websites that target global audiences. It involves optimizing for
different languages and regions, including href-lang tags, geotargeting, and content
localization to ensure that your website ranks well in various international markets.

 E-commerce SEO:
E-commerce SEO is specialized for online stores and aims to optimize product listings,
improve site navigation, and increase conversions. This includes strategies like optimizing
product descriptions, category pages, and implementing structured data for product listings.

How SEO works

1. Understanding how search engines work:
Simply, if you want people to find your business via search – on any platform – you need to
understand the technical processes behind how the engine works – and then make sure you
are providing all the right “signals” to influence that visibility.

When talking about traditional web search engines like Google, there are four separate
stages of search:

 Crawling: Search engines use crawlers to discover pages on the web by following links and
using sitemaps.
 Rendering: Search engines generate how the page will look using HTML, JavaScript and
CSS information.
 Indexing: Search engines analyze the content and metadata of the pages it has discovered
and add them to a database (though there’s no guarantee every page on your website will be
indexed).
 Ranking: Complex algorithms look at a variety of signals to determine whether a page is
relevant and of high-enough quality to show when searchers enter a query.

But optimizing for Google search is different from optimizing for search other platforms like
YouTube or Amazon.

Dept. of CSE-DS, ATMECE, Mysuru Page 18

 Web Development

Let’s take Facebook, for example, where factors such as engagement (Likes, comments,
shares, etc.) and who people are connected to matter.
Then, on Twitter, signals like recency, interactions, or the author’s credibility are important.

And further complicating things: search engines have added machine learning elements in
order to surface content – making it even harder to say “this” or “that” resulted in better or
worse performance.

2. Researching:
Research is a key part of SEO. Some forms of research that will improve SEO performance
include:
 Audience research: It’s important to understand your target audience or market. Who are
they (i.e., their demographics and psychographics)? What are their pain points? What
questions do they have that you can answer?
 Keyword research: This process helps you identify and incorporate relevant and valuable
search terms people use into your pages – and understand how much demand and
competition there is to rank for these keywords.
 Competitor research: What are your competitors doing? What are their strengths and
weaknesses? What types of content are they publishing?
 Brand/business/client research: What are their goals – and how can SEO help them achieve
those goals?
 Website research: A variety of SEO audits can uncover opportunities and issues on a website
that are preventing success in organic search. Some audits to consider: technical SEO,
content, link profile and E-E-A-T.
 SERP analysis: This will help you understand the search intent for a given query (e.g., is it
commercial, transactional, informational or navigational) and create content that is more
likely to earn rankings or visibility.
3. Planning:
An SEO strategy is your long-term action plan. You need to set goals – and a plan for how
you will reach them.
Think of it your SEO strategy as a roadmap. The path you take likely will change and evolve
over time – but the destination should remain clear and unchanged.

Dept. of CSE-DS, ATMECE, Mysuru Page 19

 Web Development

Our SEO plan may include things such as:

a) Setting goals (e.g., OKRs, SMART) and expectations (i.e., timelines/milestones).
b) Defining and aligning meaningful KPIs and metrics.
c) Deciding how projects will be created and implemented (internal, external or a mix).
d) Coordinating and communicating with internal and external stakeholders.
e) Choosing and implementing tools/technology.
f) Hiring, training and structuring a team.
g) Setting a budget.
h) Measuring and reporting on results.
i) Documenting the strategy and process.

4. Creating and implementing:

Once all the research is done, it’s time to turn ideas into action. That means:
 Creating new content: Advising your content team on what content needs to be created.
 Recommending or implementing changes or enhancements to existing pages: This could
include updating and improving the content, adding internal links, incorporating
keywords/topics/entities, or identifying other ways to optimize it further.
 Removing old, outdated or low-quality content: The types of content that aren’t ranking
well, driving converting traffic or helping you achieve your SEO goals.

5. Monitoring and maintaining:

You need to know when something goes wrong or breaks on your website. Monitoring is
critical. You need to know if traffic drops to a critical page, pages become slow,
unresponsive or fall out of the index, your entire website goes offline, links break, or any
other number of potential catastrophic issues.

6. Analyzing, assessing and reporting on performance:

If you don’t measure SEO, you can’t improve it. To make data-driven decisions about SEO,
you’ll need to use:
 Website analytics: Set up and use tools (at minimum, free tools such as Google Analytics,
Google Search Console and Bing Webmaster Tools) to collect performance data.
 Tools and platforms: There are many “all-in-one” platforms (or suites) that offer multiple
tools, but you can also choose to use only select SEO tools to track performance on specific

Dept. of CSE-DS, ATMECE, Mysuru Page 20

 Web Development

tasks. Or, if you have the resources and none of the tools on the market do exactly what you
want, you can make your own tools.

Advantages of linking multiple pages:

Linking multiple pages in a website offers several advantages, enhancing the overall user
experience and website functionality
 Improved Navigation:
Allows you to organize content efficiently making it easier for users to navigate through
your website.
Users can find the information that are looking for without having to scroll through a long
single-page website
 Better User Experience:
Dividing content into multiple pages can prevent information overload and improve the user
experience, Users are more likely to stay engaged when that can access specific information
on different pages rather than being overwhelmed by a single lengthy page.
 Search Engine Optimization(SEO):
Search engines can index individual pages more efficiently, leading to better SEO. Ecah
page can be optimized for a specific keywords, improving the chances of your website
ranking higher in search engine results pages(SERPs).
 Faster Loading Time:
Smaller pages with focused content tend to load faster, especially on the slower internet
connections and devices. Faster loading times enhance user satisfaction and reduce bounce
rate.
 Easier Maintenance:
Managing and updating a website with multiple pages is often more straightforward. You
can update specific sections or pages without affecting the entire website, making
maintenance tasks more manageable.
 Encourages Exploration:
When users encounter links to different pages, they are encouraged to explore the website
further, potentially discovering more content and spending more time on the site.
 Facilitates Content Updates:

Dept. of CSE-DS, ATMECE, Mysuru Page 21

 Web Development

If you want to update specific content, you can do so without changing the entire website
layout. This flexibility is crucial for website that frequently updates their content, such as
news websites or blogs.
 Supports Different Purpose:
Different pages can serve various purposes, such as product pages, contact forms, about us
section, and more. Tailoring each page for a specific purpose helps in achieving the website
overall goals effectively.

SEO impact on multiple pages of a website:

A multi page website is generally more SEO-friendly than a single-page website for several
reasons:
 More Opportunities for optimization:
A multi-page website allows for more opportunities to optimize individual pages for
different keywords and phrases. Each page can be optimized with unique titles, meta
descriptions, headers, and content that target specific keywords, making it easier for search
engines to understand the content of the website.
 Better User experience:
A multi-page website can provide a better user experience by organizing information into
logical categories and making it easier for users to find what they’re looking for. This can
reduce bounce rates, increase time on site, and ultimately improve user enagment, which are
all positive signals for seach engine optimization.
 More opportunities for internal linking:
A multi-page website provides more opportunities for internal linking, which is an important
factor in SEO, internal linking can help distribute link equity and authority throughout the
website, improve navigation and user experience, and help search engines understand the
structure and hierarchy of the website.
 Easier to target long long-tail keywords:
Ling-tail keywords are more specific and targeted phrases that can be easier to rank for than
broad, competitive keywords. A multi-page website provides more opportunities to target
long-tail keywords by creating pages that focus on specific topics and phrases.

Dept. of CSE-DS, ATMECE, Mysuru Page 22

 Web Development

3.4 Website Development for the Company

The website created as a project www.drtechnologies.in is a multipage website which has
all the information about the company.
It has the following pages,
1)Homepage
Homepage had Introduction to the website, its purpose and the company, Navigation
links to other pages of the website, Engaging visual elements and a clear call-to-action
(CTA). A glimpse of the services provided the company. It also has a footer element with
the contact links of the company.

Figure 3.1 : Homepage snapshot

Figure 3.2 : Homepage footer snapshot

Dept. of CSE-DS, ATMECE, Mysuru Page 23

 Web Development

.
2) Services Page
• Concept to Product Services: Comprehensive service offerings covering the entire product
development lifecycle. From conceptualization and design to fabrication and production.
• Service Offerings:
Automation: Streamlining processes and enhancing efficiency through automation solutions.
Fabrication: Precision manufacturing services catering to various industries.
Designing: Innovative design solutions tailored to meet client specifications and
requirements.
3D Printing: Cutting-edge additive manufacturing capabilities for rapid prototyping and
production.
• Gallery Section: Showcase of previous projects and successful implementations. High-
quality images highlighting the diversity and excellence of services offered. Visual
representation of the company's expertise and capabilities.
• Navigation to Other Pages: Seamless navigation to other pages such as Homepage, About
Us, and Contact.

Dept. of CSE-DS, ATMECE, Mysuru Page 24

 Web Development

Figure 3.3, 3.4, 3.5: Snapshots of Service page

3) About Us Page: Has details about inception of the company and its history. A section
where the core values of the company are explained along with Company’s techniques and
policies

Figure 3.6 & 3.7: Snapshots of about us page

Dept. of CSE-DS, ATMECE, Mysuru Page 25

 Web Development

4) Contact Us page: The user can enquire by clicking on the particular sectors of work.
A message bar will display for every enquiry click. A different message bar for general
enquiry is also present. All their contact numbers, social media links to their accounts and
a map to their office is also present in the footer.

Figure 3.8 & 3.9: Snapshots of Contact Us page

It is suggested to visit the website to take a look at the transitions and animations which
cannot be seen through images.
Link: https://www.drtechnologies.in/

Dept. of CSE-DS, ATMECE, Mysuru Page 26

 Web Development

CHAPTER 4
REFLECTION NOTES

4.1 CONCLUSION

The D R Technologies internship Program exceeded my expectations, offering a

comprehensive exploration of web development intricacies. The curriculum, spanning
HTML, CSS, JavaScript, facilitated a hands-on learning experience. Designing a website
and successfully completing the project within a condensed timeframe showcased the
program's commitment to practical skill development. What truly set this program apart
was its multifaceted approach. In addition to the technical curriculum, participants
received invaluable insights into ChatGPT and artificial intelligence, broadening their
understanding of the evolving digital landscape. The emphasis on problem-solving
methodologies, coupled with discussions on social responsibility, added a thought-
provoking layer to the learning process, encouraging a holistic perspective on
technology's impact. Furthermore, the program fostered an environment conducive to
innovation and entrepreneurship. Participants were encouraged to think beyond code,
exploring creative solutions and entrepreneurial mindsets. This emphasis on holistic
development ensures that learners not only master the technical aspects but also cultivate
a forward-thinking, adaptable mindset crucial in today's dynamic tech industry. This
approach equips participants not only with the skills required for contemporary web
development but also with the ability to navigate the complexities of emerging
technologies and contribute ethically to the digital realm. In summary, D R technologies
Internship Program is a commendable initiative that goes beyond standard web
development training, providing a well-rounded educational experience that prepares
participants for the challenges and opportunities of the evolving digital landscape.

Dept. of CSE-DS, ATMECE, Mysuru Page 27

 Web Development

REFERENCES

1. Jennifer Niederst Robbins - A beginner’s guide to HTML, CSS, Javascript, and

Web Graphics, 2018
2. Hassan Djirdeh, Nate Murray, and Ari Lerner - Fullstack Vue: The Complete
Guide to Vue.js, 2018
3. Robin weiruch - The Road to Firebase: Your journey to master Firebase in
JavaScript, 2018
4. https://www.w3schools.com/whatis/
5. https://www.tutorialspoint.com/firebase/index.html

Dept. of CSE-DS, ATMECE, Mysuru Page 28