A SUMMER INTERNSHIP REPORT on WEB DEVELOPMENT

Submitted in partial fulfillment of the requirements of the degree

BACHELOR OF TECHNOLOGY

In
COMPUTER SCIENCE AND ENGINEERING

By

MOTHUKURI RAMYA(O180301)

Under the supervision of

INEURON

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

RAJIV GANDHI UNIVERSITY OF KNOWLEDGE TECHNOLOGIES
ONGOLE CAMPUS
2023.
 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
RAGIV GANDHI UNIVERSITY OF KNOWLEDGE TECHNOLOGIES
ONGOLE CAMPUS 2023

CERTIFICATE

This is to certify that the internship report entitled WEB DEVELOPMENT submitted by
MOTHUKURI RAMYA(O180301) in partial fulfillment of the requirement for the award of
Bachelor of Technology in Computer Science Engineering is a record of bonafide internship carried
out under my supervision during the academic year 2022-23.

The report hasn’t been submitted previously in part or in full to this or any other university or
institution for the award of any degree.

Mr.G.MOHAN RAO M.Tech, Mr. B. SAMPATH BABU ,

Assistant Professor, Head of Department(I/C),
Department of CSE, Department of CSE,
RGUKT, ONGOLE RGUKT, ONGOLE .

ii
 APPROVAL SHEET

This report entitled WEB DEVELOPMENT INTERNSHIP submitted by MOTHUKURI

RAMYA(O180301) is Mr. G. MOHAN RAO M.Tech approved for the degree of Bachelor of
Technology in COMPUTER SCIENCE AND ENGINEERING

Examiner

Supervisor

Chairman

iii
 DECLARATION

I declare that this written submission represents my ideas in my own words and where others'
ideas or words have been included, I have adequately cited and referenced the original sources.
I also declare that I have adhered to all principles of academic honesty and integrity and have
not misrepresented or fabricated or falsified any idea/data/fact/source in my submission. I
understand that any violation of the above will be cause for disciplinary action by the Institute
and can also evoke penal action from the sources which have thus not been properly cited or
from whom proper permission has not been taken when needed.

Signature

Mothukuri Ramya

ID: O180301

Date:

iv
 ACKNOWLEDGEMENT

Firstly, I would like to thank Ineuron for giving the opportunity to do Internship on Web Development.
I am highly indebted to Mr. G. MOHAN RAO M.Tech for his guidance and constant supervision as
well as for providing necessary information regarding the internship and also for their kind
cooperation, encouragement and their support in completing the internship. I would like to express my
special gratitude and thanks to our COMPUTER SCIENCE AND ENGINEERING branch H.O.D
Mr.B.SAMPATH BABU and Director of Ongole-RGUKT Prof. B.JAYARAMI REDDY sir for
giving me such attention and time.
I have taken efforts in this internship. However, it could not have been possible without the kind
support and help of many individuals and RGUKT. I would like to extend my sincere thanks to all of
them.

With Sincere Regards,

Mothukuri Ramya.

Date:

v
INTERNSHIP CERTIFICATE

vi
 ABSTRACT

Web development refers to the creating, building, 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.Web development can range from
developing a simple single static page of plain text to complex web applications, electronic businesses,
and social network services.
I have done one project which was assigned to me in this internship. This project are designed by using
Front end technologies like HTML, CSS, JAVASCRIPT technologies play a key role in the graphical
user interface and backend technologies is for login and signup features

vii
 TABLE OF CONTENTS

Description Page No.

TITLE i
CERTIFICATION 2

APPROVAL SHEET 3

DECLARATION 4

ACKNOWLEDGEMENT 5

INTERNSHIP CERTIFICATE 6

ABSTRACT 7

1.INTRODUCTION
1.1Features 1

2.REQUIREMENT ANALYSIS
2.1 Requirement Specification 2
2.1.1 Hardware Requirements 2
2.1.2 Software Requirements 2
2.2 Technologies Used 2-4

3.SYSTEM DESIGN
3.1 Use Case Diagram 5
3.2 State Diagram 6
3.3 Sequence Diagram 7
3.4 Class Diagram 8

viii
4.SOFTWARE ENVIRONMENT 9

5.IMPLEMENTATION
5.1 Sample Code 10-16

5.2 Sample Screenshots 17-20

7.CONCLUSION

7.1 Conclusion 21

8.REFERENCES 22

ix
 CHAPTER 1
INTRODUCTION

Web development refers to the process of creating, building, and maintaining websites and web
applications. It encompasses a variety of tasks and disciplines that focus on the production of visually
engaging and user-friendly content for the internet. Web development includes aspects such as web
design, web programming, web publishing, and database management.
I have done my summer internship at INeuron as WEB DEVELOPMENT INTERN by
completing the project which was assigned to me. It is a great platform for internship to show my
skills. My internship experience at the technology company was a valuable stepping stone in my
professional journey. The projects which areassigned to mentioned given below briefly.

1.QUIZ:

