The DaBrook.org Admin Control Panel CSS Challenge

01.27.2010

Rational

In the first semester web design class students learned the all the basic foundations for styling a page with CSS.  Web development students have learned some PHP and MySQL basics and are moving into connecting the two with basic applications.

In both cases, students could benefit from styling a document that they cannot change the markup for.  This happens often in the real world and it’s a good test of your CSS skills.  The administrative control panel was chosen specifically as a project because web development students need them for their application projects and it gives web design students an idea of what they’ll be working with next year.

Check out the markup for the assignment here.

The Assignment

Students were given a single HTML page with standard markup:

• Wrapper, Header, Main Content, and Footer divs
• Nested unordered list with an id of nav
• Table for displaying results with a delete submit button
• Divs with success, warning, and error classes for feedback messages to the user

Students have two weeks to use CSS, background images, and JavaScript (web development only) to style a control panel.

Submission to ThemeForest

I sent students to ThemeForest.net to get inspiration for their control panels.  After looking at them all with the web development class we decided that as a final part to the project the web development students would go through the process of refining their skin and submitting it to ThemeForest.  I don’t think all of them will get accepted, but it is a great experience to go through.

Participate

If you would like to create your own skin, you can find the markup for the project here.

• 
• 
•