INTERNSHIP REPORT

On
WEB DEVELOPMENT

Submitted in partial fulfillment of the requirements for the award of the

Degree of [B.Sc CS ] of VALLUVAR COLLEGE OF SCIENCE AND
MANAGEMENT

By

NAME: BASKARAN.R
REG.NO:CB20S200451

Under the Guidance of

MR.N.ARUN
ASSISTANT PROFESSOR,
DEPARTMENT OF COMPUTER SCIENCE,
VALLUVAR COLLEGE OF SCIENCE AND MANAGEMENT.

VALLUVAR
COLLEGE OF SCIENCE &
MANAGEMENT,

(Affiliated to Bharathidasan University,

Tiruchirappalli)
Karur 639003, Tamilnadu.
 DECLARATION

I am BASKARAN.R do hereby declare that the Internship Report has been

undertaken by me as part of my studies in the degree [B.Sc.CS]. I have completed this study

under the guidance of MR.N.ARUN Assistant Professor, Department of COMPUTER

SCIENCE, VALLUVAR COLLEGE OF SCIENCE AND MANAGEMENT and INTER

DECCAAN SOLUTIONS their guidance.

I also declare that this work has not been submitted for the award of any degree,

diploma, associateship or fellowship or any other title in this University or any other

University.

Place: Signature of the student

Date:
 VALLUVAR
COLLEGE OF SCIENCE & MANAGEMENT,
KARUR - 3

CERTIFICATE

This is to certify that the Internship report submitted by BASKARAN.R,

CB20S200406 ,is a record of internship work done by his/her during the Academic Year

2022-23 at INTER DECCAAN SOLUTIONS under my guidance and supervision in

partial fulfillment of degree. This Internship report has not been submitted for the award of

any degree, diploma, associateship or fellowship or any other title in this University or any

other University.

Place: Signature of the guide with date

Date:
 ACKNOWLEDGEMENT

I am indebted to many people who helped me accomplish this internship successfully.

First, I thank Mr. K.SENGUTTUVAN, the Chairman of Valluvar College of

Science and Management for giving me the opportunity to do my Internship Project.

I thank Dr.G.VINCENT, the Principal for granting permission to undertake this internship
program.

I thank S.ANANDAN., HOD of COMPUTER SCIENCE for the constant support

in completing this internship program.

I thank INTER DECCAAN SOLUTIONS for allowing me to undertake this

internship program and supported me gain the knowledge to bridge the gap between the

curriculum and the industry.

I thank MR.N.ARUN, for his/her support and guidance during the course of my

Internship. I remember his/her with much gratitude for his patience and motivation, but for

which I could not have submitted this work.

I thank my parents for their blessing and constant support, without which this internship

would not have seen the light of day.

Place :

Date :

Signature of the student with name and roll number

 INDEX

S.NO CONTENTS PAGE NO

1. Introduction

2. Learning objectives

3. Organization profile

4. Domain specification

5. Challenges and Opportunities in the Domain

6. Technology
[i] HTML
[ii]CSS
[iii] JAVA SCRIPT

7. Tools description

8. Learning Outcomes

9. Photos

10. Conclusion

11. Reference
 INTRODUCTION

 The Web Development internship offers practical work experience

and an introduction to creating and improving web-based systems.

This internship will involve challenging opportunities, real world

projects. It’s a fantastic opportunity to gain hands-on experience in the

web development field.

 Web development is the work involved in developing a website for

the Internet (World Wide Web) or an intranet (a private network).

Web development can range from developing a simple single static

page of plain text to complex web applications, electronic businesses,

and social network services.

LEARNING OBJECTIVES
 Understand the principles of creating an effective web page,

including an in-depth consideration of information architecture.

 Become familiar with graphic design principles that relate to web

design and learn how to implement theories into practice.

 Develop skills in analyzing the usability of a web site.

 Understand how to plan and conduct user research related to web

usability.

 Learn the language of the web: HTML and CSS.

 Learn techniques of responsive web design, including media

queries.

 Be able to embed social media content into web pages.

 ORGANIZATION PROFILE:

INTER DECCAAN SOLUTIONS

COMPANY NAME : INTER DECCAAN SOLUTIONS,KARUR.

COMPANY WEBSITE: http://www.interdeccaan.in/
COMPANY MISSION:

Company's mission is to offer paralleled solutions to our clients

based on Innovative Thinking, which will enable them to run ahead
of their competitors.

 To value our valuable customers, we have

 High depth in Software Skills
 Strong team with tactical team members
 Emphasize creativity, originality
 Testing before delivering
 Deliver in Time
 Consistent delivery of high-quality products at reasonably
low costs
 Strict maintenance of confidentiality
 DOMAIN SPECIFICATION

