01-12-2015

[jacobthemyth]

Surf and Paddle

Description

Create a pixel perfect recreation of the design and layout of the Surf and Paddle Photoshop comp (found in Additional Resources below).

Objectives

Learning Objectives

After completing this assignment, you should...

• Understand how to layout a two column web page
• Know the difference between a float and inline-block layout

  Performance Objectives

After completing this assignment, you be able to effectively...

Details

Deliverables

• A git repository containing, at least:
  • index.html
  • main.css

    Requirements

• Your site, when loaded in a browser that is exactly the same width as the image, should line up with the picture to pixel precision. I will be overlaying the image over your site to check if it's a perfect match.

  Normal Mode

Under normal circumstances, you should also complete the following:

• All anchor and image hover effects should use the transition property to change from a blue overlay to transparent.
• All of the elements should be centered on the page so that, if the browser is larger than the comp, the site content will be centered rather than anchored to the left. The header and footer should expand to fill the browser.

  Hard Mode

If you're looking for an extra challenge:

• Using media queries and keeping in mind best practices for CSS (like using max-width to allow block elements to shrink), use the responsive Surf and Paddle mockup (found in Additional Resources) to create a site that works on desktop or mobile.

  Notes

You can use any images that you would like, keeping in mind that they should be appropriate for your potential employers to see.

Additional Resources

• Surf and Paddle comp
• Surf and Paddle responsive

  Tools

• You can use the screenshot tool (CMD + Shift + 4) to measure how many pixels wide something is.
• You can use Sip.app for picking colors.
• You can use the PerfectPixel Chrome extension for checking pixel precision.

  Fonts

These aren't exactly the same as the Photoshop comp, but you should be able to adjust the weight and size of the fonts to get it pretty close.

• Header font: https://www.google.com/fonts#UsePlace:use/Collection:Oswald
• Body font: https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

  Placeholder images

• http://www.fillmurray.com/
• http://placekitten.com/

[jasperfurniss]

git@github.com:jasperfurniss/Surf-and-Paddle-Pixel.git

[jasperfurniss]

A few things to note about this version:

Starting mobile-first was definitely a challenge, as expected. I'm not sure on how to add things to the desktop version that aren't present in the mobile, other than using "display: none", which seems to be frowned upon because of screen readers. Visible & invisible? Also, I added Sepia overlay solely because I thought it looked nice. My code is super messy & the full screen version is incomplete thus far, but hopefully I can clean it up now with a good bit with Sass.

Looking forward to diving into more Sass tomorrow & JS Wednesday.