You can check out the designer guide on this Magento page and also check out this tutorial starting from part 3. (prt 1&2 are installation etc). For me as a backend developer these 2 were very helpful in getting some insight in how templating works.
[EDIT] To implement a static html file to a theme you will first need to define which template or PHTML files hold which parts. For this you can use the Magento Template hints or Aoe TemplateHits (I'd suggest using the last one).
This way you can find the file to put your header in, menus, product blocks etc. Then copy each block that you want to edit from the base/default template folter to your own template and customise them.
In the skins directory of your template copy the styles.css from the default/blank theme as it is a nice start of point from where you can add your own CSS.
I don't know any tutorial that outlines this better but these are basically the steps you need to take.
I am also fronted developer and facing same problem, it's because of server side compilation mode.
Please try following method, may be it's helpful and you don't need grunt cmd also so it's save your time also
go to
store > Configuration > Advanced > Developer > Front-end development workflow
and change workflow type to Client side less compilation
Now go to your Magento installed directory and manually delete following folders
1. pub\static\frontend\Magento (remove all theme folders)
2. var\ (remove all items)
now edit any less file and check it.
no need to run any grunt CMD direct Refresh your browser may be it's working fine.
also please install below add-on in firefox
https://addons.mozilla.org/en-US/firefox/user/simonedeponti/?src=api
it's show you direct less file path in browser when you inspect elements.
I think it's better way to save time.
Best Answer
found one video on youtube very useful
one useful tutorial on module development
check this also you will get good idea about magento theme development.
http://inchoo.net/magento-2/frontend-theme-architecture/