IPS Academy, Indore

Institute of Engineering and Science

(A UGC Autonomous Institute)
Department of Computer Science & Engineering
Data Science
2022-23

Internship Report
Submitted in partial fulfillment of the requirement for the award of Degree of
Bachelor of Technology in Computer Science & Engineering

TITLE : “ Web Development And Design ”

Submitted to: Submitted by:

Mr.Pankaj Pateria Gourav Muleva
(0808ds201018)
The primary goal of a web development internship is to gain practical experience in
designing, developing, and maintaining websites. This includes creating new websites,
improving existing ones, and incorporating new features and functionality. Additionally,
you will learn how to work with clients, develop project plans, and collaborate with
other developers.
 Table of contents
WEEK 1:
• OOPS
• Basics of Java
• Classes ,Objects &Methods

WEEK 2 :
• HTML introduction and basics
• HTML attributes
• Advance HTML

WEEK 3 :
• CSS Introduction & basics
• Overview of Bootstrap
• Advance Bootstrap

WEEK 4 :
• Introduction to javascript
• Overview of reactjs , python and Django

WEEK 5 :
• Overview on tools like Figma
• Brief idea about SEO
OOPS:
Object-oriented design started right from the moment computers were invented. Programming was there, and
programming approaches came into the picture. Programming is basically giving certain instructions to the
computer.
At the beginning of the computing era, programming was usually limited to machine language programming.
Machine language means those sets of instructions that are specific to a particular machine or processor, which
are in the form of 0’s and 1’s. These are sequences of bits (0100110…). But it’s quite difficult to write a
program or develop software in machine language.
It’s actually impossible to develop software used in today’s scenarios with sequences of bits. This was the main
reason programmers moved on to the next generation of programming languages, developing assembly
languages, which were near enough to the English language to easily understand. These assembly languages
were used in microprocessors. With the invention of the microprocessor, assembly languages flourished and
ruled over the industry, but it was not enough. Again, programmers came up with something new, i.e., structured
and procedural programming.

BASICS OF JAVA
The syntax of Java is similar to that of other programming languages like C++ and C#. Here are some of the
basic elements of Java syntax:

Comments: Comments are used to add notes or explanations to the code. In Java, there are two types of
comments: single-line comments, which start with //, and multi-line comments, which start with /* and end with
*/.
Example:
// This is a single-line comment

/* This is a
multi-line comment */

Variables: Variables are used to store data in memory. In Java, variables are declared using a data type (such as
int, double, or String) followed by a name.
Example:
int age = 25;
double price = 10.99;
String name = "John";

Control Structures: Control structures are used to control the flow of the program. Java has several types of
control structures, including if/else statements, loops, and switch statements.
Example:
if (x > y) {
System.out.println("x is greater than y");
} else {
System.out.println("x is less than or equal to y");
}

for (int i = 0; i < 10; i++) {

System.out.println(i);
}

switch (x) {
case 1:
 System.out.println("x is 1");
break;
case 2:
System.out.println("x is 2");
break;
default:
System.out.println("x is not 1 or 2");
break;
}
CLASSES IN JAVA:
public class Person {
// Class variables
private String name;
private int age;

// Class methods
public void setName(String newName) {
name = newName;
}

public void setAge(int newAge) {

age = newAge;
}

public void printInfo()

{ System.out.println("Name: " + name);
System.out.println("Age: " + age);
}
}

In this example, we've defined a class called Person with two instance variables (name and age) and three
methods (setName, setAge, and printInfo). The setName and setAge methods are used to set the values of the
name and age variables, respectively, and the printInfo method is used to print out the values of both variables.

Note that we've used the private access modifier to make the name and age variables accessible only within the
Person class. If we want to access these variables from another class, we would need to use getter and setter
methods (such as setName and setAge) to set and retrieve their values.

OBJECTS :
To create objects in Java, you can use the new keyword followed by the class name and parentheses. Here's an
example of how to create an object of the Person class we defined earlier:
Person john = new Person();

