
Tailwind CSS 実践ポートフォリオの公開
codingworks
[Tailwind CSS実践ポートフォリオパブリッシング]は、Tailwind CSSを活用して26種類以上の実践例を製作する過程です。実践例を素早く多様に制作することで、その中で必須の理論を説明します。この講義は、開発者とパブリッシャーが作成するTailwind CSSスタイリングを中心に作成されました。
初級
TailwindCSS, HTML/CSS
ウェブパブリッシャーのためのJS核心理論および実践例題の教材と完成版は、PDFで制作された講義教材です。この教材は、ウェブパブリッシャーが必ず知っておくべきJavaScriptとjQueryの基礎をしっかりと身につける役割を果たします。教材の特徴として、理論と連動したスモールミッション(Small Mission)を通じて、理論をより強固にすることができます。特に、学んだすべての理論を活用した実践例題も充実している教材です。このPDFの全ページは、バニラJavaScript(Vanilla JavaScript)とjQueryを合わせて320ページ以上におよび、CodingWorksが容易に理解できるよう十分な説明を加えています。 特に、パブリッシャーがウェブサイト制作のために不可欠なjQueryインタラクションの実践例題を学習することができます。


学習した受講者のレビュー
5.0
잼원
お金が惜しくないほど気付いています
5.0
고창우
最終プロジェクトのときに多くの助けになりました。 本当にありがとうございました。
5.0
한우진
理論と本当に様々な実務例が盛り込まれており、追ってみながらすぐに実力が増えると思います!インターネット講義ではなく電子書籍なので、いつでも確認しやすく定められた講義時間があるのではなく、私のスピードに合わせて勉強できるという点も本当にいいようですが、一生懸命勉強してみましょう!
JavaScript必須理論および実践活用例
jQuery必須理論および実践活用例
JavaScript & jQuery HTML+CSS+JS 完成版
CodingWorksが心血を注いで丁寧に作り上げた、JS核心理論および実戦例題のPDF自社教材です。一般的な書籍とは異なり、JavaScriptとjQueryに苦手意識を持つWebデザイナーやパブリッシャー就職準備生のために、CodingWorksが「これだけは絶対に必要!」という内容を簡単に理解できるよう、十分な解説を盛り込みました。本教材を制作しながら 「どう説明すれば受講生の皆さんがより簡単に理解できるだろうか…」 と考え、一生懸命作り上げました。
既存のJavaScriptおよびjQueryの教材は、今すぐ必要のない内容まで膨大に説明していますが、核心的な内容に対する区分や説明が不足しています。読者の立場からは、何をどのように、どこに集中して学習すべきか判断が難しいです。特に、理論に対する現実的な例題が不十分な傾向にあります。例題があったとしても、現実的な例題とは言い難いケースが多いです。しかし、コーディングワークスが制作した<ウェブパブリッシャーのためのJS核心理論および実戦例題の教材と完成版>は、実務ですぐに使える核心的な内容だけを分かりやすく整理しました。そして、新しい理論を学んだら、必ずその理論を活用する例題、すなわちスモールミッション(Small Mission)ができるように構成されています。
学習したすべての理論を活用して、実践的な例題を作成します。理論を勉強している時は「これをどこに使うんだろう?」と思うかもしれませんが、複数のスモールミッションと最後のパートの実践例題を作成しながら「あ〜、勉強した理論をこういう時に使うんだ!」と実感していただけるはずです。そうすることで、理論をよりしっかりと記憶に定着させることができます。特に現実的な実践例題を作ってみることで、JavaScriptやjQueryが開発者だけが扱う難しくて負担の大きいものではないと感じ、これからさらにJavaScriptやjQueryを楽しく勉強できるモチベーションにつながります。
パブリッシング関連やプログラミング関連の学習のために、以前は書店で本を購入して読んでいました。私もそうでした。しかし、本というのは必要な時に見ようとすると常に手元になければなりませんが、持ち歩くのも大変ですし、家に置いたままにすることがほとんどです。そのため、いつでもどこでも気になった時にすぐに見られる電子書籍が良いのです。
余談ですが… 教材なしでパブリッシングやウェブ開発を学習する習慣は、あまり良い習慣ではありません。検索してYouTubeやブログを通じて多くの人の知識を取り入れたとしても、結局自分にとっては断片的な知識になってしまうことが多いです。一般の書籍であれ電子書籍であれ、どのような形であっても、実力向上のための参考書は必ず持っておくべきです。
教材で説明したすべてのスモールミッションと実戦例題ファイルは、HTML+CSS+JSファイルの形式でダウンロードいただけます。 そのため、教材の内容をコーディングする前に、プレビューとしてファイルを先に開いてから教材を通じて練習することができ、教材で書き漏らした部分を完成版ファイルを通じてチェックすることができます。
01. JavaScriptの基本文法
02. JavaScriptの変数
03. JavaScriptの条件文 if、switch文
04. JavaScriptの繰り返し文 - while文、do while文、for文
05. JavaScriptの配列とfor in文
06. JavaScriptの関数(function)
07. JavaScriptのオブジェクトとコンストラクタ関数
08. JavaScript基本組み込みオブジェクト
09. BOM(Browser Object Model) : ブラウザオブジェクト
10. DOM(Document Object Model) : 文書オブジェクト
11. HTML DOM Node
12. JavaScript - 文書オブジェクトの属性
13. JavaScript実践例
01. jQueryの連結および基本文法
02. jQuery必須メソッド Part1
03. jQuery必須メソッド Part2
04. jQuery実戦例
05. jQueryプラグインの使い方
※ 該当のjQuery教材ではAjaxの使用方法は扱っておりません。
▲ スライダー(前後ボタン、Autoplay制御ボタン)
▲ スライダー(自動Autoplay、マウスオーバーで停止、外れると再開)
▲ マウスクリックでスムーズにスクロール移動させる方法(JavaScript方式)
▲ [分秒ミリ秒] ストップウォッチ(Stop Watch)作り
▲ じゃんけん(Rock Paper Scissors)ゲーム作り
▲ 計算機作り with Grid
▲ マウスイベントで背景色を変更する
▲ モーダル(Modal)を表示する(方法 2)
▲ マウスクリックでスムーズにスクロール移動させる方法(jQuery方式)
▲ やることリスト(To Do List)作成
▲ モバイル下端のアイコンタブバーナビゲーション作成(Tab Bar navigation)
▲ マウスポインターに追従する虫眼鏡機能の作成
▲ ライトモード&ダークモードの切り替え
▲ フォントサイズの拡大・縮小バーを作る
▲ テキスト入力ボックス(textarea)の文字数をチェックする
▲ パスワード入力値の表示・非表示切り替え with フォントアイコン
▲ プロフィール写真アップロードフォームの作成
▲ フォーム入力フィールドをクリックするとテキストが上がるアニメーション
▲ フォトギャラリー ライトボックス(Lightbox)の作り方
▲ 画像ホバーエフェクトをjQuery animateで作る
▲ サイドバーナビゲーションで隠れたコンテンツを開く
▲ Front Back トランジション画面切り替え
▲ jQueryスライダープラグインSlick Sliderの使い方
▲ jQueryタイピングプラグイン Typed.js の使い方
▲ jQueryプラグイン Featherlight の使い方
▲ jQueryカウントダウンタイマー・プラグイン The Final Countdown の使い方
この教材は、ウェブパブリッシャーとしての就職を準備している方、またはウェブパブリッシャーとして現職で働いている方のための教材です。 フロントエンド開発者やバックエンド開発者が求めるレベルの深さを持った講義ではありません。 だからといって、JavaScriptおよびjQueryの核心的な理論内容をおろそかに扱っているわけではありません。全般にわたって必ず必要な内容を扱っています。フロントエンド開発者やバックエンド開発者が求めるJS講義レベルの深さは、市販の中上級JavaScript教材が適しています。
🟢 本講義を受講される前に、以下のCodingWorksブログの記事を一度ご覧いただくことをお勧めします。
ウェブデザイナーとウェブパブリッシャーがJavaScriptよりもjQueryを使いこなすべき理由 : https://www.inflearn.com/blogs/3527
現) 国費パブリッシング&フロントエンド講師
現) フリーランス フロントエンドパブリッシャー
現) HTML+CSS+JQUERY パブリッシングYouTubeチャンネル「コーディングワークス」運営
グリーンコンピュータアカデミー ウェブパブリッシング講師
ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
イゼンコンピュータアカデミー ウェブパブリッシング講師
フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
UI/UXウェブデザインポートフォリオ講義
ウェブデザイン技能士実技資格クラス講義
イージーアンドエデュ フロントエンドUI/UXデザインおよびパブリッシング
🌏コーディングワークス インフラン講義一覧 - https://www.inflearn.com/users/@codingworks
🌏インフラン コーディングワークス 講義学習順序(学習ロードマップ) - https://www.inflearn.com/blogs/2351
🌏コーディングワークス インフラン パブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs
🌏コーディングワークス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks
学習対象は
誰でしょう?
JavaScript & jQueryの必須コア内容をPDF教材で見たい方
JavaScript & jQueryのスキルアップが必要なウェブデザイナー、ウェブパブリッシャー、ウェブ開発者
前提知識、
必要でしょうか?
パブリッシングがメインではないJS学習教材なので、HTML+CSSの基礎能力程度
13,270
受講生
797
受講レビュー
2,125
回答
4.9
講座評価
23
講座
■ [現在] 国費パブリッシング&フロントエンド講師
■ [現在] フリーランス フロントエンドパブリッシャー
■ [現在] HTML+CSS+JQUERY パブリッシング YouTubeチャンネル「コーディングワークス」運営
■ グリーンコンピュータアカデミー ウェブパブリッシング講師
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ イゼンコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UX ウェブデザインポートフォリオ講義
■ ウェブデザイン技能士実技資格クラス講義
■ イージー&エデュ フロントエンド UI/UX デザインおよびパブリッシング
🌏コーディングワークス Inflearn 講義一覧 - https://www.inflearn.com/users/@codingworks
🌏Inflearn コーディングワークス 講義学習順序(学習ロードマップ) - https://www.inflearn.com/blogs/2351
🌏コーディングワークス Inflearn パブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs
🌏コーディングワークス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks
🟣Inflearn In-focus コーディングワークス インタビューを見る : https://www.inflearn.com/pages/infocus-8-20230704
全体
5件
講座資料:
全体
13件
4.7
13件の受講レビュー
受講レビュー 10
∙
平均評価 5.0
受講レビュー 32
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
5
これまでYouTubeや無料講義などでJavaScriptを勉強したが失速はない理論だけでしたが、この講義を購入してみてはJavaScriptについてもっと深く理解できるようになりました。
不足している講義をよく見てくれてありがとう〜!
受講レビュー 1
∙
平均評価 5.0
5
理論と本当に様々な実務例が盛り込まれており、追ってみながらすぐに実力が増えると思います!インターネット講義ではなく電子書籍なので、いつでも確認しやすく定められた講義時間があるのではなく、私のスピードに合わせて勉強できるという点も本当にいいようですが、一生懸命勉強してみましょう!
受講評ありがとうございます〜^^
受講レビュー 8
∙
平均評価 5.0
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!