HTML+CSS+JS ポートフォリオ実戦パブリッシング(シーズン3)
codingworks
HTML+CSS+JS 実践ポートフォリオ(シーズン3)は、パブリッシングの実践事例を制作する過程です。様々な実践事例制作を通じて、パブリッシングスキルを中上級へと成長させることができます。34時間以上の十分な講義時間と、様々な種類の実際制作過程であるため、制作ノウハウと応用方法を十分に習得できます。
Basic
HTML/CSS, JavaScript, jQuery
BEST
HTML+CSS+JS ポートフォリオ実践公開(シーズン1)
HTML+CSS+JQUERY 初中級パブリッシングでは、さまざまな実践例を学習することで、パブリッシングの中級レベルに達するための基本を習得します。特に、さまざまな実践例を通じて十分な説明と実践作業を経験し、パブリッシングに自信がつきます。41時間以上の十分な学習量を提供するパブリッシングの授業です。（コーディングワークスのYouTubeパブリッシングチャンネルでCSS中級理論の学習を併行すると、より効果的です。）
学習した受講者のレビュー
受講後に得られること
HTML+CSS+JQUERY の基本理論で、パブリッシングの基本を向上させる
Web サイトの公開スキルとノウハウの向上
ブロック要素とインライン要素の正確な概念と活用
position 属性の正確な概念と活用
hover before after checked active 仮想クラスの理解と活用
テキストエディター Brackets と Emmet の使い方
テキストエディター Visual Studio Code と Emmet の使い方
Flex の活用と Transform プロパティの概念と活用
隣接セレクタ、属性セレクタ、checked 仮想クラスの理解と活用
さまざまなマウス ホバー効果
Font Awesome を理解して活用する
CSSタブメニューコンテンツ、JQUERYタブメニューコンテンツ作成能力
JavaScript 変数 (var) と条件文 (if) の理解と活用
コーディングワークス、HTML+CSS+JQUERY ポートフォリオ中級実戦パブリッシング講義
「パブリッシング必須理論と実践例の合計143の授業」
'合計42時間に近い 本番パブリッシング講義ビデオ
「パブリッシャー就職のためのスキルアップ必須コース」
「実務パブリッシング本当の実力のためのハードコーディングクラス」
📔ハードコーディング（Hard Coding）の実力が本当のパブリッシングの実力です。
ジェイクエリプラグインを使用してダイナミックで豪華に装飾されたパブリッシングは、本物のパブリッシングではありません。
本物のパブリッシングの実力は、HTMLでレイアウト設計をしっかりと上手にし、CSSでバッチと詳細にデザインし、直接作成したジェイクエリ(JQUERY)で相互作用まで作れるのが本物のパブリッシングの実力です。
今の豪華さにジェイクエリプラグインの使用に頼り、基本学習を忠実にしなければ、Webパブリッシャーとして就職するのは簡単ではありません。たとえ就職して実務で働くようになっても、パブリッシャーとして難しい一日一日になる可能性が高いです。
コード一行一行直接コーディングする まもなく、ハードコーディングできるのが本当のパブリッシングの実力です。
コーディングワークスの講義は細心の注意を払って正確です。
1. パブリッシング！怖すぎないでください。自信を持って始めましょう。始まりは半分です。
2. パブリッシング！軌道に乗るのは簡単だとは言えませんが、必ず補償に戻ります。
3. パブリッシャーの就職には、HTML+CSS+JQUERYハードコーディングの基本が重要です。
- コーディングワークスパブリッシング講義では、受講生を理解できないコードは使用しません。受講生に原理を理解させることができる講義が良い講義だと思い、コーディングワークス講義はそう製作されました。
- Webコーディングを初めて始める人のために、簡単で親切に講義されたコア理論と実践例を通じてパブリッシングの自信を持ってください。
HTML+CSS+JQUERY パブリッシングを始める方に申し上げたい言葉があります。
見た目のウェブサイトをハードコーディングで一人でよく作るパブリッシングの実力を備えるのは簡単なことではありません。正確には難しいです。
知っておくべき理論も多く、理論をもとに実戦制作してみた経験も十分でなければなりません。そしてPhotoshopのUIデザインのスキルもある程度備えなければなりません。そうすれば、初めて見やすいウェブサイトを一人でよく作る実力者になることができます。
ただし、上記で述べた忠実な理論学習と理論を活用した例制作を通じて実力が拡張されていない状態で「ポートフォリオウェブサイト制作に従う」ことはできません。
もちろん勤勉に従えば「男のものをコピーしたクローン(clone)ポートフォリオ」という結果物は出るでしょうが、本当の実力につながりません。
あなたがWebパブリッシャーの雇用のために、またはデザイナーがWebパブリッシング能力を持って競争力を持つためには、必ず個人のポートフォリオウェブサイトが必要です。先ほど申し上げた忠実な理論学習と実戦制作経験を備えずに従うだけで個人ホームページを作っても、ハードコーディングの実力が支えてくれないと就職しても実務ですぐに足りない基本基がティーになります。
個人のポートフォリオウェブサイトを作成する前に、十分な理論学習と理論を活用したいくつかのパブリッシングのサンプル制作経験を積んでください。
📔学習方法ガイド
私が考える「パブリッシングスキルを育てる」方法は...
実戦パブリッシングの例制作の際、最初にどのように作るのか気軽に視聴だけをして、2度目は見ながらつづきながら作り、3度目は見て自分でやって本当に思わないときに映像参照して制作してください。そうしてこそ本当の自分の実力で残ります。
※パブリッシング実戦芸術制作の勉強の際におすすめの学習方法（1回目から4回目の学習と欠品を作る）
- 1回目- ただ何の考えもなく途中で切らずに映像を最後まで見ます。
- 2回目- 映像を見ながら従って停止し、本人コードを書いてブラウザを確認して再度再生し、このようにしてください。
- 3回目- 映像を見ずにソースファイル（画像、テキスト）だけを準備して映像の助けなしに自分で作ってください。 （本当に思わなかったらちょっと見てください。）
- 4回目- 後で作成する個人ポートフォリオホームページワークのために、該当映像のソースファイルと同じ形式。 。
🙋🏻♂️講義に関する予想される質問と必読事項
Q. 例制作しながら出てくる中級CSS理論説明映像はありますか？
A. '例制作に基礎理論に出ていない中級理論がたくさん出ていますが、中級理論授業はどこで聞きますか？ 'これらの質問が掲示板に頻繁に来ます。
今のコースは初級パブリッシングの例制作をする過程ではありません。初級～中級パブリッシングの例を製作する過程です。だからCSS初中級理論はある程度知っておくべきです。だから必ずしもよく知る必要はありません。 CSS超中級理論は、例を作成しながら継続的に繰り返します。そして、コーディングワークスのYouTubeパブリッシングチャンネルに[中級理論] CSS中級理論というプレイリストに、サンプル制作に必要な必須の中級理論映像が詳しいので、今のコースを聞きながら中級理論を並行すれば良いです。
Q.このコースを受講すれば、実務でパブリッシャーとして働くことができますか？
A. このプロセスにあるパブリッシングの内容をすべて理解し、よく活用できれば可能です。しかし、パブリッシングというのに十分な経験がなければ、実務で働くことができます。今、コースのようなものをもう少し勉強し、全体のウェブサイト制作過程をいくつか勉強すれば良いと思われます。もちろん個人ポートフォリオのホームページ制作もしていただく必要があります。パブリッシングが進入障壁が思ったより高い方です。映像 一度ご覧いただくとその中に内容とノウハウが共に学生に伝わるわけではありませんので、上記の学習方法を通じて私のものにする過程をお願いします。
Q. 実戦例制作しながら理論パートに説明ができない部分がありますか？
A. 入門初級のための基本理論映像を載せたのは、もし不足だと思う理論があれば参考にするという意味で上げた映像です。実演例制作映像で理論パートにない内容が出ていますが、理論パートにない内容が例制作からなぜ出てくるのかと質問文を載せると、私が回答しにくいです。
Q. 勉強して知らないことがあれば質問はどこにありますか？
A. ご質問がございましたら、[質問＆回答]掲示板に文を残すとすぐではなくても確認されれば答えをいたします。そして質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。だから質問するときは、気になる内容と一緒に作成中のHTML、CSS、JQUERYコーディング画面をキャプチャして添付していただくと、回答がずっと簡単です。
Q. レスポンシブウェブサイト制作講義がありましたが、どれを先に聞くべきですか？
A. レスポンシブウェブサイト全体を制作する過程を聞く前に、今の過程で十分理論と実践例制作に対する実力を高め、レスポンシブウェブサイト全体の制作過程に来ることをお勧めします。レスポンシブウェブサイト全体の制作過程なので、今の過程のように部分部分の詳細な扱いが難しいので、本番パブリッシングの過程で十分に訓練され、ウェブサイト全体の制作過程で来れば理解度がはるかに高いと考えられます。
Q. 講師様授業中にパブリッシャー就職本当の実戦ガイドを先に見ればいいでしょうか？
A. パブリッシングスキルをより身につけることも重要ですが、まずパブリッシャーとして基本基を備えることが優先されなければなりません。パブリッシャー就職実践ガイド電子ブック（PDF）では、パブリッシング基本基とは、好ましいコーディング習慣と原則、キャリアのようにパブリッシングするなどパブリッシャーとして必ず知るべき内容を慎重にまとめました。パブリッシャー就職実践ガイド電子書籍（PDF）をまず見て、パブリッシング基本基についての理解度を十分に持って学習することをお勧めします。下の画像をクリックすると、授業紹介内容をご覧いただけます。
📔 アップデートガイド
[アップデート案内、学習方法案内] HTML+CSS+JQUERY ポートフォリオパブリッシング必須理論と実践例制作講座
コーディングワークス、HTML+CSS+JQUERY ポートフォリオパブリッシング 必須理論と実践例制作講座を受講いただきありがとうございます。そして今後受講してくださる多くの方にもよろしくお願いします。
本講座は当分の間継続的にアップデートがある予定です。アップデートがある場合は、「Inflearn New New」でお知らせします。最終更新まで、既存の理論と本番パブリッシングによく従いながら制作してください。
📔セクション4. HTML + CSS本番パブリッシングの作成（Part 2） -アップデート完了（2020.08.18）
- 01. 仮想クラス hover 活用した実戦例制作（基本型ドロップダウンナビ）
- 02.before after 仮想クラスを活用した実戦例制作（ナビゲーションホバーエフェクト - Border）
- 03.before after 仮想クラスを活用した実戦例制作（ナビゲーションホバーエフェクト - content attr）
- 04.before after 仮想クラスを活用した実戦例制作（ナビゲーションホバーエフェクト – Rotate）
- 05.ラジオボタンとチェックボックスをカスタムチェックボックスにスタイリング（背景画像を使用）
- 06.ラジオボタンとチェックボックスをカスタムチェックボックスにスタイリング（フォントアサムアイコンを使用）
- 07.シーケンスチェック 仮想クラス活用した実戦例制作（個人プロフィールカードUIホバーエフェクト）
- 08.フォーム関連仮想クラスを活用した実戦パブリッシング（背景画像 フルスクリーン検索ウィンドウ）
- 09.フォーム関連仮想クラスを活用した本番パブリッシング（ログイン画面）
📔中級レベルJump Upパブリッシング理論とヒント（Tip）予定リスト
実例の作成に必要な理論だけでなく、パブリッシングのスキルアップに必要なコア理論とヒントを常に更新します。スキルアップに必要なコア理論とヒント画像が更新されている場合は、新しいニュースを通じてお知らせします。
スキルアップに必要なコア理論とヒント画像は、セクション7に順次更新されます。新しいニュースを受け取っていない場合でも、セクション7に来て、学習が必要なビデオがあるかどうかを確認してください。ファイティング〜^^
※Jump Up パブリッシング理論とヒント映像で勉強する学習例 完成本は、該当映像の右上に授業資料を押すとzipファイルを受け取ることができます。
セクション7.中級レベルJump Upパブリッシング理論とヒント（Tip）
- WebパブリッシャーのためのChrome拡張機能の推奨（6つ） （完了、2020.05.31）
- aタグアンカーで目的の部分をスムーズに探す2つの方法（ジェイクエリプラグイン、CSSプロパティ） （完了、2020.07.25）
- bodyの中で別のhtmlを呼び出すことによって示すiframeを利用する（完了、2020.07.25）
- input タグの :checked と拡張選択子 (隣接選択、兄弟選択、属性選択) で作る CSS クリックイベント(完了、2020.07.25)
- インラインJavaScriptを活用する（divにhrefリンクを掛ける、戻る、進む、更新、ウィンドウを閉じる） （完了、2020.07.26）
- パブリッシング講師が講義がうまくいかないかを区別する（display属性の理解度） （完了、2020.08.2）
- 相対フォントサイズem単位とrem単位を理解する（完了、2020.08.2）
- ウェブサイトの制作時に必ず知っておくべきフォルダファイルのパスを理解する（絶対アドレス対相対アドレス） （予定）
- ジェネレータに依存せずに直接座標を見つけて直接コーディングするイメージマップ（Image Map）製作（予定）
- 要素の前後をデザインする仮想クラスの花（before、after）完璧を理解する（予定）
📔本番パブリッシングの例更新完了リスト
- タブメニューコンテンツパブリッシング with JQUERY (スタイル 01) (完了, 2020.05.30)
- パブリッシャーとしてぜひ！知っておくべきJavaScript、変数（var）と条件文（if） - 20歳の成人チェック（完了、2020.06.02）
- JavaScript変数と条件文を使用したスターポイントサイクル実践パブリッシング with jQuery (完了, 2020.06.02)
- ビジュアルスタジオコード（Visual Studio Code）とEmmetの使い方（完了、2020.06.05）
- タブメニューコンテンツ - スタイル02（プロトタイプ）with jQuery （完了、2020.06.07）
- タブメニューコンテンツ - スタイル02（本番制作） with jQuery (完了, 2020.06.07)
- マウスを上げると背景画像を変更する 公開プロトタイプ with jQuery (完了, 2020.06.07)
- ショッピングモールアイテムUIホバーエフェクト with jQuery (完了, 2020.06.07)
- コーディングワークス講義の特徴アコーディオンコンテンツスライド with jQuery (完了, 2020.06.10)
💡 セクション 6. ログイン画面 UI デザイン(完了、2020.06.20)
- [Part 01] ログイン画面UIデザイン（製作ノート、HTML構造設計する、ファビコンを入れる）
- [Part 02] ログイン画面UIデザイン（CSSデザイン - サイズ調整と配置）
- [Part 03] ログイン画面UIデザイン（CSSデザイン - ボタンデザインとチェックボックスとLabel）
- [Part 04] ログイン画面UIデザイン（CSSデザイン - before afterで区切り線デザイン）
ログインUIデザイン本番Webページの公開ビデオが更新されました。今回更新された講義映像はセクション7に合計4つのパートになっています。ダウンロードできるように完成本もアップロードされました。練習するときは、完成した本をダウンロードし、index.htmlとstyle.cssを削除して、ビデオの最初からゆっくりフォローしてください。
ログインUIデザインパブリッシングは、ジェイクエリの相互作用はない静的なパブリッシングですが、CSSの重要な属性であるボックスモデル、ボーダー、バックグラウンドイメージ、色、チェックボックスやラベルを使用するなど、全般にわたるすべてのCSSプロパティを勉強するには最適な例だ。と思われます。
💡 Pure CSSコンテンツスライダプロトタイプ (完了、2020.06.16)
- JavaScriptやJavaQueryを使用していない純粋なCSSを作成するフルスクリーンタブメニューコンテンツ
- 背景色を用いたプロトタイプ制作後の背景画像とテキストアニメーションを活用した応用実践例
▼Pure CSSコンテンツスライダプロトタイプ01（フルスクリーンタブコンテンツスライダプロトタイプ）
▼Pure CSSコンテンツスライダプロトタイプ02（フルスクリーンタブコンテンツスライダアプリケーション）
💡 ビデオバックグラウンドを活用したランディングページ本番パブリッシング with jQuery (完了, 2020.06.14)
- ビデオを背景として使用してボディにいっぱいに埋め、穏やかなバックグラウンドミュージックを敷設し、音量を調整する
- 起動時にコンテンツに徐々に表示されるCSSキーフレームアニメーションの作成
- GoogleのWebフォントでさまざまなテキストの書式を飾る、CSSでかわいいボタンデザインを作成する
- フルスクリーンナビゲーションを作動させるアニメーションハンバーガーボタンCSSにする
- JQueryでフルスクリーンナビゲーションを浮かべる（toggleClass、fadeToggle）
- 仮想クラス：beforeでビデオフレームにグラデーションオーバーレイをかぶせる
- 完成したプレビュー：https: //youtu.be/tuVTiZtii0s
- 完成本製作ノート：https: //youtu.be/LcIKADuM7TA
▼ タブメニューコンテンツパブリッシング with JQUERY (スタイル01) (完了)
▼パブリッシャーとしてぜひ！知っておくべきJavaScript、変数（var）と条件文（if） - 20歳の大人チェック（完了）
- JavaScript変数（var）と条件文（if）の概念理解クラス
▼JavaScript変数と条件文を使用したスターポイントサイクルの実践パブリッシングwith jQuery (完了)
- JavaScript変数（var）と条件文（if）の概念を活用した本番パブリッシング
- ジェイクエリメソッド : addClass() removeClass() text() html() val() prevAll() nextAll() index()
▼ビジュアルスタジオコード（Visual Studio Code）とEmmetの使い方 (完了)
▼タブメニューコンテンツパブリッシング（スタイル02） with jQuery (完了)
- 検索ボックス placeholder テキストデザインの変更
- 検索ボックスをクリックすると（:focus）
- CSSでタブメニューコンテンツをデザインする（特にボーダーデザイン）
- ジェイクエリタブメニューコンテンツ機能用のスクリプトを作成する - addClass（）、removeClass（）、siblings（）、カスタムプロパティdata-alt、var、attr（）メソッドでプロパティを取得する
- プロトタイプ制作と実戦制作の2つに分かれていますので、プロトタイプ先に学習して実戦映像をご覧ください。
▼マウスアップすると背景画像が変更されるパブリッシングプロトタイプwith jQuer y (完了)
- CSSに背景画像を入れる（backgorundプロパティ）
- 仮想クラス：beforeのcontent：attr（）を活用して埋められるテキストナビゲーションを作成する
- ジェイクエリ mouseenter と mouseleave でカスタム属性の値を attr() と呼び、CSS で背景画像を置き換える
▼ショッピングモールアイテムUIホバーエフェクトwith jQuery (完了)
- CSSを使用して親要素の子孫を配置して詳細に設計する
- マウスオーバーすると商品詳細を見せながらCSS filter属性でイメージブラー処理
- Size 選択と Color 選択するとデザインを変更する (addClass, removeClass)
- [いいね]ボタンを押すと仮想クラス：beforeのcontentコンテンツフォントアサムUnicodeに変更する（toggleClass）
▼ コーディングワークス講義特徴 アコーディオンコンテンツスライド with jQuery (完了)
- flexで水平垂直中央配置
- バーチャルクラス：afterでカトクのロゴを目的の位置に正確に配置する
- タイトルにオーバーするとデザイン変更しながら矢印フォントアサムアイコンデザイン変更しながら回転させる
- タイトルをクリックすると、タイトルのデザインが変更され、該当するコンテンツをスライドで表示する（addClass、removeClass、slideDown、slideUp）
- タイトルをクリックすると、右側に画像タイトルのカスタムプロパティで指定されたdata-imageの値をattr（）で置き換えます。
▼ジェイクエリリアクション型アニメモーダル（Modal）
💡 HTML + CSS本番パブリッシングコースの成果をプレビュー
▼ 01. CSS キーフレームアニメーション 活用した実戦例制作 01（円形サイズ変更ローディングアニメーション）
▼ 02. CSSキーフレームアニメーション 活用した実戦例制作 02（四角座標変更ローディングアニメーション）
▼03. CSSキーフレームアニメーションを活用した本番パブリッシング03（ダブルボーダーレディアスアニメーション）
▼ 04. 仮想クラス hover 活用した実戦パブリッシング 01（オーバーすると詳細説明表示される商品一覧）
▼ 05. 仮想クラス hover 活用した実戦パブリッシング 02（マウスオーバーすると現れるツールチップ作成）
▼ 06. バーチャルクラス hover 活用した実戦パブリッシング 03
▼ 07. 仮想クラス hover 活用した実戦パブリッシング 04（上下に分離されるホバーナビゲーションエフェクト）
▼ 08. 仮想クラス hover 活用した実戦パブリッシング 05（アプリ UI レイヤ 3D ホバーアニメーション）
▼ 09. 仮想クラス before after 活用した実戦パブリッシング 01(before after 基本使用法)
▼ 10. 仮想クラス before after 活用した実戦パブリッシング 02（アニメーションホバーナビゲーションエフェクト）
▼ 11. 仮想クラス before after 活用した実戦パブリッシング 03（SNSアイコンアニメーション）
▼ 12. 仮想クラス before after 活用した実戦パブリッシング 04(content attr を活用したテキストナビゲーション)
▼ 13. 入力フィールド デザインを飾る仮想クラスを活用した実戦パブリッシング（フォントアサム使用した入力フィールド）
▼14〜15。シーケンスチェック 仮想クラス活用した実戦パブリッシング 01（アニメスキルプログラス、delay）
▼ 16. シーケンスチェック 仮想クラス活用した実戦パブリッシング 03（Flexbox活用したギャラリーイメージアコーディオンナビゲーション）
▼ 17. 拡張選択者とともに仮想クラス checked 本番パブリッシング 01（アニメーションハンバーガーボタン作成）
▼ 18. 拡張選択者とともに仮想クラス checked 本番パブリッシング 02（アニメサイドメニュー作成）
▼ 19. 拡張選択者とともに仮想クラス checked 本番パブリッシング 03(タブメニューコンテンツ作成)
▼ 20. 拡張選択者とともに仮想クラス checked 本番パブリッシング 04(タブコンテンツ - Opacity)
▼ 21. 拡張選択者とともに仮想クラス checked 本番パブリッシング 05（タブコンテンツ – Opacity アプリケーション）
▼ 22. 拡張選択者とともに仮想クラス checked 本番パブリッシング 06(タブコンテンツ - Slide)
▼ 23. 拡張選択者とともに仮想クラス checked 本番パブリッシング 04(Testimonial タブスライダ)
▼ アコーディオン(Accordion)with jQuery
▼ モーダル(Modal) with jQuery & :target
💡学習前必読事項
学習前のCSS必須理論とCSS中級理論まず学習が必要です。
そのコースは、例を中心に学習するプロセスです。 CSS必須理論とCSS中級理論まず学習が必要です。そのため、少なくともCSS必須理論は知っており、サンプル制作学習を行う必要があります。サンプルを学習し続けると、サンプルの難易度は常に上がります。だから、知らない理論が増え続けているので、負担になることがあります。
あまりにも基本的な質問をすると、今後本当に多くの質問文を投稿することになります。回答する人としても、Googleで検索すると難しくないことがわかる内容を質問すると、回答する時も興奮しません。
基本的な質問をしないでください。私も独学しましたが、独学するのは難しいことです。詰まったときに尋ねる人もなく、苦しいですね。しかし、詰まって気になる点がある場合は、まずグーグルして調べてください。韓国人ブロガーがよく説明しておいた内容が本当に多いです。検索して勉強しましたが、気になる内容が解けない部分を尋ねれば、いつでも私が知っている線で詳しくお話します。
今後のスキル向上のためにパブリッシング学習しながら本当にたくさんのことを知っておく必要があります。
自分で知っていく過程で実力がたくさん増えます。しかし、自分で探して理解しようとしても難しい部分があるかもしれません。そのような部分を私が助けます。そして、その講座の例制作から出てきたコードの内容に関する気になる内容はお尋ねください。
今までの例を挙げるのではなく、コーディングワークスのYouTubeチャンネルでCSS必須理論と中級理論を最初に学んで、例をお勧めします。
🌏コーディングワークスYouTubeチャンネルプレイリスト - CSS必須理論
https://www.youtube.com/watch?v=-1_e38zLCXw&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99
🌏コーディングワークスYouTubeチャンネルプレイリスト - CSS中級理論
https://www.youtube.com/watch?v=PLrDCRrXdRk&list=PLv_UUi9AVBVvr9gODWpz6aZUS6VNvdsYq
ちなみに、コーディングワークス講義中に「中上級パブリッシングのためのCSS3のすべて」という講義があります。その講義を聞くと、完璧なCSS理論を持つことができます。以後、他のサンプル制作やウェブサイト制作過程で来れば、学習内容のほとんどを理解しながら学習することができるので、学習効率がとても良いと思われます。
❤コーディングワークスの受講生に来たパブリッシャー合格ニュース
▲国費支援パブリッシング過程 私に4ヶ月半ほど学んだ学生ですが、就職したとカトクが来ました。
▲コーディングワークス個人ポートフォリオ制作オフライン講義受講生の面接就職結果カトクを受けました。 (2023.4.24)
❤コーディングワークスの受講生がパブリッシャー就職後に送ってくれたメール
先生こんにちは:)
先生 Inflearn 講義聞いた学生キム・オジョンです。
今夏のプライベートポートフォリオに関してアドバイスを得ようとメール送信した学生です。
覚えていますか？😊😊
相違ではなく、
先生にアドバイスを得たポートフォリオでパブリッシャー就職成功したというニュースを伝えようとメール送信します！
でも！
人に載せたポートフォリオを見て会社側から先に連絡が来て、ズームで面接を見て合格しました！
会社側では希望年俸を合わせてデザイン、開発業務をしない本当にパブリッシャー！仕事だけができる会社に入るようになりました。
キャリア職のパブリッシャーを求める会社でしたが、新人の私に連絡が来て、なぜ私に連絡を与えたのかと聞いてみました。
他の人のポートフォリオもたくさん見ましたが、私のポートフォリオで見た「機能定義書」が目立って連絡をいただきました
これがみな先生の講義のおかげだと思います。
先生の講義を聞かなかったら、私もちょうど普通のポートフォリオになりましたが、先生が言ってくれた蜂蜜のヒントで就職に成功することができました！
実際にはお会いできませんが、
ポートフォリオを作る中、先生の講義を見ながらとても頼りにして信じて頑張りました！
学園で長い時間の授業を聞きながら積み重ねた実力より先生の講義を聞いてポートフォリオを作った3ヶ月間の実力がすごく上昇したことが感じられます
切に欲しかったし、
先生がおっしゃっていた通り信じていたら、本当に良い結果が出ました。
本当にありがとうございました！
コロナに注意してください。
また良い講義で会いたいです:)
先生こんにちは〜Inflearn受講生OOOです〜メールアドレスは他の受講生の回答見てわかりました..😊😊
ありがとうご挨拶お願いします
これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一面面接に合格して出勤することにしました。 本当にありがとうございました。
実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が、本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ～ 😊😊
その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。
これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング～！
質問する前にぜひ！読んでください〜！
学習しながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合、HTML、CSS、JSコードの両方をアップロードする必要があります。
質問にコードなしでグローだけの問題を説明すると、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。
⚡効果的な学習のためにぜひ！コーディングワークスパブリッシングYouTubeを参照してください。
コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。
コーディングワークスパブリッシングYouTubeチャンネル： https: //www.youtube.com/codingworks
👨🏼🏫講師紹介
- （現在）フリーランサーフロントエンドパブリッシャー
- ダージョはコンピュータアカデミーWebパブリッシングインストラクター
- 今コンピュータアカデミーWebパブリッシングインストラクター
- フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
- 今コンピュータアカデミーウェブデザイン機能士実技資格証明
- ラクピアICTトレーニングセンターフロントエンドパブリッシングマスターコース講師
- イージー＆エデューフロントエンドパブリッシング、UI/UXデザイン
- HTML + CSS + JQUERYパブリッシングYouTubeチャンネル「コーディングワークス」を運営
- ⚡ コーディングワークスパブリッシングYouTubeチャンネル - https://www.youtube.com/codingworks
💡カリキュラム
※基本的なパブリッシング理論を知っていれば本番パブリッシングの制作を学習しても良いです。
※本番パブリッシング制作学習する必要がある場合は必須理論を参考にしてください。
セクション 0. [プレビュー] HTML+CSS 実践パブリッシングの例 完成したプレビュー
- [完成版プレビュー] HTML+CSS本番パブリッシング制作
- [完成本製作ノート] HTML+CSS本番パブリッシング制作
- [完成本製作ノート] HTML+CSS 本番パブリッシング制作 with jQuery
- [完成本製作ノート]ビデオバックグラウンドを活用したランディングページ実戦パブリッシング with jQuery
セクション 1.ブラケット(Brackets)とビジュアルスタジオコード(Visual Studio Code)の使い方
- ブラケットの使い方とショートカットの活用
- ブラケット(Brackets)でのエミット(Emmet)の使い方とショートカットの活用)
- ブラケットのリアルタイムプレビュー（フォルダ構造の作成）
- ビジュアルスタジオコード（Visual Studio Code）の使い方と環境設定
- ビジュアルスタジオコード（Visual Studio Code）でのEmmetの使い方
セクション2.セクション01。 HTML+CSS+JQUERY パブリッシングの必須理論
- HTML5コアタグの使い方（段落、テキスト書式）
- HTML5コアタグの使い方（リストの作成）
- HTML5コアタグの使い方（リンク、画像）
- CSSコア理論（CSSとは、CSSリンク、基本文法）
- CSSコア理論（選択者、セレクタ適用優先順位）
- CSS書式関連プロパティ（テキストスタイル）
- CSS書式関連属性（リストスタイル）
- CSS 子孫選択子 vs 子選択子、親要素 vs 子要素
- 詳細設計のためのCSSボックスモデル（border、border-radius）
- 詳細設計のためのCSSボックスモデル（width、height、padding、margin、box-sizing）
- 詳細設計のためのCSSボックスモデル（box-shadow、text-shadow）
- パブリッシングのすべて！ HTMLインライン要素、ブロック要素、インラインブロック要素
- CSSでHTML水平に配置する（float、overflow、clear、inline-block）
- HTML5セマンティックタグでCSSレイアウトを設計する（親要素、子要素、兄弟要素）
- CSSポジションのプロパティを完全に理解する（第1編） – 親要素 vs 子要素
- CSSポジションのプロパティを完全に理解する（2編） – 自動的に水平垂直中央に配置する
- CSSポジションのプロパティを完全に理解する（第3編） – 親要素を配置する
- CSS 必須仮想クラス – マウスオーバー効果 (hover, transition)
- CSS 必須仮想クラス – 順序を作成する仮想クラス (nth-child, nth-of-type)
- CSS必須仮想クラス - 順序を作成する仮想クラス（first-child、last-child）
- JQueryを始める（フォルダ構造、リンク方法）
- jQuery（jQuery）必須コア理論（基本構文の作成、セレクタ）
- JQuery（jQuery）必須コア理論（関数）
- JQuery（jQuery）必須コア理論（メソッド）
- JQuery（jQuery）必須コア理論（効果メソッド – slideDown、slideUp、fadeIn、fadeOut）
- JQuery（jQuery）必須コア理論（クラス制御メソッド – addClass、removeClass、toggleClass）
- ジェイクエリー(jQuery) 必須コア理論(要素探索メソッド – children, siblings)
セクション 3. HTML+CSS+JQUERY 本番パブリッシングの作成
- CSSキーフレームアニメーションを活用した本番パブリッシング01（円形サイズ変更ローディングアニメーション）
- CSSキーフレームアニメーションを活用した本番パブリッシング02（長方形座標変更ロードアニメーション）
- CSSキーフレームアニメーションを活用した本番パブリッシング03（ダブルボーダーレディアスアニメーション）
- 仮想クラスhover活用した実戦パブリッシング01（オーバーすると詳細説明表示される商品一覧）
- 仮想クラス hover 活用した実戦パブリッシング 02（マウスオーバーすると現れるツールチップの作成）
- バーチャルクラス hover 活用した実戦パブリッシング 03
- 仮想クラス hover 活用した実戦パブリッシング 04（上下に分離されるホバーナビゲーションエフェクト）
- 仮想クラス hover 活用した実戦パブリッシング 05（アプリ UI レイヤ 3D ホバーアニメーション）
- 仮想クラス before after 活用した実戦パブリッシング 01 (before after 基本使用法)
- バーチャルクラス before after 活用した実戦パブリッシング 02（アニメーションホバーナビゲーションエフェクト）
- 仮想クラス before after 活用した実戦パブリッシング 03（SNS アイコンアニメーション）
- 仮想クラス before after 活用した実戦パブリッシング 04 (content attr を活用したテキストナビゲーション)
- 入力フィールドデザインを飾る仮想クラスを活用した本番パブリッシング（フォントアサム使用した入力フィールド）
- シーケンスチェック 仮想クラス活用した実戦パブリッシング 01（アニメスキルプログラス）
- シーケンスチェック 仮想クラス活用した実戦パブリッシング02（アニメスキルプログラス、delay）
- シーケンスチェック 仮想クラス活用した実戦パブリッシング 03（Flexbox活用したギャラリーイメージアコーディオンナビゲーション）
- 拡張選択者と一緒に仮想クラス checked 本番パブリッシング 01（アニメハンバーガーボタンを作る）
- 拡張選択者と一緒に仮想クラスchecked本番パブリッシング02（アニメーションサイドメニューを作成）
- 拡張選択者との仮想クラス checked 本番パブリッシング 03 (タブメニューコンテンツの作成)
- 拡張選択者との仮想クラス checked 本番パブリッシング 04 (タブコンテンツ - Opacity)
- 拡張選択者との仮想クラス checked 本番パブリッシング 05 (タブコンテンツ – Opacity アプリケーション)
- 拡張選択者との仮想クラス checked 本番パブリッシング 06 (タブコンテンツ - Slide)
- 拡張選択子と一緒に仮想クラスチェックされた本番パブリッシング07（Testimonialタブスライダー）
- Pure CSSコンテンツスライダプロトタイプ01（フルスクリーンタブコンテンツスライダプロトタイプ）
- Pure CSSコンテンツスライダプロトタイプ02（フルスクリーンタブコンテンツスライダアプリケーション）
セクション 4. HTML+CSS 本番パブリッシング制作 with JQUERY
- HTML+CSS本番パブリッシング制作 with JQUERY - タブメニューコンテンツ（スタイル01）
- パブリッシャーとしてぜひ！知っておくべきJavaScript、変数（var）と条件文（if） - 20歳の大人のチェック
- JavaScript変数と条件文を使用したスターポイントサイクルの実績パブリッシング with JQUERY
- タブメニューコンテンツ - スタイル02（プロトタイプ） with jQuery
- タブメニューコンテンツ - スタイル02（本番制作） with jQuery
- マウスを上げると背景画像を変更する with jQuery
- [Part 01] ショッピングモールアイテムUIホバーエフェクト - ワイヤフレーム設計、重要機能制作
- [Part 02] ショッピングモールアイテムUIホバーエフェクト - 詳細HTML作成と詳細CSSデザイン
- [Part 03] ショッピングモールアイテムUIホバーエフェクト - ジェイクエリー相互作用を作る
- [Part 01]アコーディオンコンテンツスライド - ワイヤフレームデザイン
- [Part 02] アコーディオンコンテンツスライド - 詳細内容 公開
- [Part 03]アコーディオンコンテンツスライド - インタラクションジェイクエリ
セクション 5.ビデオバックグラウンドを活用したランディングページ本番パブリッシング with jQuery
- [Part 01] ビデオバックグラウンドを活用したランディングページ - ウェブフォント、動画を制御する、ロゴ
- [Part 02] ビデオバックグラウンドを活用したランディングページ - アニメコンテンツ制作
- [Part 03] ビデオバックグラウンドを活用したランディングページ - フルスクリーンナビ（トリガー、モーダルデザイン）
- [Part 04] ビデオバックグラウンドを活用したランディングページ - フルスクリーンナビゲーション（モーダルウィンドウジェイクエリー相互作用）
- [Part 05] ビデオバックグラウンドを活用したランディングページ - ビデオオーバーレイをかける
セクション6.本番Webページの公開 - ログイン画面のUIデザイン
- [Part 01] ログイン画面UIデザイン（製作ノート、HTML構造設計する、ファビコンを入れる）
- [Part 02] ログイン画面UIデザイン（CSSデザイン - サイズ調整と配置）
- [Part 03] ログイン画面UIデザイン（CSSデザイン - ボタンデザインとチェックボックスとLabel）
- [Part 04] ログイン画面UIデザイン（CSSデザイン - before afterで区切り線デザイン）
セクション7.中級レベルJump Upパブリッシング理論とヒント（Tip）
- WebパブリッシャーのためのChrome拡張機能の推奨（6つ）
- aタグアンカーを作成し、2つの方法でSmooth Scrollingする（ジェイクエリプラグイン、CSSプロパティ）
- body内で別のhtml読み込むiframeを活用する
- input と checked を活用した拡張選択子（隣接選択子、兄弟選択子、属性選択子）
- インラインJavaScriptを活用する（onclick JavaScriptイベント）
- パブリッシング講師が講義がうまくいかないかを区別する（display属性の理解度）
- 相対フォントサイズem単位とrem単位を理解する
- 親要素の値を継承するinheritを理解する
- CSS calc() 算術式（四則演算）
- CSSで変数var（）を使用する
- 仮想クラスの花（：before：after）の使い方
- ハードコーディングでイメージマップを作成する
セクション8. [ダウンロード]サンプルの作成に使用されたソースファイルと完成した本
- [完成版] HTML + CSS本番パブリッシング
- [完成版] HTML+CSS 本番パブリッシング with jQuery
- [完成版]ビデオバックグラウンドを活用したランディングページ本番パブリッシング with jQuery
- [完成版]本番ウェブページパブリッシング - ログイン画面UIデザイン
- [ダウンロード] ビジュアルスタジオコード（Visual Studio Code）とエミット（Emmet）
インタビューと就職を呼ぶパブリッシャー 個人ポートフォリオ ホームページ制作スクリプト、レイアウト、インタラクティブウェブ、インタラクティブウェブ、ウェブデザイン、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン機能士実技試験、ブートストラップ、ブートストラップ、css frameworks、フレームワーク
こんな方に
おすすめです
学習対象は
誰でしょう？
初めてウェブコーディングを始める方
ウェブサイトのメンテナンス修正補完を独自にしたい方
ウェブデザイナーからウェブパブリッシャーに職業を変更したい方、または HTML+CSS+JQUERY パブリッシングを強化したい方
Web 出版に関する理解を深めたいWeb プランナー
フロントエンド パブリッシングの理解を深めたい開発者
Webデザイン機能士実技試験を準備する方
前提知識、
必要でしょうか？
基本的なコンピュータ利用能力とインターネットブラウザの使用能力
コーディングのための基本的な英語タイピング能力
12,764
受講生
762
受講レビュー
2,114
回答
4.9
講座評価
23
講座
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704
カリキュラム
全体
142件 ∙ (41時間 42分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
174件
4.9
174件の受講レビュー
bombambeee9646受講レビュー 2
∙
平均評価 5.0
5
48% 受講後に作成冷静に言います。 母学院150万ウォン出して6ヶ月聞く この講義5万ウォン出して、ただ1日2時間ずつ1ヶ月ぶりに参考聞いてみてください。 余計な理論のようなことなしに本当の盲目が、核心だけを教えてくれます。 （F母オンライン講義で初講義へのHTML歴史を見て1秒カット払い戻し） 通常、オンライン講義をしています。 後ろに本番パートが難しいか来たら説明する面倒なのか、ペースが履いて速くなるのか分からないが、説明しなかったコード書きながら速度は4倍速に速くなるのに ここは初めてペースのまま初心者合わせて最後まで行きます。 難易度？ 率直に中学校以上卒業したのにこの講義が難しかったらパブリッシングは今生に縁でないと思ってもいいほど親切で簡単です。 望む点？ 1. ワンページでもウェブページ一つ全体をパブリッシングする実務があってほしいです（ショッピングモールのように） 2. HTML、CSSレイアウトを普通一つ一つ作るよりどこかが広がっていますが、そんな蜂蜜チップサイトも共有していただきありがとうございます。
- codingworks知識共有者
こんにちは。コーディングワークスです。 足りない講義にあまりにも誇りに思って恥ずかしいです。 私は今学園で講義をしていますが、私の鉄則は '知らないコードを使って生徒に覚えておいてください'と言うのは絶対にしません。 知らないコードを書いて結果を出すのは決して望ましくないと思います。私も知らないことが多く、学生に理解させようと簡単な方法を常に悩んでいます。 今講義聞く '実践パブリッシング例制作過程'に続いておっしゃったワンページでレスポンシブウェブサイト全体制作過程を最初から最後まで一緒に作る講義はレコーディング中です。ウェブサイト全体をパブリッシングする講義だから、映像制作時間がかなりかかりました。もともとこれを先にオープンしようとしましたが、遅くなる風に本番パブリッシング講座先にオープンしました。 ご存知でしょうが、パブリッシングの中で最も難しいパートがウェブサイト全体のレイアウトのためのHTMLワイヤフレーム設計が一番重要なのですが、私が特にウェブサイト全体をパブリッシングする過程を講義するのが上手い方です。一生懸命ご用意しておりますので、少しお待ちください。 大変な時期ですが、パブリッシング一生懸命勉強されるほど、必ず十分な報酬に戻ってくると確信しています。 良いレビューもう一度ありがとうございます。^^
- ann
受講レビュー 13
∙
平均評価 5.0
5
45% 受講後に作成新入パブリッシャーで会社に通いながら本当に幕を開けてよく知らなかった部分を解消させてくれるちょうど良い講義だったようです。まず、何よりも理解がとてもよくなります。コーディングワークスの講義は、概して目の高さに合った、実務経験が豊富なおかげで、会社で役に立つべき部分が本当に多かったです。講義も無制限なので、忘れて混乱するたびに探して見ることができてとても良いですね、他の講義も聞く予定です。本当にありがとうございます:)
- codingworks知識共有者
良い言葉ありがとうございます〜^^
- ch929415
受講レビュー 4
∙
平均評価 5.0
5
71% 受講後に作成現在、コーディングワークス熱工中のフロントエンド開発者志望生です。 HTML、CSSを他の本や講義で一度見ましたが、ちゃんとした画面一つ作るのは大変でした。 本当に偶然にもYouTubeアルゴリズムによってコーディングワークス講義を2つくらい見た直後に決済しました。 この講義を聞く前には明らかに講義も見て本も見たが、マークアップが見慣れにくかったが 今は今日行う分量の例をあらかじめ実行してみて実装する楽しみに陥っています。 リアクトを勉強しなければなりませんが、マークアップ作業をもっと一生懸命勉強していますねㅎㅎㅎ 私の場合は、ジェイクエリーではなくバニラJavaScriptでDOM制御をするのが楽で、ジェイクエリーの講義は聞かれていませんが、コーディング入門者の方は、ジェイクエリーで動的な画面を作ることを一度経験してみてほしいと思います。進むと一緒に聞く予定です。 いったん1月末までシーズン2と中級者CSS理論緩強を目指しています。 このような講義を作ってくれてありがとう。
- codingworks知識共有者
具体的な受講評で予備受講生たちに良い参考になりそうです。
- kjugoogoo7747
受講レビュー 1
∙
平均評価 5.0
5
80% 受講後に作成他の講義も聴いていますが、受講評のできる講義を見つけられずここに書いています！本当に本当にパブリッシングレクチャーでイチオシ！ 先生講義で勉強して新入パブリッシャーとして就職していつのまにか1年目になりました！この講義で実際のポートフォリオ作業をして面接まで見た時が気になります！作業していて気になる部分は今もすっかり申し込んでいた講義たちを探してみて、アップデート上がってきた講義があればまた探してみて先生のYouTubeも探してみています。先生は本当にありがとうございました。 ㅠㅠこれからも着実に川のたくさんやってくれてよかったです！今は年俸交渉を控えているのにflex、grid、scssなど教えてくれたことがなくて、私の自信の根本になってくださる先生です。応援してください！ ㅎㅎありがとう、先生
- codingworks知識共有者
講義のすばらしい受講評価ありがとうございます〜^^
- toisaj4187
受講レビュー 7
∙
平均評価 5.0
5
18% 受講後に作成最高の講義です これを聞いて独学で就職して2年目です。
- codingworks知識共有者
遅い受講評ですが、このような受講評を見て他の受講生たちが力を出すことができるようです。ありがとう〜！
￥5,816
codingworksの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![モダン ウェブ インタラクティブ CSS3 [PART2/3]Course Thumbnail](https://cdn.inflearn.com/public/courses/335745/cover/db39333d-68a5-4ca7-9629-dac891711a94/335745.jpg?f=avif&w=420)
![モダン ウェブ インタラクティブ CSS3 [PART1/3]Course Thumbnail](https://cdn.inflearn.com/public/courses/335744/cover/32ae213b-41d5-4c80-8408-b64b8d286b58/335744.jpg?f=avif&w=420)
.png?f=avif&w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[2025年出題基準] Webデザイン技能士実技試験完全ガイドCourse Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]Course Thumbnail](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
![[幻想的な足足]デザインからコーディングまでCourse Thumbnail](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![本格的に学ぶ JavaScript: オブジェクト指向プログラミング マスター & 戦略型AI 三目並べ 実践 Part2 [中級編]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336946/cover/01jv48md3p02hgkwt4yh1svf3j?f=avif&w=420)
