SUMMER TRAINING REPORT

ON

FRONT-END WEB DEVELOPMENT

Submitted in partial fulfillment of requirement for the award of the degree

BACHELOR’S IN COMPUTER APPLICATION

in
COMPUTER SCIENCE AND ENGINEERING
AT

DELHI TECHNICAL CAMPUS

Submitted by:
Raj Mishra
00318002020

Submitted to:
Mrs. Nidhi Sharma
(Assistant professor)

DELHI TECHNICAL CAMPUS

GREATER NOIDA
(Affiliated by Guru Gobind Singh Indraprastha University)

1
 CERTIFICATE

This is to certify that the content of this project entitled, “Omnifood” by Raj Mishra is the
bonafide work of him Submitted to Mrs. Nidhi Sharma Assistant Professor of department of
Computer Science, Delhi Technical Campus, G.B Nagar for Consideration in partial fulfillment of
the requirement of GGSIPU, Delhi.

The original research work was carried out by me under the supervision of Mrs. Nidhi Sharma in
the academic year 2021-2022. On the basis of the declaration made by him, i recommend this
project report for evaluation.

Date - 27/12/2022
Name - Raj Mishra
Branch & Sem - BCA 5th-Sem

Certified by - Mrs. Nidhi Sharma

Designation - Assistant Professor
Dptt. Of Computer Science
D.T.C, Greater Noida, U.P., 201308

2
 ACKNOWLEDGEMENT

It gives me immense pleasure to present this summer training report on front end web development
training carried out through Udemy in partial fulfillment of the BCA Program at Delhi Technical Campus
Greater Noida.

I would like to thank my teacher Mrs. Nidhi Sharma who gave me the golden opportunity to do this
wonderful project of developing a food ordering website “Omnifood”.

She also helped me in completing my project. I came to know about so many new things in between the
completion of the project. I’m really thankful to her .

Now i would like to thank my parents and some classmates who helped me a lot in finalizing this project
within the limited time frame.

Raj Mishra

3
 Table of Contents
S.No Particulars Page No.
1 Cover Page 1

2 Certificate 2

3 Acknowledgement 3

4 List of Figures 5

5 About Udemy 6

1.Chapter 1 - Introduction to frontend and web development

1.1 Website
1.2 Web Page
1.3 Languages Used To Create A Front-end website
1.3.1 HTML
1.3.2 CSS
6 1.3.3 Js 7 - 13
1.3.4 Bootstrap
1.4 Tool Used
1.4.1 VS Code
1.4.2 Web Browser
1.5 Omnifood

2. Chapter 2 - All about project, Hardware and Software

Implementation
2.1 HTML
2.1.1 Some Important HTML Tags
7 2.1.2 Some Other HTML tags are 14 - 22
2.2 CSS
2.2.1 Types of CSS
2.3 Code Snippets

8 3. Chapter 3 - Result (Snippets) 23 - 26

9 4. Chapter 4 - Conclusion 27

10 References 28

4
 List Of Figures
Figure Title

Fig 1 Udemy

Fig 1.1 Frontend Web Development

Fig 1.2 Html 5

Fig 1.3 Css 3

Fig 1.4 Javascript

Fig 1.5 Bootstrap

Fig 1.6 Visual Studio Code Editor

Fig 1.7 Omnifood

Fig 2.1 Code Snippets ( Html & Css )

Fig 2.2 Code Snippets ( Html & Css )

Fig 2.3 Code Snippets ( Html & Css )

Fig 2.4 Code Snippets ( Html & Css )

Fig 2.5 Code Snippets ( Html & Css )

Fig 2.6 Code Snippets ( Html & Css )

Fig 3.1 Result Snippets

Fig 3.2 Result Snippets

Fig 3.3 Result Snippets

Fig 3.4 Result Snippets

Fig 3.5 Result Snippets

Fig 3.6 Result Snippets

5
UDEMY

Fig 1 - Udemy

Udemy is an online learning website that has more than 130,000 online courses. The platform is a great
option if you want to develop a particular skill. The different categories of courses on the site include
business, development, IT and software, Finance and accounting, Teaching and academics, Design,
Marketing, Photography and many more. Udemy courses offer hours of video lectures. You can view the
videos on your mobile device or computer. Paid courses also give you lifetime access to the content of the
course. Udemy holds over 40 million students and over 50,000 instructors teaching courses in over 65
languages in over 180 countries.

