RAJASTHAN TECHNICAL

UNIVERSITY, KOTA

DEPARTMENT OF COMPUTER SCIENCE ENGINEERING

Summer Internship Report

TOPIC: Introduction to Cloud Development with HTML, CSS, and JavaScript

(by edX and IBM)

SUBMITTED TO:   SUBMITTED BY:

Dr. Nirmala Sharma Name: AYUSH GOYAL

Associate Professor Roll No: 18/431

Department of Computer Science                Univ. Roll No: 18EUCCS009

                                                                            Branch: Computer Science Engg.

 Semester/Year: 7 SEM Final Yr.

th

CERTIFICATE
ACKNOWLEDGEMENT
I would like to thank our institute University Departments, Rajasthan Technical
University, Kota for giving us the opportunity to do training/course in these
hard times of the Covid-19 pandemic. 
I would like to extend special thanks to:
Dr. R.K. Banyal – HOD CSE Department RTU, Kota
Dr. Nirmala Sharma- Associate Professor CSE Department
I would also like to thank “edX and IBM” to give me this golden opportunity to
learn and implement my skills in this course. Without their support, one
cannot achieve this success.
I also wanted to thank our parents for financing our studies in this college as
well as for constantly encouraging us to learn Engineering. Their personal
sacrifice in providing this opportunity to learn Engineering is gratefully
acknowledged.

DECLARATION
I hereby declare that the report based on the summer training/course was
carried out and written by me with my correct and complete knowledge. This
work has not been previously formed the basis for the award of any degree or
diploma or certificate nor has been submitted elsewhere for the award of any
degree or diploma.

Date: 23/12/2021                                                                   Ayush Goyal

  
          18EUCCS009

PREFACE
The present report is the outcome of the online course on “Web Development-
Introduction to Cloud Development with HTML, CSS, and JavaScript”. The
purpose of this training is to provide a conceptual introduction to web
development fundamentals and its frameworks. Web development is the work
involved in developing a website for the Internet or an intranet. Web
development can range from developing a simple single static page of plain
text to complex web applications, electronic businesses, and social network
services.

During the tenure of 2 months of internship, I worked on different

technologies like HTML, CSS, JavaScript and GitHub. Also, we build a simple
interest calculator using these technologies.
This report elucidates the concepts learnt during the internship along with
application of these concepts on the project. 

Table of Contents

 Introduction 
o Objectives
 o Goals
o Motivation 
o Layout

 Internship Enterprise
o About Website and course

 Frontend development
o HTML
o CSS
o Javascript
o GitHub

 Projects 
o Simple interest calculator with styling

 Conclusion

CHAPTER 1:
INTRODUCTION
1.1 Objectives
Internship is thought on addition a few encounters from the different a
few associations which will encourage bounty to make a connection
between the hypothetical and reasonable data. It includes profitable
ability like usable working environment or pc instrumentation, taking
care of a spread of things in the meantime, sorting out or dissecting
learning, spending plans or rising collaboration, composing, and talking
gifts. It’s indispensable to get a handle on the best approach to impart
data to outsiders, managers, and companions. While doing an
undergraduate program in computer science and engineering at
Rajasthan Technical University, I considered a few programming
courses Last 4 years. Be that as it may, this is frequently not happy to
get a handle on the web developing because of it's an extremely huge
marketplace. to encourage a sound data concerning programming
which has net application style and Development.
Objectives
• Understand basic concept and structure of HTML5, CSS, JavaScript,
GitHub 
• To get awareness about the various job opportunities. 
• To perceive communicational skills and organizational dynamics. 
• To get educated about the official habitat. 
• Opportunities for technical skill. 

