コーダー向け模写以降ロードマップ

対象者

• HTMLのタグの意味や使い方を一通り学んだ。
• CSSプロパティやCSSセレクタ、メディアクエリなどの意味や使い方を一通り学んだ。
• ドットインストールなどの学習サイトや書籍でHTMLやCSSを使ったサンプルプログラムを、実際にテキストエディタを使いながら何個かつくってみた。

デザインデータからのコーディング練習をする

コーディングはデザイナーさんから渡されたデザインデータを元にHTMLとCSSを使ってウェブサイトを構築する技術です。ウェブデザイナーさんから渡されることの多いXDデータを使って何度もデザインデータからコーディングする練習を積むと実戦に近い形でコーダーのスキルが身につけられます。

未経験からWebデザイナーへ！

無料コーディング練習所

https://webdesigner-go.com/coding-practice/

PENGINBLOG

【コーディング課題】XDからコーディングをしよう【初級編】

https://pengi-n.co.jp/blog/coding-practice1/

【コーディング課題】XDからコーディングをしよう【中級編】

https://pengi-n.co.jp/blog/coding-practice2/

【コーディング課題】XDからコーディングをしよう【上級編】

https://pengi-n.co.jp/blog/coding-practice3/

デザインデータからコーディングをする上でのポイント

• デザインデータの使い方を覚える
  • フォントサイズや色、サイズ情報などのコーディングに必要な情報を読み取れるようになる
  • コーディングに必要な画像やアイコンを適切なサイズや形式で書き出せるようになる
• デザインデータとコーディングの結果を見比べて、デザインを忠実に再現する
  • 文字サイズや行間の高さ、要素のサイズや形、影など隅から隅まで忠実にデザインを再現できるようになる
  • デザインデータよりも画面の横幅が大きくなったり小さくなった時でも綺麗に要素が拡大縮小しながらデザインをきれいな状態に保つようにレスポンシブコーディングができる
• 本番サイトに必要なmetaタグなどの設定ができるようになる
  • タイトルタグやメタタグ、OGP画像、faviconなどの設定ができるようになる
• 複数ページをコーディングした時にディレクトリ構成やクラス命名規則にまで気を遣えるようになる
• テストができる
  • safariやchrome、iosやandroid、複数のデバイス幅でも表示崩れなく、リンクや動きに不具合がないことを確認して、品質を担保できる
• 実際のサイトのデータで公開までできる
  • レンタルサーバー、ドメインを契約して特定のドメインでサイトを公開することができる
    • FTPやgitの使い方も覚える
  • basic認証をかけてテストページを公開できる