In the case of companies, Udemy for Business facilitates an employee training and development platform
for companies with subscription access to 7,000+ courses, learning analytics, and the capacity of hosting
and distributing their own content. The platform recently partnered with betterworks, a leading strategy
execution enterprise software company, in the month of February 2021. Udemy Makes Learning
Affordable You can find courses that are as cheap as $20 on Udemy.

Also, there are lots of promotional coupon codes that can help you get discounts on courses that cost
hundreds of dollars. The coupon codes can give you access to expensive courses for as cheap as $10. If
you are interested in learning new skills but you don’t want a course that is affiliated with a College or
University, Udemy is the right platform for you. Udemy issues certificates but they are not aligned with
any university. However, this does not mean that the skill you gain on Udemy cannot advance your career
or learning.

6
 CHAPTER - 1

INTRODUCTION TO FRONTEND WEB DEVELOPMENT

7
Introduction to Front end Web Development

Let’s start at the beginning. So what is front-end development? In a nutshell, front-end web development,
also called client-side development, refers to writing Hyper Text Markup Language (HTML), Cascading
Style Sheets (CSS) and JavaScript code for a website or web application so that users can see and interact
directly with them. To delve further into this subject, it is important to know the basic differences between
front-end development, back-end development and full stack development. Simply put, a front end
developer works on the parts / aspects of an app or website that users get to see and interact with.
Whereas a back-end developer handles the behind-the-scenes aspects of the said app or website, say the
infrastructure and databases. On the other hand, a full-stack developer does both, so it’s someone who
deals with the whole design process from start to finish. The bottomline is this: there are some websites
and web applications that only need front end development.

For instance, a single page info website. However, anything functional generally needs back-end
development. So all that you see on the page - and by that we are referring to anything happening on the
user’s computer - is a result of front-end development. Anything that provides data from a server comes
under back-end development. So when in use, an app’s front-end (the page) has requests sent to the
back-end (i.e. server) which then sends across information in plain format.

Fig 1.1 - Frontend Web Development

1.1 Website

A Website is a collection of related web pages, including multimedia content, typically identified with
the common domain name, and published on at least one web server. A Website may be accessible via a
public internet protocol network,(IP) such as the internet, aur private Local area network (LAN), by
referencing a uniform resource locator (URL) that identifies the site.

8
Websites have many functions and can be used in various fashions; a website can be a personal website,
commercial website for a company, a government website or a non profit organization website. websites
are typically dedicated to a particular topic of purpose, ranging from entertainment and social networking
to providing news and education. All publicly accessible websites collectively constitute the world wide
web, while private websites, such as a company's website for its employees, are typically a part of the
intranet.

Web pages, which are the building blocks of websites, are documents, typically composed in plaintext
interspersed With formatting instructions of HYPERTEXT MARKUP LANGUAGE (HTML). They may
incorporate elements from other websites with suitable markup anchors. A website consists of web pages
which are interconnected to each other and contain various data and functionalities.

1.2 WEB-PAGE

A Web-page is a document that is suitable for the world wide web and web browsers. Web browser
displays a webpage on a monitor or a mobile device. The webpage is what displays, but the term also
refers to a computer file, usually written in html or comparable markup language. Web browsers
co-ordinate the various web resource elements for the written web page, such as style sheets, scripts, and
images, to present the webpage.

Typical web pages provide hypertext that includes a navigation bar or a sidebar menu to other web page
hyperlinks, often referred to as links. Ani network, a web browser can retrieve a web page from a web
page server. on a higher level the web server may restrict access to only private networks such as
corporate intranet it provides access to the world wide web. on a lower level, the browser uses the
hypertext transfer protocol (HTTP) to make such requests.

Static web page is delivered exactly as stored, as web content in the web servers file system, a very
dynamic web page is generated by a web application that is driven by server side software or client side
scripting. dynamic websites pages help the browser to enhance the web page through the user input to the
server.

1.3 Languages Used To Create A Front-end website

Technologies that are mostly used to develop a user interface are as follows so let’s discuss
about them in detail :

