SUMMER TRAINING ON
WEB DEVELOPMENT : A
Training report
Submitted
In partial fulfillment
For the award of
of the degree of
Bachelor of Technology
Technology
In Computer Science & Engineering
Supervisor:
Submitted By:
Ajay Pandey
Enrolment no:46814802717
no:46814802717
Computer Science & Technology
Maharaja Agrasen IInstitute
nstitute of Technology, New Del
Delhi
hi
GGS Indraprastha University August, 2020
CERTIFICATE OF COMPLETION
I
DECLARATION
I hereby declare that the Training Report entitled (“SUMMER TRAINING ON WEB
DEVELOPMENT”)
DEVELOPMENT
”) is an authentic record of my own work as requirements of 4-6 Weeks
Training during the period from 01/06/2020 to 01/08/2020 for the award of degree of B. Tech.
(Computer Science & Engineering), GGSIPU, under the guidance of Mr. Colt Steele (Developer
& bootcamp instructor).
Ajay Pandey
Enroll No.: 46814802717
Date: _________________
Certified that the above statement made by the student is correct to the best of our knowledge and
belief.
Signatures
II
ACKNOWLEDGEMENT
Every Summer Training big or small is successful largely due to the effort of a number of
wonderful people who have always given their valuable advice or lent a helping hand. I
sincerely appreciate the inspiration; support and guidance of all those people who have been
instrumental in making this project a success.
I, Ajay Pandey, the stude
student
nt of Maharaja Agrasen Institute of Technology, New Delhi
(Computer Science & Technlogy ), am extremely grateful to Colt Steele & Udemy for the
confidence bestowed in me and entrusting my training entitled “Web Development – Front
& Back
Back end” with special reference to Udemy. At this juncture I feel deeply honored in
expressing my sincere thanks to Colt Steele for making the resources available at right time
and providing valuable insights leading to the successfu
successfull completion of my training.
I express my gratitude to Mrs. Namita Gupta (HOD, CSE) for arranging the summer training
in good schedule. I also extend my gratitude to my course Guide Mr
Mr.. Co
Colt
lt St
Steel
eelee
(Developer,Udemy)
(Developer,Ud
emy) who assisted me in completing the project.
I would
woul d also
als o like
li ke to
t o thank all the Computer
Computer Scie
Science
nce & Engine
Engineeri
ering
ng faculty
fa culty members of
their
ir cri
critic
tical
al adv
advice
ice and
Mahar
Ma
haraja
aja Agr
Agrase
asen
n In
Insti
stitut
tutee of Tec
Techno
hnolog
logy,
y, New Del
Delhi
hi for the
guidance without which this training would not have been possible.
Last but not the least I place a deep sense of gratitude to my family members and my friends
who have been constant source of inspiration during the preparation of this training report.
Ajay Pandey
B. Tech IVth Year
(Computer Science & Engineering)
III
ABSTRACT
In the 60 days’ summer training I had studied about WEB DEVELOPMENT Front and Back
end. I chose this training because it helps to develop dynamic web pages, and it is useful for
my career in Information technology Industry. Under the guidance of Colt Steele I learned
various new techniques of building websites from basics to advanced which is the very
foundation of big problems solved at various levels in the Industry. Apart from that I learned
to change the functionalities of complex web pages & make them more efficient by managing
lines
lin
es of code
code & using
using the latest
latest techno
technolog
logies
ies.. at the end I develo
develope
ped
d a projec
projectt calle
called
d
YELPCAMP A node.js application which helped me solidify my understanding of all the
latest tools and techniques learnt .
IV
ABOUT WEB DEVELOPMENT BOOTCAMP
When we're learning to program we often have to sacrifice learning the exciting and current
technologies in favor of the "beginner friendly" classes. With this course, we get the best of both
worlds. This is a course designed for the complete beginner, yet it covers some of the most
exciting and relevant topics in the industry.
The course is constantly updated with new content, projects, and modules. This course is also
unique in the way that it is structured and presented. Many other courses are just a long series of
"watch as I code" things, but this course is different. Colt Steele incorporated everything he learned in
his years of teaching to make this course not only more effective but more engaging. The course
includes:

Lectures

Code-Alongs

Projects

Exercises

Research Assignments

Slides

