HTML構造の想像

デザインを見て、どう組むかを考え、ソースに書いていく。

「どう組むかを考える」ことが、コーディングする上で1番重要な部分だと思います。
どれだけ正確で無駄の少ないHTML構造を短時間で考えることができるかが、
コーディング全体のクオリティやスピードに繋がってきます。

例えば、このようなブロックがあったとき

どのタグを使って、どのように組めばよいかを考えます。

自分ならこんな感じです（実際もこんな感じになってます）。

タグはul+liを使い（黄色い部分がli）、リンクを全体に設定するためにliの直下はaを配置しています。
floatでliを2列にしてネガティブマージンをulに設定しています。
ネガティブマージンを使って要素を並べる方法はこちらで説明してます。

あとは画像とテキストをli内でさらに左右に分け、枠や余白、フォントサイズなど設定すれば完了です。

これはかなり簡単な例ですが、こんな感じでHTMLやCSS、JavaScriptの組み方を考えてコーディングを進めています。
時には想像した通りに組んでも デザイン通りにならないこともありますが（そのときはまた別のアプローチから想像します）、
この作業があるのとないのとでは雲泥の差です。

そして、この作業をどれだけ正確に、素早くできるかが重要です。