webデザイナーとして、今や「コーディングができる」事は必須要素となってきています。
レベル1：一部のパーツコーディングなど、コーダーのサポートができる
レベル2：デザインカンプを渡されて、問題なくコーディングができる
レベル3：Gitが使える
レベル4：レスポンシブコーディングができる
レベル5：js、CMSが扱える
レベル4までできればwebデザイナーとしては十分ではないでしょうか。
ひとまずレベル4までを目指しましょう。
目次
レスポンシブコーディングって？
簡単に言うと、「PCでもスマホで見てもレイアウトが崩れない、見やすいサイト」となります。
例：
https://github.co.jp/
https://pixta.jp/
PCで見ている人は、上記サイトのブラウザの横幅を広げたり狭めたりして確認してください。レイアウトが崩れないと思います。
更に、スマホやタブレットで見てもレイアウトに崩れはありません。
重要なのは横幅
ブラウザを広げたり狭めてもレイアウトが崩れない、、という事は、
明確な数値 をレスポンシブコーディングでは極力設定しない事がコツとなります。
横幅1000pxと設定してしまったら
横幅1000px以下のブラウザ/スマホでは横スクロールが出てしまうので使い勝手が悪いです。そして、取引先にも「横スクロールが出ないように修正してください」と必ず言われます。。
横スクロールが出ないようにするには？
上記にも書きましたが、明確な数値（他ブログではよく 絶対値 と表現されます）で横幅を設定しないことがコツです。
たとえば
横幅1000px ではなく
横幅 （今開いているブラウザの広さに対して）100%
のような設定をcssに記述します。
その際に使う単位が「%」と「vw」になります。
%とvwの違いとは
vwとは「viewport width」の略称単位となります。
「viewport」ってなんだよと思いますよね。。
日本語に直すと「今開いているブラウザの広さ」「表示領域」でしょうか。
widthの％指定：親要素の横幅に対して、子要素の横幅を％で指定する
widthのvw指定：今開いているブラウザを100vwとして、横幅を指定してあげる。vwを使うと横スクロールが出ない事が多いです。
場所によって%とvwを上手く組み合わせてコーディングすることが大事になります。
横幅の説明について、下記にコードを記述したので違いを見てください。（新しいタブで開いた方が見やすいかも）
See the Pen vw width の違い by asahi_takahashi (@asahi_takahashi) on CodePen.
width90vwのものは、ブラウザの横幅を可変させても横スクロールが出ることは無いと思います。
width90%も横スクロールが出ていないですが、vwとは微妙に横幅が違うと思います。（親要素の横幅を指定しているため）
絶対値を指定すると横スクロールが出てしまうので、レスポンシブコーディングにはあまり向いていません。使うときは小さいパーツなど横幅に影響しないような箇所に使うことに留めるのがコツです。
