A

SUMMER INTERNSHIP REPORT

Submitted by

RITIK PANDEY
01514202019

in partial fulfillment for the award of the degree

of

Bachelor of Computer Application

(Batch:2019-22)

Jagannath International Management School

Vasant Kunj, New Delhi - 110070
 SELF CERTIFICATE

This is to certify that the Project Report (BCA-355) entitled“_The Complete

2021 Web Development Bootcamp” done by me is an authentic work carried out
for the partial fulfillment of the requirements for the award of the degree of
BCA(2019-22) under the guidance of Dr. Angela YU
Lead instructor at the London App Brewery , Udemy. The matter embodied in
this project work has not been submitted earlier for award of any degree or
diploma to the best of my knowledge and belief.

RITIK PANDEY

01514202019
 CERTIFICATE

An appropriate certificate clearly stating the STUDENT NAME, Summer

Training TIME period (No less than 4 weeks) and PROJECT TITLE ofproject
done (if applicable) should be submitted on organization letter head duly signed
be Summer Training Incharge /Manager.
 ACKNOWLEDGEMENT

With candor and pleasure I take opportunity to express my sincere thanks and
obligation to my esteemed guide Dr. Angela YU. It is because of her able and
mature guidance and co-operation without which it would not have been
possible for me to complete my project.

It is my pleasant duty to thank all the staff member of the computer center
who never hesitated me from time to time during the project.

Finally, I gratefully acknowledge the support, encouragement & patience of

my family, and as always, nothing in my life would be possible without God,
Thank You!

RITIK PANDEY
01514202019
 TABLE OF CONTENT

Chapter 1 – INTRODUCTION

ABOUT ORGANIZATION
ORGANIZATION MISSION
ORGANIZATION VISION
ORGANIZATION OBJECTIVES
ORGANIZATION MARKETSHARE

Chapter 2 – TRAINING DETAIL

TRAINING OVERVIEW / COURSE OVERVIEW
ASSIGNED TRAINING WORK DETAIL / COURSEDETAILS
WEEK WISE WORK COMPLETED

Chapter 3- SYSTEM STUDY

PROJECT OBJECTIVES
NEED OF THE SYSTEM
SYSTEM REQUIREMENT
SOFTWARE & HARWARE REQUIREMENTS
 Chapter 4- SOFTWARE CODING & IMPLEMENTATION

SAMPLE CODELAYOUTS

APPLICATION SCREEN SHORTS

Chapter 5- CONCLUSION & LEARNINGS

SYSTEM LIMITATIONS
CONCLUSION
LEARNING & ACHIEVEMENT ( IF ANY)

BIBLIOGRAPHY
 1- INTRODUCTION
1.1 ABOUT ORGANIZATION
Company Name: UDEMY

Udemy's mission is to create new possibilities for people and

organizations everywhere. Our global marketplace features an extensive,
multi-language library, which includes thousands of courses taught by
real-world experts. You can take courses across a wide range of
categories, some of which include: business & entrepreneurship,
programming, academics, the arts, health & fitness, language, music and
much more!

Udemy is a massive open online course provider, and its learning

experience arranges coursework into a series of modules and lessons that
can include videos, text notes and assessment tests. Udemy’s video player
has functional features like closed captioning and note-taking functions.

The company was launched by Eren Bali, Oktay Caglar and Gagan Biyani in
2010.
It is headquartered in San Francisco, with offices in Denver, Brazil, India,
Ireland and Turkey.
KEY MEMBERS:
1 ErenBanicofounder and chairman
2 Mustafa Demircountry manager and senior director of engineering
3 VenuVenugopalchief technology officer
4 Prasad GuneSenior vice president, Product

5 Wesley Puasenior vice president finance

6 Noah Marks Vice president revenue operations
7 Faisal NambiarVice president strategic partnerships
8 AmrithNambiarVice president information technologies
 ORGANIZATION
MISSION

Udemy is a platform that allows instructors to build online courses on

their preferred topics. Udemy help organizations of all types and sizes
prepare for the path ahead — wherever it leads. Udemy curated
collection of business and technical courses help companies,
governments, and nonprofits go further by placing learning at the center
of their strategies.

ORGANIZATION VISION
Every month, the Udemy Business team analyzes and shares trends based
on what employees are learning across our thousands of customers
around the world.
With a mission to improve lives through learning, it’s no surprise that we
place tremendous emphasis on the role of learning in our own live and
work. We understand that learning isn’t an interruption of our work or a
sign of weakness – it’s foundation to our growth, both as individuals and
as a business

