DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for A fun exercise for new web developers
Steve Whitmore
Steve 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>
<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.

Top comments (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.

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.