Readings
WHAT I GOT TO LEARN 
Make REAL web applications using cutting-edge technologies

Continue to learn and grow as a developer, long after the course ends

Create a blog application from scratch using Express, MongoDB, and Semantic UI

Create a complicated yelp-like application from scratch

Write your own browser-based game

Create static HTML and CSS portfolio sites and landing pages

Think like a developer. Become an expert at Googling code questions!

Create complex HTML forms with validations

Write web apps with full authentication

Use Bootstrap to create good-looking responsive layouts

Implement responsive navbars on websites

Use JavaScript variables, conditionals, loops, functions, arrays, and objects

Write Javascript functions, and understand scope and higher order functions

Create full-stack web applications from scratch

Manipulate the DOM with vanilla JS

Manipulate the DOM using jQuery

Translate between jQuery and vanillas JS

Write JavaScript based browser games

Use NodeJS to write server-side JavaScript

Write complex web apps with multiple models and data associations

Write a REAL application using everything in the course

Use Express and MongoDB to create full-stack JS applications

Use common JS data structures like Arrays
Ar rays and Objects

Master the command line interface

Use NPM to install all sorts of useful packages

Understand the ins and outs of HTTP requests

Create your own Node modules

Make a beautiful, responsive photographer's portfolio page

Create a beautiful, responsive landing page for a startup

Implement user authentication

Create a beautiful animated todo list application
This course is for anyone who wants to learn about web development,
development, regardless of
previous experience . It's perfect for complete beginners with zero experience .It's also great for
anyone who does have some experience
experience in a few of the technologies(like HTML and CSS) but not
all,
all, If yo
you
u want
want to ta
take
ke ONE
ONE COUR
COURSE
SE to le
lear
arn
n ever
everyt
ythi
hing
ng you
you need
need to know
know abou
aboutt web
web
development,
developmen
t, take this course .
TABLE OF CONTENTS
Title
Page no.
Certificate
I
Declaration
II
Acknowledgement
III
Abstract
IV
About the Organization
V
Chapter 1: Introduction
1
1.1: Course Objectives
Chapter 2: Tools and Technologies Used
3
2.1: Hardware Requirements
2.2: Software Requirements
2.3: Web Deveopment
2.4: VS Code
Chapter 3: Technical Contents
5
Chapter 4: Project Report
8
Chapter 5: Codebase
21
Chapter 6: Snapshots
24
Chapter 7: Results & Discussions
25
Chapter 7: Conclusion & Future Scope
26
Chapter 8: Weekly Report
31
1: INTRODUCTION
Writing a thousand lines of code and turning that into a website is one of the creative and
complicated things for web developers. If you get excited seeing a lot of beautiful websites
and thinking to try your hands on it then we need to open your eyes telling some important
things that you should know as a web developer. Creating a website that gets a lot of users’
attention is not just about learning various programming languages, you also need to learn
some other concepts like DevTools, data formats, testing, APIs, authentication and a lot of
stuff like that once you will dig yourself into this field.
The most important skill or knowledge every developer should learn first is these
three basic building blocks
blocks i.e. HTML, CSS, and JavaScript.
JavaScript. We will be using HTML and
CSS in frontend for interfaces. Just right click on our web browser and then selecting view
page source option does it. We can find the structure of your website where a lot of HTML
tags are used for different purposes.
CSS is also used in the frontend that decides the style, design, layout and how HTML
elements need to be displayed on the screen.
Javascript is high in demand nowadays and it is basically responsible for making our HTML
pages dynamic and interactive. Javascript also comes with a variety of languages like to make
our website more interactive. If we’re gonna specialize in javascript like MEAN Stack or
MERN stack then we’re gonna deep dive into this language because this one will be our
frontend as well as backend language.
You can do a lot of stuff using browser DevTools like debugging, editing HTML elements,
editing
edit
ing CSS propertie
properties,
s, checking
checking device, tracking
tracking javascrip
javascriptt error, etc. Every
Every develope
developerr
should be aware of using different tabs (elements, console, network, etc.) in DevTools to
make their work easier and faster. Depends on your browser you can use any DevTools or
whatever browser you are using. People generally prefer using Chrome DevTools to develop,
test and debug the web application but again it’s the choice of the developer which browser
he/she is using to develop the website.
1.1: Course Objectives
1
This
Th
is 8 week
week prog
progra
ramm
mmee ai
aims
ms to he
head
adst
star
artt ou
ourr fo
fora
ray
y in to th
thee exci
exciti
ting
ng worl
world
d of web
web
development both front and back end. This course helped me master my basics as well as
implement those basics at advanced level throught various projects throughout the course, i
could hone my visualisation better and push the boundaries of development mindset. The
course covered initial front end development like HTML,CSS,BOOTSTRAP,JS,DOM,Jquery
HTML,CSS,BOOTSTRAP,JS,DOM,Jquery
as well as back end in depth including databases and advanced topics like RESTful Routing,
data associatio
association
n & auth
authenti
enticatio
cation
n . This course is for all the developers who are looking
forward to enhance their development journey, and learn skills & technologies which will
help them to be a full stack developer faster .
2
2: TOOLS AND TECHNOLOGIES USED
2.1: HARDWARE REQUIREMENTS:-