You can create as many objects of a class as you need, and each object will have its own set of instance variables
and method calls. For example, you could create another Person object called jane and set its name and age
variables to different values:

Person jane = new Person();

jane.setName("Jane Smith");
jane.setAge(30);
jane.printInfo();
OUTPUT :

Name: Jane Smith

Age: 30

Methods:
In Java, you can define methods inside a class to encapsulate a specific behavior or functionality. Here
is the syntax for defining a method in Java:
<access-modifier> <return-type> <method-name>(<parameter-list>) {
// Method body
// ...
return <return-value>;
}

Let's break down each part of this syntax:

<access-modifier>: This specifies the accessibility of the method. It can be one of the following
keywords: public, private, protected, or no access modifier (also known as package-private).

<return-type>: This specifies the type of value that the method returns. If the method doesn't return
anything, you can use the void keyword.

<method-name>: This is the name of the method. Method names should follow the camelCase naming
convention.

<parameter-list>: This is a comma-separated list of parameters that the method accepts. Each
parameter should be of a specific data type and have a unique name.

return <return-value>: This statement is used to return a value from the method. The <return-value>
should be of the same data type as the <return-type> specified earlier.

EXAMPLE:

public int sum(int a, int b) {

int result = a + b;
return result;
}

In this example, we've defined a public method called sum that accepts two integer parameters (a and
b). The method calculates the sum of these two parameters and stores the result in a local variable
called result. Finally, the method returns the value of result.
HTML introduction and basics
HTML stands for Hypertext Markup Language and is used to create the structure and content of web
pages. Here's an introduction to HTML syntax:

• HTML documents are plain text files with a .html file extension.
• HTML documents are made up of tags, which are enclosed in angle brackets < >.
• Most tags come in pairs, with an opening tag <tag> and a closing tag </tag>. The content
between the opening and closing tags is referred to as the tag's content.
• Some tags, such as the img tag, are self-closing and do not require a closing tag. They are
written as <tag />.
• HTML documents have a basic structure consisting of an opening <!DOCTYPE> declaration,
an html tag, a head tag, and a body tag.
• The head tag contains information about the document, such as the title of the page and links to
stylesheets and scripts.
• The body tag contains the visible content of the document, such as text, images, and other
media.

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my page.</p>
</body>
</html>

In this example, we have:

Declared the document type as HTML5 using the <!DOCTYPE html> declaration.
Created an HTML document using the html tag, which contains the head and body tags.
Used the title tag to set the page title to "My Page".
Used the h1 and p tags to create a heading and a paragraph of text in the body.
HTML is a markup language and does not have programming logic or variables, but it is the foundation
of all websites and web applications.
HTML attributes
HTML attributes are used to provide additional information about HTML elements. They are included
in the opening tag of an element, after the element's name.
Here are some common HTML attributes with examples and code:

class: This attribute is used to define one or more classes for an HTML element. Classes are used to
apply styles to elements using CSS. Example:
<div class="container">
<p class="text-red">This is a paragraph</p>
</div>

id: This attribute is used to give a unique identifier to an HTML element. IDs are often used to target
specific elements with CSS or JavaScript. Example:
<div id="header">
<h1>My Website</h1>
</div>

href: This attribute is used to define the URL of a link. Example:

<a href="https://www.google.com/">Go to Google</a>

target: This attribute is used to specify where to open the linked document. Example:
<a href="https://www.google.com/" target="_blank">Open Google in a new tab</a>

title: This attribute is used to provide additional information about an element when the user hovers
over it. Example:
<img src="image.jpg" alt="An image" title="A beautiful sunset">

These are just a few examples of HTML attributes. There are many others, and you can even create
your own custom attributes.

CSS INTRODUCTION:
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. It describes how a webpage should look: it
prescribes colors, fonts, spacing, and much more. In short, you can make your website
look however you want. CSS lets developers and designers define how it behaves,
including how elements are positioned in the browser.

