Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialNick Pettit
Treehouse TeacherForum Contest: Design a Responsive Data Table
Hi everybody,
It's time for a new Treehouse Forum contest! First, watch this video to learn more:
After you've watched the video, please read the details below carefully. I'm looking forward to your entries!
How to Enter: Create your responsive data table entry as a "pen" on Codepen.io and then post the link to your pen as an answer to this post.
Due Date: All entries must be submitted by Sunday, June 1st at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.
Prize: The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Pro on us! :) We'll announce the winner on Monday, June 2nd and reveal the next contest.
agreatdaytocode
24,757 PointsGood Luck guys!
Andy Swinford
8,152 PointsGood luck everyone, there are a lot of VERY good entries. :)
33 Answers
Jason Founts
Courses Plus Student 14,384 PointsNot sure I understand the challenge correctly. Hopefully this table to cards solution fits. http://codepen.io/Founts/pen/qhpDo
Hass Beydoun
8,625 PointsI think u got it right I understood it the same way
Mark Potter
Courses Plus Student 15,146 PointsLooks nice. Cool trick.
Jason Founts
Courses Plus Student 14,384 PointsThanks Mark. And thanks Hass for confirming my thinking. : )
Hass Beydoun
8,625 Pointshttp://codepen.io/subzero/pen/dykpL
Go Argentina !!!
Hass Beydoun
8,625 Pointsit does work ..............but I think what they wanted is when you resize the browser the table should readjust ( responsive)
benevolentescalator
Courses Plus Student 9,834 PointsFixed! Perhaps I'll give it its own thread. http://codepen.io/anon/pen/iahxm
Stéphane Diez
19,350 PointsThis is my attempt =) http://codepen.io/hakura/pen/ebglw I look up to the World Cup that starts soon, i hope that we can see great matches =)
viva españa :)
Darrel Lyons
2,991 PointsI like it.
Andy Swinford
8,152 PointsIt does what it is supposed to :D
Gurasis Singh
Courses Plus Student 1,196 PointsGood and simple. I like it!
Roberto Alicata
Courses Plus Student 39,959 PointsThis is my entry http://codepen.io/beooo/pen/gpdnf Go Italy!!! :)
EDIT: UPDATED LINK
Hass Beydoun
8,625 PointsLol looks really good :) ........Argentina will destroy Italy :) if they meet.
Jason Founts
Courses Plus Student 14,384 PointsNice job Roberto.
Andy Swinford
8,152 PointsGood job
Chris Smith
19,737 PointsSpot on. Lovely stuff
Fernando Gomez
18,527 PointsRoberto, good job on the table. I love that there's so many soccer fans in here......GO MEXICO!!! I know....they're not a big power team like Germany, Spain, or Brazil, but I still have to root for them since it's my country. I hope they make it to the quarter finals at least. If they make it past that, I'll be the happiest man in the world!!!
Jonathan Seligsohn
23,116 PointsIgnore the colors and general styles - you'll see the "responsiveness" by resizing and hovering over "choose": http://codepen.io/JSeligsohn/full/yfEep
Becky Castle
15,294 PointsYeah, that "choose" option is pretty cool
Nathan Newell
7,634 PointsVery cool!
Errin E. Johnson
22,458 PointsI agree,love the choose option, but at first i didn't know to click on the arrows...then i got it. :)
Andy Swinford
8,152 PointsI like the choose option. :)
Ashlynn Pai
11,679 Pointshttp://codepen.io/ashlynnpai/full/zBLJw/
http://codepen.io/ashlynnpai/pen/zBLJw
I started out making one using API data pulls, until I realized my API keys would be exposed on codepen, so I put that one on my site:
Sandeep Gaykhe
100 PointsGil Alvaro
226 Pointsbenevolentescalator
Courses Plus Student 9,834 PointsOut of the box :)
benevolentescalator
Courses Plus Student 9,834 PointsChris Smith
19,737 PointsHere's my attempt - http://codepen.io/Fourteenflights/pen/BraEv
Tina Chen
2,725 PointsNice work!
Jacob Miller
12,466 PointsThanks!
Amadeo DeSouza
18,445 Pointsvery nice!
Anneke Crouse
8,199 PointsYou've got my vote! :)
Jacob Miller
12,466 PointsThanks Amadeo and Anneke! :)
Errin E. Johnson
22,458 PointsVery Responsive Jacob..really like.
Nathan Newell
7,634 Pointsawesome!
Jacob Miller
12,466 PointsThanks Errin and Nathan!
Kristy Knapp
10,632 PointsThat's a great table! The red on hover was a little jarring at the smaller widths, but I understand the color choices. I liked the change for smaller widths and the sorting feature.
Ian Svoboda
16,639 PointsHere is my pen: http://codepen.io/Akthalian/pen/tkJIo
Kashif Nawaz
4,626 Pointswish to participate in the contest but i need to work hard for it i think its take some time for me to participate hope so in the next contest i will participate required your help to learning codes
Kashif Nawaz
4,626 Pointswish to participate in the contest but i need to work hard for it i think its take some time for me to participate hope so in the next contest i will participate required your help to learning codes
re:member Group
4,311 PointsMy entry --> http://codepen.io/travisvalerius/full/qvfbB/
Jonathan Seligsohn
23,116 PointsGreat icons!
Karl Daly
5,229 PointsThis is my entry : - http://codepen.io/kjdaly/pen/edniB
Sebastian H
19,905 PointsI thought I’d keep up the intermittent word cup theme. Australia is the weakest team and we are in the group of death but we are staying hopeful anyway!
Errin E. Johnson
22,458 PointsMy first contest, hope i got the details correct.
http://codepen.io/errinjohnson/pen/lejia
made some adjustments and added content and then need a need to add media queries..felt desktop and tablets would look better. added some comments for documentations. My table was very fluid without media queries but wanted to add content of some personality to tablet and desktop views.
Will we be getting feedback from our responsiveness or lack there of. :)
Mufaddal Motorwala
4,543 PointsHi, Check out below link : Its showing a simple table in big and tablet resolution but when it come to mobile it shows heading and content for each column, that's how it will be easier for reading - http://codepen.io/mufaddalmw/pen/fleCy
Chase Lester
10,972 PointsHere is my entry! This was fun! http://codepen.io/anon/pen/Dwrcb
Rémi BRUGUIER
4,970 PointsHere we go : http://codepen.io/superguru/full/cFhiw/
Thanks for another fun contest, looking forward to the next one (as I didn't have much time for this one :()
seiichi tanaka
16,378 PointsThis is my entry: http://codepen.io/ymd/full/Luryz/
Dean Wagman
21,591 PointsHey Y'all
Nick Pettit
Treehouse TeacherHi everyone,
This was a challenging contest, so I'm glad to see that so many of you participated! You all created some really great entries, and you should feel good about the work you've done. These are nice additions to a portfolio of work.
Congratulations to this week's winner, Jacob Miller! He created this really nice responsive table that features a nice design, sortable columns, and most importantly, responsive layouts that make sense.
The next contest will be announced shortly! Thank you all for participating. :)
Jacob Miller
12,466 PointsWow! Thanks so much! :) :) :)
Andy Swinford
8,152 PointsGreat Job Jacob!
Karl Daly
5,229 PointsCongrats Jacob.
Errin E. Johnson
22,458 Pointscongrats Jacob! :)
Kashif Nawaz
4,626 Pointscongrats jacob
Jacob Miller
12,466 PointsThanks everybody! This contest had a lot of great submissions - you all had some really nice designs!
Chase Lester
10,972 PointsCongrats. Your table was amazing
Jacob Miller
12,466 PointsThanks man! Yours was pretty awesome too - although looking at it makes me thirsty for iced tea with Jack Nicklaus and Arnold Palmer at the top :P
Chase Lester
10,972 PointsI know what you mean!
Michelle Sawyer
2,454 PointsCongrats, Jacob!
I loved this contest - it featured many creative ways to solve the responsive table issue! Great inspiration from all.
Jacob Miller
12,466 PointsThanks Michelle! :)
Jonathan Ankiewicz
17,901 PointsJonathan Ankiewicz
17,901 PointsSo you want a response table, responsive as in responsive design or as in responsive interactions?