DEV Community

loading...
Cover image for Creating an alternative Linktr.ee page using HTML & CSS

Creating an alternative Linktr.ee page using HTML & CSS

redlotusdesignz profile image Diana Chin ・2 min read

For those who are not familiar with Linktr.ee, it’s a service that allows users to create a landing page with a list of links for others to connect and showcase their work. Currently, they have a free and paid version. The free version offers a limited amount of styling, while the paid version allows you to provide your own branding and further customisation on your links page.

While I'm aware that there are multiple ways to create an alternative Linktr.ee page, I found this approach to be helpful and straightforward. It utilises the basic CSS concepts in positioning and offers a chance to experiment on customising the button styles and transitions.

I believe this is a great beginner project for those who are starting off with HTML and CSS and wanted to build a simple landing page that anyone can use when promoting their work online.

Here’s my final result that you can view on CodePen:

A couple of things I’ve learned while building out my landing page:

  1. With Linktr.ee, the elements on the screen (i.e. the avatar photo, the handle name and the links), it needs to be placed in the centre. For this to happen, I added the text-alignment value within the body section in CSS to be centre. By doing so, all of the elements on the page will automatically adjust to the centre specification.
  2. I wanted to create a custom gradient that was easy on the eyes. I’ve used https://cssgradient.io/ to create my background and set the background to be fixed.
  3. By default, the buttons on Linktr.ee are styled to be rectangle blocks. I decided to tweak this on my landing page by adding a border radius to make my buttons look round.
  4. In making the landing page responsive, I made sure to set the buttons width to 70% so this way when scaling down on the browser or viewing on the mobile browser, the page would be adjusted accordantly without eschewing the content on the side.

Have you built your own landing page similar to Linktr.ee? Let me know in the comments below!

Discussion (4)

pic
Editor guide
Collapse
shadowscientist profile image
Shadow Scientist

I used linktr.ee earlier this year. The layout was simple, sometimes hardly customisable and they asked for a PRO upgrade to unlock all the good features. So I decided to make my own landing page, more like an 'update' page including all kinds of activities, notification alerts about latest blog posts, video uploads and so on. Almost 60% of work is completed by now and I'm planning to launch it on shadow-scientist.github.io/updates at the beginning of next month.

Collapse
redlotusdesignz profile image
Diana Chin Author

That’s amazing! Yeah, part of the reason why I decided to recreate my own landing page was due to how Linktr.ee is charging folks for more style options. Creating a landing page as a starter with some knowledge on how CSS works feels justifiable, knowing that it was built from the ground up than having to use a service with limited features.

Collapse
waylonwalker profile image
Waylon Walker

I've never heard of linktr.ee, but this is so attainable by most folks. I love the idea of rolling your own in this case.

I use cssgradient.io all the time, it's great!

Collapse
redlotusdesignz profile image
Diana Chin Author

Thanks, Waylon! I love using cssgradient.io :) Makes the gradient picking process a lot easier haha.