There are lot of quizzing websites to test our amount of knowledge in any aspect. We have many
benefits by playing quizzes, one can improve their problem solving skills in that particular field, a
competitive spirit and zeal to learn more will be developed, gives more confidence that this amount
of knowledge we have on a particular thing. Hence, here is our website providing to play quiz on
different programming languages.By attempting one level and completing it, user gets more interest
to complete the next levels. Students who are interested to test their knowledge on particular
programming language can attempt our quizzing website.

1
 CHAPTER – 2
REQUIREMNT ANALYSIS

In order to run an application we need to have some basic configuration related to hardware and
software.The following were listed requirements to run the projects smoothly

2.1 Requirement Specification

2.1.1 Hardware Requirements

● Processor : Intel i3 or above

● Memory : 4 GB RAM or above

2.1.2 Software Requirements

● Operating System : Windows / Linux / Mac /Android

● Browser : Chrome /Safari/Mozilla firefox

2.2 Technologies Used

2.2.1 HTML

It is a markup language for formatting and displaying web documents and web pages.
It gives basic structure to the web page without any styling. HTML elements tell the browser
how to display the content. It can be assisted by technologies such as Cascading Style Sheets
and scripting languages such as JavaScript for styling and functionality

2
 • HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages

• HTML describes the structure of a Web page

• HTML consists of a series of elements

• HTML elements tell the browser how to display the content

• HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

2.2.2 CSS

Cascading Style Sheets is a style sheet language used for describing the presentation of
a document written in a markup language such as HTML or XML.
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once

• External stylesheets are stored in CSS files

2.2.2.1 Types of CSS

● Inline CSS ( Using styles as attributes in html elements )

● Internal CSS (Including a separate Style tag in html document)

● External CSS (Using external file for styling)

2.2.3 Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first

3
front-end web development. It contains HTML, CSS and JavaScript- based design templates for
typography, forms, buttons, navigation, and other interface components.It makes it possible for
a web page or app to detect the visitor's screen size and orientation and automatically adapt the
display accordingly.

• Bootstrap is a free front-end framework for faster and easier web development
• Bootstrap includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many other, as well as optional
JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive designs

2.2.4 JavaScript

JavaScript, often abbreviated as JS, is a programming language that is one of the core
technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites
use JavaScript on the client side for webpage behavior, often
incorporating third-party libraries It is used by programmers across the world to create dynamic
and interactive web content like applications and browser JavaScript is the
world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

4
 CHAPTER-3

SYSTEM DESIGN

3.1 Use Case Diagram:

Use-case diagrams describe the high-level functions and scope of a system. These diagrams also
identify the interactions between the system and its actors. The usecases and actors in use-case
diagrams describe what the system does and how the actors use it,but not how the system operates
internally.

5
3.2 State Diagram:
A state diagram is used to represent the condition of the system or part of the systemat finite
instances of time. It’s a behavioral diagram and it represents the behavior using finite state
transitions. State diagrams are also referred to as State machines and State-chart Diagrams. These
terms are often used interchangeably. So simply,a state diagram is used to model the dynamic
behavior of a class in response to time.

6
3.3 Sequence Diagram:
A sequence diagram simply depicts interaction between objects in sequential order i.e. the order in
which these interactions take place. We can also use the terms event diagrams or event scenarios to
refer to a sequence diagram. Sequence diagrams describe how and in what order the objects in a
system function. These diagrams are widely used by businessmen and software developers to
document and understand requirements for newand existing systems.

7
3.4 Class Diagram:
Class diagrams are the blueprints of your system or subsystem. You can use class diagrams to model
the objects that make up the system, to display the relationships between the objects, and to describe
what those objects do and the services that they provide. Class diagrams are useful in many stages
of system design.

8
 CHAPTER 4

SOFTWARE ENVIRONMENT

4.1 Visual Studio Code (IDE)

Visual Studio Code, also commonly referred to as VS Code is a source-code editor

made by Microsoft for Windows, Linux and macOS. Features include support for
debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and
embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install
extensions that add additional functionality.

4.2 CHROME OR ANY WEBBROWSER

A web browser is application software for accessing websites. When a user requests a
web page from a particular website, the browser retrieves its files from a web server and
then displays the page on the user's screen. Browsers are used on a range of devices,
including desktops, laptops, tablets, and smartphones.

9
 CHAPTER - 5
IMPLEMENTATION
5.1 Working

Responsive web design is a design approach that ensures that a website's layout
and content are optimized for viewing on any device, regardless of screen size or
resolution.This is achieved by using a combination of flexible grids, layout structures, and
media queries.

Flexible grids are based on the concept of using relative units, such as percentages, rather than
fixed units, such as pixels, to define the size of layout elements. This allows the layout to
adjust and scale seamlessly as the screen size changes.

Layout structures, such as flexbox and CSS grid,are usedto arrange and position
elements on the page and can be configured to automatically adjust the layout based on
the size of the viewport.

