DEV Community

Steve Whitmore
Steve Whitmore

Posted on

A fun exercise for new web developers

Are you a new developer eager to find useful ways to utilize your newly discovered superpowers? One idea is to set your browser's home page to a custom one.

For example, I use Firefox mostly to listen to white noise or music while working. I created the following page and set it as my Firefox home page -

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>home</title>
    <style>
        * {
            margin: 0;
        }
        div {
            display: flex;
            height: 100vh;
        }
        a {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            text-decoration: none;
            font-size: 20px;
            color: #fff;
            box-sizing: border-box;
            transition: font-size 0.5s ease;
        }
        a:hover {
            font-size: 2em;
        }
        a:first-child {
            background-color: #333;
        }
        a:nth-child(2) {
            background-color: #006fff;
        }
    </style>
</head>
<body>
    <div>
        <a href="http://asoftmurmur.com">asoftmurmur</a>
        <a href="https://pandora.com">pandora</a>
    </div>
</body>
</html> 
Enter fullscreen mode Exit fullscreen mode

Save the html file somewhere and navigate to it in your file explorer. Right click on the file and open with any browser.

The URL in the address bar will be the path to your html file prefixed by file://. In my case it's file:///home/swhitmore/.mozilla/ffhome.html.

Set your browser's home page to this new URL and voilà you have a new custom home page!

Imgur

Not sure how to set the browser's home page? Mozilla has documentation for Firefox and Google has some for Chrome was well.

Discussion (1)

Collapse
brandonwallace profile image
brandon_wallace

This is a superb idea. You can create what every you want and put your favorite links, images, etc.