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.
- Download this repository to your computer
- Open
index.htmlin any web browser to see what it looks like. - Edit
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 inindex.html - 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)
index.html— the main web page, which we've made easy to editmain.css- advanced styling settings, edit if you want more controlnormalize.css- standardizes styling defaults across different computersREADME.md- this tutorial document that you're reading right nowimg\background-image.jpg- our background image of the seaimg\bottom-image.png- our images of narwhals hanging at the bottomimg\profile-picture.png- our profile picture
- 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.