Code Your Own Linktree

You've seen one, surely – a neat little list of links to social media, products, and other web content that can easily be shared via URL. Whether you're an influencer, artist, or just wanting a place to collect your work, Linktree is a popular option for sharing user media, but their advanced customizable features can become costly, and outsourcing your bio means less clicks directly to your own content. In this tutorial, we'll teach you how to create your very own version of a Linktree landing page for FREE, and options to spiff it up nicely too!

What You Will Need

a text editing program, such as VSCode or Sublime Text – generic Notepad works too
a basic understanding of HTML and CSS
at least one social media or project link you'd like to include in the list – the more the merrier

Steps to Build

Sample Project: http://freecodinglessons.com/foundations/1.3/

TIP: Go to the above page, click "View Activity 1 Solution", then right click anywhere and select "Inspect". This will show you all of the HTML and CSS used to build the page – hovering over the elements will also highlight their corresponding visuals on the page. Use this if you get lost or need some help!

1. The Bones

Examine the following:

<h1>Hey there! 👋</h1>

<p>I'm a web designer who's always excited for the next project. Instead of
having my "link in bio", I keep links for all my work here.</p>

<p>💼 Read the testimonials given by my past clients on my LinkedIn page:</p>

<p>💻 Follow me on Twitter for coding tips:</p>

<p>📷 Follow my photography on Instagram:</p>

<p>🖌️ I also paint. Order prints of my most recent work on deviantART:</p>

<p>🚀 If you want to work with me, contact me on LinkedIn with your project
idea and I can give you a quote. I'm looking forward to helping you launch your
next web project!</p>

This code represents the HTML needed to get most of the basic structure of your personal Linktree replacement. Copy and paste the code into your code editor and save it as a new HTML document, such as "project1.html". Then simply open the file in your browser to see the result!

2. The Style

Styles, such as fonts and colors, are key to creating a unique look for your site. Checkout the code below:

<style>
body {
    margin: auto;
    width: 300px;
    background: WhiteSmoke;
}

p {
    color: DarkSlateGray;
    padding-top: 20px;
}
</style>

This will do some simple formatting of your text to narrow the text area and add some space between sections (replicating Linktree's narrow mobile-friendly look), as well as set the color of the background and paragraph font. Copy and paste this block into your HTML document, above any existing code. Try playing around with different colors until you are satisfied with the result.

3. The Links

Now it's time for the star of the show – the links! Consider the following code:

<a href="#">LinkedIn</a>

<a href="#">Twitter</a>

<a href="#">Instagram</a>

<a href="#">deviantART</a>

You'll notice there are no actual URLs listed just yet. Instead, we are using a placeholder character # – this is a common coding technique when you haven't finalized what you're linking to yet. Copy and paste each anchor tag below it's corresponding paragraph text, like so:

<p>💼 Read the testimonials given by my past clients on my LinkedIn page:</p>
<a href="#">LinkedIn</a>

4. The Cherry on Top

Now that we have our text and links all laid out, let's add some polish to the links themselves. Take a look at the following styles:

<style>
a {
    background: PaleGreen;
    color: DarkSlateGray;
    padding: 10px;
    text-decoration: none;
}
</style>

Copy and paste the anchor tag styles into your existing style tag. These will give a nice pleasant pale green background padded out to 10px, giving it the look and feel of a button – note that you can click on the colored background without text present and it will still open the link. This replicates Linktree's buttons and makes the links more accessible by being easier to see and click – much better than a simple hyperlink! Play with the colors and sizing here until it suits your vision.

5. Make it your own!

Now that you have a functional Linktree replacement, all that's left to do is add your own socials and links! Change the project text to your liking, replace the # placeholders, add more sections, try out different sizing, colors and structure. And, read on for more ideas on where to take your project next!

Further Development Ideas

Pepper in some emojis, which can be simply copy-pasted directly into your text editor: https://texteditor.com/emoji/symbols/
- Adding some emojis can help highlight the intent or contents of a particular link, which is especially useful if your audience is multilingual or global. However, too much of a good thing could clutter your page and make things look less professional or confusing, so use caution!
Find a background image that stands out: https://www.pexels.com/search/background/
- Make sure your text is still easy to see over the image! If you have dark-colored or black text, your background should be a lighter color, and vice versa.
Get fresh fonts to try using Google's Fonts API: https://developers.google.com/fonts/docs/getting_started
- Fonts, even simple ones, can uplift a site from good to great! Try something fun and eye-catching for your header or your name, but remember to use something readable for the main text sections.
Level up your formatting with Bootstrap 5: https://getbootstrap.com/docs/5.3/getting-started/introduction/
- If you wish to further develop your page with new sections or widgets, or just want an easy and clean way to style your buttons, badges, cards and more, Bootstrap is the way to go.
Git-ty up and go live with GitHub Pages: https://github.com
- Implementing your project with git version control allows you to save your work to the cloud for easier development and access, and GitHub can even host your completed website for free.
- Click HERE for an easy-to-follow tutorial on starting your first git project!