こんにちは、アルパカ(@engineeraru)です。
デイトラのWeb制作コース中級編『最終課題編』を学習するときに役立つ情報をまとめました。
目次
デイトラ Web制作コース中級編『最終課題編』の学習記録
【DAY27~30】実践コーディング
POINT
答えを見ずに最後まで自分でコーディングする
超基本的だけど気をつけるべき3つのこと
今更言うまでも無いですが、以下の3つで詰まらないように注意しましょう!
- JavaScript(●●.js)がうまく動かないときはbodyの閉じタグの前に書いているか確認する
- うまく反映されない時は、コードではなく環境を疑う(キャッシュ削除 / VSCodeの再起動 / ブラウザの再起動 / PC自体の再起動などを試す)
- CSSがうまく反映されないときはSASSが反映されているか確認する
ここらへんは当たり前なのですが、うっかり忘れることも多いので、慣れないうちは意識しましょう😊
スライダー機能の実装(Swiper)
今回の難所はスライダー機能の実装かもしれません。
以下の記事がめちゃくちゃ参考になります。
- 【実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介
- jQueryを使わないスワイプ対応のjavascriptスライダーSwiper の使い方
- 「Swiper」の使い方とオプションを使ってカスタマイズする方法
- swiper.js使ってみたからそのオプションについて(v4.1.6)
あと私が過去に書いたスライダーやSwiperライブラリの使い方の記事(DAY20)も、お時間あればどうぞ!
疑似要素の使い方
疑似要素もしっかり理解しましょう!
オススメ記事は以下の通り
関数calcと擬似クラス
これもちょっとミスしやすいところ!(私はここで時間取られましたw)
last-childがうまく動かなかったので下記の記事を参考にしました
>last-of-typeやlast-childが効かない時に確認すること
あと、中級編DAY10の記事や下記記事を読んで復習するのもおすすめ。
デイトラ Web制作コース初級編『最終課題編』まとめ
以上で中級編のブログ記事は終わりです!
ここまでお疲れさまでした!初級に比べると実力が何倍も上がりましたよね!😊
私のデイトラ体験記事も非常に長くなってしまいましたw
DAY30まで終えた今だからこそ、理解できる記事の内容もあるはずなので、もし良かったら復習がてら読み返してみてください😃
特にココはしっかり理解したほうが良いなあ…というのは以下の3つです
また上級編でお会いしましょう〜!
以上、アルパカ(@engineeraru)でした。