7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. Workshops

Community Project: Style an Unordered List

Scroll to top
Read Time: 2 mins

We're going to try something new today, something which I hope you'll all get involved with: I want you to show off! I'm going to give you a simple piece of markup (an unordered list) which you're free to style in any way you please. Send your CSS over and worthy examples will be published on the site next week. Read on to find out more!


You can now check out the results if you fancy :)

This is Easy

Here's the markup (download it wrapped up as an html file if you want):

What do you think you could do with it, using the power of CSS? Here are two really basic examples, just so you get an idea of what we're doing here.

Anything Goes

You can't touch the HTML, without exception. But there's loads you could do to style this list via CSS!

  • Play with the colors
  • Alter the fonts (use @font-face if you want)
  • Structure it as a menu
  • Add some dynamic content with pseudo elements
  • Go mad with gradients
  • Blow us away with transitions
  • Even use textures and images if you want (just make sure you zip the whole lot up when you send it over)

The only thing you need to bear in mind is that the demo page already has its styles reset with normalize.css.

Sign Me Up!

This couldn't be simpler:

I'll publish the best ones when I've collected a few. This can be on-going too - there's no deadline. If it's a success (let me know what you think in the comments) then we'll hold progressively more challenging Community Projects further down the line..

I look forward to seeing what you all come up with! Good luck!

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.