Make Yourself a Custom, Minimalistic Startpage!

Have you had to switch to mostly remote work since COVID-19 became a thing? Same!

Working from home with our computers and over the Internet often means that we have to keep track of a lot of websites for work, for school or even...for fun!

Bookmarks aren't always up to the task, so how about making ourselves a custom startpage tailored just for you, with all the links you need, and that opens up in your Web browser every time you need it?

Here's what you'll need:

A computer (ours is running Windows, but any modern computer will do).
A connection to the Internet.
A fresh installation of text editor Notepad++.

When you're ready, let's get you started with using our own startpage template...Or creating your own from scratch!

Step 1: Create a Start Page OR Download Our Customized Template

At this point you have two options:

Download our customized template (instructions follow a little later in this step) or,
Follow this basic startpage guide; it will walk you through the building blocks of a simple start page step by step - and that's the guide we followed to build this custom startpage!

Why recommend a tutorial...in a tutorial? Our work as MakerSpace facilitators is not just to show you how to do things: it's also to connect you to the Maker culture and resources available out there. This guide is one of the places where many startpage designers get started, so it made sense to share it with you!

If you have time, go ahead with option #2 but if you don't, you can always refer to the basic startpage guide later! For this tutorial, we'll just assume you're downloading our custom template! To download it:

Open our DIY_startpage repository on Github.
Click on the big green Code button to open a drop-down menu.
Click on Download ZIP to download all the files for the project.
Extract all the files from the ZIP file you just downloaded to a location of your choice.

GitHub is a website where programmers and designers all over the world share their code and creations with others: it also lets you collaborate with others on projects of all sorts. Bottom line is, it's a great tool every Maker should know!

Now start your browser of choice: I really like Firefox, but our template should work on just about any recent Web browser so feel free to use Edge, Chrome or Safari!

Finally, open the "DIY_startpage.html" file in your browser AND in Notepad++, and let's start customizing it!

Step 2: List Your Favorites!

Having a start page is great. Having a useful startpage is even better and right now, ours looks a little empty!

What are the things you regularly check out and need to keep track of? What webcomics do you read in the morning? What news website do you like to check? These are the things that should land on your startpage.

For this tutorial, I'll just use some of my favorites. Spoiler warning, lots of links from the library! But also some of my favorite Makers for inspiration, and some of my favorite entertainment. You can find all these items below with a link, as an example!

News and Reading

Learning

Music

Maker culture

I picked three of my favorites for each category, but you should be able pick more or less than that without problems - the layout of your start page will adjust to the number or resources automatically!

Once you have all your favorites listed, let's set them aside for a minute and work on making our generic start page template a little more you.

Step 3: Customize Your Font

Start Notepad++, click on File > Open to open your "DIY_startpage.html" file. What you're looking at looks very different from the page in your browser, doesn't it? It's the code of your page, and browsers interpret that code to make it look a little more eye-friendly and do all the things we need it to do.

The code for our start page project is written in two related languages: HTML and CSS. HTML is usually in charge of the content of a page, and CSS in charge of the looks of a page.

Look for this first section to customize your start page:

    html {
	align-items: center;
	color: #313131;
	display: flex;
	font: 22px "Courier New", Courier, monospace;
	height: 100%;
	justify-content: center;
	margin: 0;
	}

This section of our start page focuses on the general look of items on our page. The line:

font: 22px "Courier New", Courier, monospace;

is specifically about the font we are using on the start page and has two parameters that define what text on your page will look like: size and font family.

size - That's what that "22px" is. The size of your text on the screen is defined in "px", short for pixels.
font family - That's where we list the fonts we would like to use. It's usually a good idea to list several, from the font you really want to use the most generic family. These fonts rely on the browser you are using, so if the most particular one is not available, the browser will try the next one, and so on.

The CSS Web Safe Fonts page from w3schools has a great list of font combinations that look great, hold on to the style you're looking for and will work on most modern browsers.

For example, you can replace:

"Courier New", Courier, monospace;

with:

"Palatino Linotype", "Book Antiqua", Palatino, serif;

or:

"Comic Sans MS", cursive, sans-serif;

Save your file, and refresh the page in your browser to see the changes! Don't like it? No problem! Play around with the CSS Web Safe Fonts until you find a combination that you like.

Step 4: Customize Your Title Quote!

Look for this section in your HTML file:

<h1>This is your startpage! Enjoy!</h1><br>

Pick a quote you like, and replace the code! For my own, I picked

<h1>Once more onto the breach!</h1>

The layout of your startpage should adapt on the fly to match your quote as soon as you reload the page in your browser: in Firefox, that means pressing CTRL+R on your keyboard, or clicking on the Reload icon. Pick a quote you like now (or pick something later!) and let's get to work customizing the sections of your startpage!

Step 5: Customize Your Sections

Now that you've found a fonts combination you like and you have a great quote to inspire you, let's continue and customize your sections.

If you downloaded our startpage from Github, you have 6 sections available to customize: the original guide only has 4, but since more and more aspects of our lives have moved online recently, I went ahead and added more just in case.

Find the first section and just type in what we need. As a reminder, my first section is "News and Reading":

With your file still open in Notepad++, find the following line of code:

<li>Section 1</li>

and replace it with the category in your list you think you will use the most.