1.3.1 HTML

Hypertext Markup Language (HTML), is the standard markup language for creating web pages and
web applications. With Cascading Style Sheets (CSS) Add JavaScript it forms a triad of cornerstone
Technologies for the world wide web. web browsers receive HTML documents from a web server or
from local storage and render them into multimedia web pages. HTML describes the structure of web
pages semantically and originally included cues for the appearance of the document [1].

9
 Fig 1.2 - Html

1.3.2 CSS

Cascading Style Sheets (CSS), is a simply designed language intended 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. It describes how a web page should
look: it prescribes colors, fonts, spacing, and much more. In short, you can make your website look
however you want. CSS lets developers and designers define how it behaves, including how elements are
positioned in the browser [2].

Fig 1.3 - Css

1.3.3 Js

JavaScript, often Abbreviated as “JS” is a high level dynamic Untyped and interpreted runtime
language. it has been standardized in the ECMAscript language specification. Alongside HTML and
CSS, JavaScript is one of the three core Technologies of world wide web content production, the
majority of websites employ it, and all modern web browsers support it without the need for plugins.
JavaScript is prototype based with first class functions, making it a multi-paradigm language, Supporting
object oriented, imperative, and functional programming styles [3].

10
 Fig 1.4 - Javascript

1.3.4 Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web
development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography,
forms, buttons, navigation, and other interface components. Bootstrap is an HTML, CSS and JS library
that focuses on simplifying the development of informative web pages (as opposed to web applications).
The primary purpose of adding it to a web project is to apply Bootstrap's choices of color, size, font and
layout to that project [4].

Fig 1.5 - Bootstrap

1.4 Tools Used

1.4.1 VS Code

Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made by Microsoft
with the Electron Framework, for Windows, Linux and macOS. Features include support for debugging,
syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can
change the theme, keyboard shortcuts, preferences, and install extensions that add additional
functionality. Visual Studio Code is a source-code editor that can be used with a variety of programming
languages, including C#, Java, JavaScript, Go, Node.js, Python, C++, C, Rust and Fortran. It is based on
11
the Electron framework, which is used to develop Node.js web applications that run on the Blink layout
engine. Visual Studio Code employs the same editor component (codenamed "Monaco") used in Azure
DevOps (formerly called Visual Studio Online and Visual Studio Team Services) [5].

VS

Fig 1.6 - Virtual Studio Code

Out of the box, Visual Studio Code includes basic support for most common programming languages.
This basic support includes syntax highlighting, bracket matching, code folding, and configurable
snippets. Visual Studio Code also ships with IntelliSense for JavaScript, TypeScript, JSON, CSS, and
HTML, as well as debugging support for Node.js. Support for additional languages can be provided by
freely available extensions on the VS Code Marketplace.Visual Studio Code can be extended via
extensions, available through a central repository. This includes additions to the editor and language
support. A notable feature is the ability to create extensions that add support for new languages, themes,
debuggers, time travel debuggers, perform static code analysis, and add code linters using the Language
Server Protocol.

1.4.2 Web Browser

A Web Browser is application software for accessing websites. When a user requests a web page from a
particular website, the browser retrieves its files from a web server and then displays the page on the
user's screen. Browsers are used on a range of devices, including desktops, laptops, tablets, and
smartphones. In 2020, an estimated 4.9 billion people used a browser.The most used browser is Google
Chrome, with a 65% global market share on all devices, followed by Safari with 18%.

● Firefox : Mozilla Firefox or simply Firefox, is a cross-platform, free and open-source web
browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. Firefox
uses the Gecko rendering engine to display web pages. In 2017, Firefox began incorporating new
technology under the code name Quantum to promote parallelism and a more intuitive user
interface.

● Google Chrome : Chrome is a free Internet browser officially released by Google on December
11, 2008. Its features include synchronization with Google services and accounts, tabbed
browsing, and automatic translation and spell check of web pages. It also features an integrated
address bar /search bar, called the omnibox.
12
1.5 Omnifood

Get Food Fast - Not Fast Food

Fig 1.7 - Omnifood

Omnifood is a premium food delivery service with the mission of being affordable and healthy meals to
as many people as possible. Hello, we're Omnifood, your new premium food delivery service. We know
you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!

