WEB DEVELOPMENT RGIT

CHAPTER - 1

INTRODUCTION

In the bustling city of Bangalore, India’s technological hub, Blitz Jobs Bangalore has
established itself as a prominent recruitment agency. With a strong presence in the city, the
agency has built a reputation for providing comprehensive staffing solutions to various
industries. Founded on the principles of innovation, integrity, and excellence, Blitz Jobs
Bangalore has become a trusted partner for businesses seeking top talent. Their expertise
lies in understanding the unique needs of clients and delivering personalized recruitment
services, making them a leader in the recruitment industry.
With a team of experienced professionals and a cutting-edge approach, Blitz Jobs
Bangalore has revolutionized the way businesses approach hiring. Their commitment to
excellence has earned them a loyal client base across diverse sectors. Whether it’s
permanent staffing, temporary staffing, contract staffing, or recruitment process
outsourcing, Blitz Jobs Bangalore has the expertise to deliver exceptional results.

Dept. of ECE 2023-2024 1

WEB DEVELOPMENT RGIT

CHAPTER - 2

ABOUT THE COMPANY

Blitz Jobs Bangalore is a dynamic recruitment agency that has transformed the way
businesses approach talent acquisition. Since its inception in 2020, the company has
experienced rapid growth, becoming a leading recruitment firm in Bangalore. Their success
can be attributed to their team of experienced professionals, led by industry experts, who
have a deep understanding of the local job market and the evolving needs of businesses.

The company's innovative approach to recruitment has earned them a reputation for
delivering top talent to clients across various industries. Their services are designed to cater
to the unique needs of each client, ensuring that they receive the best possible solutions.
With a strong focus on building long-term relationships, Blitz Jobs Bangalore has become
a trusted partner for businesses seeking reliable recruitment services.

MANAGEMENT :

The management team at Blitz Jobs Bangalore is comprised of seasoned professionals with
a proven track record in recruitment, HR, and talent management. The leadership team
includes:

Rajesh Kumar (CEO): A veteran in the recruitment industry, Rajesh has over a decade of
experience in building and leading high-performing teams. His expertise in strategic
planning and business development has been instrumental in the company’s growth.
Priya Rajesh (Director): With a background in HR and talent management, Priya brings
a unique perspective to the company’s strategic planning and growth. Her expertise in talent
acquisition and management has been invaluable to the company’s success.
Akash Singh (Head of Operations): Akash is an expert in recruitment process outsourcing
and has successfully implemented numerous RPO projects for leading clients. His expertise
in process optimization and talent management has streamlined the company’s operations.

Dept. of ECE 2023-2024 2

WEB DEVELOPMENT RGIT

COMPANY PROFILE :

Blitz Jobs Bangalore is a private limited company with a strong presence in Bangalore.
Their services include:
- Permanent Staffing: Expertise in placing top talent in permanent positions across various
industries, including IT, finance, healthcare, and more.
- Temporary Staffing: Specialized in providing temporary staff for short-term projects and
assignments, ensuring that clients have the flexibility to meet their changing needs.
- Contract Staffing: Offers contract staffing solutions for businesses requiring specialized
skills, ensuring that clients have access to top talent on a project basis.
- Recruitment Process Outsourcing (RPO): Partners with clients to manage their entire
recruitment process, providing a comprehensive solution for all their staffing needs.
- Executive Search: Expertise in placing senior-level professionals in key positions,
ensuring that clients have the leadership talent they need to drive business success.

MISSION AND VISION

Mission: Blitz Jobs Bangalore is committed to delivering innovative and effective

recruitment solutions that exceed client expectations, while fostering a culture of
excellence, integrity, and social responsibility. They strive to build long-term relationships
with clients, providing them with top talent and exceptional services that drive business
success.

Vision: To be the preferred recruitment partner for clients across industries, driving
business success through top talent acquisition, strategic partnerships, and exceptional
services. By 2025, Blitz Jobs Bangalore aims to expand its presence to five major cities in
India, solidifying its position as a leading recruitment agency in the country. They envision
a future where they are recognized as a pioneer in the recruitment industry, known for their
innovative approach, exceptional services, and commitment to excellence.

Dept. of ECE 2023-2024 3

WEB DEVELOPMENT RGIT

CHAPTER - 3

HTML
3.1 HTML

