VOOZH about

URL: https://www.geeksforgeeks.org/javascript/create-a-website-using-html-css-and-javascript-that-stores-data-in-firebase/

⇱ Create a website using HTML CSS and JavaScript that stores data in Firebase - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Create a website using HTML CSS and JavaScript that stores data in Firebase

Last Updated : 23 Jul, 2025

Following are some simple steps in order to connect our static Web Page with Firebase. 

Step-by-Step Implementation

Step 1: Firstly, We are going to create a project on Firebase to connect our static web page. Visit the Firebase page to configure your project. Visit the website and click the On Add Project button as shown below.

👁 Image

Step 2: Give a Name to your project and click on the Continue button.

👁 Image

Step 3: Now click on the Continue button.

👁 Image

Step 4: Now choose Default Account For Firebase and click on the Create Project button.

👁 Image

Step 5: Now your project is created and you are now good to go.

👁 Image

Step 6: Now click on the 3rd icon that's the Web button(</>).

👁 Image

Step 7: Give a nickname to your web project and click on the Register App button.

👁 Image

Step 8: Now you will see the configuration of your App like this. Copy this code somewhere as we will use it later.

👁 Image

Step 9: Click on the Realtime Database as shown below.

👁 Image

Step 10: Now click on the Create Database button.

👁 Image

Step 11: Now click on the Test Mode and then click on the Enable button.

👁 Image

Step 12: Activate Firebase Storage. Click on Storage button in the left and the click on Get Started.

👁 Image

After that this box will pop up . Click on Next.

👁 Image

Then Click on Done.

👁 Image

Project Setup:

Now Create an HTML file and copy the script code which you copied in Step 8. The following file is just a sample for you to understand how to configure your project.

Example: This example shows the use of Firebase with HTML and CSS.

Output:

Entering some sample values of Name and Email address in the given form as shown below.

👁 Image

After clicking the Submit button, the data is getting stored in the real-time database as shown below.

👁 Image

Comment
Article Tags: