Create Build & Style Your Own Share Links Page

Share Links

Often these days people have many links they want to share with the world, from multiple social media platforms, websites, shops, clubs, documentation, references and referrals to name just a few...!

This can be problematic for many when you want your users/followers to be able to find you everywhere. So you need a single place to refer them to where they can find the relevant links you want them to.

Now we realise there's already numerous options out on the web to create a link list with, but what if you could create and host your very own for free!

Well we're going to show you how! Starting with a pattern for a basic list of links, with a header bio section, and an optional footer section.

Plus additional options that will enable you to - style your links into cards and add icons, images, pop-up info panels, buttons and more... so let's begin!

HTML Skeleton Page

To begin with we need to create a starter HTML page, in the code editor of your choice. If this is a first time project, or maybe something that is still all fairly new and unfamiliar to you. Then don't worry as you can head over to our Quick Start page, where we explain the steps that will enable you to setup and create a new HTML page.

The Quick Start page has options to either create a repository in GitHub, or save your files locally. Plus the option to either use our JWS Template CSS or create your page from scratch with the help of code examples and emmet snippets.

Which you choose may depend on whether you'd like to create your ShareLink page using our template style.css file, or follow along from scratch using CSS Grids with the help of our code examples and snippets, linked either from a style.css file or placed in style tags within the page head.

Once you have your new page set up including a <header>, <main> & <footer> tag, you'll be ready to start making your Sharelinks page.

When using Emmet in your code editor you can either, copy and paste or type it in, then press Tab to expand the snippet. If you enter the snippet and don't see the option menu press Ctrl + Spacebar then you will be able to press Tab

You can also use the Ctrl + Spacebar twice to see a sample of the expanded snippet pressing Ctrl + Spacebar again will close the sample popup.

ShareLinks Page - Basic Layout

This basic layout will be split into three tutorials the first will show you the HTML page layout pattern of creating a :

Header section: with an image, name or title and a tagline and/or short bio.
Main section: with your list of links.
Footer section: where you can add social media icon links, or further text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>

Followed by two CSS styling tutorials, one that will show you how to style the page layout, and a one that will take you through styling up your list of links. Both will show you how to follow along using either the JWS Template CSS file, or creating a CSS grid version from scratch.

So lets start with our HTML page layout.

Header Section

We first want to start with the HTML page and inside the <header> element tags we need to add a <img>, <h1> and <p> tags like this:

<header>
    <img src="" width="" height="" alt="">
    <h1></h1>
    <P></P>
</header>

Type or copy and paste this Emmet snippet: img+h1+p into your page.

The Emmet img command only provides the src="" and alt="" attributes so you will need manually add the others by typing between them.

W + Enter ↵ to add the width="" attribute.

H + Enter ↵ to add the height="" attribute.

We can now link in our image file by adding its file path within the src="" attribute, followed by the width and height of it, and then add some descriptive text about the image inside the alt="" attribute.

If you don't know what your image sizes are then not to worry there's a quick way to find out. After you have your image saved view your page in a browser and open the devtools with the F12 key (take a look at our devtools intro for alternative ways), once opened hover over the img file path (the src="") you will see a info panel appear with all the details about your image, you may see two lots of sizes intrinsic and rendered, its the intrinsic width and height sizes you need to add to your image attributes.

Next inside the <h1> tag you can add a name whether that's yours, a company, a club, or whatever the purpose of your links page is, it needs a descriptive title.

The last part of our header section is a <p> tag where you can add a short descriptive bio about you, or the purpose of your links page.

Main Section

Inside the main is where we will be creating your links section of the page. This area can also comprise of info cards/panels or share buttons, but we are going to be starting with just a basic bunch of links (The patterns for other options will be coming later).

Because we are creating a list of links, we would usually start out with an unordered list <ul> here to create semantic HTML, with each link then placed inside a list item <li>, but it isn't necessary to use a list in this situation. Doing it this way will make it easier for you to create the different pattern layouts we plan to show you without the worry of overriding any <ul> and <li> properties and values.

The first thing you need to decide is how many links you are going to need? No worries if you don't know this yet, as you can keep adding them as your page develops, but we're guessing you probably have more than the one if you are in need of a link sharing page. For this demonstration we are going to be adding five but feel free to change the number you add.

So in your editor click within the <main> tags and press Enter ↵ your cursor should now be on a new line between the opening and closing main tags.

We now need to add the five <a> tags. Either type or copy and paste this Emmet snippet: a*5 into your page.

You should now have a line of <a> tags that looks like this:

<main>
    <a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