DOMAIN NAME: WEB DEVELOPMENT

ABOUT:

Web development refers to the building, creating, and maintaining of

websites. It includes aspects such as web design, web publishing, web

programming, and database management. It is the creation of an application

that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

Web: It refers to websites, web pages or anything that works over the

internet.

Development: Building the application from scratch.

Web Development can be classified into two ways:

Frontend Development

Backend Development
 CHALLENGES AND OPPURNITIES IN WEB
DEVELOPMENT
There are many challenges in web development.
 Setting Goals.
The first thing you have to overcome in a project is to
clearly define your goals. Goals can affect or reduce the quality of
your website or web application. Starting with a specific goal
simplifies the process and allows developers to focus on the right
direction.
 Designing and UI (User Interface)
The first thing that catches the viewer’s attention is usually
an attractive design. People like to interact with attractive
designs as well as web development. Everything created for
marketing should be of high quality.
 Speed and Performance.
Search engines can provide Google users with thousands
of results by searching for just one word. With so many sites to
choose from, users don’t have to wait for the site to load.
 Working Frame and Knowledge Required.
There are some frameworks, programming languages, and
equipment to be had withinside the net improvement industry, for
constructing net apps.
 Growth and Scalability.
 Scalability refers to the growth of a web application over
time. This is a long-term plan that starts with a basic business
model and plans to expand in the future.
 Safety and Security
Security is one of the most worrisome issues for modern
enterprises with a large online presence. Protecting your
application is important for protecting sensitive information.

TECHNICAL CHALLENGES
 Browser compatibility
Browser and platform compatibility are typically one of the
biggest challenges for web developers. Therefore, you need to make
sure the sites work on all the existing browsers on the internet and
devices of different screen sizes.
 User experience
Designing UI and developing UX both need to go
hand in hand if you want to create innovative experiences for your
users. However, there should be an alignment between the designing
process and the intended outcome to build reliable website UX.
 Performance & speed
Achieving maximum loading speed for a website is a crucial
challenge for any web development company. According to Neil
Patel, 47% of the users expect a website to load in two seconds,
which is not an easy feat considering the many elements that render
with every click.
 Scaling websites
Scaling websites is about sustainable performance, whether
it’s 10 users per minute or 100 visitors per minute. However, the
 scalability of a website is not just about scaling servers but about
several other elements.
 Security
Website security is essential, especially when 50% of web
applications are susceptible to high-risk vulnerabilities.
Additionally, cyberattacks have increased drastically over the past
few years, with only 5% of enterprise data folders protected against
threats.

OPPURTUNITIES

SCOPE OF WEB DEVELOPER IN FUTURE

Studying web design and development provides you with the
technical and design-related skills needed for a career in the web,
software development and computer science industries

 Applications developer
 Game developer
 Multimedia programmer
 Multimedia specialist
 SEO specialist
 UX designer
 UX researcher
 Web content manager
 Web designer
 Web developer

BENEFITS OF WEB DEVELOPMENT:

 Runs on any OS
  Runs using easy URL
 Need not be downloaded: 
 Need not be updated like apps: 
 Cost Efficient

SOFTWARE DETAILS
SOFTWARE INSTALLATION

SOFTWARE

 Visual studio code

HOW TO JAVA PATH SETTING

 On Windows/Linux - File > Preferences > Settings
 On macOS - Code > Preferences > Settings

Visual Studio Code is a free source-code editor made by

Microsoft for Linux, Windows, and mac OS. VS Code has support for
debugging, syntax highlighting, intelligent code completion, snippets,
code refactoring, and embedded Git. Users can change the theme, add
keyboard shortcuts, edit preferences, and install extensions to add
functionality.

VARIABLE PATH :
 C:\Users\BOSS\Desktop\new\.vscode
 TECHNOLOGY
 Browsers
 Browsers are the interpreters of the web. They request information
and then when they receive it, they show us on the page in a
format we can see and understand.
 Google Chrome - Currently, the most popular browser brought to
you by Google
 Safari - Apple’s web browser
 Firefox - Open-source browser supported by the Mozilla
Foundation
 Internet Explorer - Microsoft’s browser. You will mostoften hear
web developers complain about this one.
 HTML
 HTML is a markup language. It provides the structure of a website
so that web browsers know what to show.
 CSS
 CSS is a Cascading Style Sheet. CSS let’s web designers change
colors, fonts, animations, and transitions on the web. They make
the web look good.
  LESS - a CSS pre-compiler to make working with CSS easier and
add functionality
 SASS - a CSS pre-compiler to make working with CSS easier and
add functionality
 Programming Languages
 Programming languages are ways to communicate to computers
