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.

Holler at this article

Comment Form

Who are you? *

How can I email you? *

How can I link to you?

Holler *

I don't like spam either

Remember my personal information

Notify me of follow-up comments?

Welcome Section

Here you put the link to the RSS feeds, link to contact information and maybe a link to the about section.

Social Networking

DaBrook Tweets

Setting up github to share CodeIgniter source code with Springbrook web dev students. (03-09 11:37)
Just posted up information on the High School Web Conference next month http://bit.ly/9bkgXr (03-09 9:26)
Refresh Rockville information for the meetup tonight is live http://bit.ly/aQ3DOC (03-09 8:34)
Refresh Rockville: Project Management (Tues. night 7-8 @ MC) Will post details tomorrow (03-09 12:48)
Just setup Web 1 students at Springbrook with accounts on welovewebdesign.com ... look for cheap hosting for all web students soon! (03-08 9:06)
@mrbhachu Thanks about the jquery tutorial. I'll put it in the docket to make a new example for dropdown lists! (03-07 3:37)
Just submitted the reading list for the CMS course at MC: http://digwp.com/book/ http://bit.ly/boVz1n http://bit.ly/a3teWI (03-06 10:53)
A free event on preparing content for 508 accessibility! Great follow up on the accessibility lecture from last night http://bit.ly/bZRJUO (03-05 10:14)
The DaBrook.org forums are now live! http://dabrook.org/forums/ (03-04 11:04)
Great Advanced Web class tonight. I really enjoy the students this semester ... your forum is coming! (03-04 10:41)
First example of a student using the "Steal this theme" download from DaBrook - Nice work thrasher! http://bit.ly/bI4NIX (03-04 5:19)
It's amazing how fast the latest updates on my #ee grading module make grading. Love it! (03-04 5:04)
The MC Advanced Web class now has an archives page! http://bit.ly/aiRUhw (03-04 9:31)
Looking forward to subbing tonight for a class at CDIA working on WordPress theme development (03-03 2:57)
Web 1 students are working on their portfolios. Coming along nicely! (03-03 7:43)
First tweet for DaBrook.org Tweets http://dabrook.org (02-23 11:14)

Google DaBrook:

What's current:

Web Design: Move Personal Site To Root of Server
Web Development: Get blog entry’s to add to database
ITGS: Review Justin’s ITGS Project

yeah, licensing is important, but I'm pretty cool with it.