Up to 365 days/year

Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You
can also choose to order more flexibly if that's your style.

100% organic

Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You
can also choose to order more flexibly if that's your style.

Order anything

We don't limit your creativity, which means you can order whatever you feel like. You can also choose
from our menu containing over 100 delicious meals. It's up to you!

How Omnifood Works

1. Choose the subscription plan that best fits your needs and sign up today.

2. Order your delicious meal using our mobile app or website. Or you can even call us!

3. Enjoy your meal after less than 20 minutes. See you next time!

13
 CHAPTER - 2

ALL ABOUT PROJECT, HARDWARE AND SOFTWARE

IMPLEMENTATION

14
2.1 HTML

Hypertext Markup Language (HTML) Is the standard markup language for creating web pages and
web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone
Technologies for the world wide web. web browsers receive HTML documents from a web server or
from local storage and render them into multimedia web pages. HTML describes the structure of web
pages 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 . It provides a means to
create structured documents by denoting structural semantics for tests such as headings, paragraphs,
links, lists, and other items. Does not display the HTML tags, but uses them to interpret the content of
the page.

General Syntax Of Html

<!DOCTYPE html>
<html>
<head>
<title> HTML </title>
</head>
<body>
<h1> Heading </h1>
<p> Paragraph </p>
</body>
</html>

( The text between <html> and </html> Describes the webpage, and the text between <body> and
</body> is the visible page content. )

2.1.1 Some Important Html Tags

HTML contains four essential tags that form the basic structure of any webpage or HTML file:

1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>

Now let us discuss each tag one by one:

1. <html></html>

This tag marks the beginning and ending of the HTML document and whatever code is present in
between these tags totally gets considered by the browser. Also, it tells the browser that the document is
an HTML document. All the other tags in between these tags only get considered by the browser.

15
 2. <head></head>

This tag stores the data which actually doesn’t appear on the webpage but it gives more information about
the webpage. Or in other words, this tag is used to define the head part of the document which contains
the information related to the webpage. It also contains tags like, <title>, <meta>, <link>, <style>, etc.

3. <title> </title>

This tag stores the title/name of the web page. Whatever title/content is given in this tag, the content
appears on the tab when opened by the browser. It is described in the head tag.

4. <body></body>

This tag is used to display all the information or data, i.e, text, images, hyperlinks, videos, etc., on the
web page to the user. Here, all the content like text, images, hyperlinks videos, etc., are enclosed between
this tag.

2.1.2 Some other HTML tags are:

1. <!– comment → : This tag is used to add comments in the HTML codes. These comments help
the program to understand the code. The content inside the comment tag isn't visible on the
browser.

Syntax : <!–Write comments here –>

2. <meta> : These meta tags are used inside the head tag and they describe the metadata i.e data
about data. These tags are useful in search engine optimization which means when users search
for our websites the chances that the browser recommends our web page becomes high which
leads to an increase in traffic over the webpage. A single HTML document can contain multiple
tags.

Syntax : <meta attribute-name=”value”>

3. <link rel =”stylesheet” href=”file.css “> : This tag is used to include external style sheets. Use
this tag when you don’t want to include CSS in the HTML document. To make it more simple we
make a CSS file with the code and include this file in the link tag.

Syntax : <link rel =”stylesheet” href=”file.css “>

4. <script></script> : It is used for including javascript code. The external javascript can also be
linked using the src attribute in the opening script tag. It can be included in the head or body tag.

Syntax : <script>script content</script>

5. Heading : HTML provides six types of headings, i.e., H1, H2, H3, H4, H5, and H6. Here, H1 is
the highest level heading and H6 is the lower level heading. These headings are used to highlight
the important topics.

Syntax: <h1> content </h1>

16
 <h2> content </h2>

<h3> content </h3>

<h4> content </h4>

<h5> content </h5>

<h6> content </h6>

6. Paragraph : HTML provides paragraph tags for writing any content.

Syntax : <p> content </p>

7. Form : The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

