Do you often use linktree to put all your links in one place? But how about building your own personalized linktree using only HTML and CSS?

By the end of this blog,you can built and deploy your personalized linktree ,so let's get started.........

Prerequisites:

GitHub Account( to deploy your webpage using Github pages)
VSCode on your System

What we are building (a design)

Let's start coding.......

Firstly, we're going to build a hardcode version of Linktree(without backend) so you need to statically add stuff

To begin with,we'll firstly put all our items on plate and then work with the designing..

Make a folder and name it then open it with your VSCode.Once inside VScode make an "index.html" file and if you're on Windows press a !+Tab and you'll get a boilerplate of html code. It'd look similar to the one below.

Now you need to attach a '.css' file to your 'index.html' so write down the following snippet,I'll call my .css file as style.css :

 <link rel="stylesheet" href="style.css">

Now , go to the head tag and change the content inside title and name it to what you want your webpage to be named,if you want add a favicon as well.

4.Move to the body section, and make a big wrapper with section tag so that all your div blocks are safe and under one block.

5.Now we'll put the logo,heading and paragraph inside one div block, which should look like this..

To Note:

tag was used to get add the logo.
The src in the img tag stores the path or location where the image is stored.
alt in the image tag store the alternative name ,that you can use to display if by any chance,the image doesn't show up,it lets your user know that what exactly was there.
For heading ,you can use any of the 6 tags ranging from h1 to h6,I'm using h3 because,I believethat is most appropriate for my use. -We've used the
tag to write down our paragraph.

6.We're done with picking all the matter now let's add css to make it visually attractive...

Firstly,add classes to your html code,so that we can use External Css and and add styling to them. Your CSS for the div block should look similar to this:

To Note:

text-align property is used to set all your code inside the div block to center.
the respected paddding is based on my screen size to make the website look more appealing....

And with that done our first,div block would look like:

7.Now back on 'index.html' lets add the links .Firstly,we'll again add a wrapper div and then add an anchor tag ,the code snippet should look similar to this:

Lets's use CSS and align it according to what we want....

To Note

We used an anchor tag and added a '#' to href because we didn't wan't to send it on click to another webpage,but you can add a link of another page to the href. -for the alink class the text-decoration was set to none,so that the default css is removed,the margin-left and margin-right were set to auto so that according to screen size,we can adjust the content.
What display block does is it starts on a new line, and takes up the whole width,and we set the maximum width to 590px so that no matter what the screen size is the width of our element is not more than 590.
Here again we used the text-align property so that the content is exactly at the center .
padding 20px 0 , meant , only a top and bottom padding of 20px and the left and right padding is set to 0 here.

With that the page should now look like:

We'll now add all the remaining links, following the sinppet below:

Here we used class and not id's because,it will help us use the same css for all the anchor tags. An id can't be used twice but a class name can.

this will lead you to a page looking similar to:

With that let's add a hover effect and to do that use the following css code snippet:

To Note:

A 2px along side the border set's the border width to 2px and a solid means the border type will be solid.....

Finally,let's add the proof that it's your personalized linktree webpage.

use the following html snippet,after the second div block and before the section tag closing:

and this css fixes it all:

After all these steps finally your index.html should look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linktree</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <!-- Head-->
        <div class="head-div"> 
            <img src="lead.png" alt="logo" class="logo-img">
            <h3>Design and Code</h3>
            <h5>Interact, collaborate and learn with Designers and Developers around the world!</h5>
        </div>
        <!--Links-->
        <div class="link-div"> 
            <a href="#" class="alink">Join our discord</a>
            <a href="#" class="alink">Join our group</a>
            <a href="#" class="alink">Join our link</a>
            <a href="#" class="alink">Join our record</a>
        </div>
        <h5 class="copyright">Made by Ankita Sahu!</h5>
        </section>
</body>
</html>

And the style.css should be like:

.head-div {
text-align:center;
padding:20%;
padding-top:2%;
padding-bottom:3%;
}

.link-div{ 
    padding:20%;
    padding-top:1%;
    padding-bottom:1%;
}

.alink{
    text-align: center;
    margin-top: 1px;
    padding: 20px 0;
    max-width: 590px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color:blue;
    color:white;
    text-decoration:none;

}

.alink:hover{
    color:blue;
    background-color:white;
    border: 2px solid;
    border-color:blue;
}

.copyright{
    text-align:center;
}

Thus your Linktree should look like:

Now comes the hosting part

I've used github pages,you can opt for any alternative you want....

Create a repository
Add all your files to the repository
Head on to the settings option on github and scroll down to find Github Pages option,once you find it click on it.
Now add your main branch name in the source and click on save,after a few seconds your page should be active...

It should look like this: