レスポンシブ課題と勉強方法

今、レスポンシブサイト作成の課題をやっているのですが、スマホサイトの時に使うハンバーガーメニューに苦戦してました。

オンラインスクールの時は、JQueryを使って作っていて、ネットで探してきてコピペで終了してましたが、今回はCSSのみで作ります。

オンラインサロンで詳しく作り方と、なぜそうなるのか？を説明してくれてるのですが、なかなか理解しきれず、3回ほど見てようやく理解できてきました泣

個人的に一番難しかったのはposition:abusolute;を使うことによる配置の理解と、擬似要素を使ってハンバーガーメニューの３本線を複製するところです。

想像力が乏しいので、配置など要素をこう指定すればこのように動く、みたいな動きのあるものはイメージを掴むのに時間がかかります。

わかってくるとめちゃくちゃわかりやすく説明してくれてることがわかるんですが、最初は説明のうまさに気づくどころか何言ってるか全然わからなかった笑

一通り講義の動画を見て課題に取り掛かったのですが、今回新しく実装する機能を勉強したはずなのに全然作れなくて、web制作自体をちょっと挫折しそうなぐらいショックを受けてました。

いざコードを書こうとすると全然わからず、講義で使ったサンプルコードをほぼ丸写ししながら進めていて、途中でこれじゃ全然身になっていない、半年近く勉強してきたのにこの覚えの悪さって・・。と思ってしまい少しモチベーションが下がったんですが、とにかくわかるまで動画を見ようと思い直しました。

もうコードもノートに丸写しして、何度も巻き戻して何回も見てやっと理解できてきた時はめちゃくちゃ嬉しかったし、もともと要領が悪いのに、すぐに理解できないぐらいで諦めてる場合じゃなかったなぁ〜と。

やっぱり自分にあった勉強方法があって僕の場合はしつこく何度もやることが一番。そんな僕にはオンラインサロンの講義動画は、何度も見れて本当にありがたいです。

これから先、比べ物にならないほど難しいことを勉強しなきゃいけないので、今日を思い出し、挫折せずに頑張っていければと思いました笑