※PCとAndroid環境におけるChromeとFirefoxにのみ対応
Web制作コース中級編
企業と仕事できるコーディング力をつけよう
準備編・ヘッダーとメインビジュアルのコーディング
AdobeがXDの単体販売を停止しました。
（参考）⇢「Adobe XD」単体販売を終了、サポート継続へ Figmaとのすみ分けは「何も決まっていない」
この動きを受けて、デイトラではXDを前提とした講義からFigmaへと切り替えているところです。
DAY12以降については、準備が完了しましたらまたお知らせいたします。
（なお、DAY12以降の解説動画ではXDを前提としていますが、XDの共有URLを用いていますので、課題自体は進めることが可能です。ご安心ください。）
それでは、XDを使って、デザインカンプからコーディングする練習をやっていきましょう！
カンプを元に、↓のキャプチャのようなサイトをゼロからコーディングしていきます。
また、ここからは難易度が高いので、毎日課題を終わらせるには平日3~4時間、休日は6時間くらいの学習が必要になると思います。
それだけの時間確保は難しいという方は、これまで通り平日2時間・休日4時間のペースで進められるだけ進めていきましょう！
準備編：今回のコーディングで使う写真の紹介
今回のコーディングで使う写真は以下から使わせていただいております！
Photo by Scott Graham on Unsplash
Photo by Thought Catalog on Unsplash
TIPS
01. おさらい：デザインデータからコーディングする力はコーダーに必須の能力
このTipを閲覧するためには
コースを購入する必要があります
02. 課題：ヘッダーとメインビジュアルのコーディング
このTipを閲覧するためには
コースを購入する必要があります
03. コーディングの準備：XDから画像のダウンロード + リセットCSS
このTipを閲覧するためには
コースを購入する必要があります
04. コーダー泣かせ？XDのline-heightの扱いを知ろう
このTipを閲覧するためには
コースを購入する必要があります
05. ヘッダーのコーディング例
このTipを閲覧するためには
コースを購入する必要があります
06. メインビジュアルのコーディング例
このTipを閲覧するためには
コースを購入する必要があります
07. ヘッダーの固定とレスポンシブ対応
このTipを閲覧するためには
コースを購入する必要があります
08. 余裕がある人向けの課題
このTipを閲覧するためには
コースを購入する必要があります
09. 回答例コード
このTipを閲覧するためには
コースを購入する必要があります
010. 困ったらまずは「よくある質問」をご覧ください！
このTipを閲覧するためには
コースを購入する必要があります
このコースの現在の獲得スキル価値
¥ {{ currentValueCount | numberWithDelimiter }}