Pentium-IV(Processor)
Pentium-IV(Process
or) Or any processor.

256 MB Ram OR Above

512 KB Cache Memory

Hard disk 10 GB or above

Microsoft Compatible 101 or more Key Board
2.2: SOFTWARE REQUIREMENTS: -
Operating System
: Windows 95/98/XP with MS-office or above.
Programming language
: JavaScript
IDE
: VS Code
2.3: JavaScript
JavaScript often abbreviated as JS, is a programming language that conforms to the
ECMAScriptspecification.Ja
ECMAScript
specification.JavaScript
vaScript is high-level, often just-in-time compiled,
compiled, and multiparadigm. It has curly-bracket syntax,
syntax, dynamic typing,
typing, prototype based,object-orientation
based,object-orientation,,
and first-class functions.
functions.
Alongside HTML and CSS,
CSS, JavaScript is one of the core technologies of the World Wide
Web.. JavaScript enables interactive web pages and is an essential part of web applications.
Web
applications.
The vast majority of websites use it for client
client side page behavior, and all major web browsers
have a dedicated JavaScript engine
engine to execute it.
3
As a multi-paradigm language, JavaScript supports event-driven,
event-driven, functional,
functional, and imperative
imperative
programming styles. It has application programming interfaces (APIs) for working with text,
dates, regular expressions, standard
standard data structures, and the document object model (DOM).
However,
Howe
ver, the language
language itself does not include any input/output(I
input/output(I/O),
/O), such as networking,
storage,, or graphics facilities, as the host environment (usually a web browser) provides those
storage
APIs.
2.4: VS CODE
Visual Studio Code is a source-code editor developed by
Microsoft for Windows
Windows,, Linux and macOS
macOS.It
.It includes support for debugging
debugging,, embedded Git
control and GitHub
GitHub,, syntax highlighting,
highlighting, intelligent code completion,
completion, snippets
snippets,, and code
refactoring.. It is highly customizable, allowing users to change the theme
refactoring
theme,, keyboard
shortcuts,, preferences, and install extensions that add additional functionality. The source
shortcuts
code is free and open source and released under the permissive MIT License.
License. The compiled
binaries are freeware and free for private or commercial use.
Visual Studio Code is based on Electron
Electron,, a framework which is used to
deploy Node.js applications for the desktop running on the Blink layout engine.
engine. Although it
uses the Electron framework, the software does not use Atom and instead employs the same
editor component (codenamed "Monaco") used in Azure DevOps (formerly called Visual
Studio Online and Visual Studio Team Services).
In the Stack Overflow 2019 Developer Survey, Visual Studio Code was ranked the most
popular developer environment
environment tool, with 50.7% of 87,317 respondents claiming
claiming to use it.
4
TECHNICAL CONTENTS
Getting hold on development basics
The course covered various basic Topics like how one should and can follow the path of
being a full stack developer from basics to advanced level . A lot of problems were solved
based on basic knowledge & it’s implementation rather than just memorizing stuff .
HTML & CSS
This includes covering commonly
commonly used HTML tags. We can refer to MDN Docs as well quite
ea
early
rly in the course
course as a refere
reference
nce materia
material.
l. Overal
Overalll this
this is a small
small secti
section
on which
which gets
gets
completed soon. We got skimmed through CSS section. There is lot of ground to cover in
CSS. We got to learn about Specificity and Cascade, Selectors, Fonts etc. There were 2
projects to give a practical experience in writing CSS.
Bootstrap
This is a huge section where we learn about various Bootstrap(latest version) components
such as navs, grids, forms. There is a image gallery project using Bootstrap which was cool.
JavaScript
JS lessons were very good. Syntax, Control Flow, Functions, Arrays, Object Basics were
taught in great detail. (Almost 8 hrs content in 40 hrs course). This is mainly because whole
backend section rests on JS foundations taught in these sections. There are various tiny
coding exercises and quiz to hammer home the JS concepts.
DOM Manipulation
This was very good and most interesting part of the course. DOM manipulation was taught
using vannila JS with methods such as querySelector, querySelectorALL, addEventListner
etc.
NODE
Introduction to REPL, quick exercises, npm, installing packages etc. npm faker exercise was
fun.
Express
This begins with a simple express app, package json file, route params, basic exercise. Colt
uses 'ejs' or embedded JavaScript to render view templates.
Database (MongoDB and Mongoose)
5
We got a brief
brief introd
introduct
uction
ion to MongoD
MongoDB,
B, Mongo
Mongo Shell
Shell and Mongoo
Mongoose
se con
connec
nectio
tion
n etc.
etc.
Further about how to integrate mongdb with yelpcamp (Data Persistence) to create various
campgrounds,, users, comments etc.
campgrounds
COURSE CONTENTS
Basics & Logic building

