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
assets
with 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!
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...