</main>

To make the code easier to read you can press Enter ↵ between each <a> tag placing them each onto separate lines.

<main>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
</main>

We can now add the URL for each link inside its href="" attribute tag. Followed by the name or descriptive link text that the user will see to click on.

<a href="https:URL-goes.here">Link text the user sees</a>

For the moment this is all we need to add to each link in the HTML page as all the styling could be done by directly targeting the properties of the <a>.

But in case this is not a stand alone page (i.e part of your website), or if you plan to add some differently styled links as well e.g. social media icon links into our footer, then we need to add a class="" attribute and create a class name to make it easier to identify and target the different links within the CSS file, this way we won't run into any conflicting styling issues.

<a href="https:URL-goes.here" class="class_name_here">Link text the user sees</a>

Footer Section

In our footer section we are going to be adding social media links, this time using icons instead of textual links for the user to click on. To do this we'll be adding a group of links like we did in the main section, but with the addition of an <img> tag inside the <a> tag.

<a href=""><img src="" alt=""></a>

These links will also need to be wrapped inside a parent <div> with the added class name of "social_icons", to help us manage their layout. Either type or copy and paste this Emmet snippet: div.social_icons>a*4>img into your page.

You should now have a line of <a> with <img> tags inside a <div> that looks like this:

<footer>
    <div class="social_icons">
        <a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a>
    </div>
</footer>

Like before you will need to manually split the <div> and <a> tags onto separate lines using the Enter ↵ key to make it easier to read. Also using Emmet add width and height attributes to the <img> tags again, though this time with the addition of a title="" attribute too.

W + Enter ↵ to add the width="" attribute.

H + Enter ↵ to add the height="" attribute.

TI + Enter ↵ to add the title="" attribute.

<footer>
    <div class="social_icons">
        <a href=""><img src="" width="" height="" title="" alt=""></a>
        <a href=""><img src="" width="" height="" title="" alt=""></a>
        <a href=""><img src="" width="" height="" title="" alt=""></a>
        <a href=""><img src="" width="" height="" title="" alt=""></a>
    </div>
</footer>

As before we need to add the URL's to the <a> tags, followed by the <img> tags file paths, widths, heights and alt text. Followed by concise meaningful title text inside the title attributes.

A title attribute allows you to give your users additional information about an image when they hover over it in the form of a tooltip. This not only enhances accessibility but provides more context to the user about the image. Though it is not a replacement for the alt attribute as not all screen readers read them.

<a href="https://github.com/jasminedesign"><img src="/img/github_icon.svg" width="31" height="30" title="View my Github" alt="Github icon"></a>

For an optional extra in this section you could add a <p>, where you could write additional information about you, your company, a tagline or mantra... there's all sorts of options, so do what you want to and make this page your own.

<footer>
    <div class="social_icons">...</div>
    <p>Of all the things I've lost, I miss my mind the most! - Ozzy Osborne</p>
</footer>

Page End

That's the end of our HTML Page hopefully your page now looks something like this with maybe the addition of your own contents, though there's no rush to add these you can wait until we have the page styled up if you like.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <img src="" width="" height="" alt="Cam the CSS Chameleon">
        <h1>Cam the CSS Chameleon</h1>
        <P>Hi, you'll find me wherever there's CSS to learn</P>
    </header>
    <main>
        <a href="https:URL-goes.here">Link text the user sees</a>
        <a href="https:URL-goes.here">Link text the user sees</a>
        <a href="https:URL-goes.here">Link text the user sees</a>
        <a href="https:URL-goes.here">Link text the user sees</a>
        <a href="https:URL-goes.here">Link text the user sees</a>
    </main>
    <footer>
        <div class="social_icons">
        <a href="https://github.com/yourname"><img src="/img/github_icon.svg" width="31" height="30" title="View my Github" alt="Github icon"></a>
        <a href="https://twitter.com/yourname"><img src="/img/twitter_x_icon.svg" width="31" height="30" title="View my Twitter" alt="Twitter icon"></a>
        <a href="https://instagram.com/yourname"><img src="/img/instagram_icon.svg" width="31" height="30" title="View my Instagram" alt="Instagram icon"></a>
        <a href="https://facebook.com/yourname"><img src="/img/facebook_icon.svg" width="31" height="30" title="View my Facebook" alt="Facebook icon"></a>
        </div>
        <p>Of all the things I've lost, I miss my mind the most!</p>
    </footer>
</body>
</html>

Lets add some Style

Now lets add some CSS styling to the page layout.

Page Last Edited: 26/06/2025