ORGANIZATION OBJECTIVES
We help organizations of all types and sizes prepare for the path ahead —
wherever it leads. Our curated collection of business and technical courses
helps companies, governments, and nonprofits go further by placing
learning at the center of their strategies.
ORGANIZATION MARKET SHARE
Udemy has market share of 0.18% in learning-management-systems
market. Udemy competes with 220 competitor tools in learning-
management-systems category. Top alternatives for Udemy learning-
management-systems tool are LinkedIn Learning with 9.58% Google
Classroom with 8.32% Thingify with 7.58% market share.
Around the world in 2021, over 215 companies have started using
Udemy as learning-management-systems tool. Companies using
Udemy for learning-management-systems are majorly from United
States with 92 customers. 48.42% of Udemy customers are from the
United States. Other top countries using Udemy are United Kingdom
Australia with 23(12.11%) 13(6.84%) customers respectively.
 2.TRAINING DETAIL
COURSE OVERVIEW
2.1

Web development is the process of creating a website for the internet or an

intranet. Web development can range from creating a single static page of plain
text to creating complex web applications, electronics businesses, and social
network services.

The course is taught by the lead instructor at London's leading in-person

programming boot camp, the App Brewery.

This course takes no shortcuts; there are beautiful animated explanation videos
and tens of real-world projects for you to build.

The course is constantly being updated with new content, as well as new
projects and modules chosen by students.

UDEMY cover a wide range of tools and technologies in this

comprehensive course, including:

Front-End Web Development

• HTML 5

• CSS 3

• Bootstrap 4

• JavaScript ES6

• DOM Manipulation

• jQuery
• Bash Command Line

• Git, GitHub and Version Control

• Backend Web Development

• Node.js

• NPM

• Express.js

• EJS

• REST

• APIs

• Databases

• SQL

• MongoDB

• Mongoose

• Authentication

• Firebase

• React.js

• React Hooks

• Web Design

• Deployment with GitHub Pages, Heroku and MongoDB

Atlas
 ASSIGNED TRAINING WORK DETAIL / COURSEDETAILS
Fundamentals of Web Development Learn how websites work and how
HTML, CSS, and JavaScript play a role. Learn how the internet works.
Begin by learning HTML, CSS, and JavaScript. Understand and use git,
GitHub, and version control.
To become a power user, use the Unix command line and write bash
commands.
Learn critical troubleshooting and debugging skills that you can apply to
your projects.
This course will take you from a beginner to an intermediate level in real
life. This is what you're looking for if you don't know how to put the
pieces of web development together.
You should be able to create ANY website you want.
Create a website portfolio to apply for junior developer jobs.
Create fully functional websites and web apps for your startup or
business.
Work as a self-employed web developer.
Learn Node.js backend development.
React is a great way to learn frontend development.
Learn about the most recent frameworks and technologies, such as
Javascript ES6, Bootstrap 4,
and MongoDB.
Discover the best practises of professional developers.
Take this course if you want to learn to code by creating fun and useful
projects.
If you are a seasoned programmer, this course will help you quickly get
up to speed with the latest frameworks and NodeJS.
Take this course if you want to learn everything you need to know about
web development in ONE COURSE.
WEEK WISE WORK COMPLETED / COURSE ASSIGNMENT
COMPLETION DETAIL

Section Details Sub Part

1 Front end Web Development 10/10 42 min
2 Introduction to Html 9/9 1hr 19 min
3 Intermediate HTML 11/11 50 min
4 Introduction to css 12/12 1hr 30min
5 Intermediate CSs 22/22 2hr 55min
6 Introduction to bootstrap 17/17 2hr 35 min
7 Intermediate Bootstrap 15/15 2hr 35 min
8 Web Design school – Create a website that 6/6 1hr 6min
people love
9 Introduction to JavaScript ES6 30/30 2hr 28min
10 Intermediate Java script 19/19 1hr 30min
11 The Document Object Model (DOM) 9/9 56 min
12 Boss Level Challenge 1 - the dice game 11/11 20min
13 Advance JavaScript and DOM manipulation 15/15 1hr 35min
14 jQuery 11/11 53min
15 Boss level Challenge 2- The simon game 25/25 15 min
16 The Unix Command Line 6/6 35min
17 Backend Web Development 1/1 8min
18 Node.js 8/8 39min
19 Express.js with Node.js 13/13 1hr 14min
20 APIs – Application Programming Interfaces 14/14 2hr 33min
21 Git, Github and Version Control 10/10 1hr 25min
22 EJS 11/11 2hr 33min
23 Boss level challenge 3 -blog website 45/45 2hr 38min
24 Data Bases 1/1 20min
25 SQL 6/6 36min
26 MongoDB 10/10 1hr 12min
27 Mongoose 6/6 56 min
28 Putting Everything together 8/8 1hr 34min
29 Deploying Your web Application 4/4 33min
30 Boss level challenge 4 – blog Website upgrade 8/8 10 min
31 Build Your Own RESTful API from Scratch 14/14 1hr 46min
32 Authentication & security 15/15 3hr 33min
33 React.js 45/45 8hr 54min
34 Bonus Module: ask Angela anything 4/4 2hr 44min
35 Next Steps 1/1 1min
 3– SYSTEM STUDY

