For many people, creating a website has become a popular pastime. Having an internet presence has become crucial, whether for personal or corporate reasons. It's now simpler than ever to design a website that looks and works precisely way you want it to with the aid of HTML, CSS, and JavaScript.
Hosting a website to allow for global accessibility is one of the most crucial steps in website creation. An fantastic alternative for hosting a website is Firebase, which also provides a free plan for launching smaller projects. We'll examine how to develop a straightforward website using HTML, CSS, and JavaScript in this blog article before deploying it with Firebase.
Let's build the website first. To improve its appearance and functionality, we'll start with a simple HTML file and add some CSS and JavaScript. The HTML source code is provided here:
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first website!</p>
<button onclick="changeColor()">Change Color</button>
<script src="app.js"></script>
</body>
</html>
We've added a body, a button with text, and a header. To style our HTML components, we also included a CSS file. Lastly, we included a JavaScript file that, when activated by the button, will alter the page's background color. The code for our CSS file is shown here
CSS
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
font-size: 24px;
}
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
The body's background color, font family, and font size are all determined by our CSS file. For our button, we also included certain styles, such as the background color, padding, border, and border radius.
Let's now update our app.js file with the JavaScript code:
JS
function changeColor() {
document.body.style.backgroundColor = "pink";
}
When the button is pressed, a method in our JavaScript code causes the page's backdrop to turn pink.
It's time to launch our website utilizing Firebase now that everything has been finished. We must first register for a free Firebase account. After registering, we may activate the Firebase Command Line Interface (CLI) on our computer by installing it.
We must establish a Firebase project and initialize it with the Firebase CLI before we can launch our website. The following commands need to be entered into the terminal to do this:
firebase login
firebase init
After installing the Firebase CLI, launch the command firebase init in the terminal by navigating to the root directory of your website project. With the help of this command, you may set up your Firebase project by responding to a series of questions.
You will be requested to choose the Firebase services you wish to utilize during the startup process. You could decide to employ Authentication, Realtime Database, or Firebase Hosting, for instance.
You will be prompted to configure your Firebase project after choosing the Firebase services you wish to utilize. You have the option of making a new Firebase project or using an existing one. You will be asked to input a special project ID and project name if you decide to establish a new project.
The Firebase CLI will produce a .firebaserc file in your project directory after the configuration procedure is complete. Your Firebase project ID and the aliases for the Firebase services you choose are contained in this file.
You'll next be asked to configure Firebase Hosting for your website. Using an existing Firebase Hosting site or building a new one is your choice. You will be asked to submit a special site name if you decide to create a new site.
In order to choose the public directory for your website, you will finally be requested. You may find your HTML, CSS, and JavaScript files under this directory. By default, Firebase Hosting will search this directory for an index.html file.
Use the command firebase deploy to begin deploying your website to Firebase Hosting after the initialization procedure is complete. By using this command, you may publish your website and upload its files to the Firebase server.
Top comments (0)