Since many of us are used to starting reading documents from the top left, that's where your eyes might naturally go - so take advantage of that and keep our most important go-to there! But if you come from a culture with a different reading direction, or if you just work differently, customize this for yourself. It is your start page after all: you know what's best for you!

One section title down, five to go! Look for the line of code that says:

<li>Section 2</li>

Change it, then keep looking for section titles and changing them until you get to the end of your list. If you're not using all the sections, just leave them be! We will do a little cleanup at the end of this tutorial too.

Once you're finished customizing sections, just save your changes in Notepad++ and reload the page in your browser. All the section titles should be showing up where you put them: now we can customize the links in each section!

Step 6: Customize Your Links

Customizing the links in each section is a little more involved but certainly not much harder!

This time around we're not just changing the name of the links, we're also changing what you can do with them! Each item in each section is going to become clickable, link to a different website. Bonus, you can also decide if you want it to open in a new window or not!

First, look for a line that looks like:

<a href="link.one">link_one_name</a>

Select that "link_one_name" bit and replace it with your own text. For example, the first link in the first section based on my list from step X is "Digital Newspapers" so we get:

<a href="link.one">Digital Newspapers</a>

Next, let's work customize the link! Replace the "link.one" bit with your first link. For me, that'll be the link to our digital newspapers, so it will look like:

<a href="https://www.jocolibrary.org/elibrary/enewspapers">Digital Newspapers</a>

Save your work in the text editor, and reload the page in your browser!

You should now be able to click that first link you customized. If it didn't take, that's OK! Start over again or retrace your steps until the link opens when you click it.

Once you get your first link working...Well, all you need to do is repeating these steps for each link in each section, until you've customized all the names and links on your start page! There's only one catch though: chances are when you click a link, your start page just disappear as the new link opens up in the same tab or window.

It's not very convenient...So how about changing the way links open up? Let's use our first link as an example! You probably remember that this where we tell your browser to open a link when you click it:

<a href="https://www.jocolibrary.org/elibrary/enewspapers">Digital Newspapers</a>

But guess what - that's also where we decide how the link is going to open! Change it to:

<a href="https://www.jocolibrary.org/elibrary/enewspapers" target = _blank>Digital Newspapers</a>

Now save your work, and reload the page in your browser: the link will now open in a new tab when you click it! That way you can keep your startpage open for when you need it.

Step 7: Add a Picture Into Your Startpage

Now that all our links are set up, it's time to decorate our startpage! This template has room for a custom picture on the right-hand side of the screen. Now back in Notepad++, look for this line:

<img src="library_picture.jpg">

all the way at the end of the template. Pick a picture you like, move it to the same folder as your startpage file, and replace "library_picture.jpg" with the file name of your picture. For example, if my file's name is "your_picture.jpg" the line becomes:

<img src="your_picture.jpg"><br>

Save your changes and, once again, reload the startpage in your browser.

Since your startpage's code and your picture files are in the same folder, the picture should load automatically when you refresh the page. If it didn't, check the name of your file - that's usually where I get it wrong!

Smartphone wallpapers are great fits for that project. In general, any vertical picture (or as fancy people say "portrait-orientation picture" with a 16:9 ratio) for that matter! But the layout of our startpage will adapt no matter what you throw at it.

If your picture shows up, congrats, you're pretty much done!

Step 8: Cleaning Up a Bit

If you have extra sections you are not using at that point, feel free to delete them! For example, let's say you're not using Section 6. Find:

<ul>
<li>Section 6</li>
<li><a href="https://link.one/">Item 1</a></li>
<li><a href="https://link.two/">Item 2</a></li>
<li><a href="https://link.three/">Item 3</a></li>
</ul>

Select and delete these lines, save your file and refresh the file in your browser to make sure everything is gone.

This is usually the step where I break everything because I go too fast, so if something suddenly doesn't work remember: take a deep breath, and undo what you just did with the CTRL+Z key combination on your keyboard!

Step 9: Making It an Actual Start Page

Now that the startpage opens all the links we want, and looks the way we want it to look, time to make it open when you start your browser!

At that point, I like to keep everything away from my computers' Desktop by cutting and pasting my startpage folder into Windows' Documents folder. So if you're done working on your start page, do that!

Next: most likely your browser opens with your favorite search engine, or maybe even a blank page.

You can find instructions to customize Firefox as well as other browsers below:

Once you're done following the instructions for your browser, close it all up and reopen it. If it your start page shows up as your browser is launching, you made it!

If it didn't take, go through the instructions for your browser again and make sure you didn't miss anything. Worse comes to worst, then restart your computer after saving all your work. 9 times out of 10, that solves everything!

Step 10: All Done! And, Would You Like to Know More?

Congratulations on finishing your start page! It might not look like much, but you've just learnt to code one of the most important building blocks of a website the way I did...About 20 years ago!

If you enjoyed this and would like to learn more about start pages, it's a deep rabbit hole to follow! Here's a little selection to help you on your start page journey:

Did you try the Basic startpage guide? Good news, there's more where it come from! Check out the other guides by /stpg/ for more inspiration and advanced features!
Check out the Johnson County Library catalog for books on HTML and CSS - and with your library card or e-card you have access to eBooks too!
Your library card also gives you access to Udemy, and it has some very complete classes on HTML, CSS and web design as well.

If you're super proud of your creation, why don't you screenshot and share it with us over Twitter or Instagram with the #jocomakes hashtag? We're always happy to see what our patrons come up with!