Website Development with HTML, CSS, JavaScript and Firebase

A Practical Training Report

submitted

in partial fulfillment

for the award of the Degree of

Bachelor of Technology

in Department of Computer Science and Engineering

Guide: Submitted by-

Dr. Sanjay Jain Jayant Choraria
Designation A20405217053

Department of Computer Science and Engineering

Amity School of Engineering & Technology
Amity University Rajasthan, Jaipur
August 2019
 CANDIDATE’S DECLARATION

I hereby declare that the work, which is being presented in the Summer training report, entitled
“WEBSITE DEVELOPMENT WITH HTML, CSS, JAVASCRIPT AND FIREBASE” in
partial fulfillment for the award of Degree of “Bachelor of Technology” in Department of
Computer Science and Engineering, and submitted to the Department of Computer Science and
Engineering, Amity School of Engineering & Technology, Amity University, Rajasthan. This
is a record of my own training preparing under the guidance of Dr. Sanjay Jain.

Jayant Choraria
Computer Science and Engineering
A20405217053
Amity University Rajasthan, Jaipur

Counter Signed by

Dr. Sanjay Jain

 ABSTRACT
I Jayant Choraria, completed my Summer Training in “Web Designing with HTML, CSS,
JavaScript and Firebase” conducted by Namaste Gaon. The training program started from 13th
April to 12th July 2019. In this training program I was introduced to the basic concepts of web
designing like HTML, CSS and JavaScript and the latest tools used for web development like
Firebase and some features of Bootstrap.

During the training, everything I learned was practically implemented there, with each and
every sessions many tasks were given to be completed during the session itself. I made two
projects. In the first project I was asked to build a website as seen in the template from
w3schools. I did some modifications by myself and some as instructed. The second project is
an online Gym Website. This website basically contains all the details if we wish to gain
muscle, loose weight, interested only in fitness and what diet should we follow if we wish to
take up any one of the fitness needs according to our body. Online training with videos is also
available so interested members can directly send a message through the website. The schedule
for every day training is also placed in the website with the exercise name and reps a person is
required to do in order to gain the desired result. HTML, CSS, JavaScript, Firebase and some
features of Bootstrap are being used in this project. The login page is made with the help of
Firebase Auth feature provided by the Firebase itself for managing different users. The form
details are pushed to the database provided by Firebase and then can be retrieved from the
database. Now if the Admin wishes to make changes to the website in the near future or so ,
after the admin logs in to the website where he can check the members who have registered
themselves to the website, check out the messages sent by the users as I had appended the data
into tabular form from firebase. In this very page there will be a option of updating website,
through which even if the admin doesn’t have the knowledge of coding or firebase can still
easily update the website by making changes in that very page.The whole website is mobile
friendly and some feature of Bootstrap are used to make some part of the website/ webpage
mobile friendly.

In conclusion, this was an excellent opportunity for me to develop and enhance my skills in the
field of Web Designing and Development. It also helped me to get to the ground level and
experience things that would have never been gained without this training as well as the project.
 LEARNING OBJECTIVES

As this training program was held at Bhamasha Techo Hub in Jaipur, it helped me gain
experience about the atmosphere we would see while we work in the near future. I also
learned technologies which are required for building up a website. The list of the learned
technologies are:

1)HTML:

This basically stands for hypertext markup language and acts like a building block of the
website. This basically describes the structure of your website. HTML elements tell the
browser how to display the content and all the HTML code is written between Tags. We were
not only given theoretical knowledge but also practical practice was done at the same time.

2)CSS:

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
This is basically the designing part of the website where we add colors and style to the website.
This is where our creativity plays a vital role. The better the UI, better is response from the
user. This also helps us create a website for other platforms like mobile phones.

3)JAVASRIPT:
Here is where the programing part of web development begins. JavaScript is generally used for
making the webpage user interactive, like after clicking a button we call make an alert box
appear on the screen. The major use of this technology in my website was during FORM
VALIDATIONS which assures that the person filling the forms fills everything correctly.
During this course our programming knowledge was also tested.

