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!
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.
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!
