【JavaScript,jQuery特訓編】Web制作でよくあるパーツを実装しよう【解答付き】

こんにちは、フリーランスのweb制作者として活動しているしょーごです。

このページでは、JavaScript,jQuery特訓編について解説していきます。

JavaScript,jQuery特訓編について

は、その名の通り「web制作に特化したjQuery,JavaScript教材」です。

学べること

・web制作で頻出のjQuery、JavaScriptによるDOM操作実践
・jQuery,JavaScriptの書き方の違い
・デバッグ方法、開発の進め方

コーディング課題
作るもの7つ

・ハンバーガーメニュー
・ドロワーメニュー
・ローディング
・スムーススクロールでページトップに戻るのボタン
・アコーディオン
・モーダル
・タブ

web制作のjQuery,JavaScript学習における課題

今回の教材作成はとある問題意識からスタートしています。
それは「web制作に特化したJS教材がない」ということです。

特に「実際にものを作りながら学べる教材が少ない」と感じていました。

そこで、この教材はweb制作でよくあるパーツを実装しながら、jQuery,JavaScript両方学べる教材にしました。

web制作で頻出のパーツなので、今回の教材でのコードは実案件で即使うことができます。

特に、「ハンバーガーメニュー」「ドロワーメニュー」などは実案件での使用率は70%超えぐらいで頻繁に使うので、今回作ったものは確実に資産になります(もちろん解答コードを実案件でそのまま流用いただいても構いません

しょーご

この課題は私が販売している「デザインカンプからのコーディング」の課題の一部なので、ここからコーディング課題について解説します。

デザインカンプからのコーディング課題とは?

デザインカンプからのコーディング練習課題は、実案件と同様のプロセスを経て、サイトを完成品として公開するところまで行っていただく、本格的なコーディング実践演習式課題です。

実案件では実装後に担当者のチェックが入るのが基本です。

そこで、この課題では現役エンジニアによる「2回の表示確認特典」をつけています。

コーディング課題

また、全課題ポートフォリオとして利用OKです!!

各コーディング課題の中身

実際に制作するものは以下になります。

購入された商品により、同梱される課題が異なります。

コーディング練習 デザインカンプ
デザインカンプからのコーディング課題
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
デザインカンプからのコーディング課題
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
初級編イメージ
初級編その2
初級Exイメージ
中級イメージ
中級編【蓼科ごとう農園】
中級Exイメージ
中級Ex採用サイトイメージ
【2024年改定】上級イメージ
Photoshop編イメージ
previous arrow
next arrow
 

コーディング課題

同梱されている課題の違い

このサイトで販売している商品は大きく3つあります。

  1. 全部盛り→全ての課題を同梱
  2. 中級以上→中級以上の課題を同梱
  3. 即戦力編→中級Ex、上級、Photoshop編を同梱
コーディング課題

実はnoteの方では各課題のバラ売りもしています。しかし、こちらでまとめて購入していただくことで

  • バラ買いよりも大幅に安くなる(最大20%)
  • 限定特典がつく(リンク先で解説)

こういったメリットを提供しています。

しょーご

更に詳しい情報は以下の販売ページにまとめています!

デザインカンプからのコーディングが未経験の方はこちらから御覧ください。

\20%オフ!!初心者から即戦力レベルまで一気に!!/

すでにデザインカンプからのコーディング経験がある方は、以下を御覧ください。

\15%オフ!!実務即戦力レベルまで一気に!!/

});