4)FIREBASE:

This was used in various purposes during the training. We were taught the following from
firebase:

 It was used as a real time database where we stored the details from the form and other
part of the website for later use.
  We also hosted our website using Firebase hosting which created an random website
name according to the project name we gave.
 Various authentication method like Google Sign-up, phone number verification and
email and password login through firebase authentication.

5) BOOTSTRAP:

Bootstrap is a frame work of HTML, CSS and JAVASCRIPT. As it is a frame

work reduces the number of lines of code in the website and since it is very easy
to use it’s been very popular frame work among the developers. Though I did not
use this in my website, we were given a brief introduction about the frame work
during the training period.
 Introduction:
The project is about an online gym website named FIT & FINE. This website firstly have a
registration form in which you are suppose enter your weight and height accordingly which
your BMI (BODY MASS INDEX) would generated, which would state whether your healthy,
under weight or over weight. You can directly send a message for online training with just a
click and everyday schedule for you fitness with diet.

Need:

Fitness is the new trend and something which everyone aims for nowadays and people go to
gym with the expectation of full filling their expectations. They might see the results in few
days and some might see after few months but what they do not know is without proper
training this result might not last forever. What you eat also plays a very vital role in your
fitness so knowing a right diet according to your goal is very important. FIT & FINE is the
one stop platform for all your fitness queries.

Other Features:

This website helps you to develop yourself into a new and better you. For better teaching online
video tutorials regarding your exercise in the gym, fitness and diet are also available on the
website.

Technologies Used:

 Front-end: HTML, CSS, JAVASCRIPT, AOS

 Back-end: Firebase Database, Firebase Authentication
 Hosting: Firebase Hosting

Advantages of used technologies:

HTML, CSS and JAVASCRIPT are the backbone of front-end development. AOS stands for
animation on scroll, is a library of CSS and JS used for animated the elements of your webpage
after scrolling. This helps to give a life like look to the webpage.
Firebase (by Google) is a powerful tool to build web applications. Other firebase tools used in
this project are Authentication, Storage and Hosting. Thanks to the Documents of the Firebase
it becomes very simple to use and is also safe and the services required for us for the project
are available and no cost at all.

Program Paradigm:

The paradigm followed in this project is functional programming. It is a programming

paradigm in which we try to bind everything in pure mathematical functions style. It is a
declarative type of programming style. Its main focus is on “what to solve” in contrast to an
imperative style where the main focus is “how to solve”. It uses expressions instead of
statements. An expression is evaluated to produce a value whereas a statement is executed
to assign variables. It makes the program easier to understand.

Motivation:

I am going to gym from past a year but unfortunately have not been successful in seeing the
results I had worked for. I could not understand where was I going wrong, is it the exercise I
do are not right or is it the food I eat. This started demotivating me towards gym and I started
taking less interest in the same but later one my seniors noticed this and we had a long
discussion about it the next day after which I realized it was the diet I follow stopping me from
seeing myself as the way I had worked so hard for. I then realized how important role diet plays
in one life and more importantly the knowledge you have for the particular thing plays.

Hence the aim I had at the time I started working on the project was that nobody else
should face the demotivation I faced. Everyone should have the right knowledge about their
exercise, diet so that they can see the desired results on themselves. The data I have on my
website is not something I had just copied from some browser, it the schedule which my senior
who is a fitness freak and have been following it with changes at times for 5 years now. And
for any query or if online training is required by a person, he can contact us with just a click.
Objectives:

The objective here is to build a simple, knowledgeable and user interactive website for online
fitness so that a person can work harder with right knowledge and earn the desired results.

