Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
img
 
 
 
 
 
 
 
 

Roll your own linklist (a short tutorial)

Last updated February 24, 2021

Why bother?

Building your own linklist using HTML and CSS is like having your own Linktree, but it's infinitely more customizable. Plus, it's nice to not have to rely on commercial services sometimes, who, even if they're not charging you, are probably slurping your data for commercial gain.

How to do it

  • Download this repository to your computer
  • Open index.html in any web browser to see what it looks like.
  • Edit index.html to change the text, links, fonts and colors.
  • To see the effect of edits, you will have to refresh index.html in your web browser.
  • Replace the images in the img folder. Then, if necessary, change the referenced filenames in index.html
  • Optional: edit main.css for finer control over the layout
  • Upload the contents of this repository onto a web host
  • Make sure to test it the webite on small and large screen sizes (e.g. a mobile phone and a laptop)

What's files are in this repository

  • index.html — the main web page, which we've made easy to edit
  • main.css - advanced styling settings, edit if you want more control
  • normalize.css - standardizes styling defaults across different computers
  • README.md - this tutorial document that you're reading right now
  • img\background-image.jpg - our background image of the sea
  • img\bottom-image.png - our images of narwhals hanging at the bottom
  • img\profile-picture.png - our profile picture

For more information

  • If you're not sure what a web host is, we recommend starting a free account on Neocities and starting out on there.
  • To edit index.html, simply open it any text editing program (TextEdit on OSX, Notepad on Windows)
  • Colors can be set in three ways:
    1. Named colors like "black" and "white". See the full list on Encyclorpedia.
    2. Hexademical codes like #000000 and #FFFFFF.
    3. RGBA values that let you set rgba(red, green, blue, alpha) values.
  • rem is a standard unit of length/size. Try not to accidentally delete it!
  • Learn more about editing basic webpages in the Neocities HTML Course.
  • Still have a question? Ask us on the issues page.

Examples linklists

About

Roll your own linklist

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published