How to make own Linktree using HTML, CSS and JavaScript ?

Linktree is a tool that permits you to share multiple hyperlinks of various social media into one site. It gained popularity on Instagram, as Instagram does not allow you to share web links anywhere other than Stories and the ‘bio’ section of your profile page, which has a strict character limit. In this article, we will how to create our own Linktree using HTML, CSS, and JavaScript.

Approach: The following approach will be used to implement:

• Create a project folder and inside it create three more folders called “CSS” for main.css(for writing the CSS) files, “js” for links.js and main.js(for writing the js) files, and assets for logo images and create one file “index.html“(for writing the HTML).
• In the HTML file, create two containers element, such as a div, to hold your logo and about(bio).
• Use CSS to style the appearance of your linktree. This might include setting the font, color, and size of your links, as well as the layout and spacing of the list items.
• Use JavaScript to add interactivity to your linktree. For instance, you could use JavaScript to open the links in new tabs or to add hover effects when the user moves their mouse over a link.

Project Structure:

root
|
|
|____assets
     |____discord.png
     |____facebook.png
     |____gmail.png
     |____instagram.png
     |____linkedin.png
     |____link-solid.svg
     |____telegram.jpg
     |____twitter.png
     |____youtube.png
|____css
     |____main.css
|____js
     |____links.js
     |____main.js
|____README.md
|____index.html

Note: If you want to change the fonts, of your web page, you just need to include the following stylesheet in your program for the fonts:

@import url(
"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");

Example: Below example illustrates the basic implementation for creating the Linktree in a stepwise manner.

Step 1: Add the following code to the index.html file.

• index.html

Step 2: Create a folder “CSS”, inside this “css” folder add the following code to the main.css file.

• main.css

Step 3: Create a folder “js”, inside this “js” folder add two files “links.js” and “main.js”. Add the following code to the links.js file.

• links.js

• main.js

Output:

 

GitHub Link: https://github.com/bhartik021/linktree.git