1. Creating a registration form for the first time users who can login later by using
their email address. The data gets saved in the database for the use of Admin.
2. Users can know about their BMI in the registration form and according to which
they can seek for the training.
3. After user Logs in, it’s a one-page simple website which covers information
about the major fitness categories which are: Muscle Gain, Weight Loss, Fitness
and diet.
4. The schedule for users everyday exercise is also available in the website so that
they can train themselves in a better way.
5. The importance of having a good diet and what could a person follow as a diet
is mentioned in the website.
6. Online videos for better understanding regarding diet, exercise are also
available.
7. Lastly, if somebody wishes for online training or have any query can contact us
with just a click.

Analysis:

Model (Diagram + Explanation)

The Waterfall Model was the first Process Model to be introduced. It is very simple to
understand and use. In a Waterfall model, each phase must be completed before the next phase
can begin and there is no overlapping in the phases. Waterfall model is the earliest SDLC
approach that was used for software development.
In “The Waterfall” approach, the whole process of software development is divided into
separate phases. The outcome of one phase acts as the input for the next phase
sequentially. This means that any phase in the development process begins only if the previous
phase is complete. The waterfall model is a sequential design process in which progress is
seen as flowing steadily downwards (like a waterfall) through the phases of Conception,
Initiation, Analysis, Design, Construction, Testing, Production/Implementation and
Maintenance.

As the Waterfall Model illustrates the software development process in a linear sequential flow;
hence it is also referred to as a Linear-Sequential Life Cycle Model.

The sequential phases in the Waterfall model are −

1. Requirement Gathering and analysis: All possible requirements of the system to be

developed are captured in this phase and documented in a requirement specification document.

2. System Design: The requirement specifications from the first phase are studied in this phase
and the system design is prepared. This system design helps in specifying hardware and system
requirements and helps in defining the overall system architecture.

3. Implementation: With inputs from the system design, the system is first developed in small
programs called units, which are integrated into the next phase. Each unit is developed and
tested for its functionality, which is referred to as Unit Testing.

4. Integration and Testing : All the units developed in the implementation phase are integrated
into a system after testing of each unit. Post integration of the entire system is tested for any
faults and failures.
5. Deployment of the system: Once the functional and non-functional testing is done; the
product is deployed in the customer environment or released into the market.

6. Maintenance: There are some issues which come up in the client environment. To fix those
issues, patches are released. Also to enhance the product some better versions are released.
Maintenance is done to deliver these changes in the customer environment.

All these phases are cascaded to each other in which progress is seen as flowing steadily
downwards (like a waterfall) through the phases. The next phase is started only after the defined
set of goals are achieved for the previous phase and it is signed off, so the name "Waterfall
Model". In this model, phases do not overlap.

Every software developed is different and requires a suitable SDLC approach to be

followed based on internal and external factors. Some situations where the use of the Waterfall
model is most appropriate are −
● Requirements are very well documented, clear and fixed.

● Product definition is stable.

● Technology is understood and is not dynamic.

● There are no ambiguous requirements.

● Ample resources with the required expertise are available to support the product.

● The project is short.

Modules (Details + Functionality)

1. Login Page
 User can register himself for the website and existing user can login
using the registered mobile number and email address.
 While filling the registration form user would be knowing is BMI which
is Body Mass Index and according to which he can ask for the diet he
needs to intake or exercise he has to do.
 There is a video attached to the background which would motivate the
new enthusiastic person for getting themselves in the shape their desire.
 The authentication service used in this module is Google Firebase
Auth.
2. Home Page
This is the main page of the website where a user would be redirected
after registration or login. Here the user would know about all the main
elements of fitness which are Muscle Gain, weight loss, fitness and diet.
Each time a person visits the site there would be a motivational quote
appearing on the screen, and each time a new quote. A background
music to motivate the visitors is also played which can be muted with a
click.
Some features of this page are:
 Navbar which appears on the screen only after you scroll down a bit.
Its position is kept as fixed, which means this would stay on the top of
the screen throughout the page once it appears. It has options like home,
 Muscle gain, weight loss, fitness, diet, Youtube, contact us. There is also
a logout button clicking on which you would be logged out of your
account and will be directed back to the index page.
 Different Divisions giving you information about the main elements of
