Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

【30DAYSトライアル 2nd】最終課題(DAY27からDAY30)

スポンサーリンク

laptop

30DAYSトライアル 2nd 最終課題の感想です。

 

 

 最終課題の内容

 

 

目標は4日間で納品できるレベルに仕上げること。

課題が出題されたのが木曜日だったので、木・金・土・日の4日間で行いました。

 

4日間の内訳

私は平日は仕事をしているので平日に作業できる時間は最大で3時間程度です。なので作業のほとんどは土日に詰め込むカタチになりました。

 

 

1日目 サイト構造理解・クラス名を決める

Figmaにサイト全体像の写真を貼付け、サイトのボックス構造やPC版サイトとスマホ版サイトでの配置の違いを把握しました。

 

コメント機能を使いながらクラス名として付与する予定の名前を書き込んでいます。(実際には採用しなかったものもそのままになってます。)

 

クラス名の付け方や、SASSのファイル設計はこちらの記事を参考にしました↓

tsudoi.org

 

2日目 HTMLを完成させる

初日で準備したファイルを元に実際にHTMLを書いていきました。

30DAYSトライアル 2ndの課題では毎日1セクションごとに作り上げてきましたが、やり方を変えて最終課題はHTMLをすべて書いてからCSSで調整していく作戦を採りました。

 

 

経験値が多くないので比較ができませんが、始めにHTMLをすべて書ききる方がやりやすかった気がします。(微調整はCSSを書きながら入れています)

 

3日目 PC版サイトをほぼ完成させる

苦手意識がぬぐえていない疑似要素とスライダー以外はPC版サイトは完成できました。

PC版サイトはカンプサイズより大きい幅の画面で見た時にはサイトの最大横幅はカンプサイズの大きさで、中央に配置される様に設定しました。

 

はにわまんさんの記事にわかりやすく解説されています↓

haniwaman.com

 

4日目 レスポンシブ対応にして完成

最終日はやりかけだった所(疑似要素・スライダー)を完成させて、レスポンシブ対応にしていきました。

スマホサイトだと表示されない要素や、配置が変わるものもあったのでカンプとにらめっこしながら作業しました。

 

 動画の手ぶれひどくてすみません。。

 

まとめ 

 4日間でカンプからのコーディングなんとか終わらせることができました。

3・4日目が土日だったのが救いです。(平日4日間だとおそらく無理でした)

 

8月から始まった30DAYSトライアルに参加して60日間Web製作に必要な知識を毎日課題をこなすことでここまでできるようになったことに感動です。

最終課題を完成させたら、燃え尽き症候群ぎみになりましたが30DAYSトライアル 3rdにもチャレンジして、感想記事としてブログを書きます。

 

 

*30DAYSトライアル2ndの他の課題と感想のまとめも気になる方はこちらの記事をどうぞ↓

 

treatmyself.hatenablog.jp