Path to be a full stack developer

Installation & basics

VS Code local environment set up
Front End

HTML

CSS

JavaScript + jQuery

Bootstrap
Advanced Front End

SemanticUI

Advanced DOM Manipulation
Back end

Unix(Command
Unix(Comman
d line)

NodeJS

NPM

Express JS

MongoDB
Advanced Back end

REST API

Database Associations
6

Authentication

Passport JS

Authorization
Main Project concepts

YelpCamp
RESTful Routing

Maintenance

7
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
YELPCAMP Implementation Using Web Development
Ajay Pandey
Computer Science & Engineering,
Maharaja Agrasen Institute of Technology,
New Delhi, India
ABSTRACT
Yelpcamp is an application for a fictional start up that allows us to add campgrounds for
other users to comment and rate, as view campgrounds added by other users. The project uses
vario
va
rious
us tec
techni
hnique
quess whi
which
ch inc
includ
ludes
es bot
both
h fro
front
nt end an
and
d bac
back
k en
end
d con
conce
cepts
pts lik
likee Nod
Node.j
e.js,
s,
Express.js, Passport.js, jQuery and MongoDB . Following is what the home page looks like
of our final webpage -
I. INTRODUCTION
Yelp Camp is a fun application that allows you to view campgrounds with a short description.
Once you login or signup you can begin to create your own campgrounds that includes a title,
image address and short description.
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
YelpCamp is a more complex application built from scratch using the following technologies:
On the front-end I have used HTML5, CSS3, JavaScript, Bootstrap for responsive layout, and
jQuery. On the back-end I used NodeJS, NPM, ExpressJS, REST, Authentication,
Authorization and PassportJS. For datastore I used non-sql MongoDB. The application was
developed on Cloud9 IDE and source versioned with GIT. The application is hosted on
Heroku servers and MongoLab.
SCOPES OF WEB DEVELOPMENT
The scope of web development is finding new meanings of implementation in various fields.
As a web developer, We tend to create websites that are more responsive and less compex.
That is, we are responsible for behind-the-scenes coding and programming of websites.
On the other hand, we have to maintain a website’s speed, capacity in terms of traffic and
overall performance.
The swelling wave of e-Commerce dominance fueling the need for organizations to
establish their online presence has led to the emergence of Web Designing as an important
organizational function. More and more organizations are recruiting internal Web Designing
teams or are employing external agencies to dish out professional and functional websites for
them. The basic role of a web designer entails one to employ several skill sets in the
production and maintenance of Web Sites. To deliver appropriate quality, they would need to
harness knowledge in the following areas:
• Graphic design
• Interface design
• Authoring using standardized code and proprietary software
• User experience design
• Search engine optimization
No matter how advanced we go in the field of computer science and technology, Web
development will travel with us. Programming languages/platforms etc may change. But the
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
way
wa
y the
they are tre
treate
ted
d by a compu
ompute
terr re
rem
main
inss . It mig
igh
ht ta
take
ke a di
diff
ffeeren
rent wa
way
y of
representation/ideology.
representation
/ideology. But it stays on.
ABOUT THIS PROJECT
In this project that is an implementation of all the concepts learnt in the developer bootcamp,
I will be making a node.js application called yelpCamp where a user can visit & discover the
campgrounds,, check in all the details, make comments abo
campgrounds
about
ut their experience and even
even they
can add their own campground after a simple sign up .
YelpCa
Yel
pCamp
mp is based
based on the popular
popular Yelp.c
Yelp.com
om , the differen
difference
ce be
being
ing it focuse
focusess on the
campgrounds that any host/owner can post for the users across the globe to check and review.
The application is hosted on heroku . The final result we will be trying to obtain here will
look like this -
welcome page
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
FUNCTIONALITIES
The above final result will consist of a lot of coding including both front and back end tools
and technologies
technologies and their combined effect, however at the end of the project we will finally
be able to achieve following functionalities -

Everyone can view the camps and reviews without signing up or logging in.

The user will have to login to edit the campground details or any comments.

The user can only edit/delete the campgrounds and comments that they have added.
TECHNOLOGIES
TECHNOLOGIE
S USED (WITH DESCRIPTION
DESCRIPTION))
HTML5 - markup language for creating web pages and web applications
CSS3 - used for describing the presentation of a document written in a markup
language
Bootstrap - free and open-source front-end web framework for designing websites
and web applications quickly
jQuery - cross-platform JavaScript library designed to simplify the client-side
scripting of HTML
DOM Manipulation - is a platform and language-neutral interface that allows
programs and scripts to dynamically access and update the content, structure, and
style of a document
Node.js - pen-source, cross-platform JavaScript run-time environment for executing
JavaScript code server-side
Express.js - for building web applications and APIs and connecting middleware
REST - REST (REpresentational State Transfer) is an architectural style for
developing web services
document-oriented NoSQL database
MongoDB - open-source cross-platform document-oriented
program to store details like users info, campgrounds info and comments
PassportJS - authentication middleware for Node.js. Extremely flexible and modular,
Passport can be unobtrusively dropped in to any Express-based web application
Data Associations - associating user data with the respective campgrounds and
comments using reference method
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
deployment model
Heroku - cloud platform as a service used as a web application deployment
All of the work mentioned above has been done on VS Code editor by creating local
environment setup manually .
I. Understanding and Implementatio
Implementation
n
Step 1: Creating JS file & including express
This is going to our very first step that will include setting up our basic structure of the
yelpCamp application, & for that we will be adding app.js file that allows us to require
express so that we can use it , let me list the app.js file :
After express is acquired for further using in our project, we use a few methods so that we
can avoid our code being less cleaned .
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
App.set()
App.set() method
method lets us use ejs files without
without mentionin
mentioning
g the .ejs extensio
extension
n
everytime, the parser is used to access body content & then finally we can add campground
images for the basic structure right now, although we are gonna replace them later through
our database but for now, this completes our first step . But our app.js file is not completed
just yet, we are going to come back everytime and edit this file because this is important for
most of the functionalities .
STEP 2: DEFINING PATHS OF REQUESTS
This is the most important and & difficult part of our proje
project,
ct, which includes GET & POST
POST
requests and affects the functionality of our project, we need to send appropriate response
based on the type of request made, analyse the request and finally revert back with an
appropriate response the user
user is looking for . We want to achieve this :
path of requests output
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
Although this includes a lot of coding & modifications in our app.js file as well as we need to
make new directory called views where ejs files are made, which will help our js file & html
to interact better , but here is a brief description of our js file
STEP 3: DEFINING EJS & INTERACTING WITH JS
Although simple html files are good in most of the cases but sometimes if we want to make
our website look more responsive while keeping our code as clean as possible we need EJS
(embedded javascript
javascript files), these files help us in interacting between javascript & html & css
files .
Till now we have defined paths for our GET requests that we are going to get from
our user and now we need to define what functionality these ejs files will achieve when their
respective path will be called by user . We are going to look for the request in our ejs file, &
then actually render the data present in the ejs through res.render() method .
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
These headers and footers are used to achieve cleaning up of our code so that we don’t have
to write same html again and again what we do here is write it once and then link all the files
we want it in . These are also called EJS partials .
STEP 4: DEFINING CAMPGROUNDS + STYLING
After defining the basic paths we now need to define those paths and most important one is
the campground.ejs that is when the user visits /campground then we need to manage the
request and send response, that response will be looking like this :
After setting our basic campground.ejs, we need to use navbars, jumbotrons & grid system
for making it responsive in mobile or any other device & not only our computer screen, here
is the code :
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
STEP 5: ADDING A NEW CAMPGROUND
By allowing the user to signup or login we give them access to actually add a campground on
their own which however
however should reach all the fields pre
presented
sented in the earlier app. By the end
of this step we want to reach this final result:
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
Thee abov
Th
abovee fo
form
rm is sa
save
ved
d & ha
hand
ndle
led
d in a di
diffe
ffere
rent
nt ej
ejss fi
file
le made
made fo
forr cr
crea
eati
ting
ng a ne
new
w
campground called new.ejs, this follows code given below:
new.ejs base
STEP 6: DATABASE MANAGEMENT
This project could have been made by both using relational or a non relational database, but
he
here
re we used
used mongoD
mongoDB
B & mongoo
mongoose,
se, open-s
open-sour
ource
ce crosscross-pla
platfo
tform
rm docume
documentnt-ori
orient
ented
ed
NoSQL database program to store details like users info, campgrounds info and comments .
Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.
js. It manages relationships
relationships between data, provides schema
schema validation,
validation, and is used to translate
between objects in code and the representation of those objects in MongoDB.
STEP 7: PROVIDING FINAL TOUCH
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
For the data persistence part a lot of concepts were implemented in order to mostly less the
workload, following important techniques were used to provide the website the final touch :
RESTful Routing – Here we first learn about RESTful Routes by building a fully functional
Blog app with CRUD. We also used different framework called Semantic UI instead of
Bootstrap.
Data Association, Creating Comments - Here I learnt about data association concepts such
as em
embed
bedded
ded dat
data,
a, obj
objec
ectt ref
refere
erence
ncess an
and
d usi
using
ng the sa
same
me con
conce
cepts
pts to cre
create
ate co
comme
mment
nt
feedbacks for campgrounds.
Authentic
Auth
enticatio
ation
n - Most important section where we actually learn how to add users to
yelpcamp with proper authentication. Rather than creating our own authentication system,
Colt uses passport.js for the same. Here we learn about various aspects of passport such as
configuration, local strategy, plugging passport to our model.
Our app by now looks pretty cool. New users are able sign up, login , create campgrounds
etc. Finally CRUD functionality is completed for campgrounds and comments. Here is what
our final website homepage looks like :
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
STEP 8: DEPLOYMENT
Deployment in brief consists of following
f ollowing two steps:
•
In the app.js use - > mongoose.connect('mongodb://localhost/ye
mongoose.connect('mongodb://localhost/yelp_camp');
lp_camp'); (if
mongodb is running on localhost).
•
I have used -> mongoose.co
mongoose.connect(process
nnect(process.env.DATABASEUR
.env.DATABASEURL);
L); and have set
DATABASEURL as environment
environment variable in my heroku to maintain security.
II. CONCLUSIONS
The celpcamp website has been successfully implemented using all the concepts learnt during
the developer bootcamp, Overall, you end up with sufficient knowledge to build any web app
with CRUD functionality with Data Association and Authentication. This course gives us
good foundation to modern JS development.
YELPCAMP Implementati
Implementation
on using web development
III.
AJAY PANDEY
Enrollment No: 46814802717
ACKNOWLEDGMENTS
My sincere thanks to all the professors in college who taught me these concepts which are
then used to complete this project, Also I want to thank colt steele for such a good course, I
wish I had found this course earlier in my coding journey. I wandered too much through
beginner tutorials, Completing this course has
has boosted my confidence
confidence and I have
have found my
peace in JS development. I want to continue learning JS frameworks.
IV.
REFERENCES
[1] Various, "Wikipedia,"
"Wikipedia," [Online]. Available:
Available: https://en.wikipedia.org/wiki/views_ejs.
https://en.wikipedia.org/wiki/views_ejs.
[2] R. A, "Lighthouse3d.c
"Lighthouse3d.com,"
om," 2015. [Online].
[Online]. Available:
http://www.lighthouse3d.com/tutorials/maths
http://www.lighthouse
3d.com/tutorials/maths/data-persistence-rest/.
/data-persistence-rest/. [Accessed 2019].
[3] Various, "Wikipedia," [Online]. Available:
https://en.wikipedia.org/wiki/authentication_using_passp
https://en.wikipedia.org/wiki/authentication
_using_passport.js.
ort.js.
[4] Various, "Wikipedia,"
"Wikipedia," [Online]. Available:
Available: https://en.wikipedia.org/wiki/java
https://en.wikipedia.org/wiki/java
%27s_script.
[5] Eloquent JavaScript:
JavaScript: A Modern Introduction
Introduction to Programming
Programming
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
SNAPSHOTS
Home page
selected campground
Enrollment No: 46814802717
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
sign up screen
login screen
adding a new campground
Enrollment No: 46814802717
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
adding a new comment
Final discover page
Enrollment No: 46814802717
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
RESULTS AND DISCUSSIONS
Overall the training helped me to understand web development & its practical usage in a
better way and the project I undertook helped me to solidify these concepts. I learned a lot
from the bootcamp developer Mr Colt Steele, who himself is an ace developer He has been in
this thing since past several years & helped various beginners achieve their dream of being a
full stack developer .I am glad that the Department of Computer Science & Engineering,
MAIT provided me this opportunity to undergo this Summer Training. I wish to continue
working on concepts learnt & futher solidifying them in future too .
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
CONCLUSIONS & FUTURE SCOPE
Future scope of Web Development
Due to the high technologies evolve rapidly, the requirements to the developers change as
well. New trends require
require new solutions
solutions along with approach
approaches.
es. If you crave to get insights
into what changes in the industry are yet to come in the near future, then observe what the
programmers should know and consider in 2020 to remain competitive and be the pros in the
field.
1.
The need to know more languages and technologies
There was a time not so long ago when it was enough to learn a single programming
language like C++, JavaScript, PHP, or Python for a good salary. However, web development
is a quite shifting industry and programmers need to have a broad scope of knowledge today
to do the work in the best possible manner. Thus, it’s strongly recommended to learn more
languages and techniques for the fast and easy switch in case it’s needed. Keep in mind that
Python, JavaScript along with WebAssembly will be on the top in 2020.
2. Adaptability
According to the statistics, 51.98
51.98 % of web page views worldwide are mobile internet traffic
in February 2020. It makes the experts believe that mobile-friendly sites are a must-have for
the year and beyond. Of course, in case you’re going to create a trendy website. Today,
people don’t want to use the site that is limited in functionality, hard-to-navigate, and is just
unappealing to the mobile audience. That’s why web development in the direction will be ondemand. So, pay attention to the adaptability of the site to enhance the customer experience
and stay competitive.
3. Less client work more personal projects
Today more and more developers start to think over making their own apps and starting their
own projects than working for a client. First and foremost, there is a hope to design the next
Facebook, Tweeter or something like those services.
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
Also working on your own project makes you always learn and learn more, discover new
ways and approaches. Thus, you’re updated on the latest trends and newest technologies.
technologies.
4. The Bottomline
The future is here. As you could notice not all the trends 2020 mentioned above are new.
Some of them just keep on dominating in the field that requires lots of tech-savvy pros.
The list of hits is much longer and includes Cybersecurity, Motion UI, Frameworks, Hyperautomation, etc. The range can be enhanced depending on the course of the business.
Thee market
Th
market is evolvi
evolving
ng consta
constantl
ntly
y makin
making
g the web develop
developers
ers be awa
aware
re of the trends
trends,,
changes and new solutions appeared. It’s a challenge, but along with that, it’s a driver for
progress.
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
WEEKLY REPORT
Week: 1
Description of activity, task, duty
or Responsibilit
Responsibility
y
HT
H
TML5 & CSS3
Perf
Pe
rfor
orme
med
d wit
with
h Tea
Team
m
No
Perf
Pe
rfor
orme
med
d Alo
Alone
ne
Yes
Time
Ti
me Spe
pent
nt
13 hrs
List one thing that went particularly well this week (area of improvement, new task, etc)
Basics got more cleared, focus was high .
_____________________
__________
______________________
______________________
______________________
_______________________
____________________
________
List one thing that was most challenging this week (issue, problem, difficulty, etc.)
Getting over basic mistakes while coding
_____________________
__________
______________________
______________________
______________________
_______________________
________________
____
List one way you can improve your performance - would have given more time to small
projects rather than theory.
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
WEEKLY REPORT
Week: 2
Description of activity, task, duty
or Responsibilit
Responsibility
y
Bootstrap & JS Basics
Perf
Pe
rfor
orme
med
d wit
with
h Tea
Team
m
Perf
Pe
rfor
orme
med
d Alo
Alone
ne
No
Yes
Time
Ti
me Spe
pent
nt
17 hrs
List one thing that went particularly well this week (area of improvement, new task, etc)
learned bootstrap & JS from basics to advanced .
List one thing that was most challenging this week (issue, problem, difficulty, etc.)
Getting started with JS was the toughest part of the course .
List one way you can improve your performance – Practising more on platforms .
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
WEEKLY REPORT
Week: 3
Description of activity, task, duty
or Responsibilit
Responsibility
y
Perf
Pe
rfor
orme
med
d wit
with
h Tea
Team
m
Advanced JS & Jquery
NO
Perf
Pe
rfor
orme
med
d Alo
Alone
ne
Yes
Time
Ti
me Spe
pent
nt
10 hrs
List one thing that went particularly well this week (area of improvement, new task, etc)
Did a lot of problems on JS to get better.
List one thing that was most challenging this week (issue, problem, difficulty, etc.)
Did not give proper time to it .
List one way you can improve your performance – increasing the time spent on problemsolving .
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
WEEKLY REPORT
Week: 4
Description of activity, task, duty
or Responsibilit
Responsibility
y
Perf
Pe
rfor
orme
med
d wit
with
h Tea
Team
m
JS Advanced projects & Back
end basics
No
Perf
Pe
rfor
orme
med
d Alo
Alone
ne
Yes
Time
Ti
me Spe
pent
nt
15 hrs
List one thing that went particularly well this week (area of improvement, new task, etc)
Tree basics were cleared while developing small games & projects.
List one thing that was most challenging this week (issue, problem, difficulty, etc.)
advanced concepts
concepts took a lot of time .
List one way you can improve your performance – By understanding JS better we can do
almost anything easily.
YELPCAMP Implementati
Implementation
on using web development
AJAY PANDEY
Enrollment No: 46814802717
WEEKLY REPORT
Week: 5
Description of activity, task, duty
or Responsibilit
Responsibility
y
Node JS, express & mongoDB
Perf
Pe
rfor
orme
med
d wit
with
h Tea
Team
m
No
Perf
Pe
rfor
orme
med
d Alo
Alone
ne
Yes
Time
Ti
me Spe
pent
nt
12 hrs
List one thing that went particularly well this week (area of improvement, new task, etc)
Back end actually started affect the whole learnings.
List one thing that was most challenging this week (issue, problem, difficulty, etc.)
Complex back end & mixing up of concepts .
List one way you can improve your performance – Creating projects is the best way .
YELPCAMP Implementation using web development
AJAY PANDEY
Enrollment No: 46814802717
WEEKLY REPORT
Week: 6,7,8
Description of activity, task, duty
or Responsibilit
Responsibility
y
Advanced back end & yelpcamp
main project
Perf
Pe
rfor
orme
med
d wit
with
h Tea
Team
m
Perf
Pe
rfor
orme
med
d Alo
Alone
ne
No
Yes
Time
Ti
me Sp
Spen
entt
42 hrs
List one thing that went particularly well this week (area of improvement,
improvement, new task, etc)
main project helped clearing all important concepts .
List one thing that was most challenging this week (issue, problem, difficulty, etc.)
a lot of concepts got mixed up, it will take more practise .
List one way you can improve your performance – Practise a lot of problems on platforms.