1. Web Design
  2. Community Projects

CodePen Challenge #1: Style Section Links with CSS

Scroll to top
Read Time: 2 min

What better way to run a web design Community Project than on CodePen? In this, the first of such challenges, I want you to check out our example pen, fork it and improve it. That’s all you have to do. The best examples will be showcased in a week or so!

Update: Results!

Entries for this challenge are now closed–take a look at what you all came up with!

The Challenge

A couple of weeks ago Jonathan wrote a tutorial about adding dynamic section links to a web page. The idea is that a snippet of JavaScript runs through a web page, finds all the <h1> section headings, then appends a link to each one allowing users to share that link.

The link itself is hidden until the user hovers over the title.

section linkssection linkssection links
Here’s Jonathan’s demo on CodePen

We want you to make this link look awesome. Maybe you’ll switch the text out for an icon of some sort? Or make the link much smaller and give it a background? Perhaps the opacity change is a bit safe for you–give it some animated pizzazz? Do anything you want, as long as it happens within the realms of the CSS tab.

Over to You

Here’s what you need to do, in a few dead easy steps.

Step 1

Firstly, head on over to the demo on CodePen. This is what it looks like:

Step 2

Hit the Fork button to create your own copy of it, then make as many changes as you want to the CSS.

Step 3 (Optional)

If you’re signed into CodePen you can edit the description by hitting the Info button. Use this to give folks an idea of what you’ve done.

Step 4

Hit Save, you’re done. Be sure to let us know in the comments when you’ve finished–and feel free to let us know by tweeting us @wdtuts as well.

That’s it! All entries will be added to this collection on CodePen and the best examples will be showcased on Tuts+ in a week or so!

Good luck and don’t forget to follow Tuts+ on Codepen!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.