and tell them what to do. There are many different programming
languages just like there are many different lingual languages
(English, Spanish, French, Chinese, etc). One is not better than the
other. Developers typically are just proficient at a couple so they
promote those more than others.
 Frameworks
 Frameworks are built to make building and working with
programming languages easier. Frameworks typically take all the
difficult, repetitive tasks in setting up a new web application and
either does them for you or make them very easy for you to do.
 Libraries
 Libraries are groupings of code snippets to enable a large amount
of functionality without having to write it all by yourself. Libraries
typically also go through the trouble to make sure the code is
efficient and works well across browsers and devices (not always
the case, but typically they do).
 Databases
 Databases are where all your data is stored. It’s like a bunch of
filing cabinets with folders filled with files. Databases come
mainly in two flavors: SQL and NoSQL. SQL provides more
structure which helps with making sure all the data is correct and
 validated. NoSQL provides a lot of flexibility for building and
maintaining applications.
 Client (or Client-side)
 Client’s can be desktop computers, tablets, or mobile devices.
There are typically multiple clients interacting with the same
application stored on a server.
 Server (or Server-side)
 A server is where the application code is typically stored. Requests
are made to the server from clients, and the server will gather the
appropriate information and respond to those requests.
 Front-end
 The front-end is comprised of HTML, CSS, and Javascript. This is
how and where the website is shown to users.
HTML CODING FOR LOGIN FORM:
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'
">Login</button>

<!-- The Modal -->

<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">&times;</span>

  <!-- Modal Content -->

  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <img src="img_avatar2.png" alt="Avatar" class="avatar">
    </div>

    <div class="container">
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter
Username" name="uname" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter
Password" name="psw" required>

      <button type="submit">Login</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Reme
mber me
      </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').s
tyle.display='none'" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>
CSS CODING FOR LOGIN FORM:
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */

.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}
JAVASCRIPT CODING FOR LOGIN FORM:
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
 TOOLS DESCRIPTION

WEB DEVELOPMENT TOOLS:

Various tools and technology were used during our internship training.
Some of them are listed below:

 HTML
 CSS
 JAVA SCRIPT
1.HTML

HTML stands for Hyper Text Mark-up Language. It is used to

design web pages using mark-up language. HTML is the combination of
Hypertext and Mark-up language. Hypertext defines the link between the
web pages. Mark-up language is used to define the text document within
tag which defines the structure of web pages. HTML5 is the fifth and
current version of HTML. It has improved the mark-up available for
documents and has introduced application programming interfaces (API)
and Document Object Model (DOM).
Below example illustrate the HTML content:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p> This is a paragraph. </p>
</body>
</html>
2.CSS
Cascading Style Sheets, fondly referred to as CSS, is a simply designed
language intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of the HTML that
makes up each web page.
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS.
Below example illustrate the CSS content:
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 Demo</title>
<style>
.intern { font-size:40px; font-weight:bold; color:green; }
body { text-align:center; }
</style>
</head>
<body>
<div class = "intern">Hello World!
</div> <aside> <div>This is Insiya Badshah</div> </aside>
</body>
</html>
3.JavaScript
JavaScript is a lightweight, cross-platform and interpreted scripting
language. It is well-known for the development of web pages, many non-
browser environments also use it. JavaScript can be used for Client-side
developments as well as Server-side developments.
Below example illustrate the java script content:
const num1 = 5;
const num2 = 3;
// add two numbers
const sum = num1 + num2;
// display the sum
console.log('The sum of ' + num1 + ' and ' + num2 + ' is: ' + sum);
LEARNING OUTCOME
 Be able to use the HTML programming language

 Resolves written HTML codes

 .Runs the page he/she has designed using HTML codes

 Be able to use the Design Programs.

 Uses Microsoft Expression Web 4 programme.

 Designs site and page via Microsoft Expression Web 4 programme

 Uses the program Web Page Maker

 Designs site and page via Web Page Maker programme

 Publishes the site he/she designed

 Uses Domain Name and services.

 Be able to make changes on the Site

 .Updates on the site when needed.

PHOTOS
 CONCLUSION
In today's Web development, a good page design is essential.
 A bad design will lead to the loss of visitors and that can lead to a loss
of business.
 In general, a good page layout has to satisfy the basic elements of a
good page design. This includes color contrast, text organization, font
selection, style of a page, page size, graphics used, and consistency.
 In order to create a well-designed page for a specific audience.
 The developer needs to organized and analyze the users' statistics and
the background of the users.
 Although it can be hard to come up with a design that is well suited to
all of the users, there will be a design that is appropriate for most of the
audience.
 The better the page design, the more hits a page will get. That implies
an increase in accessibility and a possible increase in business.

REFERENCE