Using the following technology:
- gulp (used for compiling/live reloading)
- lost (grid system)
- jade (html)
- stylus (css)
- coffee (javascript)
Using the following psd template. Break it down into html/css using your own resume for the content. Store your source files in a folder called /src and have it compile to a /public folder. Make sure it works on IE10+, Chrome and Firefox. For bonus points it should resize for tablet and mobile.
Make sure you don't use a lot of classes in your html i.e. the way bootstrap does it .col-md-6. Instead use lost and descriptive tags like .profile. Try to also limit the amount of divs you use.
For example:
<div class="field">
<label>First Name</label>
<input type="text" name=user[first_name]" placeholder="First Name">
</div>Instead of this this:
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="user[first_name]" placeholder="First Name">
</div>
</div>
</div>