fitness which are Muscle Gain, weight loss, fitness and diet are available
one below another in the page. By clicking on the navbar too one can
access these divisions.
 On each division there is a button “Get Your Schedule”, which directs
the user to another page where he would see information about the
exercise he need to carry on with number of reps mentioned after every
exercise.
 At the end there is a Contact form and mobile number through which
anybody can contact with just a click if they aim for online training or
have any doubts regarding their fitness. Links of our Social network
platforms like Instagram and youtube are also mentioned in the footer.
3. Admin Page
A separate page for admin panel is created so that he doesn’t have to
open the database every time. All he needs to do is log in through admin
email and password after which he would be directed to the admin panel
in which the data of all the members who have registered themselves
and if anybody has send a message is fetched from the database for the
admin to look in the admin panel.
 CHAPTER 1
Fitness is the new trend and everyone aims for good and healthy physique. People say
anybody can achieve this by hard word, determination and a good diet. But friends
Knowledge about what your working hard on also plays a very vital role. Let’s say there are
two persons and both of them are working har from past 6 months in gaining muscles. One of
them is having a good knowledge about the exercises he is doing and according to the
requirement of the body he is taking the intake whereas the other person is not having the
knowledge required and is just blindly following a person’s perspective. So the person with
less knowledge will surely not see that progress that the other person with knowledge
experience. The project “FIT & FINE” is a website for the fitness freaks who have the zeal
and determination to work hard but lack in the knowledge. The project includes a login page
where the new user can register himself and an existing user can login himself in order to see
the website. The main fitness elements like how a person can gain muscle , loss fat , stay fit
and what diet should they intake according to their BMI that is body mass index which would
be calculated in the registration form itself. Any registered user can contact the admin for
online training by sending a message or even on call in the CONTACT US section of the
website. Various social platform links such as Instagram and Youtube are also present on the
website so that the user can get connected socially. Online videos regarding fitness and diet
are also available in the YOUTUBE section of the nav bar.

The technologies used in the project are HTML, CSS, JAVASCRIPT and FIREBASE. The
backend part of the website, hosting and authentication are done by firebase, which is a
service provided by google.
SYSTEM REQUIREMENTS:

Text editor is a place where we write our code and there are various text editors available in
the market like sublime, VS code etc. We can even use the notepad available in system as a
text editor and for beginners I would suggest Notepad to be used as a text editor.
 CHAPTER 2
HYPERTEXT MARKUP LANGAUGE(HTML)

HTML stands for Hyper Text Markup Language. It is used to design web pages using markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages. Markup language is used to define the text document within 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
of markup (e.g. HTML) languages are human readable. Language uses tags to define what
manipulation has to be done on the text.

HTML page structure:

The Basic structure of HTML page is given below. It contains some elements like head, title,
body, … etc. These elements are used to build the blocks of web pages.
<DOCTYPE! html>: This tag is used to tells the HTML version. This currently tells that the
version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be
used inside the <head> element are:
 <style>
 <title>
 <base>
 <no script>
 <script>
 <meta>
 <title>
<body>: Body tag is used to enclosed all the data which a web page has from texts to links.
All of the content that you see rendered in the browser is contained within this element.

Features of HTML:
 It is easy to learn and easy to use.
 It is platform independent.
 Images, video and audio can be added to a web page.
 Hypertext can be added to text.
 It is a markup language.
Why learn HTML?
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.
Advantages:
 HTML is used to build a websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript etc.
Disadvantages:
 HTML can create only static webpages so for dynamic web page other languages have to
be used.
  Large amount of code has to be written to create a simple web page.
 Security feature is not good.
Some of The HTML Code used in the website:
 CHAPTER-2
Cascading Style Sheet (CSS)

Cascading Style Sheets, fondly referred to as 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. CSS is easy to learn and understood but it provides powerful control over the
presentation of an HTML document.

 CSS saves time : You can write CSS once and reuse same sheet in multiple HTML
