今回は私が受講したRaiseTech「WordPress副業コース」の模写課題についてご紹介します！
RaiseTechの旧公式サイトの一部を模写する課題です。
講義動画でディレクトリの作成方法を伝授された後「ここからここまで模写してください。」で動画は終わりました。
………それだけ！？やり方も何もわからんやないかーーーい！！
という状態から始まりました。笑
制作物のご紹介
制作時間 37時間
使用言語 HTML/CSS/jQuery/Sass
GitHub https://github.com/Ayaka-K414/RaiseTech-reproduction
こちらがPC版です。
グローバルナビはホバーするとサブメニューがスライドダウンでアニメーションします。
さらにサブメニューをホバーすると背景色が変わります。
Flexbox、FontAwesomeの使い方を学びました。
こちらはPC→Tabletのレスポンシブです。
はじめにサイトロゴの横にあるキャッチコピーが消えます。
さらにグローバルナビがハンバーガーメニューに変わります！
メディアクエリの書き方を学びました！
こちらはハンバーガーメニューの挙動です。
模写課題で最大の難関でした…本当に脳が疲れました。笑
メインメニューが意図しない挙動になってしまい自分で原因を探っても見当がつかず…。
質問所に駆け込んでみるとPC版でグローバルナビにheightを指定していたのが原因とわかりました。
他にも擬似要素の使い方を学びました！
Tablet→SPのレスポンシブです。
真ん中のテキストエリアのロゴが消え、緑のボタンがアニメーションしながらサイズが小さくなります。
一番下のアイコンは3カラムから1カラムに変わっています！
まとめ
尊敬する先輩メンターさんが19時間で模写課題をやってのけたので目標にしていたのですが、遠く及ばずで悔しかったです。
ProgateでHTMLとCSSは一通りやっていたので比較的入りやすかったとは思います。
が、jQueryの使い方とCSSとの組み合わせ方で苦労しました。
Flexboxは使い慣れてきたので、次はgridの使い方を習得します！
コメント