Media queries are a feature of CSS that allows the designer to specify different styles for
different media types, such as screen, print, or mobile. By using media queries, the designer
can apply specific stylesbased on the dimensions of the viewport, allowing the layout to
adapt to the size of the screen.

Together, these techniques allow a website to maintain a consistent look and feel across a wide
range of devices, without requiring separate designs for each device.

10
NOTE :

1. This project has 20+ code files consisting of more than 2500+ lines of code, 6 images

2. The Project is confidential and cannot be disclosed according to the terms of the company so
here by I am providing a series of images that stand as proof of my work

SAMPLE CODE :-

Quiz.html
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-

awesome.min.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">

<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

<!-- Google Font -->

<link

href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"

rel="stylesheet"/>

11
<link rel="stylesheet" href="quiz.css">

</head>

<body>

<div class="topnav" id="navbar">

<a class="active" onclick="logo()" id="image">

<img src="img/36.jpg" height="50px" width="50px" id="logo"/>

</a>

<a href="#home">Home</a>

<a href="#crs">Courses</a>

<a href="#au">Contact Us</a>

<a href="login.php" style="float:right"><span id="logout">Log Out</span></a>

<a class="icon" onclick="myFunction()">

<i class="fa fa-bars"></i>

</a>

</div>

<div id="fullimageview">

<img id="fullimage"/>

<span id="closebutton" onclick="closefullview()">&times;</span>

</div>

12
<a name="home"></a>

<div class="banner">

<div class="ban1">

<h3 class="a1">Don't waste Time</h3>

<!--<h3 class="a2">Let's</h3>-->

<h1 class="a3"><b>TAKE A QUIZ</b></h1>

<h3 class="a6">-Attempt more, learn more</h3>

</div>

</div>

<a name="crs"></a>

<div class="cour">

<div class="row1">

<h1 class="section-heading">Available Courses</h1>

</div>

<div class="row1">

<div class="column1">

<div class="card1">

<div class="icon-wrapper">

<img class="lang" src="img/21.jpeg"/></div>

13
 <h3 class="hd">C Language</h3>

<p class="hp">

Unlike most computer languages C is a "What you see is all you get" programming language.
</p>

<a href="index_doop.html"><button class="bt"> play </button></a>

</div></div>

<div class="column1">

<div class="card1">

<div class="icon-wrapper1">

<img class="lang" src="img/22.png"/>

</div>

<h3 class="hd">Python</h3>

<p class="hp">

The canonical, "Python is a great first language", elicited,"Python is the is a great last language"

</p>

<a href="ind_p.html"><button class="bt"> play </button></a>

</div>

</div>

<div class="column1">

<div class="card1">

14
 <div class="icon-wrapper1">

<img class="lang" src="img/23.jpeg"/>

</div>

<h3 class="hd">C++</h3>

<p class="hp">

C makes it easy to shoot yourself in foot; C++ makes it harder, but when you do it blows away
your whole leg.

</p>

<a href="ind_cp.html"><button class="bt"> play </button></a>

</div> </div>

<div class="column1">

<div class="card1">

<div class="icon-wrapper1">

<img class="lang" src="img/24.png"/></div>

<h3 class="hd">Java</h3>

<p class="hp">

Life is like a JAVA Programming, A small mistake. & there will be a Syntax ERROR!..
</p>

<a href="ind_j.html" ><button class="bt"> play </button></a> </div>

</div> </div>

</div>

15
 quiz.js
function myFunction() {
var x = document.getElementById("myTopnav");

if (x.className === "topnav") {

x.className += " responsive";} else {x.className = "topnav"; }

function logo(){

document.getElementById("fullimage").src="img/36.jpg";

document.getElementById("fullimageview").style.display="block";}

function closefullview(){

document.getElementById("fullimageview").style.display="none";}

window.onscroll = function() {navFunction()};

var navbar = document.getElementById("navbar");

// Get the offset position of the navbar

var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you
leave the scroll position

function navFunction() {

if (window.pageYOffset >= sticky) {

navbar.classList.add("sticky")

} else {

navbar.classList.remove("sticky"); }}

16
5.4 Sample Screenshots:

17
18
19
20
 CHAPTER 6
CONCLUSION

7.1 Conclusion
I am immensely grateful to the iNeuron team for providing me with learning experience.Working at
iNeuron has been an enriching experience and provided me with a solid foundation.From this
internship I learn a lot of things in web development.It was a great opportunity to improve personal
and profesional skills.It have boosted my professional skills to higher level.Getting an internship at
iNeuron showed me the difference between learning in theory and in practice.This journey made
me more interested and excited to done the project

21
 CHAPTER 8
REFERENCES

• https://quizizz.com/admin/quiz/57888a73cc31b46d56082dce/computer-programming-
languages

• https://www.proprofs.com/quiz-school/topic/programming-language

• https://www.triviaplaza.com/programming-languages-quiz/

• https://ineuron.ai/

22
23