While html uses tags, css uses rulesets. CSS is easy to learn and understand, but it
provides powerful control over the presentation of an HTML document.
CSS stands for Cascading Style Sheets and is used to add style and visual design to HTML
documents. Here's an introduction to CSS syntax:

CSS rules are made up of a selector and a declaration block.

• The selector targets one or more HTML elements that you want to apply styles to.
• The declaration block contains one or more declarations, which specify the styles you want to
apply to the selected element(s).
• Each declaration consists of a property and a value, separated by a colon.
Here's an example of a basic CSS rule:

h1 {
color: red;
font-size: 24px;
}
In this example, we have:

Used the selector h1 to target all <h1> elements in the HTML document.
Used the color property to set the text color to red.
Used the font-size property to set the font size to 24 pixels.
To apply this style to an HTML document, we need to link to the CSS file in the HTML document
using the link tag:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my page.</p>
</body>
</html>
In this example, we have:

Linked to a CSS file named styles.css using the link tag in the head section of the HTML document.
Used the rel attribute to specify that the link tag is linking to a stylesheet.
Used the href attribute to specify the URL of the CSS file.
Once the CSS file is linked, all <h1> elements in the HTML document will be styled according to the
CSS rule we defined earlier.

CSS offers a wide range of properties and values that can be used to style HTML elements, including
colors, fonts, backgrounds, borders, and more.
BOOTSTRAP:
Bootstrap is a popular open-source front-end framework that allows developers to quickly
and easily create responsive, mobile-first websites and web applications. It includes a
collection of CSS and JavaScript files, as well as a set of pre-designed components and
utilities that can be used to create consistent, visually appealing interfaces.

Here's an example of how to use Bootstrap to create a simple navigation bar:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"><
/script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></
script>
</body>
</html>
In this example, we have:
• Linked to the Bootstrap CSS file and JavaScript files using the link and
script tags.
• Used the nav and ul tags to create a navigation bar with three links.
• Used the navbar and navbar-expand-lg classes to define the basic structure and
behavior of the navigation bar.
• Used the navbar-brand class to create a link to the homepage.
• Used the navbar-toggler class to create a toggle button for the
collapsed navigation menu.
• Used the navbar-nav class to define the list of links in the navigation bar.
Bootstrap includes many other pre-designed components and utilities, such as buttons,
forms, cards, grids, and more, which can be easily customized and combined to create
complex layouts and interfaces.

Introduction to Javascript:
JavaScript is a high-level, dynamic, object-oriented programming language that is
commonly used for creating interactive and dynamic web pages. It is supported by all
modern web browsers and can be used both on the client-side (in the browser) and the
server-side (with the help of Node.js).

Here is the basic syntax for writing JavaScript code:

// Define a variable
var greeting = "Hello, World!";

// Define a function
function sayHello(name) {
console.log("Hello, " + name + "!");
}

// Call the function

sayHello("John");

// Use conditional statements

if (greeting === "Hello, World!")
{ console.log("This is the default greeting.");
} else {
console.log("This is a custom greeting.");
}

// Use a loop
for (var i = 0; i < 5; i++)
{ console.log("Count: " + i);
}
In this example, we:
Define a variable called greeting and set its value to the string "Hello, World!".
• Define a function called sayHello that takes a parameter called name and logs a
greeting to the console.
• Call the sayHello function with the argument "John".
• Use an if statement to check if the value of greeting is equal to "Hello, World!"
and log a message to the console accordingly.
• Use a for loop to log a message to the console five times.
JavaScript includes many built-in functions and objects, as well as libraries and
frameworks that can be used to simplify and speed up development.

OVERVIEW ON REACT JS , PYTHON and DJANGO:

React.js is a popular JavaScript library for building userinterfaces. It was developed by

