【デイトラ】Web制作コース中級編⑤『最終課題編』の感想と学習記録

こんにちは、アルパカ（@engineeraru）です。

デイトラのWeb制作コース中級編『最終課題編』を学習するときに役立つ情報をまとめました。

デイトラ Web制作コース中級編『最終課題編』の学習記録

【DAY27~30】実践コーディング

超基本的だけど気をつけるべき3つのこと

今更言うまでも無いですが、以下の3つで詰まらないように注意しましょう！

1. JavaScript(●●.js)がうまく動かないときはbodyの閉じタグの前に書いているか確認する
2. うまく反映されない時は、コードではなく環境を疑う(キャッシュ削除 / VSCodeの再起動 / ブラウザの再起動 / PC自体の再起動などを試す)
3. CSSがうまく反映されないときはSASSが反映されているか確認する

ここらへんは当たり前なのですが、うっかり忘れることも多いので、慣れないうちは意識しましょう😊

スライダー機能の実装(Swiper)

今回の難所はスライダー機能の実装かもしれません。

以下の記事がめちゃくちゃ参考になります。

• 【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介
• jQueryを使わないスワイプ対応のjavascriptスライダーSwiper の使い方
• 「Swiper」の使い方とオプションを使ってカスタマイズする方法
• swiper.js使ってみたからそのオプションについて(v4.1.6)

あと私が過去に書いたスライダーやSwiperライブラリの使い方の記事(DAY20)も、お時間あればどうぞ！

疑似要素の使い方

疑似要素もしっかり理解しましょう！

オススメ記事は以下の通り

• CSSの疑似要素とは？beforeとafterの使い方まとめ
• 擬似要素タグbeforeとafterを活用しよう！基礎知識と使い方を解説！
• 【CSS】疑似要素の画像サイズを変更する方法

関数calcと擬似クラス

これもちょっとミスしやすいところ！(私はここで時間取られましたw)

last-childがうまく動かなかったので下記の記事を参考にしました

＞last-of-typeやlast-childが効かない時に確認すること

あと、中級編DAY10の記事や下記記事を読んで復習するのもおすすめ。

• displayの使い方を総まとめ
• 「calc()」を使うとスゴイ便利！
• 本当に使えるnth-childまとめ – Qiita
• htmlの要素をFlexBoxで簡単に横並びにする

デイトラ Web制作コース初級編『最終課題編』まとめ

以上で中級編のブログ記事は終わりです！

ここまでお疲れさまでした！初級に比べると実力が何倍も上がりましたよね！😊

私のデイトラ体験記事も非常に長くなってしまいましたw

DAY30まで終えた今だからこそ、理解できる記事の内容もあるはずなので、もし良かったら復習がてら読み返してみてください😃

特にココはしっかり理解したほうが良いなあ…というのは以下の3つです

• DAY3のDOM操作
• DAY10の関数calc & nth-child
• DAY21のライセンスの話

また上級編でお会いしましょう〜！

以上、アルパカ(@engineeraru)でした。