How to code your own Linktree with HTML & CSS
Let’s create a linktree from scratch! It’s simple, and can be coded with HTML5 and CSS. This tutorial is based on my hands-on experience building one, and what I’ve learned during the process of translating the wireframe to code.
What is Linktree?
Before we dive into coding, let’s find out how you can benefit from using Linktree!
Want to optimize your Instagram or other social media platform to boost your internet presence, whether for your business or for your personal portfolio? One link can drive your followers to all your content. It’s like a micro webpage where you can put all the links or contents that you want to share in your socials. In essence, that is what you can accomplish with a linktree. You can share that link anywhere, in your Instagram bio, or even Facebook posts.
Let your content live longer than the feed.
Step 1 — Research and Choose the Content You Want to Showcase
Research and use that insight to strategically choose the content that you want to put on your linktree. First, you need to decide the scope and your target users. Some guiding questions: What do we want users to know about us? What features or links or contents will be helpful to them? How can we alleviate some of our user’s pain points in their customer journey?
List down all the content that you want to include in your linktree. If necessary, provide a style guideline, it will be helpful!
After you decide the content of your linktree, you can decide links position, content, and styling stuff. The image above the example that we did for our step one.
Step 2 — Wireframing your Linktree (Ideate!)
Visualize what your linktree will look like. Ideate on what would be on your linktree. The logo, links content and social media. We used paper wireframing for the ideation of our linktree. If you prefer digital, you can use wireframing tools, such as Marvelapp, Invision Studio, Justinmind, or Adobe XD.
Step 3 — It’s time to code your Linktree!
Prepare to code! First, drink water and take a deep breath.
Open your Visual Code or any code editor that you have. First, let’s create index.html. With your index.html file open in your text editor, let’s write some boilerplate code.
Code your index.html. First, add more details in head tag, such as title and meta tag. In the body tag, you can code the main content of your linktree. You can layout the linktree, by adding logo and links. For creating layout, we can use div element for marking out a block of content, or set of other elements inside an HTML document. Inside div element, we can add class or id attributes for grouping content so it can be easily styled. The example of the code as seen below.
The links part is in the a href attribute. <a> and <area> elements, the href attribute specifies the URL of the page the link goes to. You can set the link URL destination for user to click it.
After code your index.html, you can style your linktree, adding color, fonts, setting content position, with CSS. HTML defines the core content of a webpage whereas CSS allows us to add design. We can make our linktree prettier with CSS.
We can set width and height of each component, the margin and padding. Margin is the space between the border and next element. Padding is the space that’s inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side with CSS. For font styling, you can set the font-size, line-height, and the color. Font that used for the linktree, you can place in the head tag or in CSS. The code below the example if you place in head tag.
<link href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" rel="stylesheet">If you place in CSS, use font-family in your CSS code. The example as seen below.
Want to make prettier for your links? You can!
.links__item .links__item--upcoming {border-bottom: 3px solid #ffa093;box-shadow: inset 0 -4px 0 #ffa093;border-radius: 25px;border: 2px solid #ffa093;background-color: #ffa093;}
The code above is my example of links styling. You can use border and set the color. The border property is a shorthand syntax in CSS that accepts multiple values for drawing a line around the element it is applied to. So you can make like links button.
For background image, you can add an image or just color to make your linktree prettier. To make your linktree responsive in all devices, we can use this code like this :
background-image: url(./assets/images/imagelink2-min.png);background-position: center center;background-repeat: no-repeat;background-attachment: fixed;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
The last, in your index.html, don’t forget to add this code (as seen below) for CSS can be connected with HTML.
<link rel="stylesheet" href="style.css" />Step 4 — Time to put your Linktree to use on all of your socials 😊
Hi! How’s your code? Easy, isn’t it?
In this section, I will show you the linktree that I made. So, if you want to take a look at what you make in the browser, in Visual Code there is an extension called Live Server. Install it, and voila! You can see your linktree webpage live in the browser.
For you who want to make domain URL for your linktree, for easy deployment, we can use Netlify Drop. Drop your project folder and voila, the linktree is live with a domain that you want. The example of the linktree that I made as seen below.
For MyEduSolve Linktree, you can access here.
So, how is your experience making linktree from scratch using HTML & CSS? Is it fun? I’d love to hear more about your experience and I hope you enjoy this tutorial. See you again, soon!
MyEduSolve is an edutech company focused on improving the quality of the Indonesian workforce through digital literacy. Follow MyEduSolve Instagram at @myedusolve and for Medium at MyEduSolve Indonesia.
