余裕がある人向け課題 フォーム編 【30Daysトライアル2nd】
スポンサーリンク
30Daysトライアル2nd Day15 余裕がある人向け課題をやった感想記事です。
課題の内容
Day15 余裕がある人向け課題の内容は2種類
- Perfect Pixel でコーディングのチェック
- ファイルの添付ができるフォームを作る
この記事では「ファイルの添付ができるフォームを作る」をやってみた感想を綴っています。
コーディング課題のリンクとイメージ
課題のURLはこちら↓
https://xd.adobe.com/spec/952944f1-b9dd-4915-4f34-52001676550a-e318/
（パスワードは東フリさんのスラックに参加すると確認できます）
課題の完成イメージ↓
本課題よりフォームの項目が少ないためシンプルに見えますが、「履歴書」の項目はファイルが選択できるように実装していくためHTML・CSSに加えてjQueryも必要になります。
参考にすべき記事として紹介されているはにわまんさんの記事の中（1.7 フォームの選択）に答えがすべてありました↓
フォームのCSSを初期化してオリジナルなデザインを再現しよう！ | HPcode
チャレンジ結果
参考記事のコードをコピペしただけなのでできたことにならないかもですが、こんな感じになりました↓（いつもごとくレスポンシブ非対応です。。。）
See the Pen 30 DAYS trial 2nd form by Yaponka (@Yaponka) on CodePen.
最後に
正直なところ、今回の課題は参考記事がわかりやすく・必要な情報がすべてあったため終えることができただけです。
jQueryの知識が足りていないため、コピペで使ったコードが何をしているのか理解しきれていないので、jQuery・JavaScriptの理解度を上げるために何かしないといけないと気付けました。
はい、頑張ります。
30Daysトライアル2ndの本課題の感想はこちらからどうぞ↓