1.2 Goals
• Knowing practical knowledge about programming. 
• Gain knowledge about HTML5, CSS, JavaScript etc. 
• Increase communication skill with other. 
• Gain essential background knowledge. 
• Works well with others. 
• Develop research skills. 
• Improve administrative skill. 
• Increase the capability for solving the problems. 
• Knowledge of professional journals and newsletters. 
• Knowledge of key professional. 
• Improve professional ethics and values. 
• Improve technical skill.
1.3 Motivation
For internship to induce the sensible expertise within the field of
technology and Engineering. It's extraordinarily vital that knowing
about hypothetical information and actualize inside the reasonable
field to broaden our gifted ability in building work advertise. The
motivation of this internship actually came from the intention of
learning more about the job sectors and the work environment of IT
farms. A desktop base system of creating websites is easy to learn.
Before joining the internship, i knew that I am in a primary stage and
beginner level in learning web development, my first task is to learn
and create and be creative. The learning curve of a web development is
such interesting and charming. It is very simple to
build a project fully by HTML, CSS, MYSQL and PHP when you know
what you are doing.
1.4 Layout of Report
This Layout contains key points of this report. Table 1 presents general
page layout specifications. 
• Chapter 1 describes the details of introduction of web development. 
• Objective. In this portion, the objective of the internship is
described. 
• Goals describes the aim of the internship. The key features of
this part is to analyze the learning by the internship. It also
shows the effectiveness and the choices can be made in future. 
• Report layout. It is a overview of the chapters contain in the
full report. 
• Chapter 2 
This chapter is dedicated to describe the course I am doing the
internship in. The motto and the goal of the course is stated in this
chapter. 
• Chapter 3 
This chapter describes frontend concepts learnt during the internship.
• Chapter 4
This chapter describes the projects implemented during the internship.
• Chapter 5
This chapter summarises the learnings during the 2 month internship

CHAPTER 2:
 Internship Enterprise
1.1 About Website and Course

Learning Objectives

After completing this course, you will be able to:

 Explain the roles of Front-end, back-end, and full stack developers in developing
Cloud Applications.
 Describe the common languages, libraries, frameworks, and other tools that
developers use.
 Demonstrate basic programming techniques in HTML5.
 Enhance the appearance of a website by using CSS.
 Describe the HTML5 input element and its attributes.

 Use JavaScript to enhance the interactivity of a Cloud Application or website.

 Manage your projects in GitHub.

About website

edX is an American massive open online course provider created by Harvard and MIT. It
hosts online university-level courses in a wide range of disciplines to a worldwide student
body, including some courses at no charge. It also conducts research into learning based on
how people use its platform

CHAPTER 3:
 Frontend Development
The part of a website that the user interacts directly is termed as front end. It
is also referred to as the ‘client side’ of the application.

Frontend Development Roadmap

HTML: HTML stands for Hyper Text Markup Language. It is used to design the
frontend portion of web pages using markup language. It acts as a skeleton for
a website since it is used to make the structure of a website.

CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed

language intended to simplify the process of making web pages presentable. It
is used to style our website.

JavaScript: JavaScript is a scripting language used to provide a dynamic

behavior to our website.

Introduction to HTML -
HTML stands for HyperText Markup Language. It is used to design web pages
using a markup language. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the web pages. A markup
language is used to define the text document within a tag which defines the
structure of web pages. This language is used to annotate (make notes for the
computer) text so that a machine can understand it and manipulate text
accordingly. Most markup languages (e.g. HTML) are human-readable. The
language uses tags to define what manipulation has to be done on the text. 

HTML is a markup language used by the browser to manipulate text, images,

and other content, in order to display it in the required format. HTML was
created by Tim Berners-Lee in 1991. The first-ever version of HTML was HTML
1.0, but the first standard version was HTML 2.0, published in 1999.

Elements and Tags: HTML uses predefined tags and elements which tell the
browser how to properly display the content. Remember to include closing
tags. If omitted, the browser applies the effect of the opening tag until the end
of the page.

HTML page structure: The basic structure of an HTML page is laid out below. It
contains the essential building-block elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which all web pages are created.
  <DOCTYPE! html> : This is the document type declaration (not
technically a tag). It declares a document as being an HTML document.
The doctype declaration is not case-sensitive.
 <html> : This is called the HTML root element. All other elements are
contained within it.
 <head> : The head tag contains the “behind the scenes” elements for a
