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

General Discussion

Posted by Richard Nash
Richard Nash
24,862 Points

How did they make this site?!?!? (specifics in the post)

http://climaterealityproject.org

This site is very similar to what I'm trying to build, so I wanted to as the community here to see if anybody had any ideas.

The things about this site that I want to understand are:

  1. How to make responsive tiles that continuously scale to the width of the browser without losing their aspect ratios. That means without being squished in any direction. When you look at the site, resize the browser and you will see what I mean.

  2. How to make tiles like these that have new information appear over them when you hover them with your mouse. I've been doing a little research and I believe some people refer to these things as "overlays" but I'm not sure.

  3. How to make a site with literally 3 separate mosaics that the user can navigate to. The whole process of creating a mosaic of responsive tiles with constant aspect ratios and complex overlays is repeated three times and you can navigate between them using a giant horizontal slider. So boss :-)

The site is pretty impressive, I must say, and I'm trying to dig into the DOM to figure things out but there are many holes in my knowledge and I'm having a hard time piecing this information together. If anybody wants to take a look and help decipher the site I would be greatly appreciative.

Thank you,

Richard Nash Los Angeles, CA

1 Answer

Caleb King
Caleb King
32,777 Points
Caleb King
Caleb King
32,777 Points

Maybe changing your approach will help get you started. Breaking parts up into smaller pieces. There seems to be a lot of javascript related work to help accomplish some of the items you mentioned. Start researching libraries as well. The site is very cool. The best way to learn is to experiment anyways, it will stick with you longer.

Best of luck