Portfolio: HTML5 / CSS3

HTML5CSS3

HTML = Content: HyperText Markup Language (HTML) is the building-blocks of web pages.

CSS = Style: Cascading Style Sheets (CSS) determines a website’s look and feel.

In other words, HTML tells a web browser what to display, while CSS tells the browser how to display it. The two are used so often together, it would be hard to separate one into a portfolio without the other.

“Full Websites”

Below are a few samples of “Full Websites” that are built on a solid foundation of HML5 and CSS3.

GrokDD.com Screen Shot

“GrokDD.com”

Tags: HTML5 CSS3 JavaScript jQuery

“GrokDD.com” breaks from traditional websites, with it’s minimal appearance, and unconventional menu selection. The site keeps with the theme ‘Grok’ meaning “To Drink.” Furthermore it pushes the message, “In this era when everything is ran by computers in the background as well as ever encroaching digital mediums over our fluid organic lives, Grok Digital Designs can find your solution.”

While GrokDD.com uses imbedded content, it heavily draws on the power of JavaScript and jQuery to drive the interaction on the page.

Things to look for:
View More...
  • A cross-browser fully dynamically resizing site. Should always fill the browser.
  • Rolling source code blurred and faded in the background.
  • Inactive/Active social media links.
  • Unique vertical sliding dropdown menu.
  • Unique horizontal sliding content.
  • Pixelated white squares encroaching from the right.
  • Use of the “Fresco Lightbox” gallery.
  • Use a jQuery collapsing menu.

This web application features:

  • Fully dynamic resizing. Extending Tyson Matanich’s viewportSize.    View jsFiddle Sample.
  • 16×32 pixel art enlarged to its own canvas without bilinear filtering using a custom function.    View jsFiddle Sample.
  • Lightbox galleries with separate categories.    View Code Sample.
  • Continous scrolling image in background.    View jsFiddle Sample.
  • jQuery to control collaping menu.    View Code Sample.
  • “Fresco Lightbox” gallery. Courtesy of http://www.frescojs.com/.
  • Mary Lou’s collapsing menu tutorial.
  • PHP script to detect mobile platform; redirects user. See PHP Example.

Launch website in a new window.

“mobile.GrokDD.com”

Tags: HTML5 CSS3 JavaScript jQuery

The mobile version of GrokDD.com takes the concept and theme of the desktop site and pushes it even further. The simplicity is made even simpler, the navigation is more streight forward and minimal, optimized images for downloading, and less animation and scripting. All in an effort to streamline a mobile devices’ experince.

Things to look for:
View More...
  • Fully cross-browser dynamic resizing.
  • Easy to use intuitive navigation.
  • Gallery slideshow with separate categories.
  • Dynamic contact information verification.
  • Light minimal download.

This web application features:

  • Fully dynamic resizing. Extending Tyson Matanich’s viewportSize.    View jsFiddle Sample.
  • 16×32 pixel art enlarged to its own canvas without bilinear filtering using a custom function.    View jsFiddle Sample.
  • Dropdown menu extended from Chris Wharton’s MeanMenu.
  • Gallery slideshow extended from PhotoSwipe.
  • Dynamic contact information verification.

Launch website in a new window.

Resume ScreenShot

“Resume”

Tags: HTML5 CSS3 JavaScript jQuery

This second project “Resume” demonstrates an entire page’s content dynamically created by JavaScript and jQuery. The base HTML document houses a few one-time referenced links and images, as well as a few parent containers the jQuery will be dynamically propagating. The key focus on this site was to use jQuery to take the contents of a specifically structured XML file and parse it into my Resume’s layout. This greatly improves the reusability of the code.

Below is the jQuery that drives Resume's content.
View More...

This web application features:

  • Fully dynamic content.
  • Content parsed from external XML file with jQuery.
  • Tags are conditionally tested to verify they have valid content before displaying the tag’s values.
  • Mouse event listeners are attached to two classes of DIVs.
  • Dynamic content is added using the append() method.

Launch website in a new window.
View page’s XML sample.

Leave a Reply

Your email address will not be published. Required fields are marked *

*