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 trial
Nick Pettit
Treehouse TeacherForum Contest: Create a Flexbox Layout
EDIT: This contest has ended! The next forum contest is about customizing WordPress themes.
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:
Post a link to your project as an answer to this forum post. You can host your project anywhere you'd like.
Due Date: All entries must be submitted by Sunday, July 6th 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, July 7th and reveal the next contest.
20 Answers
Rémi BRUGUIER
4,970 PointsHello everyone !
I missed the 3/4 last contests cause I had a very busy schedule, but I now have a little more free time so here we go again ! I tried to do something a bit different this time, using a few "modern" techniques : imbricated flexbox elements, html5 video background, media queries, transitions and animations, pseudo elements and... turtles !
Here's the result.
It should work in all modern web browsers and most devices, since it is responsive. Good luck to all, see you at the next contest!
Tyler Renfro
15,190 PointsYo that winning post looks broken on my browsers. Are these contests fixed? I don't understand. There were multiple entries that were far better IMO
Joel Encinas
9,683 Pointsi think that if u want an answer, you should tag Nick Pettit and ask him directly ur doubts
Nick Pettit
Treehouse TeacherHi Tyler Renfro,
These contests are not fixed. They're judged by Treehouse teachers, and after reviewing all the entries, we decided that based on the criteria of both design and code, that entry had the most merit.
What about it looks broken to you, and in what browser?
Tyler Renfro
15,190 PointsIphone 5, safari http://cl.ly/image/1G280d1j3L1p
Well, Nick it was just very surprising to see a layout that was centered except for mobile to win. Especially since centered is generally not considered a good design practice. The footer wasn't sticky and is halfway up the page because theres scarcely any content.
I thought that some of the other students had more thought put into their layout and even went as far as to animate within their flexbox.
Muhammad Kori
5,745 PointsHello everyone.
This is my entry. And my first submission in the Forum Contests. I hope this qualifies
Paul Barron
6,595 PointsHere's my entry. Please keep in mind that it works best in Chrome. I intend to work on other browser's support for it. I love flexbox! Building this "website" really helped me to understand margins and also to put in to practice other parts of the CSS track.
Tyler Renfro
15,190 PointsYo for real, is this contest fixed? That winning entry was mad simple and barely had any content. There were multiple entries that were far more interesting with keener design aesthetic IMO.
Tiffany McAllister
25,806 PointsHere is my entry: a simple flexbox gallery.
As with pretty much everything, it looks best in Chrome and the sticky footer doesn't work in IE.
Mohamed Mokhtar
9,651 Pointsfirst of all i love your dogs ! :) . nice work , i just think if you can make the transition for the images alit bit faster may be better ... but great work ! cheers
Tiffany McAllister
25,806 PointsThanks Mohamed! I will have a play around with the transitions, thanks for your suggestion! :)
Joel Encinas
9,683 PointsHere's My Entry
For better performance please use Safari or Chrome. I've just learned about flex box and it's awesome, this is my first play out with flex box and my first contest... Hope you like it! :)
robertm
13,570 Points
Anneke Crouse
8,199 PointsWOO! Go Rob!!!! :D
ALEX F CHAVET
7,465 PointsHi here is my entry :
http://drink-eat-andco.com/code_challenge/Flexbox-challenge/
I put a link to my Github repo on the footer, if you want to know more !
Anneke Crouse
8,199 PointsOh no! :P I missed it!
But here's my entry anyway: <a href="http://anneke.esy.es/flex/">http://anneke.esy.es/flex/</a>
Mohamed Mokhtar
9,651 Pointshahah give us a break ! :P , would loved to see your work any way if you have something ready post or tweet it :)
Nick Pettit
Treehouse TeacherHi everyone,
Wow, amazing entries! I'm very impressed with the quality of these flexbox layouts. It's always difficult to pick a winner, but it was especially difficult this week. You all did great and these would make for some awesome portfolio additions.
This week's winner is Valentina Ferro! Congrats, Valentina! Valentina's entry was pretty excellent all around. The responsive design is well thought-out, and the use of flexbox is well done.
The next forum contest is about customizing WordPress themes.
Valentina Ferro
8,867 PointsYaaaaaaaay!! I'm so excited!! :DDDD Thank you very much, Nick!
Razvan Borsan
7,294 PointsHere's my entry.
It was a fun experience, glad I managed to finish it in time. It works great in all major browsers.
Valentina Ferro
8,867 PointsHello, everybody! This is my first project as web designer and also, my first participation in this forum contest.
I used the flexboxes for the entire project, although I didn't have enough time to finish the "shop" and the "contact" pages, but I hope you like it anyway.
Feedback would be really appreciated!!!
Kaitlyn Dryer
18,581 PointsAt first I was playing around with using Flexbox in my links page for the Future Boy Conan site I've been working on, to create a more interesting layout and show additional text when a link is hovered; then I realized it would work even better to implement Flexbox on the episodes page. Because the page was already using floats to create a gallery it was very simple and effective to turn the container into a flex container! Here are both pages:
Kirill Titov
12,119 PointsIt was`nt easy but thanks to Guil Hernandez CSS Layout Techniques and CSS-Tricks I have done it. Here is my entry
Tyler Renfro
15,190 PointsHere is my entry I optimized it for chrome.
This was a pretty fun challenge. It was a little difficult because I'm used to start up frameworks. I hope I get that tree house gold! I have been wanting to see workshops since I signed up.
David Hope
19,876 PointsHi Everyone! This is my first. but certainly not last, contest entry. http://codepen.io/SyntaxSage/pen/kAJKu
Valentina Ferro
8,867 PointsHello, everybody! This is my first project as web designer and also, my first participation in this forum contest.
I used the flexboxes for the entire project, although I didn't have enough time to finish the "shop" and the "contact" pages, but I hope you like it anyway.
Feedback would be really appreciated!!!
Nicole Vest
14,716 PointsHere is my entry!
calen chen
Courses Plus Student 534 PointsI thought it was on the 7th, anyway here's my entry, http://connexisdesign.com/treehouse/test/