Sample design project
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Treehouse Mentor Project


  1. Create project structure.

Setup site directory structure, basic SCSS directory structure and indexes.

  1. Evaluate color palette from provided image(s).
Usage Hex Value Color Name
Company Name #ffd18f Grandis
Active Page Button #33c3f0 Picton Blue
Inactive Page Button #7f7f7f Button Gray
Brown Button #d78f61 Copperfield
Link Logos #828282 Gray
Link Text Color #1eaeb8 Eastern Blue
Footer Text #c7c7c7 Silver
  1. Automate build environment with Gulp.

Automate tasks such as Sass compiling, build system.

  1. HTML content

Divs and basic layout and verbiage. Used Bacon Ipsum to generate ipsum text.

  1. CSS layout with SCSS

Generate the general layout, grid system, nav, header, and footer.

  1. Modal operation

I opted for a minimalist approach for the modal window, which could be done in a heavy JavaScript fashion or, had I chosen to use a front-end framework such as Bootstrap or Foundation they have modal options as well. My implementation of the modal window is accomplished with some CSS for the modal formatting and JavaScript's property to change visibility and opacity of the modal window. Sometimes a minimal approach is best. jQuery and the jQuery UI would have been another approach with dialog or something like SimpleModal.

  1. Adjustments to meet design spec.

Pixel fun!!!

  1. Validate for CSS and HTML

Use the W3C Markup Validation Service to check for errors. validation

  • CSS Validated on 9 Nov 2015 for CSS level 3
  • HTML Validated on 9 Nov 2015

Live Site


As with all projects, they never really seem to be "complete". Given the opportunity to add additional functionality or improve the site some of the items I would do would be:

  • better grid system, manually created the grid. Could do it with mix-ins and functions.
  • modal improvement - it's functional but on small screens I would implement a smaller window with an internal "more..." link
  • improve the favicon, it's functional but I wish I had better design skills.