DEV Community

loading...

How to Make a LinkTree of Your Own Code

Rohan Salunkhe
I’m an explorer, dreamer, developer, thinker and so much more.
Updated on ・1 min read

What is linktree ?

Linktree works by creating a landing page on their site, which features multiple links to your site. You simply copy and paste your Linktree landing page URL into your Instagram bio to raise awareness of other parts of your site.

Why should you make your own LinkTree, though?

  • No watermark.
  • Also why should you pay when you can make it by yourself.
  • It's easy to make one.

Make one like this

Screenshot

Before we begin, you should be familiar with the fundamentals of HTML and CSS.

So question is how you do it?

  • Simply use html and CSS to make things simple. Although it won't be as dynamic as the original linktree, you may make it so by using a framework like react or nextjs.

Steps to create

  1. You can create a whole from scratch or you can use my source code here.
  2. Now that you've downloaded the code, all you have to do is alter it to your liking.
  3. Simply upload the code to your preferred static hosting platform, such as netlify, vercel, github pages, or cloudflare pages.

✨ Please do not hesitate to contact me with any questions Here

Discussion (2)

Collapse
djay4k profile image
Axel

Hi nice idea, just little UX improvement, instead of having different border width on your .link class, you should setup the default state as border: solid transparent 4px; and on hover border: solid violet 4px;.

To optimize you can just change the border-color on the hover

Collapse
amrohan profile image
Rohan Salunkhe Author

Thank you so much for your help; I'll implement the improvements you advised.