模写コーディングをしました！
こんにちは！コーダーを目指し学習中のあーやといいます。
今回、1週間を目標に模写コーディングをしておりました。
有名な学習サイトであるCodeStepの中級編のLPにトライしました！
結論から申し上げますと、1週間より2日オーバーの9日かかりました。
また、ピクセルパーフェクトまでは至らず、結果をブログに載せることにしました。
コードを最後確認した際、記述が違うところもあり、無理やり作り上げてしまっている箇所も
あるなと反省しました。
しかし、レイアウト構成をもっと細かく決めること、CSSアニメーションやjQueryを使って
行うことで経験値が詰めて、とても勉強になりました！
模写、次回に向けた課題などを載せたいと思います。
- 模写（結果）
- 今回の反省点
- 次回に向けて
コーティングした模写（結果）
エックスフリーで、模写をのせました。
2023.9現在削除済みになります。ご覧いただいた方、ありがとうございました(人”▽｀)
cssが反映されないなど、エラー対処などで時間がかかってしまいました(-_-;)
また、家でwifiにつなげているときはさくさく見れたのですが、昼休憩中に見ようとしたら
全くつながらず…
コードが余計な記述が多いから重たいのか、エックスサーバー経由ならそれでもまともに
見れるようになるのか…
次回は試しにエックスサーバーで試してみるか検討しようと思います。
今回の反省点
- レイアウト構成をもっと細かく決めていくべきだった
私は手書きでレイアウト構成を書いています。
「ここはこのクラスつけて、こっちはcssグリッドを使おう」
などと、細かくメモしているつもりでしたが、実際やってみるとうまくいかないです。
「つもり」はしょせん「つもり」だったのです。
余白や、配置なども細かく確認しておけば、後ほど修正してはまたずれてのループを
抜けられたことでしょう。
- コードの共通部分は重複させない
全体的にレイアウトを見ていれば、共通部分も多いことに気が付きます。
なるべく、サブタイトルなど同じ記述になりそうな部分は同じクラス名にするようにしていました。
しかし、aタグの共通部分、bodyタグの共通部分などはあまり意識していませんでした。
特に、コンテンツ幅は最後に微調整しまくっていたので、反省です。
レイアウト構成を決める際は、共通点がないかしっかり確認したいと思います。
- 疑似要素、cssアニメーション、jQueryについてもっと学習
初心者の1歩目レベルでしたので、検索したり、本を参考にしたりと調べるのにも
時間がかかりました。
今回でこれらの良い勉強になりました。
今後も模写進めながら、平行して学習を続けたいと思います。
次回に向けて
- 現在の課題に合わせて、勉強になりそうなものを模写
- 仕様、デザインカンプ、アニメーション動作確認（細部まで）
- ②をまとめ、レイアウト構成仕上げる
- 不明なアニメーションなどは調べたのち、別で記述をして動作確認
- 記述開始
- 細かく動作確認しつつ記述
- 完成後エックスサーバー経由で公開
最後までお読みいただきありがとうございました。