HTML (HyperText Markup Language) is the most basic building block of the Web. It
defines the meaning and structure of web content. Other technologies besides HTML are
generally used to describe a web page's appearance/presentation or functionality/ behavior.

"Hypertext" refers to links that connect web pages to one another, either within a single
website or between websites. Links are a fundamental aspect of the Web. By uploading
content to the Internet and linking it to pages created by other people, you become an active
participant in the World Wide Web.

Fig 3.1: A simple html document

Html document explaination The declaration defines that this document is an HTML5
document The element is the root element of an HTML page

The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab) The <body> element defines the document's body, and is a

Dept. of ECE 2023-2024 4

WEB DEVELOPMENT RGIT

container for all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

3.2 HTML Page Structure

Below is a visualization of an HTML page structure:

Fig. 3.2: Visualization of HTML page structure

3.3 HTML Element

An HTML element is defined by a start tag, some content, and an end tag.
The HTML element is everything from the start tag to the end tag:
<tagname> Content </tagname>
Example:
<h1>My First Heading</h1>
<p>My first paragraph.</p>

Dept. of ECE 2023-2024 5

WEB DEVELOPMENT RGIT

3.4 HTML Formatting Element

Formatting elements were designed to display special types of text:

• <b> - Bold text

• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

3.5 HTML CSS

Cascading Style Sheets (CSS) is used to format the layout of a webpage. With
CSS, you can control the color, font, the size of text, the spacing between elements, how
elements are positioned and laid out, what background images or background colors are to
be used, different displays for different devices and screen sizes, and much more.
CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

INLINE CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color
of the <p> element to red:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Dept. of ECE 2023-2024 6

WEB DEVELOPMENT RGIT