webpage. Elements within the head aren’t visible on the front-end of a
webpage. HTML elements used inside the <head> element include: 
 <body> : The body tag is used to enclose all the visible content of a
webpage. In other words, the body content is what the browser will
show on the front-end.

Features of HTML: 

 It is easy to learn and easy to use.

 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.

HTML5 Tags and Structural Elements -

 <!--...--> Defines a comment

 <!DOCTYPE> Defines the document type
 <a> Defines a hyperlink
 <article> Defines an article
 <aside> Defines content aside from the page content
 <audio> Defines embedded sound content
 <b> Defines bold text
 <body> Defines the document's body
 <br> Defines a single line break
 <button> Defines a clickable button
 <dir> Not supported in HTML5. Use <ul> instead.
 <div> Defines a section in a document
 <dl> Defines a description list
 <dt> Defines a term/name in a description list
 <em> Defines emphasized text 
  <footer> Defines a footer for a document or section
 <form> Defines an HTML form for user input
 <frame> Not supported in HTML5.
 <h1> to <h6> Defines HTML headings
 <head> Contains metadata/information for the document
 <header> Defines a header for a document or section
 <hr> Defines a thematic change in the content
 <html> Defines the root of an HTML document
 <i> Defines a part of text in an alternate voice or mood
 <img> Defines an image
 <input> Defines an input control
 <label> Defines a label for an <input> element
 <li> Defines a list item
 <nav> Defines navigation links
 <p> Defines a paragraph
 <param> Defines a parameter for an object
 <samp> Defines sample output from a computer program
 <script> Defines a client-side script
 <section> Defines a section in a document
 <select> Defines a drop-down list
 <small> Defines smaller text
 <span> Defines a section in a document
 <strong> Defines important text
 <style> Defines style information for a document
 <sub> Defines subscripted text
 <table> Defines a table
 <tbody> Groups the body content in a table
 <td> Defines a cell in a table
 <textarea> Defines a multiline input control (text area)
 <th> Defines a header cell in a table
 <thead> Groups the header content in a table
 <time> Defines a specific time (or datetime)
 <title> Defines a title for the document
 <tr> Defines a row in a table
 <ul> Defines an unordered list

HTML5 Input Element: Attributes for the Input Tag 

button A push button with no default behavior displaying the value of
the value attribute, empty by default.

checkbox A check box allowing single values to be selected/deselected.

color A control for specifying a color; opening a color picker when

active in supporting browsers.

date A control for entering a date (year, month, and day, with no
time). Opens a date picker or numeric wheels for year, month,
day when active in supporting browsers.

datetime- A control for entering a date and time, with no time zone.
local Opens a date picker or numeric wheels for date- and time-
components when active in supporting browsers.

email A field for editing an email address. Looks like a text input, but
has validation parameters and relevant keyboard in supporting
browsers and devices with dynamic keyboards.

file A control that lets the user select a file. Use the accept attribute
to define the types of files that the control can select.

hidden A control that is not displayed but whose value is submitted to

the server. There is an example in the next column, but it's
hidden!

image A graphical submit button. Displays an image defined by the src

attribute. The alt attribute displays if the image src is missing.

month A control for entering a month and year, with no time zone.

number A control for entering a number. Displays a spinner and adds

default validation when supported. Displays a numeric keypad in
some devices with dynamic keypads.

password A single-line text field whose value is obscured. Will alert user if
site is not secure.

radio A radio button, allowing a single value to be selected out of

multiple choices with the same name value.

range A control for entering a number whose exact value is not

important. Displays as a range widget defaulting to the middle
 value. Used in conjunction min and max to define the range of
acceptable values.

reset A button that resets the contents of the form to default values.
Not recommended.

search A single-line text field for entering search strings. Line-breaks

are automatically removed from the input value. May include a
delete icon in supporting browsers that can be used to clear the
field.

submit A button that submits the form.

text The default value. A single-line text field. Line-breaks are

automatically removed from the input value.

time A control for entering a time value with no time zone.

url A field for entering a URL. Looks like a text input, but has
validation parameters and relevant keyboard in supporting
browsers and devices with dynamic keyboards.

