INDUSTRIAL TRAINING REPORT

ON
“The Complete 2020 Web Development Bootcamp”
Instructor: Dr. Angela Yu
Course on: Udemy

By
ADITYA ARYA
(Registration Number: 201800208)
5th/B
In partial fulfillment of requirements for the award of degree in
Bachelor of Technology in Computer Science and Engineering
(2020)
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
SIKKIM MANIPAL INSTITUTE OF TECHNOLOGY
(A constituent college of Sikkim Manipal University)
MAJITAR, RANGPO, EAST SIKKIM – 737136

 LIST OF CONTENT

Chapter Title Page No

1. Introduction to Front-End 4
2. HTML 4
3. CSS 6
4. Bootstrap 8
5. Javascript (ES6) 8
6. The DOM 10
7. jQuery 11
8. Introduction to Back-End 12
9. Node.js & Express.js 12
10. Application Programming Interfaces (APIs) 13
11. Databases 13
12. SQL 13
13. MongoDB & Mongoose 14
14. Authentication & Security 15
15. Summary 16
 INTRODUCTION TO FRONT-END
A web application, or any application for that matter, consists of two parts: Front-end and
Back-end. The front-end is the user interface with which the user interacts and hence it is
an essential part of a website to attract users and to conduct marketing.

HTML
• HTML stands for Hyper Text Markup Language
• It is the fundamental structure of a website
• It is written by using tags that contain data, and have attributes
• "Hypertext" refers to links that connect web pages to one another, either within a single
website or between websites.
• It will be required for any web application, and is a vital part of front-end development.

HTML Tags & Syntax

1. Heading Tags
Any document starts with a heading. You can use different sizes for your headings.
HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one
line after that heading.
2. Paragraph Tag
HTML paragraphs are defined with the <p> tag.
3. Line break Tag
Whenever you use the <br /> element, anything following it starts from the next line.
This tag is an example of an empty element, where you do not need opening and closing
tags, as there is nothing to go in between them.
4. HTML Formatting Elements
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
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> - Small text

• <del> - Deleted text

• <ins> - Inserted text

• <sub> - Subscript text

5. HTML Comments
Comment tags are used to insert comments in the HTML source code. You can add
comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
6. Links
Links are found in nearly all web pages. Links allow users to click their way from page to
page. HTML links are hyperlinks. In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
7. HTML Images
In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains
attributes only, and does not have a closing tag. The src attribute specifies the URL (web
address) of the image. alt attribute provides an alternate text for an image, if the user for
some reason cannot view it.
<img src="img_demo.jpg" alt="Demo Image">
8. HTML List
HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements. Lists may contain −
· <ul> − An unordered list. This will list items using plain bullets.

· <ol> − An ordered list. This will use different schemes of numbers to list your items.

· <dl> − A definition list. This arranges your items in the same way as they are arranged
in a dictionary.
9. HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.
By default, table headings are bold and centered. A table data/cell is defined with the
<td> tag.
10. HTML Forms
HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name,
email address, credit card, etc.

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
• Three types: Inline, Internal, External
• External stylesheets are stored in CSS files

The CSS file (when using external CSS, which is the standard way), the file is then linked
to the html page by using a HTML link tag.
Syntax
h1 {
background-color: red;
 border: 1px solid blue;
}
In this example, h1 is the tag selector and the data inside the curly braces depicts how h1
tags will be styled

background-color is the property used to depict the background color of the element. The
value assigned is red, and hence all h1 tags will have a red background, unless
overriden by an internal or inline style.

CSS Pseudo Selectors

hover - Apply rule when mouse is over element (e.g. tooltip)

p:hover, a:hover {
background-color: yellow;
}

This will apply the yellow color to both the tags a and p when a mouse hovers over it.

CSS Properties control many style properties of an element:

● Coloring
● Size
● Position
● Visibility
● Many more: (e.g. p: { text-decoration: line-through; })
● Also used in animation

Another important concept in CSS is the Box Model:

Total element width = width + left padding + right padding + left border + right border +
left margin + right margin

Margin and Padding are transparent.

Some more common properties

background-image: image for element's background

background-repeat: should background image be displayed in a repeating pattern
(versus once only)
font, font-family, font-size, font-weight, font-style: font information for text
text-align, vertical-align: Alignment: center, left, right
cursor - Set the cursor when over element (e.g. help)
Bootstrap

Bootstrap is a front-end framework meant to ease styling for developers. To use, the user
needs to link the bootstrap CDN in the html file and then attach classes to different
elements, as shown in the documentation, and the classes apply styles to those elements.
It makes styling especially for a large application much easier and is widely used.