INTERNAL CSS
An internal CSS is used to define a style for a single HTML page. An
internal CSS is defined in the <head> section of an HTML page, within a
<style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p> elements to red. In addition, the page will be
displayed with a "powderblue" background color:
<!DOCTYPE html>
<html>
<head> <style> body {background-
color: powderblue;} h1 {color: blue;} p
{color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

EXTERNAL CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>

Dept. of ECE 2023-2024 7

WEB DEVELOPMENT RGIT

<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:

This is a Heading
This is a Paragraph

Dept. of ECE 2023-2024 8

WEB DEVELOPMENT RGIT

CHAPTER - 4
CSS
4.1 CSS
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation
of a document written in HTML or XML (including XML dialects such as SVG,
MathML or XHTML). CSS describes how elements should be rendered on screen, on
paper, in speech, or on other media.

CSS is among the core languages of the open web and is standardized across Web browsers
according to W3C specifications. Previously, development of various parts of CSS
specification was done synchronously, which allowed versioning of the latest
recommendations.

4.2 CSS syntax

CSS is a rule-based language — you define the rules by specifying groups of styles that
should be applied to particular elements or groups of elements on your web page. For
example, you can decide to have the main heading on your page to be shown as large red
text. The following code shows a very simple CSS rule that would achieve the styling
described above:
h1 { color: red;
font-size: 5em;
}
In the above example, the CSS rule opens with a selector . This selects the HTML
element that we are going to style. In this case, we are styling level one headings (<h1>).
We then have a set of curly braces { }. Inside the braces will be one or more declarations,
which take the form of property and value pairs. We specify the property (color in the
above example) before the colon, and we specify the value of the property after the colon
(red in this example). This example contains two declarations, one for color and the other
for font-size. Each pair specifies a property of the element(s) we are selecting (<h1> in
this case), then a value that we'd like to give the property.

Dept. of ECE 2023-2024 9

WEB DEVELOPMENT RGIT

4.3 CSS selectors

In CSS, selectors are used to target the HTML elements on our web pages that we want to
style. There are a wide variety of CSS selectors available, allowing for fine-grained
precision when selecting elements to style.

4.4 CSS layout

CSS page layout techniques allow us to take elements contained in a web page and control
where they're positioned relative to the following factors. their default position in normal
layout flow, the other elements around them, their parent container, and the main
viewport/window. The page layout techniques are:
• Normal flow
• The display property
• Flexbox
• Grid
• Floats
• Positioning
• Table layout
• Multiple-column layout

Each technique has its uses, advantages, and disadvantages. No technique is designed to
be used in isolation. By understanding what each layout method is designed for you'll be
in a good position to understand which method is most appropriate for each task.

4.5 CSS Positioning

Positioning allows you to take elements out of normal document flow and make them
behave differently, for example, by sitting on top of one another or by always remaining
in the same place inside the browser viewport.
Types of Positioning
• Static Positioning
• Sticky Positioning
• Absolute and relative

Example to show the basic working of CSS code.

<!DOCTYPE html>
<html>
Dept. of ECE 2023-2024 10
WEB DEVELOPMENT RGIT

<head> <style> p
{ color: red;
text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>

OUTPUT:

Hello World!

These paragraphs are styled with CSS.

Dept. of ECE 2023-2024 11

WEB DEVELOPMENT RGIT

CHAPTER - 5
JAVASCRIPT

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language

with first-class functions. While it is most well-known as the scripting language for Web
pages, many non-browser environments also use it, such as Node.js, Apache
CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm,
singlethreaded, dynamic language, supporting object-oriented, imperative, and declarative
(e.g. functional programming) styles

5.1 Control flow

JavaScript supports a compact set of statements, specifically control flow statements, that you
can use to incorporate a great deal of interactivity in your application.
A conditional statement is a set of commands that executes if a specified condition is true.
JavaScript supports two conditional statements: if...else and switch.

if (condition) {
statement_1; }
else {
statement_2;
}

5.2 Exception handling statements

You can throw exceptions using the throw statement and handle them using the try...catch
statements.
The try...catch statement marks a block of statements to try, and specifies one or more
responses should an exception be thrown. If an exception is thrown, the try...catch statement
catches it.
The try...catch statement consists of a try block, which contains one or more statements, and
a catch block, containing statements that specify what to do if an exception is thrown in the
try block.

Dept. of ECE 2023-2024 12

WEB DEVELOPMENT RGIT

Example: function getMonthName(mo) { mo = mo - 1; // Adjust month

number for array index (1 = Jan, 12 = Dec) let months = ['Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; if
(months[mo]) { return
months[mo];
} else { throw 'InvalidMonthNo'; // throw keyword is used
here
} } try { // statements to try monthName = getMonthName(myMonth); //
function could throw exception
} catch (e) { monthName = 'unknown'; logMyErrors(e); // pass exception object to
error handler (i.e. your own function) }

5.3 Functions
Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript
is similar to a procedure—a set of statements that performs a task or calculates a value, but
for a procedure to qualify as a function, it should take some input and return an output where
there is some obvious relationship between the input and the output. To use a function, you
must define it somewhere in the scope from which you wish to call it.

A JavaScript function is defined with the function keyword, followed by a name,

followed by parentheses (). Function names can contain letters, digits, underscores, and
dollar signs (same rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...). The code to be executed, by the function, is placed inside curly
brackets: {}

Example to change HTML element using JS code.

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

Dept. of ECE 2023-2024 13
WEB DEVELOPMENT RGIT

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello

JavaScript!"'>Click Me!</button>

</body>
</html>

OUTPUT:

Dept. of ECE 2023-2024 14

WEB DEVELOPMENT RGIT

CHAPTER - 6
PHP
6.1 PHP
PHP is a widely used server-side programming language that’s become increasingly fast and
powerful over the years. PHP works well with HTML and databases, making it a great
language for anyone interested in building dynamic web applications.

The PHP contains the following features:

• Performance.
• Open Source.
• Familiarity
• Syntax Embedded.
• Platform Independent.
• Database Support.
• Error Reporting.
• Loosely Typed
Language.
• Web servers Support.
• Security
• Control
• A Helpful PHP
Community

Performance:
PHP script is executed much faster than those scripts which are written in other languages
such as JSP and ASP. PHP uses its own memory, so the server workload and loading time is
automatically reduced, which results in faster processing speed and better performance.
Open Source:
PHP source code and software are freely available on the web. You can develop all the
versions of PHP according to your requirement without paying any cost. All its components
are free to download and use.

Dept. of ECE 2023-2024 15

WEB DEVELOPMENT RGIT

Familiarity with syntax:

PHP has easily understandable syntax. Programmers are comfortable coding with it.
Embedded:
PHP code can be easily embedded within HTML tags and script.
Platform Independent:
PHP is available for WINDOWS, MAC, LINUX & UNIX operating system. A PHP application
developed in one OS can be easily executed in other OS also.
Database Support:
PHP supports all the leading databases such as MySQL, SQLite, ODBC, etc.
Error Reporting -
PHP has predefined error reporting constants to generate an error notice or warning at runtime.
E.g., E_ERROR, E_WARNING, E_STRICT, E_PARSE.
Loosely Typed Language:
PHP allows us to use a variable without declaring its data type. It will be taken automatically
at the time of execution based on the type of data it contains on its value.
Web servers Support:
PHP is compatible with almost all local servers used today like Apache, Netscape, Microsoft
IIS, etc.
Security:
PHP is a secure language to develop the website. It consists of multiple layers of security to
prevent threads and malicious attacks.
Control:
Different programming languages require long script or code, whereas PHP can do the same
work in a few lines of code. It has maximum control over the websites like you can make
changes easily whenever you want.
A Helpful PHP Community:
It has a large community of developers who regularly updates documentation, tutorials,
online help, and FAQs. Learning PHP from the communities is one of the significant benefits.

Dept. of ECE 2023-2024 16

WEB DEVELOPMENT RGIT

Example for Basic Syntax of PHP.

<!DOCTYPE html>
<html>
<body>

<h1>My first PHP page</h1>

<?php echo "Hello

World!";
?>

</body>
</html>

OUTPUT:

My �irst PHP page

Hello World!

Dept. of ECE 2023-2024 17

WEB DEVELOPMENT RGIT

CHAPTER – 7

RUBY ON RAILS
7.1 Ruby on Rails
Ruby on Rails or also known as rails is a server-side web application development
framework that is written in the Ruby programming language, and it is developed by
David Heinemeier Hansson under the MIT License. It supports MVC(model-view-
controller) architecture that provides a default structure for database, web pages, and web
services, it also uses web standards like JSON or XML for transfer data and HTML, CSS,
and JavaScript for the user interface. It emphasizes the use of other well-known software
engineering pattern and paradigms like:

Don’t Repeat Yourself (DRY): It is a principle of software development to reducing the

repetition of information or codes.
Convention Over Configuration (CoC): It provides many opinions for the best way to do
many things in a web application.

Example:

# The Hello Class

class Hello
def initialize( name )
@name = name.capitalize
end

def salute
puts "Hello #{@name}!"
end
end

# Create a new object

h = Hello.new("Ruby")
# Output "Hello Ruby!"
h.salute

Dept. of ECE 2023-2024 18

WEB DEVELOPMENT RGIT

OUTPUT:
Hello Ruby!

Rails:
• An extremely productive web-application framework.
• Written in Ruby by David Heinemeier Hansson.
• You could develop a web application at least ten times faster with Rails than you
could with a typical Java framework.
• An open source Ruby framework for developing database-backed web
applications.
• Configure your code with Database Schema.
• No compilation phase required.
Rails Strengths
Rails is packed with features that make you more productive, with many of the following
features building on one other.

Metaprogramming
Where other frameworks use extensive code generation from scratch, Rail framework uses
Metaprogramming techniques to write programs. Ruby is one of the best languages for
Metaprogramming, and Rails uses this capability well. Rails also uses code generationbut
relies much more on Metaprogramming for the heavy lifting.

Active Record
Rails introduces the Active Record framework, which saves objects into the database. The
Rails version of the Active Record discovers the columns in a database schema and
automatically attaches them to your domain objects using metaprogramming.

Convention over configuration

Most web development frameworks for .NET or Java force you to write pages of
configuration code. If you follow the suggested naming conventions, Rails doesn't need
much configuration.

Scaffolding
You often create temporary code in the early stages of development to help get an
application up quickly and see how major components work together. Rails automatically
creates much of the scaffolding you'll need.

Built-in testing
Rails creates simple automated tests you can then extend. Rails also provides supporting
code called harnesses and fixtures that make test cases easier to write and run. Ruby can
then execute all your automated tests with the rake utility.

Three environments
Rails gives you three default environments: development, testing, and production. Each
behaves slightly differently, making your entire software development cycle easier. For
example, Rails creates a fresh copy of the Test database for each test run.
Dept. of ECE 2023-2024 19
WEB DEVELOPMENT RGIT

CHAPTER - 8

PROJECT -1
Simple Calculator:

“Simple Calculator” is an app that will make us learn more depth about HTML, CSS and
basics of JS and we implement all these together to make a beautiful responsive calculator.

PROGRAM:

Setting Up the HTML

The journey begins with the creation of the structural foundation of

our calculator through HTML. HTML, the markup language of the
web, gives structure to our project. Below is a snippet of the HTML
code that sets the stage for our calculator.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Basic Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<div class="buttons">
<button class="clear">C</button>
<button class="operator">/</button>
<button class="operator">*</button>
<button class="operator">-</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">+</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="equals">=</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">0</button>
<button class="decimal">.</button>

Dept. of ECE 2023-2024 20

WEB DEVELOPMENT RGIT
</div>
</div>
<script src="index.js"></script>
</body>
</html>

Styling with CSS

With the foundation laid, it’s time to add the visual charm that CSS
provides. CSS brings aesthetics and layout to our calculator, making it
visually appealing to users. Here’s a snippet of the CSS code that gives
life to our calculator’s appearance

* {
box-sizing: border-box;
margin: 0;
}

.calculator {
background-color: black;
padding: 20px;
max-width: 400px;
margin: 0 auto;
border: solid 1px #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
margin-top: 40px;
}

#result{
background-color: yellowgreen;
width: 100%;
padding: 10px;
font-size: 24px;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;
border-radius: 5px;
}

.buttons{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
margin-top: 20px;
}

button{
padding: 10px;
font-size: 24px;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
cursor: pointer;

Dept. of ECE 2023-2024 21

WEB DEVELOPMENT RGIT
transition: background-color 0.3s ease;

button:hover{
background-color: #ddd;
}

.clear{
background-color: #ff4136;
color: #fff;
}

.number, .decimal{
background-color: #fff;
color: #333;

.operator{
background-color: #0074d9;
color: #fff;
}

.equals{
background-color: #01ff70;
grid-row: span 3;
color: #fff;
}

Adding Functionality with JavaScript

JavaScript is the magic wand that imparts interactivity to our

calculator. It’s the powerhouse that makes calculations possible at the
click of a button. Below, we’ll dissect the code segments that give life
to our calculator’s functionalities.

const button = document.querySelectorAll("button");

const result = document.getElementById("result");

for(let i =0; i<button.length; i++){

button[i].addEventListener("click", () =>
{
const buttonValue = button[i].textContent;
if(buttonValue === "C")
{
clearResult();
}
else if(buttonValue === "=")
{
calculateResult();
}
else

Dept. of ECE 2023-2024 22

WEB DEVELOPMENT RGIT
{
appendValue(buttonValue);
}
});
}

function clearResult()
{
result.value="";
}

function calculateResult()
{
result.value =eval(result.value);
}

function appendValue(buttonValue)
{
result.value = result.value + buttonValue;
}

Fig :8.1 Starting page of the Application

Dept. of ECE 2023-2024 23

WEB DEVELOPMENT RGIT

Fig 8.2: Basic Functionality of Application

Dept. of ECE 2023-2024 24

WEB DEVELOPMENT RGIT

CHAPTER - 9

CONCLUSION

The internship from Blitz Jobs was very useful. The training was effective and taught us the
efficient ways to build solutions to the problem statements within a given time. The best part
about internships was that relevant experience and knowledge about various technologies. The
trainer had a different way of teaching where he made sure that we understood the concepts
by giving us time to practice the concepts practically. The effective training throughout the
internship helped us to take the assessment without any difficulties.

The idea of internship program sees merit in attempting to shorten the period on training that
is often significant duration to orient the trainee or newly inducted person onto the project. The
internship covered the concepts of front end development techniques like HTML, CSS,
JavaScript that is used to design web apps, games and much more. It is and has great tools,
libraries and frameworks.

In this Front-End Development internship, we learnt the basics like HTML structure, Elements,
Forms, CSS. We also got an opportunity to know about JavaScript, PHP and Ruby on Rails.
We also did two assignment and project on Web Development.

The internship session has been a great learning journey helping the participants in the
internship program to understand the concepts of Web Development. It also helped us improve
our logical thinking. It helped us to improve our communication skills. They taught us to
manage the time so that we could code maximum in limited or specified time. We realized that
soft skills contribute to a positive work environment and help us maintain an efficient
workflow.

Dept. of ECE 2023-2024 25