● <input> : The <input> tag specifies an input field where the user can enter data.
● <textarea> : The <textarea> tag defines a multi-line text input control. The <textarea> element is
often used in a form, to collect user inputs like comments or reviews.
● <button> : The <button> tag defines a clickable button.
● <select> : The <select> element is used to create a drop-down list. The <select> element is most
often used in a form, to collect user input.
● <option> : The <option> tag defines an option in a select list. <option> elements go inside a
<select>, <optgroup>, or <datalist> element.
● <optgroup> : The <optgroup> tag is used to group related options in a <select> element
(drop-down list).
● <fieldset> : The <fieldset> tag is used to group related elements in a form. The <fieldset> tag
draws a box around the related elements.

2.2 CSS

Cascading Style Sheets (CSS) is a style sheet used for describing the presentation of a document written
in a markup language. Although most often used to set the visual style of web pages and user interfaces
written in HTML, The language can be applied to any XML document, including plain XML, SVG and
XUL, And is applicable to rendering in speech, on other media. along with HTML and JavaScript, CSS
is a cornerstone technology used by most websites to create visually engaging web pages, user interfaces
for web applications, and user interfaces for many mobile applications.

CSS is designed primarily to enable the separation of presentation and content, including aspects such as
the layout, colors, and fonts. The separation can improve content accessibility, provide more flexibility
and control in the specification of presentation characteristics, enable multiple HTML pages to share

17
formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in
the structural content.

2.2.1 Types Of CSS

1. Inline CSS

In this, CSS is applied in between the tags.

Eg : <tag style=“Styling”> Hello World </tag>

2. Internal CSS

In this, CSS code is defined inside the style tag in the head section of the HTML page.

General Syntax

<!DOCTYPE html>
<html>
<head>
<title>
INTERNAL CSS
</title>
<style>
<!-- CSS STYLING-->
</style>
</head>
</html>

3. External CSS

In this, CSS code is written on another page and is linked to the HTML page. It is very advantageous to
use this type of styling as we can use the same file to style various HTML pages.

External CSS uses the extension .css and is applied using the following syntax.

<!DOCTYPE html>
<html>
<head>
<title>EXTERNAL CSS </title>
<link relation=”stylesheet” type=”css”href=”url to the page”>
</head>
<body>
</body>
</html>

18
2.3 Code Snippets

Fig 2.1 - Html & Css

Fig 2.2 - Html & Css

19
Fig 2.3 - Html & Css

Fig 2.4 - Html & Css

20
Fig 2.5 - Html & Css

Fig 2.6 - Html & Css

21
CHAPTER -3

RESULT

22
3. Result ( Snippets )

Fig 3.1 - Result

Fig 3.2 - Result

23
Fig 3.3 - Result

Fig 3.4 - Result

24
Fig 3.5 - Result

Fig 3.6 - Result

25
CHAPTER - 4

CONCLUSION

26
4. Conclusion

This website Omnifood will help people to keep themselves healthy as it provides people with
healthy and affordable food plans. Omnifood AI will create a 100% personalized weekly meal
plan just for you. It makes sure you get all the nutrients and vitamins you need, no matter what
diet you follow!

Approve your weekly meal plan Once per week, approve the meal plan generated for you by
Omnifood AI. You can change ingredients, swap entire meals, or even add your own recipes.

Omnifood provides people with great diet plans which helps to keep them healthy and safe. In
future we will try to add more diet plans at more reasonable prices.

Thank you, for your love and appreciation towards us.

27
References

[1] Ch Rajesh et al; Research on HTML5 in Web Development; International journal of computer science
and information technologies; 2014; Vol 5 - Issue 2; page 2408-2412

[2] Davood Mazinanian et al; An empirical study on the use of CSS; Institute of electrical and electronics
engineer; 2016; Vol 6 - Issue 3; page 1100-1106

[3] Sylvain Lebresne et al; Understanding the dynamics of JavaScript; International research journal of
engineering and technology (IRJET); 2009; Vol 3 - Issue 2; page 225-233

[4] ARCONES, M. A. and GINE, E. (1989). "The bootstrap of the mean with arbitrary sample size".
Ann. Ins. Henri Poincare 25,457-481.

[5] Oda, T., Araki, K., Larsen, P.G.: VDMPad: A Lightweight IDE for Exploratory VDM-SL
Specification. In: Proceedings of the Third FME Workshop on Formal Methods in Software Engineering.
p. 33–39. Formalize ’15, IEEE Press (2015)

28