pages.
 Easy Maintenance : To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
 Search Engines : CSS is considered as clean coding technique, which means search
engines won’t have to struggle to “read” its content.
 Superior styles to HTML : CSS has a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML attributes.
 Offline Browsing : CSS can store web applications locally with the help of offline
catch. Using of this we can view offline websites.

CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document.
A style rule set consists of a selector and declaration block.

Selector => h1
Declaration => {color: blue; font size:12px;}
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated by a
colon.
CSS code in the project:

EFFECT OF HTML AND CSS ON PROJECT

 CHAPTER 3
JAVASCRIPT(JS)

JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for
enhancing the interaction of a user with the webpage. In other words, you can make your
webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used
widely in game development and Mobile application development.

How to Run JavaScript?

Being a scripting language, JavaScript cannot run on its own. In fact, the browser is responsible
for running JavaScript code. When a user requests an HTML page with JavaScript in it, the
script is sent to the browser and it is up to the browser to execute it. The main advantage of
JavaScript is that all modern web browsers support JavaScript. So, you do not have to worry
about whether your site visitor uses Internet Explorer, Google Chrome, Firefox or any other
browser. JavaScript will be supported. Also, JavaScript runs on any operating system including
Windows, Linux or Mac. Thus, JavaScript overcomes the main disadvantages of VBScript
(Now deprecated) which is limited to just IE and Windows.
Tools You Need
To start with, you need a text editor to write your code and a browser to display the web pages
you develop. You can use a text editor of your choice including Notepad++, Visual Studio
Code, Sublime Text, Atom or any other text editor you are comfortable with. You can use any
web browser including Google Chrome, Firefox, Microsoft Edge, Internet Explorer etc.

A Simple JavaScript Program

You should place all your JavaScript code within <script> tags (<script> and </script>) if you
are keeping your JavaScript code within the HTML document itself. This helps your browser
distinguish your JavaScript code from the rest of the code. As there are other client-side
scripting languages (Example: VBScript), it is highly recommended that you specify the
scripting language you use. You have to use the type attribute within the <script> tag and set
its value to text/javascript like this:

<script type="text/javascript">

<html>

<head>

<title>My First JavaScript code!!!</title>

<script type="text/javascript">

alert("Hello World!");

</script>

</head>

<body>

</body>

</html>

JavaScript is the programming language of HTML and the Web. JavaScript is easy to learn.
JavaScript code in the project:
 CHAPTER 4
FIREBASE

Firebase is a mobile and web app development platform that provides developers with a
plethora of tools and services to help them develop high-quality apps, grow their user base, and
earn more profit.

Firebase Services

Firebase Services can be divided into two groups:

Firebase Realtime Database:

Store and sync data with our NoSQL cloud database. Data is synced across all clients in
realtime, and remains available when your app goes offline.
The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and
synchronized in realtime to every connected client. When you build cross-platform apps with
our iOS, Android, and JavaScript SDKs, all of your clients share one Realtime Database
instance and automatically receive updates with the newest data.

Installation & Setup in JavaScript

The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and
synchronized in realtime to every connected client. When you build cross-platform apps with
our Android, iOS, and JavaScript SDKs, all of your clients share one Realtime Database
instance and automatically receive updates with the newest data.

Configure Realtime Database Rules

The Realtime Database provides a declarative rules language that allows you to define how
your data should be structured, how it should be indexed, and when your data can be read from
and written to. By default, read and write access to your database is restricted so only
authenticated users can read or write data. To get started without setting up Authentication, you
can configure your rules for public access. This does make your database open to anyone, even
people not using your app, so be sure to restrict your database again when you set up
authentication.

Initialize the Realtime Database JavaScript SDK

You must specify your Realtime Database URL when initializing your JavaScript SDK.

You can find your Realtime Database URL in the Database tab in the Firebase console. It will

be in the form of https://<databaseName>.firebaseio.com.

Initialize your SDK using the following code snippet:

 // Set the configuration for your app