Javascript ES6

JavaScript is a dynamic computer programming language. It is lightweight and most

commonly used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming
language with object-oriented capabilities.

The JavaScript syntax defines two types of values:

• Fixed values
• Variable values

Fixed values are called Literals.

Variable values are called Variables.

There are 8 basic data types in JavaScript.

• number for numbers of any kind: integer or floating-point, integers are limited by
±253.
• bigint is for integer numbers of arbitrary length.
• string for strings. A string may have zero or more characters, there’s no separate
single-character type.
• boolean for true/false.
• null for unknown values – a standalone type that has a single value null.
• undefined for unassigned values – a standalone type that has a single
value undefined.
• object for more complex data structures.
• symbol for unique identifiers.
 Comparisons

• Comparison operators return a boolean value.

• Strings are compared letter-by-letter in the “dictionary” order.
• When values of different types are compared, they get converted to numbers (with
the exclusion of a strict equality check).
• The values null and undefined equal == each other and do not equal any other
value.

Loops

• while – The condition is checked before each iteration.

• do..while – The condition is checked after each iteration.
• for (;;) – The condition is checked before each iteration, additional settings
available.
To make an “infinite” loop, usually the while(true) construct is used. Such a loop, just
like any other, can be stopped with the break directive.

If we don’t want to do anything in the current iteration and would like to forward to the
next one, we can use the continue directive.

break/continue support labels before the loop. A label is the only way for break/
continue to escape a nested loop to go to an outer one.

Functions
A function declaration looks like this:

function name(parameters, delimited, by, comma) {

/* code */
}
• Values passed to a function as parameters are copied to its local variables.
• A function may access outer variables. But it works only from inside out. The
code outside of the function doesn’t see its local variables.
• A function can return a value. If it doesn’t, then its result is undefined.

Object Oriented Programming

They store properties (key-value pairs), where:

• Property keys must be strings or symbols (usually strings).

• Values can be of any type.
To access a property, use:

• The dot notation: obj.property.

• Square brackets notation obj["property"]. Square brackets allow to take the key
from a variable, like obj[varWithKey].
Additional operators:

• To delete a property: delete obj.prop.

• To check if a property with the given key exists: "key" in obj.
• To iterate over an object: for (let key in obj) loop.
There are many other kinds of objects in JavaScript:

• Array to store ordered data collections,

• Date to store the information about the date and time,
• Error to store the information about an error.

The DOM

An HTML/XML document is represented inside the browser as the DOM tree.

• Tags become element nodes and form the structure.

• Text becomes text nodes.
• Everything in HTML has its place in DOM, even comments.
You use developer tools to inspect DOM and modify it manually.

DOM nodes have properties and methods that allow us to travel between them, modify
them, move around the page, and more.

There are 6 main methods to search for nodes in DOM:

Searches Can call on an Live

Method
by... element? ?
 CSS-
querySelector ✔ -
selector
CSS-
querySelectorAll ✔ -
selector
getElementById id - -
getElementsByName name - ✔
getElementsByTagN
tag or '*' ✔ ✔
ame
getElementsByClas
class ✔ ✔
sName

By far the most used are querySelector and querySelectorAll, but getElementBy* can be
helpful or found in the old scripts.

jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML
document traversal and manipulation, event handling, animation, and Ajax much simpler
with an easy-to-use API that works across a multitude of browsers.

DOM Traversal and Manipulation

Get the <button> element with the class 'continue' and change its HTML to 'Next Step...'

$( "button.continue" ).html( "Next Step..." )

Introduction to Back-End
The backend is the hidden part of a website that handles all user input and deals with all
the requests, it’s where the website reaches out to servers and communicates with APIs.

Node.js

Node.js is an open-source server side runtime environment built on Chrome's V8

JavaScript engine. It provides an event driven, non-blocking (asynchronous) I/O and
cross-platform runtime environment for building highly scalable server-side applications
using JavaScript.

Module in Node.js is a simple or complex functionality organized in single or multiple

JavaScript files which can be reused throughout the Node.js application.

var module = require(‘module_name’);

var http = require('http');

var server = http.createServer(function(req, res){

//write code here

});

server.listen(5000);

Express.js

Express.js is a web application framework for Node.js. It provides various features that
make web application development fast and easy which otherwise takes more time using
only Node.js. It can easily be installed, like many other packages, using npm (Node
Package Manager).