3.1 PROJECT OBJECTIVES

This project concerned about developing a Web Application Game which

gives users something to overcome boredom and something for their
time pass

This is a two player game where there is one Dice for each player, when
we press refresh button those two Dice will be thrown randomly and
whichever Dice have greater number that player will win. It is a simple
and fun game which can be used as toss and can be played by any group
of age.
SYSTEM REQUIREMENTS
Operating System

Microsoft Windows

Hardware System Requirements

Processor: Intel core

RAM: 4 GB

FIG 3.1 MY SYSTEM CONFIGRATION

Software required

• Operating System: Windows 10

Software Required:

Visual Studio Code

FIG 3.2 VISUAL STUDIO CODE

Web browser:
Chrome
WEB TECHNOLOGY

HTML
Hypertext Markup Language (HTML) is the standard markup language
for documents designed to be displayed in a web browser. It can be
assisted by technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript. Web browsers receive HTML
documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure
of a web page semantically and originally included cues for the
appearance.
CSS
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language like HTML. CSS is a cornerstone technology of the World
Wide Web, alongside HTML and JavaScript. CSS is designed to enable
the separation of presentation and content, including layout, colors,
and fonts. This separation can improve content accessibility, provide
more flexibility and control in the specification of presentation
characteristics, enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, and reduce
complexity and repetition in the structural content.
JAVASCRIPT
JavaScript (often shortened to JS) is a lightweight, interpreted,
object-oriented language with first-class functions, and is best known
as the scripting language for Web pages, but it's used in many non-
browser environments as well. It is a prototype-based, multi-
paradigm scripting language that is dynamic, and supports object-
oriented, imperative, and functional programming styles. JavaScript
runs on the client side of the web, which can be used to design /
program how the web pages behave on the occurrence of an event.
JavaScript is an easy to learn and also powerful scripting language,
widely used for controlling web page behavior.
What is Responsive Web design?

Responsive Web design is the approach that suggests that design and
development should respond to the user’s behavior and environment
based on screen size, platform and orientation.
The practice consists of a mix of flexible grids and layouts, images and
an intelligent use of CSS media queries. As the user switches from
their laptop to iPad, the website should automatically switch to
accommodate for resolution, image size and scripting abilities. One
may also have to consider the settings on their devices; if they have a
VPN for iOS on their iPad, for example, the website should not block
the user’s access to the page. In other words, the website should have
the technology to automatically respond to the user’s preferences.
This would eliminate the need for a different design and development
phase for each new gadget on the market.
4-SOFTWARE CODING & IMPLEMENTATION

INTRODUCTION
SYSTEM CODING ENVIRONMENT AND STANDARDSFOLLOWED

HTML
Hypertext Markup Language (HTML) is the standard markup
language for documents designed To be displayed in a web
browser. It can be assisted by technologies such as
Cascading StyleSheets (CSS) and scripting languages such as
JavaScript. Web browsers receive HTML documents from a web
server or from local storage and render the documents into
multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance
of the document. HTML elements are the building blocks of HTML
pages. With HTML constructs, images and other objects such as
interactive forms may be embedded into the rendered page.

HTML provides a means to create structured documents by denoting

structural semantics for text such as headings, paragraphs, lists,
links, quotes and other items. HTML elements are delineated by
tags, written using angle brackets. Tags such as <img /> and <input
/> directly introduce content into the page. Other tags such as <p>
surround and provide information about document text and may
include other tags as sub-elements. Browsers do not display the
HTML tags, but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as
JavaScript, which affects the
CSS

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 style sheets are
stored in CSS files.

