Advertisement
Workshops

Community Project: Description List Results!

by

Nice work people! Loads of you have gone away and experimented with styling a straight-forward Description List - take a look at the results..


The Challenge

I asked you all to style this markup..

<dl>
    <dt>Psdtuts+</dt>
    <dd>Adobe Photoshop Tutorials from Beginner to Advanced.</dd>
    <dt>Nettuts+</dt>
    <dd>Web development Tutorials, from Beginner to Advanced.</dd>
    <dt>Webdesigntuts+</dt>
    <dd>In-depth tutorials and articles on web design.</dd>
    <dt>Wptuts+</dt>
    <dd>A WordPress Website dedicated to WordPress training, tutorials, and WordPress videos.</dd>
</dl>

..using whatever magic you could muster with CSS alone. Here are the results!


A Couple of Examples

You're welcome to continue submitting ideas for this, but there'll be another challenge coming soon. In the meantime, check out a few of the submissions which most caught my eye:


Vince's Factory - by Vincent Markesteijn

Just circles - by Niels Voogt

Clean DL - by Sam Markiewicz

Borderlands 2 - by Chris Spittles

Personal Disclaimer

There's a chance I somehow missed your submission, messed up your name, copied the wrong url to your own site, ruined something I haven't even thought about - if that's the case, just shout at me in the comments and I'll see about setting things right. If you didn't include your details in the css file, they ain't there..

Other than that, enjoy everyone's work and leave constructive advice, questions and thoughts in the comments below. Thanks to all who participated - here's to many more Webdesigntuts+ Community Projects!

Related Posts
  • Code
    Theme Development
    The Beginner's Guide to Icon Fonts in WordPressIcon fonts
    I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Code
    Plugins
    Creating Responsive Pricing Table Plugin for WordPressPricing table plugin
    Pricing tables are a key component of your business that promotes your products and helps users choose between different services you have. Most modern commercial WordPress themes provide built in Pricing Tables. There are also plenty of free and commercial pricing table plugins for WordPress. This tutorial is intended to provide knowledge to WordPress developers on creating a plugin from scratch which enables customization in different projects. Every web design is trying to accomplish responsive features which enable better look and feel on any kind of device. The pricing tables created with this plugin will work on all kinds of devices such as mobiles and tablets as well. So let's get started.Read More…
  • Web Design
    Complete Websites
    Build a Responsive, Filterable Portfolio, with CSS3 TwistsPreview
    The inherent visual appeal of filterable portfolios (like the Tuts+ hub) has made them very popular. Today, we’ll be making one using straight-forward markup, CSS3 and a little bit of jQuery.Read More…
  • Web Design
    Workshops
    Community Project: Style a Description ListCommunity projects preview
    Style a what?! That's right, in this community project I want you to style something you've possibly never used before; a description list.. Send your CSS over and worthy examples will be published on the site next week. Read on to find out more!Read More…