Facebook and has gained widespread adoption due to its efficiency and flexibility.
React.js uses a component-based architecture, where each component represents a part
of the UI and can be reused and composed to create complex UIs. React.js also supports
a virtual DOM, which allows for efficient updates to the UI without the need to re-
render the entire page.

Python is a high-level, interpreted programming language that is widely used for web
development, scientific computing, data analysis, artificial intelligence, and many other
applications. Python has a clear and concise syntax, which makes it easy to learn and
use. It also has a large and active community, which has contributed to a vast ecosystem
of libraries and frameworks. Python is often used in combination with web frameworks
such as Django, Flask, and Pyramid to create web applications.

Django is a popular high-level web framework for Python that follows the Model-
View- Controller (MVC) architecture. It provides a set of tools and libraries that make it
easy to build robust and scalable web applications. Django includes an Object-
Relational Mapping (ORM) system that makes it easy to interact with databases, as well
as a templating engine that allows developers to create dynamic HTML templates.
Django also includes many built-in security features, such as CSRF protection and
password hashing, that help protect against common web vulnerabilities.
FIGMA:
Figma is a web-based collaborative design tool that allows
teams to work together on designing interfaces, graphics, and
prototypes. It was launched in 2016 by Figma Inc., a San
Francisco-based company founded by Dylan Field and Evan
Wallace.
Figma allows designers to create, share, and collaborate on
designs in real-time, which makes it an ideal tool for remote
teams. It is also a cloud-based tool, which means that
designers can access their designs from any computer with an
internet connection, and changes made by one team member
are instantly visible to everyone on the team.
Figma has a range of features that make it a popular choice
among designers, including vector networks, constraints, and
components. Vector networks allow designers to create
complex shapes and paths with ease, while constraints ensure
that designs are responsive and adaptable to different screen
sizes. Components enable designers to create reusable design
elements that can be quickly and easily replicated throughout
a design.
Overall, Figma is a powerful and user-friendly design
tool that is well-suited for both individual designers and
teams working on complex design projects.

OVERVIEW ON SEO:
Search Engine Optimization (SEO) is the practice of optimizing websites
to improve their visibility and ranking in search engine results pages
(SERPs). In other words, SEO is the process of increasing the quality and
quantity of organic (non-paid) traffic to a website from search engines such
as Google, Bing, and Yahoo.
SEO involves various techniques and strategies that are designed to improve
a website's relevance, authority, and user experience, which in turn can help
increase its ranking in search engine results pages. These techniques include
keyword research, on-page optimization, off-page optimization, link
building, content creation, and technical optimization.
Keyword research involves identifying the words and phrases that people use
to search for products or services that are relevant to a website's content. On-
page optimization involves optimizing website content and elements such as
title tags, meta descriptions, header tags, and image alt tags. Off-page
optimization involves building high-quality backlinks to a website from other
websites to increase its authority and relevance.
Link building involves acquiring links from other websites that point to a
website's pages, which can help increase its authority and relevance. Content
creation involves creating high-quality and relevant content that engages and
informs website visitors. Technical optimization involves improving a
website's technical infrastructure and elements such as page speed, mobile-
friendliness, and site architecture.
Overall, SEO is an important digital marketing strategy that can help
businesses improve their online visibility, drive more traffic to their website,
and ultimately increase their revenue and profitability.

OUTCOMES TO BE INCLUDED:
Here are some potential outcomes to include:

• Increased proficiency in web development languages, such as HTML,

 CSS, and JavaScript.
• Understanding of web development frameworks and libraries, such
as Bootstrap.
• Experience working with version control systems, such as Git.
• Understanding of web design principles and best practices.
• Familiarity with web development tools, such as code
editors, debuggers, and testing frameworks.
• Hands-on experience building and deploying web applications.
• Improved communication and collaboration skills through working
with a team or interacting with clients.
• Increased understanding of industry trends and the latest technologies
in web development.
• Ability to apply web development skills to real-world scenarios
and solve problems effectively.