JAVASCRIPT

JavaScript (often shortened to JS) is a lightweight, interpreted,

object-oriented language
With first-class functions, and is best known as the scripting language
for Web pages, but
It’s used in many non-browser environments as well. It is a
prototype-based, multi-paradigm
Scripting language that is dynamic, and supports object-oriented,
imperative, and functional
Programming styles.

JavaScript runs on the client side of the web, which can be used to
design
Program how the web pages behave on the occurrence of an event.
JavaScript is an easy to
Learn and also powerful scripting language, widely used for
controlling web page behavior.
 4.1-SAMPLE CODE LAYOUTS
CODE OF THE PROJECT

HTML CODE: -

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dicee</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesh
eet">

</head>
<body>

<div class="container">
<h1>Refresh Me</h1>

<div class="dice">
<p>Player 1</p>
<img class="img1" src="images/dice6.png">
</div>

<div class="dice">
<p>Player 2</p>
<img class="img2" src="images/dice6.png">
</div>

</div>

<script src="index.js" charset="utf-8"></script>

</body>

<footer>
&copy Ritik Pandey
</footer>
</html>
 CSS CODE: -
.container {
width: 70%;
margin: auto;
text-align: center;
}

.dice {
text-align: center;
display: inline-block;

body {
background-color: #393E46;
}

h1 {
margin: 30px;
font-family: 'Lobster', cursive;
text-shadow: 5px 0 #232931;
font-size: 8rem;
color: #4ECCA3;
}

p {
font-size: 2rem;
color: #4ECCA3;
font-family: 'Indie Flower', cursive;
}

img {
width: 80%;
}

footer {
margin-top: 5%;
color: #EEEEEE;
text-align: center;
font-family: 'Indie Flower', cursive;

}
 JS CODE:-
var randomNumber1 = Math.floor(Math.random() * 6) + 1; //1-6

var randomDiceImage = "dice" + randomNumber1 + ".png"; //dice1.png - dice6.png

var randomImageSource = "images/" + randomDiceImage; //images/dice1.png - images/dice6.png

var image1 = document.querySelectorAll("img")[0];

image1.setAttribute("src", randomImageSource);

var randomNumber2 = Math.floor(Math.random() * 6) + 1;

var randomImageSource2 = "images/dice" + randomNumber2 + ".png";

document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2);

//If player 1 wins

if (randomNumber1 > randomNumber2) {
document.querySelector("h1").innerHTML = "🚩 Player 1 Wins!";
}
else if (randomNumber2 > randomNumber1) {
document.querySelector("h1").innerHTML = "Player 2 Wins! 🚩";
}
else {
document.querySelector("h1").innerHTML = "Draw!";
}
 4.2- GAME SCREEN SHORTS

Fig 4.1.1

This is what the user sees when he opens the Dice game in his web browser
forth first time; it
is currently only available as a web page.
 FIG 4.1.2

When we press refresh button Dice will be thrown randomly and a winner will
be announced as per the score.
FIG 4.1.3
FIG 4.1.4
 FIG 4.1.5

If both the Dice have same number then it will be a Draw.

FIG 4.1.6
 RESPONSIVENESS

Mobile View(I phone 6/7/8 Plus)

FIG 4.2.1
Mobile View(I pad Pro)

FIG 4.2.2
5 – CONCLUSION & FUTURE ENHANCEMENT(S)

SYSTEM LIMITATIONS

1. It cannot be played as multiplayer as it is available on local host.

2. There are no levels in this game.

CONCLUSION
This is a two player game where there is one Dice for each player,
when we press refresh button those two Dice will be thrown randomly
and whichever Dice have greater number that player will win. It is a
simple and fun game which can be used as toss and can be played by
any group of age.
 LEARNING & ACHIEVEMENT
While learning web development, I've been exposed to a plethora of
new things, including a plethora of websites where I can search for
various concepts and learn new software. I learned about how the
bootstrap lib can greatly assist you in creating projects.
I also learned how to connect a database to a server and how to store
data in an array.
HTML, CSS, JavaScript, Node, React, MongoDB, and other things were
taught to me!

Making a project also gives me more hands-on experience with how

things work, how to connect extraneous things to html, and how to
connect a database to a project. How to put things in place

Overall, it was a fantastic learning experience.

BIBLIOGRAPHY
• www.google.com

• www.udemy.com

• www.w3schools.com

• www.youtube.com