Greetings! In this tutorial, I am going to show you how you can build a custom Linktree page easily with HTML and CSS in Visual Studio Code (or any other text editor out there). If you want to follow this tutorial on YouTube, you can click on this link to check out the tutorial on YouTube.
Making the files
In your text editor make the following files and folder:
- An empty HTML file called
index.html - An empty CSS file called
styles.css - A folder called
assetswith a profile picture. If you need a profile picture, you can download the picture and files at this Github repository.
Setting up the HTML
First, we need to set up the HTML structure of the application.
To create the structure we first need a boilerplate of the HTML structure in the index.html file. In your text editor you can easily create a boilerplate by typing doc in the text editor and then press TAB. Your index.html file will have a boilerplate that looks like this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Feel free to change the title tag into whatever you prefer.
Second, the custom Linktree page has the following components:
- Profile picture
- Profile name
- Links
- Logo at the bottom
For the profile picture, use the profile picture in the assets folder and use an img tag with a class of profile picture as in the example below.
<img src="assets/profile-picture.jpg" alt="profile picture" class="profile-picture">
Next, we need a profile name. We can use a div tag with a class name of profile-name. Feel free to come up with your own profile name.
<div class="profile-name">@justaname</div>
Afterward, we need to include the links in our web application. For this, we are going to use an a tag with a class of links. The href can be filled with the value of # because we don't need to link it to a certain web page in this tutorial. You can add as many links as you want and come up with names. In this tutorial, I will keep it to five links. You will have something like this:
<a href="#" class="links">SNEAKER STORE</a>
<a href="#" class="links">NEW ALBUM</a>
<a href="#" class="links">IG</a>
<a href="#" class="links">TWITTER</a>
<a href="#" class="links">YOUTUBE</a>
Lastly, we have to add the logo to the bottom. This can be done in a simple div tag with a class of bottom-text, as in the example below.
<div class="bottom-text">Trinklee</div>
Right now, your index.html should probably look like this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrinkLee</title>
</head>
<body>
<!-- Profile picture-->
<img src="assets/profile-picture.jpg" alt="profile picture" class="profile-picture">
<!-- Profile name-->
<div class="profile-name">@justaname</div>
<!-- Links-->
<a href="#" class="links">SNEAKER STORE</a>
<a href="#" class="links">NEW ALBUM</a>
<a href="#" class="links">IG</a>
<a href="#" class="links">TWITTER</a>
<a href="#" class="links">YOUTUBE</a>
<!-- Logo -->
<div class="bottom-text">Trinklee</div>
</body>
</html>
Adding the stylesheet to the HTML file
Before we are going to style the HTML file, we need to add a link tag in our HTML file to connect our stylesheet. Within the head tag add the following link tag to connect our index.html with our styles.css. Your head tag looks like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>TrinkLee</title>
</head>
Styling the app with CSS
Next up, we are going to style the application with the styles.css file. First, we going to stylize the body tag and change the background, text color, and font:
body {
background: black;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
letter-spacing: 2px;
}
Next, we are going to change the border-radius of the img tag to make sure our profile picture is round.
img {
border-radius: 50%;
}
Then we are going to stylize the profile picture further using the class profile-picture to make sure it is the center of our application and has a max-width that is the same across various screens.
.profile-picture {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
height: auto;
max-width: 100px;
}
Afterward, we need to put the profile-name class in the center of our application using the CSS property text-align.
.profile-name {
text-align: center;
padding: 30px;
}
Next, we need to add a border to our links and place them in the center as well. We are going to use the class name links that are attached to them.
.links {
text-align: center;
margin-top: 20px;
padding: 20px;
border: 1px solid white;
border-width: 2px;
width: 290px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 40px;
}
We also want to make sure the color of our links are white and that there is no text-decoration. Then we want to make sure that we want to have a hover effect when we click on the a tag. For the hover effect, we are going to use the CSS property transition to set the a tag up for the smooth transition.
a {
text-decoration: none;
color: white;
transition: color 1s;
}
For the logo at the bottom text, we can use the class name bottom-text to put the div tag in the center and adjust the font.
.bottom-text {
text-align: center;
margin-top: 40px;
font-size: 20px;
font-weight: bold;
}
Lastly, we want to create a hover effect. To create the hover effect we need to use the CSS selector hover after the a tag with the values for the color and background transition.
a:hover {
color: #000;
background: #fff;
}
Your styles.css file should probably look like this:
body {
background: black;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
letter-spacing: 2px;
}
img {
border-radius: 50%;
}
.profile-picture {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
height: auto;
max-width: 100px;
}
.profile-name {
text-align: center;
padding: 30px;
}
.links {
text-align: center;
margin-top: 20px;
padding: 20px;
border: 1px solid white;
border-width: 2px;
width: 290px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 40px;
}
a {
text-decoration: none;
color: white;
transition: color 1s;
}
.bottom-text {
text-align: center;
margin-top: 40px;
font-size: 20px;
font-weight: bold;
}
a:hover {
color: #000;
background: #fff;
}
Congratulations! You have finished the application and looks something like this:
I hope you learned something from this tutorial. If you have questions/remarks feel free to comment below.
Happy coding!
I also made a YouTube video if you want to follow along. Click the below link to check out the video 👇
Discussion (1)
Hi Arvind! Thank you for this blog post — you helped me make my own linktree when I was disappointed with the poor functionality on the original page ✨
I'm giving you a shoutout in the readme: github.com/sylwiavargas/tech-writi...