Webデザインの模写コーディングに挑戦

これまでのステップで、コーディングの基礎知識を学んできました。このステップからは、模写コーディングに挑戦していきます。

「模写コーディングってどうやるの？」と思うかもしれないので、まずは課題サイトの模写コーディングの進め方について説明していきます。

課題サイトの模写コーディングの進め方

課題サイトの模写コーディングの進め方について説明していきます。進め方としては5つのステップで進めていきます。

※下記のステップを確認したい場合は、コーディング課題一覧ページの「課題の始め方」から確認してください。

課題を選ぶ
コーディング課題一覧から、好きな課題をお選びください。 課題によって、難易度が異なります。
コーディング作業
HTMLとCSSを使って、デザインファイルをもとにコーディング作業を行います。
提出・添削
各課題ページにある提出フォームから、コーディングデータをZipファイルにまとめて提出してください。 講師が添削してフィードバックをお返し（Chatworkにて）します。
修正
フィードバックをもとに、コーディングの修正を行います。修正の添削はChatwork上でやり取りしてください。
合格
共有と修正を繰り返し、合格の講師から合格の判定が出たら課題完了です。課題を完了ステータスに切り替えて、他の課題に取り組みます。

これらの5つのステップを繰り返し行うことで、コーディングの技術を向上させていきます。

Step1の「課題を選ぶ」では、模写コーディングを行いたい課題を選択します。

例として「No.001」を選択しています。

Step2の「コーディング作業」では、課題詳細ページのデザインファイルをもとに模写コーディングを行います。

デザインファイルを開く
「デザインファイル」ボタンをクリックしてください。
別タブで課題のデザインのFigmaが表示されます。
コーディングを行う
デザインファイルをもとにコーディングを行なってください。
※コーディング課題のフォルダ名/ファイル名の例
　フォルダ名：0001
　HTMLファイル：index.html
　cssファイル：style.css

Step3の「提出・添削」では、コーディングした課題の提出を行い、講師から添削及びフィードバックを貰います。

コーディングした課題のフォルダをZip化
提出する際に提出する課題のフォルダをZipファイルにしておく必要があるので、提出前にZip化しておきましょう。
コーディングした課題を提出する
「提出」ボタンをクリックしてください。
提出するZipファイルをアップロードし、「提出する」ボタンをクリックしてください。
講師からの添削及びフィードバック
課題を提出後、2~3営業日以内にスラックでフィードバックの画像をお返しします。

Step4の「修正」では、講師からのフィードバックをもとに、コーディングの修正を行います。

フィードバック内容を修正する
フィードバックの内容を確認し、コードの修正を行います。
修正したコーディングを提出する
修正したコーディングのフォルダをZipファイルにして、スラックで提出してください。（提出先は、講師からフィードバックの画像が送られてきたチャンネルです。）
講師からの添削及びフィードバック
課題を提出後、2~3営業日以内にスラックでお返しします。