デザインカンプからコーディングをする時の作業の流れについて、デザインデータの取り扱いからコーディング時の活用方法まで、初心者向けに徹底解説しました
今回は「Adobe Illustrator」で作成されたデザインデータの場合を例に解説しております。

★★★「Webの神様」メンタープランのご案内★★★

ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です

【お知らせ動画】
「Webの神様」があなたのメンターになります
   • 【お知らせ】「Webの神様」があなたのメンターになります【未経験・初心者大歓迎】  

【プランの詳細・お申し込みMENTA】
https://menta.work/plan/5148

未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます
是非ともご検討いただければ幸いです。

★★★★★★★★★★★★★★★★★★★★★★★

〈目次〉
・オープニング 0:00
・前置きこの動画で解説する範囲について 1:11
・手順① デザインカンプを確認する 2:13
・補足デザインデータの形式について 3:15
・デザインカンプの取り扱いルール 5:20
・「アウトライン化」されたデータについて 7:16
・補足「Google Fonts」のダウンロード 12:17
・手順② コーディング計画を立てる 13:11
・手順③ HTMLマークアップを行う 19:19
・補足HTMLマークアップ後の例 23:43
・手順④ 画像素材を書き出す 24:13
・手順⑤ CSSを書いてレイアウトを整える 27:27
・補足リセットCSSの読み込み 29:21
・手順⑤ CSSを書いてレイアウトを整える 31:05
・最後のまとめ 35:17

Webの神様
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです

【タグ】
#Webデザイン #コーディング

【SNS】
Twitter
  / webgodweb  

Facebook
  / webgodweb  

【運営会社】
株式会社カラフルクローバー
https://www.colorfulclover.co.jp/