Roll your own linklist (a short tutorial)
Last updated February 24, 2021
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
index.htmlin any web browser to see what it looks like.
index.htmlto change the text, links, fonts and colors.
- To see the effect of edits, you will have to refresh
index.htmlin your web browser.
- Replace the images in the
imgfolder. Then, if necessary, change the referenced filenames in
- Optional: edit
main.cssfor 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:
- Named colors like "black" and "white". See the full list on Encyclorpedia.
- Hexademical codes like #000000 and #FFFFFF.
- RGBA values that let you set rgba(red, green, blue, alpha) values.
remis 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.