DEV Community

Cover image for A fun exercise for new web developers
Stephen Whitmore
Stephen Whitmore

Posted on • Updated 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>
    <meta charset='utf-8'>
        * {
            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;
        <a href="">asoftmurmur</a>
        <a href="">pandora</a>
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!


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

Top comments (1)

brandonwallace profile image

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