Additional HTML Elements -

<address> The <address> HTML element indicates that the enclosed

HTML provides contact information for a person or people,
or for an organization.

<article> The <article> HTML element represents a self-contained

composition in a document, page, application, or site, which
is intended to be independently distributable or reusable
(e.g., in syndication).Examples include: a forum post, a
magazine or newspaper article, or a blog entry, 

<aside> The <aside> HTML element represents a portion of a

document whose content is only indirectly related to the
document's main content. Asides are frequently presented
as sidebars or call-out boxes.

<footer> The <footer> HTML element represents a footer for its

 nearest sectioning content or sectioning root element. A
<footer> typically contains information about the author of
the section, copyright data or links to related documents.

<header> The <header> HTML element represents introductory

content, typically a group of introductory or navigational
aids. It may contain some heading elements but also a logo, a
search form, an author name, and other elements.

<h1>, <h2>, The <h1> to <h6> HTML elements represent six levels of
<h3>, <h4>, section headings. <h1> is the highest section level and <h6>
<h5>, <h6> is the lowest.

<main> The <main> HTML element represents the dominant content

of the body of a document. The main content area consists
of content that is directly related to or expands upon the
central topic of a document, or the central functionality of an
application.

<nav> The <nav> HTML element represents a section of a page

whose purpose is to provide navigation links, either within
the current document or to other documents. Common
examples of navigation sections are menus, tables of
contents, and indexes.

<section> The <section> HTML element represents a generic

standalone section of a document, which doesn't have a
more specific semantic element to represent it. Sections
should always have a heading, with very few exceptions.
CSS: Styling HTML

CSS (Cascading Style Sheets) is a stylesheet language used to design the

webpage to make it attractive. The reason for using CSS is to simplify the
process of making web pages presentable. CSS allows you to apply styles to
web pages. More importantly, CSS enables you to do this independent of the
HTML that makes up each web page.

There are three types of CSS which are given below:

 Inline CSS
 Internal or Embedded CSS
 External CSS

Basic Format : It is the basic structure of an HTML webpage and we use CSS
style inside the webpage. In a web page, we use internal CSS (i.e. adding CSS
code inside <head> tag of HTML code).
<!DOCTYPE html>
<html>
<head>
     <!-- Head section of web page -->
     <title></title>
     <!-- Stylesheet of web page -->
     <style></style>
</head>
  
<body>
     <!-- Body section of web page →
</body>
</html>

Some Basic CSS properties -

 CSS Colors
 CSS Backgrounds
 CSS Borders
 CSS Margins
 CSS Padding
 CSS Height/Width
 CSS Box Model
 CSS Outline
 CSS Text
 CSS Fonts
 CSS Icons
 CSS Links
 CSS Lists
 CSS Tables
 CSS Display
 CSS Max-width
 CSS Position
 CSS Z-index
 CSS Overflow
 CSS Float
 CSS Inline-block
 CSS Align
 CSS Combinators
 CSS Dropdowns
  CSS Forms
 CSS Website Layout
 CSS Units
 CSS Backgrounds
 CSS Box Sizing
 CSS Media Queries
 CSS Flexbox

JavaScript Language: Overview and Syntax -

JavaScript is the world's most popular lightweight, interpreted compiled

programming language. It is also known as scripting language for web pages. It
is well-known for the development of web pages, many non-browser
environments also use it. JavaScript can be used for Client-side developments
as well as Server-side developments.

JavaScript can be added to your HTML file in two ways:

 Internal JS: We can add JavaScript directly to our HTML file by writing
the code inside the <script> tag. The <script> tag can either be placed
inside the <head> or the <body> tag according to the requirement.
 External JS: We can write JavaScript code in other file having an
extension .js and then link this file inside the <head> tag of the HTML file
in which we want to add this code.
Syntax -

<script>

     // JavaScript Code

</script>

JavaScript: Variables and Control Statements -

Variables in JavaScript are containers that hold reusable data. It is the basic
unit of storage in a program. 

 The value stored in a variable can be changed during program execution.

 A variable is only a name given to a memory location, all the operations
