Dev Test

This is just to gage where your skills are at, don't stress to much about it. Just try to be clean with your code! Some recommendations I have are:

• Comments! CSS/HTML/JS/PHP, Comments are always cool, like bowties.....(20pts if you get the reference.....)
  • They make life easier for the guy after you who has to figure out why you did what you did.
• Keep it dry, try not to repeat yourself.
• Learn & try something new.
  • We always try to use new tech or guidelines on projects to learn new skills or ways of structuring our code to keep things new and fresh so we don't get bored.

The Objective

What youll do is simple! Just take this design and recreate it. Don't worry about using the same images just find some replacment images. For the fonts, just try and match the best you can using google fonts or browser fonts.

I am just more or less going for your code and see what you can do.

I have three requests I want done though.

• Responsive - You can do this by hand or by using Foundation or Bootstrap OR any other framework. If you use a framework though, I am gonna expect an explanation of how it works though.

  • Since there is no Mobile design (This happens a lot) its up to you to decide how things stack. Think of everything in a 12 Column grid. Example the 3 icons would be in 3 DIVS and each div would contain 3 Columns equaling 12. They would simply stack on eachother at the breakpoint.
  • Don't forget about the menu.....

• Use GIT to track your progress. I'd like to be able to see what you do and how you build the project.

  • A good way to do this is commit after everytime you finish something like, Menu sections, Header section, etc. You could also just commit every 15 minutes with what you've done. Make commit messages descriptful but not to long.
  • Fork this repo
    • Clone the Fork
    • Make your commits
    • Push your changes
    • Then make a merge request when finished to sumbit your work.

• Make that mountain image area, a slideshow using Javascript/jQuery.

  • Write some hand written JS to make a slideshow. Foundation gives a slideshow but I want to see some hand written JS Code.

Tools we use that could be helpful

Speaking of new things, we use these tools on almost every project, so you are more than welcome to use them and try something or use them if you know them!

• Git - https://github.com

  • Git is what we use for version control so it's good you use it. As above I have requested you least track your progress with it.

• Sass (CSS the cool, fast, easier way) - http://sass-lang.com/

  • We write 99% of our projects ground up in SCSS (Sass) and about 50% of our client work we are handed uses Sass.
  • If you have never used it and wanna try, explore what Variabels are and Mixins! Really powerful stuff and helps keeps things D.R.Y!

• Compass Sass - http://compass-style.org/

  • I use Compass to compile my Sass for me, it always provides tons of useful Mixins.

• SMACSS - https://smacss.com/

  • Our projects can have a lot of Code, specially CSS, we use SMACSS to help us keep our code structured. We don't follow this to the T. But we do try our best too.
  • I am more than likely going to make you read this anyways.....

• Foundation Framework - http://foundation.zurb.com/

  • Foundation is my favorite framework in the world! Though I mainly use the grid from it and just the grid. The grid plays amazing with SCSS.
  • It also allows you to choose what you use so you dont have a million files floating around from them.
  • It installs SUPER EASY with Compass! http://foundation.zurb.com/docs/sass.html
  • But also works great with bower, grunt, gulp, etc.