Ramya Summer Intern
Ramya Summer Intern
Ramya Summer Intern
BACHELOR OF TECHNOLOGY
In
COMPUTER SCIENCE AND ENGINEERING
By
MOTHUKURI RAMYA(O180301)
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.
ii
APPROVAL SHEET
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.
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
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
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.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
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 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
2.2.3 Bootstrap
• 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.
4
CHAPTER-3
SYSTEM DESIGN
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
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>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
<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>
</a>
<a href="#home">Home</a>
<a href="#crs">Courses</a>
</a>
</div>
<div id="fullimageview">
<img id="fullimage"/>
</div>
12
<a name="home"></a>
<div class="banner">
<div class="ban1">
<!--<h3 class="a2">Let's</h3>-->
</div>
</div>
<a name="crs"></a>
<div class="cour">
<div class="row1">
</div>
<div class="row1">
<div class="column1">
<div class="card1">
<div class="icon-wrapper">
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>
</div></div>
<div class="column1">
<div class="card1">
<div class="icon-wrapper1">
</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>
</div>
</div>
<div class="column1">
<div class="card1">
14
<div class="icon-wrapper1">
</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>
</div> </div>
<div class="column1">
<div class="card1">
<div class="icon-wrapper1">
<h3 class="hd">Java</h3>
<p class="hp">
Life is like a JAVA Programming, A small mistake. & there will be a Syntax ERROR!..
</p>
</div> </div>
</div>
15
quiz.js
function myFunction() {
var x = document.getElementById("myTopnav");
function logo(){
document.getElementById("fullimage").src="img/36.jpg";
document.getElementById("fullimageview").style.display="block";}
function closefullview(){
document.getElementById("fullimageview").style.display="none";}
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you
leave the scroll position
function navFunction() {
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