Basic Link Tree [TUTORIAL]

Creating a Link Tree with HTML & CSS

3 min readJun 6, 2024

This tutorial will create a simple link tree using HTML and CSS. We’ll break down the code and explain each part step by step. This tutorial is suitable for beginners who have a basic understanding of HTML and CSS.

Step 1: Setting up the HTML structure

First, let’s create the basic structure of our HTML file. We’ll start with the <!DOCTYPE html> declaration, followed by the <html> tag. Inside the <head> section, we’ll add the necessary meta tags, title, and link to our CSS file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dave Sousa - Full Stack Developer</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Step 2: Adding the header

Inside the <body> tag, we’ll add a <header> section to display our name, profile picture, and job title.

<header>
    <img src="HeadShot.jpg" alt="Dave Sousa's headshot" width="150">
    <h1>Dave Sousa</h1>
    <p>Full Stack Developer</p>
</header>

Step 3: Creating the main content

Next, we’ll add a <main> section to hold our link tree. We’ll include a heading and a container for our buttons.

<main>
    <h2>Welcome to my link tree!</h2>
    <div class="button-container">
        <a href="https://www.linkedin.com/in/davidsousajr">Connect on LinkedIn</a>
        <a href="https://x.com/appropriatemoos">Connect on X</a>
        <a href="https://github.com/AP-moose">Connect on Github</a>
        <a href="https://medium.com/@appropriate.moose">Connect on Medium</a>
    </div>
</main>

Step 4: Styling the page with CSS

Now, let’s use CSS to style our link tree. We’ll start by setting a background gradient and font styles for the entire page.

body {
    background: rgb(2,0,36);
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(90,9,121,1) 35%, rgba(0,212,255,1) 100%);
    font-family: Trebuchet MS;
    color: white;
    text-align: center;
}

Note: The background gradient was created using a free website that generates different gradients. You can copy and paste the code.

Step 5: Styling the header

We’ll style the profile picture with a unique border-radius and adjust the font sizes and margins for the name and job title.

header img {
    border-radius: 50px 0px 50px 0;
}

h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1.2rem;
    margin-top: 0;
}

Step 6: Styling the buttons.

We’ll use Flexbox to align the buttons vertically and add some spacing. We’ll also apply a cool animated gradient background to the buttons.

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

a {
    text-decoration: none;
    border: none;
    font-size: 1.2rem;
    font-family: inherit;
    cursor: pointer;
    color: #fff;
    width: 100%;
    max-width: 300px;
    height: 3.5rem;
    line-height: 3.5rem;
    text-align: center;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 300%;
    border-radius: 30px;
    z-index: 1;
    position: relative;
}

a:hover {
    animation: ani 8s linear infinite;
    border: none;
}

@keyframes ani {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

a:before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 35px;
    transition: 1s;
}

a:hover::before {
    filter: blur(20px);
}

a:active {
    background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
}

Note: The button styles in the above code block were copied and pasted from universe.io, a cool website for generating buttons. You can find the code for the exact button I used here.

And there you have it! You’ve successfully created a link tree with a visually appealing design. Feel free to customize the colors, fonts, and links to make it your own.

Remember to save your HTML file with a .html extension and your CSS file with a .css extension. Ensure all files are in the same directory, including any .jpg or .png files, and you’re good to go!

If you’re new to coding, I highly recommend checking out Mimo, a free app that offers bite-sized lessons and gamified learning to make your coding journey engaging and fun. Use my affiliate link https://getmimo.com/invite/lp275g to get started, and who knows, maybe we’ll even meet on the leaderboards! Happy coding!

Happy coding!