• Ê
  • Â

fNate has 11 post(s)

 Å

% Nate completed

Reactive Site Link

Screenshot of Site at Full Width

My final project was to create an up-to-date version of my company’s homepage. I recreated the homepage with the intention of making the page reactive to different widths, and to style the page with a much cleaner layout. For the layout of the site, I coded a grid layout that could be utilized on potential/future pages. I had some difficulties tackling media queries, which given more time following this class, I will research and play with more. By constraining the width on a desktop, you can see that the page adjusts and reorders elements by this adjustment. I have not fleshed out the way I want it to look exactly on a mobile device. The “Internal Ad”s and Second “Sports” icon are placeholders for assets.

Shrink the windows to see the effects
Scalable Websites with CSS3 and Javascript
CSS Tricks: Using SVG

Agencies w/ these types of sites:

Carrot Creative
teehan+lax

4 Emailed   b 1

One response to “Links that illustrate scalable web pages”

  1. John says:

    Thank you, Nate, for posting these. Superhelpful!

Leave a Reply

This is a menubar program for OS X that quickly picks colors from any area on the screen. It copies colors to the clipboard, and even links right into photoshop!

Frank DeLoupe

4 Emailed   b Add comment

Leave a Reply