HTML+CSS+JS 実戦ポートフォリオ(シーズン2)は、中級パブリッシングで、さまざまな実戦例を学習することで、パブリッシングの中級スキルに必要な基本を習得します。特に、さまざまな実戦例と全体レスポンシブWebサイトの作成を通じて、中級パブリッシングに自信がつき、授業で作成した作品は、就職のための個人ポートフォリオとして貴重な資料になります。約38時間の十分な学習量と、実戦例を通じて中級パブリッシングのノウハウを習得するパブリッシングの授業です。
HTML+CSS+JSの実践例で、出版中級スキルを向上させる
ウェブサイトの公開中級レベルのスキルとノウハウの向上
ブロック要素とインライン要素の正確な概念と活用
position と transform の正確な概念と実用的な活用
テキストエディター Visual Studio Code と必須拡張機能の使い方
公開のための jQuery & JavaScript の基本
パブリッシャーにとって必須の jQuery JavaScript の活用例
さまざまなレスポンシブ ウェブサイトの作成による中級レベルのスキル向上
ポートフォリオの作成は、完全なレスポンシブ ウェブサイトの作成プロセスを通じて行われます。
中級に上がる本番Webパブリッシング！
HTML+CSS+JS本番ポートフォリオシーズン2。
シーズン2は、シーズン1の本番パブリッシングの例と重ならない、まったく新しい本番の例を中心に作成されました。就職のためのパブリッシングポートフォリオの成果を作ってみるだけに、パブリッシングの実力を中級以上にSkill-Upしたい方にふさわしい講義です。
HTML+CSS+JS実践ポートフォリオシーズン2は、中級パブリッシングのためのパブリッシング必須理論とHTML+CSSパブリッシング実践例とjQuery（ジェイクオリ）、Javascript（JavaScript）実践例、2つのフルレスポンシブウェブサイト制作過程を含む27種類以上の実践例制作過程で構成されています。合計38時間ほどの講義時間と同じくらい忠実な内容と体系的な理解を助ける説明で制作されたパブリッシングポートフォリオ実戦制作映像を視聴して学習できるようになります。
Q. HTML+CSS+JS 実戦ポートフォリオシーズン1を聞かずにすぐにシーズン2を受講してもいいですか？
シーズン1を必ず聞く必要はありません。ただし、シーズン1ではパブリッシング基礎の説明を詳しく説明しているのに対し、シーズン2ではそのような部分は最小化する代わりに、より深い内容を扱っています。シーズン1の例をまず見てから、自分で十分に製作可能なレベルであれば、すぐにシーズン2に来ることもできます。しかし、シーズン1を通じて説明する内容と、そして制作される例はシーズン2と重複しないため、シーズン1の完成後にシーズン2を受講することをお勧めします。
HTML+CSS+JQUERY ポートフォリオ本番パブリッシング(シーズン1)
さまざまな実践例で学ぶパブリッシングの基本
Q. HTML+CSS+JS 本番ポートフォリオシーズン2で作成された完成したHTMLを提供しますか？
はい。受講生の参考資料ダウンロードセクションでは、ビデオで作成されたすべての実践例の完成した本を含む圧縮ファイルを入手できます。 （HTML、CSS、JS、画像、参照サイト、ソーステキスト、ワイヤフレームPDFなど）
※講義映像開始前にダウンロードされた圧縮ファイルをプッシュし、index.html、style.cssファイルを削除して開始してください。ソースフォルダとimagesフォルダを除いて、HTMLの基本構造から作成してください。もし完成版を参照する必要がある場合は、いつでも圧縮ファイルを解凍してみてください。
Q. 受講前に先行するウェブコーディング能力はどのくらいですか？
まず、HTML + CSSの基本的な理解が必要です。たとえば、float、position 属性の理解が不足している方はついてきてちょっとめちゃくちゃです。シーズン1ではこのような部分も講義で繰り返し説明しますが、シーズン2は基本的なパブリッシング能力を備えた方々を念頭に置いて製作された講義です。参考にしてください！
さらに、JavaQuary JavaScriptの先行能力はあまり必要ありません。ただし、ジェイクエリの不可欠なコア理論の理解が必要です。 （クラス制御、要素ナビゲーションなど）講義全体でジェイクエリーベースで相互作用を作っており、JavaScriptは例を経験する面で使用するため、JavaScript能力への負担はありません。
Q.レッスンでどのテキストエディタを使用しますか？
ビジュアルスタジオコード（Visual Studio Code）で制作された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。テキストエディタはビジュアルスタジオコード（Visual Studio Code）を使わなくても、受講生本人が楽によく使っているテキストエディタがあればそれを使っても構いません。
ビジュアルスタジオコードのダウンロード(クリック)※下記ビジュアルスタジオコード（Visual Studio Code）関連映像をぜひ！ご覧になり、サンプル制作を開始することをお勧めします。ビジュアルスタジオコードエクステンションのインストールPDFファイルのエクステンションはできるだけインストールしてください。
Q. サンプル制作に使用された画像は著作権のある画像ですか？
サンプル制作に使用された画像は、著作権のない画像を使用しました。ピクサーベイ、プレフィックで検索し、例に必要なイメージとして使用しました。受講生の方は講義映像例制作1回目には添付の画像とさせていただきますが、個人ポートフォリオのホームページに掲載される場合、ピクサーベイ、プレピックで画像を是非変更してアップロードしてください。
Q. 例の学習順序は、最初から順に学習するのですか？
サンプル学習では、順序を守る必要はありません。必要なセクションで必要な例を学ぶことができます。 セクションの順序が難易度が低いから高いに上がるわけではありません。例の種類が異なるだけです。ただし、ウェブサイトプロトタイプ（Web Site Prototype）の制作過程と実戦反応型ウェブサイトは学習量が多いので、始めれば続いて最後まで学習することをお勧めします。
シーズン2 [必須理論] 映像とシーズン1 [必須理論] 映像を先に学習し、実戦例制作に必ず進む必要はありません。本番の例を制作したが、例の制作から出てきた内容が必須理論映像にあれば、学習次元でもう一度見れば良いです。実践例の製作に使用される理論をすべて必須理論に入れることはできませんので、実戦例と必須理論を並行してみてください。
[TMI] パブリッシングを勉強して実践例を製作する際に知っておくべき理論がとても多いです。心のようになった理論的な部分をすべて整理して映像を作りたいのですが、現実的に難しい部分があります。
Q. 実践例 完成本と理論例 完成本はどこからダウンロードできますか？
完成本をどこからダウンロードするかと質問掲示板にお問い合わせの方が時々あります。レッスンビデオで作成されたすべての完成した本ファイル（html、css、js、画像ファイルなど）は、下の最後のセクションにすべての完成した本をダウンロードできます。
Q）例制作しながら出てくる中級CSS理論説明映像はありますか？
A） 今のプロセスは初級パブリッシングの例を作るプロセスではありません。中級パブリッシングの例を作成するプロセスです。だからCSS初中級理論はある程度知っておくべきです。だから必ずしもよく知る必要はありません。 CSS超中級理論は、例を作成しながら継続的に繰り返します。そして、コーディングワークスのYouTubeパブリッシングチャンネルに[中級理論] CSS中級理論というプレイリストに、サンプル制作に必要な必須の中級理論映像が詳しいので、今のコースを聞きながら中級理論を並行すれば良いです。
Q)このコースを受講すれば、実務でパブリッシャーとして働くことができますか？
A）このプロセスにあるパブリッシングの内容をすべて理解し、よく活用できれば可能です。しかし、パブリッシングというのに十分な経験がなければ、実務で働くことができます。今、コースのようなものをもう少し勉強し、全体のウェブサイト制作過程をいくつか勉強すれば良いと思われます。もちろん個人ポートフォリオのホームページ制作もしていただく必要があります。パブリッシングが進入障壁が思ったより高い方です。映像 一度ご覧いただくとその中に内容とノウハウが共に学生に伝わるわけではありませんので、上記の学習方法を通じて私のものにする過程をお願いします。
HTML+CSS+JS ポートフォリオ実践パブリッシング(シーズン1)とHTML+CSS+JS ポートフォリオ実戦パブリッシング(シーズン2)を十分に理解しながら頑張れば、次の学習ロードマップが自然にできます。
Q. 勉強して知らないことがあれば質問はどこにありますか？
A. ご質問がございましたら、[質問＆回答]掲示板に文を残すとすぐではなくても確認されれば答えをいたします。そして質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。だから質問するときは、気になる内容と一緒に作成中のHTML、CSS、JQUERYコーディング画面をキャプチャして添付していただくと、回答がずっと簡単です。
Q. レスポンシブウェブサイト制作講義がありましたが、どれを先に聞くべきですか？
A. レスポンシブウェブサイト全体を制作する過程を聞く前に、今のコースとシーズン2で十分理論と実戦例制作に対する実力を高め、レスポンシブウェブサイト全体の制作過程に来ることをお勧めします。レスポンシブウェブサイト全体の制作過程なので、今の過程のように部分部分の詳細な扱いが難しいので、本番パブリッシングの過程で十分に訓練され、ウェブサイト全体の制作過程で来れば理解度がはるかに高いと考えられます。
Q. 講師様授業中にパブリッシャー就職本当の実戦ガイドを先に見ればいいでしょうか？
A. パブリッシングスキルをより身につけることも重要ですが、まずパブリッシャーとして基本基を備えることが優先されなければなりません。パブリッシャー就職実践ガイド電子ブック（PDF）では、パブリッシング基本基とは、好ましいコーディング習慣と原則、キャリアのようにパブリッシングするなどパブリッシャーとして必ず知るべき内容を慎重にまとめました。パブリッシャー就職実践ガイド電子書籍（PDF）をまず見て、パブリッシング基本基についての理解度を十分に持って学習することをお勧めします。下の画像をクリックすると、授業紹介内容をご覧いただけます。
ドロップダウンナビ（CSS方式、3タイプ） 
ドロップダウンナビ（jQuery方式、3タイプ）
個人プロフィールカード（ダークモード）
カスタムチェックボックスログインフォーム
Website Prototype - ネイバーレスポンシブ会員登録フォーム
ジェイコーリーレスポンシブアニメーションモーダル
Netflix FAQ with jQuery 
ネットフリックス公式サイトPC ver。 
ネットフリックス公式サイト Mobile ver. 
Chromeブラウザダウンロード公式サイトPC ver。 
Chromeブラウザダウンロード公式サイトMobile ver。 Q) ブラケットテキストエディタは使用できませんか？
以前のバージョンからAdobeから落ちてエクステンションをインストールすることはできず、問題が多く、ブラケットを使用できなくなりました。しかし、ブラケットテキストエディタの新しいバージョンが登場し、すべてが正常に動作するブラケットになりました。
ビジュアルスタジオコーディネートを使用すると、ブラケットも再利用できます。
既存のバージョンはアンインストールして、公式サイトから新しいバージョン（Version 2）をダウンロードしてインストールしてください。
ブラケット（Brackets）公式サイト：https: //brackets.io/
Q）レッスンでどのテキストエディタを使用しますか？
ビジュアルスタジオコード（Visual Studio Code）で制作された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。すべての講義映像はビジュアルスタジオコード基準で説明しています。
ビジュアルスタジオコード（Visual Studio Code）ダウンロード（クリック） [参考にしてください！] HTML + CSS + JSポートフォリオ本番パブリッシング（シーズン1）無料ビデオ
下の映像はHTML+CSS+JSポートフォリオ実戦パブリッシング(シーズン1)講座無料映像です。
シーズン1を受講しなくても聞きながら学習できます。下の講義映像はシーズン2で必要な内容もたくさんあるからぜひ！ご覧になることをお勧めします。
HTML+CSS+JQUERY ポートフォリオ本番パブリッシング(シーズン1)
様々な実践例で学ぶパブリッシング基礎
▲国費支援パブリッシング過程 私に4ヶ月半程度学んだ学生ですが、就職したとカトクが来ました。
▲コーディングワークス個人ポートフォリオ制作オフライン講義受講生の面接就職結果カトクを受けました。 (2023.4.24)
先生こんにちは:)
先生 Inflearn 講義を聞いた学生キム・オジョンです。
今夏のプライベートポートフォリオに関してアドバイスを得ようとメール送信した学生です。
覚えていますか？😊😊
相違ではなく、
先生にアドバイス得たポートフォリオでパブリッシャー就職成功したというニュースを伝えようとメールを送ります！
でも！
人に載せたポートフォリオを見て会社側から先に連絡が来て、ズームで面接を見て合格しました！
会社側では希望年俸を合わせてデザイン、開発業務をしない本当にパブリッシャー！仕事だけができる会社に入るようになりました。
キャリア職のパブリッシャーを求める会社でしたが、新人の私に連絡が来て、なぜ私に連絡を与えたのかと聞いてみました。
他の人のポートフォリオもたくさん見ましたが、私のポートフォリオで見た「機能定義書」が目立って連絡をいただきました
これがみな先生の講義のおかげだと思います。
先生の講義を聞かなかったら、私もちょうど普通のポートフォリオになりましたが、先生が言ってくれた蜂蜜のヒントで就職に成功することができました！
実際にはお会いできませんが、
ポートフォリオを作る中、先生の講義を見ながらとても頼りにして信じて頑張りました！
学園で長い時間の授業を聞きながら積み重ねた実力より先生の講義を聞いてポートフォリオを作った3ヶ月間の実力がすごく上昇したことが感じられます
切に欲しかったし、
先生がおっしゃっていた通り信じていたら、本当に良い結果が出ました。
本当にありがとうございました！
コロナに注意してください。
また良い講義で会いたいです:)
ありがとうご挨拶お願いします
これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一面面接に合格して出勤することにしました。 本当にありがとうございました。
実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が、本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ～ 😊😊
その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。
これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング～！
学習しながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合は、HTML、CSS、JSのコードをすべてアップロードしてください。
質問文にコードなしでグローだけ問題を説明すれば、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。
▲該当の講義コミュニティのよくある質問の見方をまず確認してください〜
コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。
コーディングワークスパブリッシングYouTubeチャンネル： https: //www.youtube.com/codingworks
セクション0.シーズン2 - 講義紹介と完成版のプレビュー＆制作ノート
セクション 1. ビジュアルスタジオコード (Visual Studio Code) の使い方と必須エクステンション
セクション 2. [必須理論] パブリッシング実践例制作のための理論とヒント（Tip）
セクション3.シーズン2 - CSSボタン＆ナビゲーション
セクション4.シーズン2 - CSSキーフレームアニメーション
セクション5.シーズン2 - CSSホバーエフェクト
セクション6.シーズン2 - CSSセクションUIデザイン
セクション7. シーズン2 - ウェブサイトプロトタイプ（Web Site Prototype）制作
セクション8. JavaScript＆JayQuery（JavaScript、jQuery）の実践例
セクション9.シーズン2 - 実戦レスポンシブウェブサイト - ネットフリックス公式サイト
セクション 10. シーズン2 - リアルレスポンシブウェブサイト - Chromeブラウザダウンロード
セクション11.完成した本と参考資料のダウンロード
コーディングワークスは現在までに300人以上の国費パブリッシングコースの学生にパブリッシング理論、活用、個人ポートフォリオホームページ制作講義を行っています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完全にガイドしながら、学生のほとんどのコース終了後すぐに就職ができるように、長年にわたりパブリッシング講義だけが専門的にやってきた講師です。また、Inflearnでパブリッシング関連講義を進めながら、Inflearn受講生の方々にも役に立ったとの評価も受けています。
scss, sass, flex, grid, html, css, html/css, website, ウェブパブリッシャー, パブリッシャー就職, ウェブサイト, コーディング, coding, jquery, javascript, ジェイコーリー, JavaScript, レイアウト, インタラクティブウェブ, interactive web, webデザイン、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン機能士実技試験、ブートストラップ、ブートストラップ、cssフレームワーク、フレームワーク
学習対象は
誰でしょう？
ある程度のウェブコーディングの知識がある方
中級の出版スキルを向上させたいパブリッシャーと開発者
ウェブ パブリッシャーとして就職または転職を希望する方
前提知識、
必要でしょうか？
HTML、CSS、jQuery の基本
12,580
受講生
739
受講レビュー
2,110
回答
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
全体
121件 ∙ (38時間 36分)
講座資料（こうぎしりょう）:
全体
41件
5.0
41件の受講レビュー
受講レビュー 6
∙
平均評価 5.0
5
いよいよネットフリックスとクロムクローン講義だけ聞けば頑強です。ホームページはこちらクローン2個、既存方式サイト2個、フレックスグリッド各1個モバイルWebアプリサブページ1つにするつもりです。いつ完成するのかわかりませんが... すべてのコーディングワークスのおかげですㅠㅠㅠㅠㅠ私が離職して年俸が上がれば、ダ・コワーク様のおかげです。小規模エージェンシーにぴったり最低です。最終目標はフロントエンド開発者です...tmi .. まぁ一生懸命精進して年俸ぜひ上げて海外就職も成功します。ガムガムで最高のレクチャー
lololoさん、ありがとうございます。 シーズン2の学習内容が多いのに勤勉でした。他人で遊んだときに努力したやりがいがあります。 いつも応援します。ファイティング～！
受講レビュー 67
∙
平均評価 4.9
5
シーズン1で本当に一つ一つ詳しく教えてくれてたくさん学びました。 シーズン2受講申請して見ているのにやっぱり！一つ一つ詳しく教えてくれてわかりやすいです。 信じて見る講義です。
Webdiさんに感謝します。 シーズン2もぜひ！
受講レビュー 10
∙
平均評価 5.0
受講レビュー 2
∙
平均評価 5.0
5
今年中についにシーズン2まで完講しました!! シーズン1を先に聞いてから聞いたら、進捗がスムーズでした! 今、復習しなければならないのですが、今回はウェブサイトを全部作ってみたり、レスポンシブな作業もしてみたりして、学ぶことがたくさんありました。まだポートフォリオを作るまでには長い道のりがありますが、復習を繰り返して完全に自分のものにしていきます!! 良い講義をありがとうございました。良いお年をお迎えください! 😊😊
受講評価ありがとうございます!!
受講レビュー 3
∙
平均評価 5.0
￥6,701
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![[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)
![モダン ウェブ インタラクティブ CSS3 [PART2/3]Course Thumbnail](https://cdn.inflearn.com/public/courses/335745/cover/db39333d-68a5-4ca7-9629-dac891711a94/335745.jpg?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)