done on the variable affects that memory location.
 In JavaScript, all the variables must be declared before they can be used.

// declaring single variable

var name;

// declaring multiple variables

var name, title, num;

// initializing variables

var name = "Harsh";

name = "Rakesh";

if-else Statement in JavaScript -

The conditional statement will perform some action for the specific condition.
If the condition meet then the particular block of action will be executed
otherwise it will execute another block of action that satisfies that particular
condition.
JavaScript’s conditional statements:

 if
 if-else
 nested-if
 if-else-if ladder

Syntax:

1. if (condition)
2.     statement;
3. else if (condition)
4.     statement;
5. .
6. .
7. else
8.     statement;

Functions in JavaScript -
A function is a set of statements that take inputs, do some specific
computation, and produce output. Basically, a function is a set of statements
that performs some tasks or does some computation and then returns the
result to the user.

The idea is to put some commonly or repeatedly done tasks together and
make a function so that instead of writing the same code again and again for
different inputs, we can call that function.

Function Definition

Before, using a user-defined function in JavaScript we have to create one. We

can use the above syntax to create a function in JavaScript. A function
definition is sometimes also termed as function declaration or function
statement.

Below are the rules for creating a function in JavaScript:

 Every function should begin with the keyword function followed by,
 A user defined function name which should be unique,
 A list of parameters enclosed within parentheses and separated by
commas,
 A list of statements composing the body of the function enclosed within
curly braces {}.

Calling Functions : After defining a function, the next step is to call them to
make use of the function. We can call a function by using the function name
separated by the value of parameters enclosed between parenthesis and a
semicolon at the end. Below syntax shows how to call functions in JavaScript:

functionName( Value1, Value2, ..);

Return Statement : There are some situations when we want to return some
values from a function after performing some operations. In such cases, we
can make use of the return statement in JavaScript. This is an optional
statement and most of the time the last statement in a JavaScript function.
Look at our first example with the function named as calcAddition. This
function is calculating two numbers and then returning the result. The most
basic syntax of using the return statement is:

return value;

Client-Side JavaScript: with HTML -

The HTML <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script statements, or it points to an

external script file through the src attribute Common uses for JavaScript are
image manipulation, form validation, and dynamic changes of content . To
select an HTML element, JavaScript most often uses the
document.getElementById() method . This JavaScript example writes "Hello
JavaScript!" into an HTML element with id="demo":

Client-Side JavaScript: with DOM -

Why is DOM required?

HTML is used to structure the web pages and Javascript is used to add
behavior to our web pages. When an HTML file is loaded into the browser, the
javascript can not understand the HTML document directly. So, a
corresponding document is created(DOM). DOM is basically the representation
of the same HTML document but in a different format with the use of objects.
Javascript interprets DOM easily i.e javascript can not understand the
tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM.
Now, Javascript can access each of the objects (h1, p, etc) by using different
functions.

Methods of Document Object:

 write(“string”): writes the given string on the document.

 getElementById(): returns the element having the given id value.
 getElementsByName(): returns all the elements having the given name
value.
 getElementsByTagName(): returns all the elements having the given tag
name.
 getElementsByClassName(): returns all the elements having the given
class name.

CHAPTER 4:
Project

1. Simple interest calculator.

Link to the website- 
file:///C:/Users/AYUSH/Downloads/simple%20calculator/index.html
 CHAPTER 5:
Conclusion
In nutshell, this course has an excellent and rewarding experience. I can
conclude that there have been a lot I've learnt from my work at trainin.
Needless to say, the technical aspects of the work I’ve done are not flawless
and could be improved provided enough time.
As someone with no prior experience in front end development whatsoever, I
believe my time spent in training and discovering new languages was well
worth it and contributed to finding an acceptable solution to an important
aspect of Web Design and Development. Two main things that I’ve learned are
the importance of time management skills and self-motivation. Although I have
often stumbled upon the problem at university. They had to be approached
differently in a working environment.

Working with web development language has increased my interest in them.