【30DAYSトライアル 2nd】最終課題(DAY27からDAY30)
スポンサーリンク
30DAYSトライアル 2nd 最終課題の感想です。
最終課題の内容
DAY27〜DAY30. 『最終課題:実践コーディング』
— ショーヘー@東フリCMO (@showheyohtaki) November 7, 2019
デイトラ2ndもこの課題でいよいよ最後です🎉
最終課題は、これまでの総復習を兼ねて、LPをカンプ通りにゼロから作ってみましょう👍
納期は4日間です。
4日以内に完成を目標にやってみて下さい‼️#30DAYSトライアル #2ndhttps://t.co/7f0Y4qBu7y pic.twitter.com/MmO6OrDjvE
目標は4日間で納品できるレベルに仕上げること。
課題が出題されたのが木曜日だったので、木・金・土・日の4日間で行いました。
4日間の内訳
私は平日は仕事をしているので平日に作業できる時間は最大で3時間程度です。なので作業のほとんどは土日に詰め込むカタチになりました。
4日間の振り返り😌
— Yaponka (@Yaponka6) November 10, 2019
1日目→サイト構造理解とクラス名を決める
2日目→HTMLを完成させる
3日目→PC版を9割完了(スライダー以外)
4日目→スライダー実装とスマホ版完成✨
正確には測ってませんが20時間くらいかかってます💦
なんとか間に合いました😃✨#30Daysトライアル #2nd#最終課題 https://t.co/oStGGTagof
1日目 サイト構造理解・クラス名を決める
Figmaにサイト全体像の写真を貼付け、サイトのボックス構造やPC版サイトとスマホ版サイトでの配置の違いを把握しました。
コメント機能を使いながらクラス名として付与する予定の名前を書き込んでいます。(実際には採用しなかったものもそのままになってます。)
クラス名の付け方や、SASSのファイル設計はこちらの記事を参考にしました↓
2日目 HTMLを完成させる
初日で準備したファイルを元に実際にHTMLを書いていきました。
30DAYSトライアル 2ndの課題では毎日1セクションごとに作り上げてきましたが、やり方を変えて最終課題はHTMLをすべて書いてからCSSで調整していく作戦を採りました。
#今日の積み上げ
— Yaponka (@Yaponka6) November 8, 2019
✅ヨガ
✅ブログ1記事
✅デイトラ2nd 最終課題
✅読書
最終課題2日目はサイト設計計画を終わらせてHTMLを書きました✨
先に全部HTMLを書くやり方が吉と出るか凶と出るかは今週末にわかります😌#プログラミング初心者#30daysトライアル#2nd#ブログ初心者#毎日ヨガ
経験値が多くないので比較ができませんが、始めにHTMLをすべて書ききる方がやりやすかった気がします。(微調整はCSSを書きながら入れています)
3日目 PC版サイトをほぼ完成させる
苦手意識がぬぐえていない疑似要素とスライダー以外はPC版サイトは完成できました。
PC版サイトはカンプサイズより大きい幅の画面で見た時にはサイトの最大横幅はカンプサイズの大きさで、中央に配置される様に設定しました。
はにわまんさんの記事にわかりやすく解説されています↓
4日目 レスポンシブ対応にして完成
最終日はやりかけだった所(疑似要素・スライダー)を完成させて、レスポンシブ対応にしていきました。
スマホサイトだと表示されない要素や、配置が変わるものもあったのでカンプとにらめっこしながら作業しました。
30daysトライアル2ndの最終課題スマホ版もできました😊✨
— Yaponka (@Yaponka6) November 10, 2019
動画を撮る時の手ブレがひどい😵💦
スマホで撮るからいけない?
どうやったら綺麗に撮れるのだろう🤔#30daysトライアル#2nd#最終課題 pic.twitter.com/rZOh3bwhh9
動画の手ぶれひどくてすみません。。
まとめ
4日間でカンプからのコーディングなんとか終わらせることができました。
3・4日目が土日だったのが救いです。(平日4日間だとおそらく無理でした)
8月から始まった30DAYSトライアルに参加して60日間Web製作に必要な知識を毎日課題をこなすことでここまでできるようになったことに感動です。
最終課題を完成させたら、燃え尽き症候群ぎみになりましたが30DAYSトライアル 3rdにもチャレンジして、感想記事としてブログを書きます。
*30DAYSトライアル2ndの他の課題と感想のまとめも気になる方はこちらの記事をどうぞ↓