// TODO: Replace with your project's config object
var config = {
apiKey: "apiKey",
authDomain: "projectId.firebaseapp.com",
databaseURL: "https://databaseName.firebaseio.com",
storageBucket: "bucket.appspot.com"
};
firebase.initializeApp(config);

// Get a reference to the database service

var database = firebase.database();

You're ready to start using the Firebase Realtime Database!

Firebase Authentication

Most apps need to know the identity of a user. Knowing a user's identity allows an app to
securely save user data in the cloud and provide the same personalized experience across all of
the user's devices.

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI

libraries to authenticate users to your app. It supports authentication using passwords, phone
numbers, popular federated identity providers like Google, Facebook and Twitter, and more.

Firebase Authentication integrates tightly with other Firebase services, and it leverages
industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your
custom backend.

How does it work?

To sign a user into your app, you first get authentication credentials from the user. These
credentials can be the user's email address and password, or an OAuth token from a federated
identity provider. Then, you pass these credentials to the Firebase Authentication SDK. Our
backend services will then verify those credentials and return a response to the client.
After a successful sign in, you can access the user's basic profile information, and you can
control the user's access to data stored in other Firebase products. You can also use the provided
authentication token to verify the identity of users in your own backend services.

Note: By default, authenticated users can read and write data to the Firebase Realtime Database
and Cloud Storage. You can control the access of those users by modifying your Firebase
Realtime Database and Cloud Storage Security Rules.

Sign up new users

Create a form that allows new users to register with your app using their email address and a
password. When a user completes the form, validate the email address and password provided
by the user, then pass them to the createUserWithEmailAndPassword method:

firebase.auth().createUserWithEmailAndPassword(email,
password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});

Sign in existing users

Create a form that allows existing users to sign in using their email address and password.
When a user completes the form, call the signInWithEmailAndPassword method:

firebase.auth().signInWithEmailAndPassword(email,
password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
Set an authentication state observer and get user data

For each of your app's pages that need information about the signed-in user, attach an observer
to the global authentication object. This observer gets called whenever the user's sign-in state
changes.

Attach the observer using the onAuthStateChanged method. When a user successfully signs in,
you can get information about the user in the observer.

firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var isAnonymous = user.isAnonymous;
var uid = user.uid;
var providerData = user.providerData;
// ...
} else {
// User is signed out.
// ...
}
});

Firebase Hosting
Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content,
and microservices.

Firebase Hosting is production-grade web content hosting for developers. With a single
command, you can quickly deploy web apps and serve both static and dynamic content to a
global CDN (content delivery network). You can also pair Firebase Hosting with Cloud
Functions or Cloud Run to build and host microservices on Firebase.
 How does it work?

Firebase Hosting is built for the modern web developer. Websites and apps are more
powerful than ever with the rise of front-end JavaScript frameworks like Angular and
static generator tools like Jekyll. Whether you are deploying a simple app landing page
or a complex Progressive Web App (PWA), Hosting gives you the infrastructure,
features, and tooling tailored to deploying and managing websites and apps.

Using the Firebase CLI, you deploy files from local directories on your computer to
your Hosting server. Beyond serving static content, you can use Cloud Functions for
Firebase or Cloud Run to serve dynamic content and host microservices on your sites.
All content is served over an SSL connection from the closest edge server on our
global CDN.

Firebase Hosting has lightweight hosting configuration options for you to build
sophisticated PWAs. You can easily rewrite URLs for client-side routing or set up
custom headers.

For serving your content, Firebase offers several domain and subdomain options:

 By default, every Firebase project has free subdomains on

the web.app and firebaseapp.com domains. These two sites serve the same
deployed content and configuration.
 You can create multiple sites if you have related sites and apps that serve different
content but still share the same Firebase project resources (for example if you have a
blog, admin panel, and public app).
 You can connect your own domain name to a Firebase-hosted site.

Firebase automatically provisions SSL certificates for all your domains so that all your
content is served securely.
CONCLUSION