As a graphic designer looking for work and needing inspiration, I need to figure out the best ways to stay productive. I use different browsers for different purposes—Firefox for professional purposes and Brave for entertainment purposes. I heard Google Chrome can get pretty hungry for resources, so I’m deciding not to use that.

I had Firefox set up so that it opens four tabs when I open up the browser: Gmail, LinkedIn, Facebook, and Instagram. The problem is I only end up using one or two of those tabs at a time. Mostly, I just use Gmail, and Firefox having to open up four tabs tends to take some time on my not-so-stellar laptop. I also don’t just use LinkedIn to apply for jobs, as my best bet for landing one is to search multiple job hosting websites, like Indeed, ZipRecruiter, and AIGA. As for social media, I’m better off mostly accessing it on my phone, but there may be occasional times where I’m OK with browsing on my laptop instead.

So, I decided to brush up on my HTML, CSS, and JavaScript skills to make myself a custom homepage where I can choose what I want to do each session. With a click of a button, I can access multiple websites tailored for a specific purpose, and I don’t have to worry about my computer slowing down due to opening tabs that I don’t want at the moment.

I wasn’t sure if I wanted three or four buttons. I sketched a layout for four buttons, but I ended up only needing three. Perhaps the fourth button could have been for entertainment, but I would use a different browser for that. I intended for the homepage to be rather plain, but later on I decided to try giving it a little flair with a background image and custom colors.

With Visual Studio Code open, the first thing to do with the homepage was to build the basic structure using HTML.

As you can see, the main part of the page will consist of three buttons: one for social media, one for finding jobs, and one for inspiration. I prepared each button with their own function to execute on click. What I want to do is set up a list of websites for each category. For that, I need to give each function their own array of websites.

How each of the buttons function will be slightly different. I want the social media button to open all the listed socialLocs, the job opportunities button to open two random jobLocs, and the inspiration button to open one URL from inspoArticles and one URL from inspoLocs. All the websites opened will appear in new tabs. Let’s go through each function one at a time.

The social() function is the easiest because all I need for it is a single loop to make it work. When the button is clicked, execute a for loop that opens a socialLocs URL until it reaches the end of the list.

Next is the jobs() function, and this one was tricky. Out of however many URLs I listed in the array jobLocs, I only want to open two random URLs, preferably without duplicates. I’m still a novice when it comes to JavaScript, so I needed help from multiple sources to figure out what I needed to do. It’s a little complicated, so I’ll post the code I borrowed from Stack Overflow and adjusted for my needs.

First, we set up an empty array for called URLs to be written in. Next, we set up a new function in_array with the parameters “array” and “el”. This function will be help for the next function get_rand. We create a new variable “rand” as a shorthand for selecting a random index of the chosen array. Then, if the chosen jobLocs is not in the array already, return the random value. These functions will prevent any duplicates from showing up.

Finally, the inspo() function, which thankfully I don’t need to do too much. I just set up two variables, one for each list, and open two windows using the index of each list.

Now I got a fully functioning custom homepage to quickly and effectively take me to the right places depending on what I want to do.

With the structure and coding done, I added a little CSS to make it a little more appealing. I chose a picture I took of a walking stick last year as the background image and added a transparent white cover to prevent the image from overshadowing the elements.

Here is the final result:

In addition to a more organized routine, this small project allowed me to brush up on my web development skills. I know there are jobs out there that would appreciate designers with knowledge of HTML, CSS, and maybe some JavaScript.

The only issue right now is that I can only add new websites directly in the code. I wasn’t interested in trying to figure out how I can make JavaScript somehow have access to my bookmarks. I will probably need to utilize a text input to type in URLs and store them in localStorage. Maybe I’ll do that one day, but right now I need to focus on looking for jobs.