Customized Landing page for your browser using JavaScript

navya , Credit to  volkotech-solutions Nov 02
Customised landing page for any Browser

Transform your Google Chrome homepage into a stunning and personalized landing page with quotes, wishes, and random background images with this article.


  1. Any code editor, preferably vscode

  2. Basics of HTML, CSS, and javascript

Here is a step-by-step procedure for building a simple landing page for any browser that makes you feel like you have a unique work style.

Prepare HTML document :

Firstly plan your landing page format of how you wish to have, then prepare an HTML document accordingly. Here is my HTML document for this project.

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Hey Buddy</title>
   <link rel="stylesheet" href="./style.css" />
   <div class="clock-container">
     <div class="time"></div>
     <div class="date"></div>
     <q id="quote"></q>
     <p id="wish"></p>
   <script src="script.js"></script>

Add styling to your project:

Style your HTML page as planned, here is my styling part to my web page.

 @import url("");
* {
  box-sizing: border-box;
html {
  transition: all 0.5s ease-in;
body {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
.clock-container {
  text-align: center;
  width: 50rem;
  max-width: 100%;
  padding-top: 15%;
  padding-bottom: 20%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
.time {
  font-size: 7rem;
.date {
  font-size: 3rem;
  padding: 1rem;
#quote {
  font-size: 1.8rem;


Follow my GitHub account for more Javascript projects

Javascript functionality:

My Javascript code for this project is

const hourEl = document.querySelector(".hour"),
minuteEl = document.querySelector(".minute"),
secondEl = document.querySelector(".second"),
timeEl = document.querySelector(".time"),
dateEl = document.querySelector(".date"),
wish = document.getElementById("wish"),
toggle = document.querySelector(".toggle"),
days = ["Sunday","Monday","Tuesday","Wednesday","Thursday",
months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep",
function setTime() {
const time = new Date(),
year = time.getFullYear(),
month = time.getMonth(),
day = time.getDay(),
date = time.getDate(),
hours = time.getHours(),
hoursForClock = hours >= 13 ? hours % 12 : hours,
minutes = time.getMinutes(),
seconds = time.getSeconds(),
ampm = hours >= 12 ? "PM" : "AM";
var wishTime = ["Good Morning", "Good Afternoon", "Good Evening"];
if (hours < 12) {
wish.innerHTML = `${wishTime[0]} Your name,what's your main focus   today`;
} else if (hours < 17) {
wish.innerHTML = `${wishTime[1]} Your name, what's your main focus today`;
} else {
wish.innerHTML = `${wishTime[2]} Your name, what's your main focus today`;
setInterval(() => {
wish.innerHTML = "";
}, 60 * 60 * 1000);
timeEl.innerHTML = `${hoursForClock}:${  	
 minutes < 10 ? `0${minutes}` : minutes
} ${ampm}`;
dateEl.innerHTML = `${days[day]} ${months[month]} <span>${date}</span> ${year}`;
setInterval(setTime, 1000);
const url = "";
function generateQuote() {
.then(function (data) {
return data.json();
.then(function (data) {
document.getElementById("quote").innerHTML = data.content;
.catch(function (err) {
setInterval(generateQuote(), 10000);


Here is my source code for this project

Analyzing results:

Now go to the browser and check whether this functionality is working or not.

Developed landing page as per the requirement

Perfect, there we go! We got an amazing landing page for any type of browser. Now the main part is how to add this project as your browser landing page. Look down for the procedure.

Adding this web page as a browser landing page:

Before going to add this beautiful landing page to your browser, you should save your file in git pages so that your project can be visible globally.

To know how to add your project to GitHub connect me to

After adding your project to GitHub you can get one global URL. My URL for this project is

For chrome:

Now open Google Chrome on your PC/laptop, go to settings,

Go to settings in Google Chrome Browser


Select the on-start up option, you can see three options here, in that select Open a specific page or set of pages.

Selecting on startup option in Google Chrome settings


Next select Add a new page option, then you will be directed to the input form where you can place your GitHub URL.

Adding github url in Google Chrome's add a new page pop

Paste your GitHub URL here, that’s all. Now go open a new window in your chrome and you will be getting a nice landing page with some motivational quotations with a nice background and you will be getting a new quotation and background of every page reload.

Morning message: 

Morning message in Google Chrome customized landing page

Afternoon message: 

afternoon message in Google Chrome customized langing page

Evening message:

evening message in Google Chrome customized landing page

For firefox:

In firefox go to settings

Opening Firefox Browser settings window


Select home, and go to the Homepage and new windows then choose a custom URL.

Select home tab from left side menu

Now you will be directed to place your project URL.

Adding git hub url in custom url block

Then paste your URL and select use current page option, now open a new window in your browser and the magic.

Result of customised landing page in firefox browser

Finally, I want to conclude that by following every single step without skipping, even a beginner can create a landing page for their PC/Laptop. So, go on guys, and get started.

Thank you so much for reading🤗! Hope you learned something from this article. Let me know if there's an issue or if I have missed something. I Will meet you in the comment section🙌!


How does the quotation display a new one on every new open page or when the page refreshes?

In Javascript, we have an amazing concept called fetch. We can get any type of data from the external API, and with the help of getting methods, we will get the data from random and display it on our landing page.

How does the background image update on every page refresh?

In Javascript, another cool method to get a new image on every page reload is getting Unsplash API and using it in the background image styling section.

Can I use this page as default for any type of browser?

Yes, you can use this page for any type of browser other than chrome and firefox. You can include some more features like adding a to-do list of your daily work or some major shortcuts.

How do the morning, afternoon, and evening messages get updated?

Since we are using the new Date() object, we can get the Indian Standard time, date, and current year. So based on the current running time value you can change the wish accordingly.




Read Next