Advantages of Express.js:
1. Makes Node.js web application development fast and easy.
2. Easy to configure and customize.
3. Allows you to define routes of your application based on HTTP methods and URLs.
4. Includes various middleware modules which you can use to perform additional tasks
on request and response.
5. Easy to integrate with different template engines like Jade, Vash, EJS etc.
6. Allows you to define an error handling middleware.
7. Easy to serve static files and resources of your application.
8. Allows you to create REST API server.
9. Easy to connect with databases such as MongoDB, Redis, MySQL

Application Programming Interfaces (APIs)

APIs let your product or service communicate with other products and services without
having to know how they’re implemented. This can simplify app development, saving
time and money. When you’re designing new tools and products—or managing existing
ones—APIs give you flexibility; simplify design, administration, and use; and provide
opportunities for innovation. The google maps API is a common example and can be seen
in many apps such as Swiggy and AirBnB.

Databases

A database record is collection of fields about the same person, item, or object in a
database. SQL databases are those databases with a predefined strict schema. A schema is
what determines the data that will be stored and the relations between different tables,
etc.

This course mainly covered mongoDB as the main database, using mongo locally as well
as mongo Atlas when the app was deployed.

MongoDB

As a definition, MongoDB is an open-source database that uses a document-oriented data

model and a non-structured query language. It is one of the most
powerful NoSQL systems and databases around, today.
Architecture:
Database: In simple words, it can be called the physical container for data. Each of the
databases has its own set of files on the file system with multiple databases existing on a
single MongoDB server.
Collection: A group of database documents can be called a collection. The RDBMS
equivalent to a collection is a table. The entire collection exists within a single database.
There are no schemas when it comes to collections. Inside the collection, various
documents can have varied fields, but mostly the documents within a collection are meant
for the same purpose or for serving the same end goal.
Document: A set of key–value pairs can be designated as a document. Documents are
associated with dynamic schemas. The benefit of having dynamic schemas is that a
document in a single collection does not have to possess the same structure or fields.
Also, the common fields in a collection’s document can have varied types of data.

MongoDB SQL

Document-oriented and non- Relational database

relational database

Document based Row based

Field based Column based

Collection based and key– Table based

value pair

Gives JavaScript client for Doesn’t give JavaScript for

querying querying

Relatively easy to setup Comparatively not that easy to

setup

Unaffected by SQL injection Quite vulnerable to SQL

injection

Mongoose
Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It
manages relationships between data, provides schema validation, and is used to translate
between objects in code and the representation of those objects in MongoDB.

This package can also be installed using npm.

Like core modules, Node.js can require this using:

const mongoose = require(‘mongoose’);

, and then connect to local database using:

mongoose.connect('mongodb://localhost:27017/my_database');

Define a schema and a model:

const { Schema } = mongoose;

const personSchema = new Schema({
name: String,
age: Number,
});
const Person = mongoose.model('Person', personSchema);

Authentication & Security

The package used for implementing authentication using Node.js is Passport.js.

Passport is authentication middleware for Node.js. Extremely flexible and modular,

Passport can be unobtrusively dropped in to any Express-based web application. A
comprehensive set of strategies support authentication using a username and
password, Facebook, Twitter, and more.

It simplifies the auth code.

app.post('/login', passport.authenticate('local', { successRedirect: '/',

failureRedirect: '/login' }));

Another major topic was OAuth:

OAuth 2.0 provides an authorization framework which allows users to authorize access to
third-party applications. When authorized, the application is issued a token to use as an
authentication credential. This has two primary security benefits:
1. The application does not need to store the user's username and password.
2. The token can have a restricted scope (for example: read-only access).

Third party apps like google, Facebook and twitter can be used to login on the website
and only the user token is stored in the database. It also means that password encryption
techniques don’t need to be bothered with.

Summary:

To become a software engineer, the concepts of software development are vital and
necessary. Full-stack web development is a fundamental for software development for
web apps and I’m glad I took this course.

I’m now comfortable with the following technologies and practices:

1. HTML
2. CSS
3. Javascript
4. Node.js
5. DBMS
6. Authentication
7. App deployment

Future Scope

The next ideal step is to choose a framework such as React, which I started a course on
after I completed this. This would allow me to create front-ends in a much more
proficient and efficient manner, and with the knowledge I’ve gained of Node.js and
MongoDB, I plan to get an internship as a MERN stack engineer and work up from there.

Advanced Web Technologies is the elective I selected which I’m certain will also prove
useful in the future, with specific regard to PHP.