강의

멘토링

로드맵

BEST
Programming

/

Web Development

レスポンシブ ウェブサイト ポートフォリオ (Architecture Agency)

HTML+CSS+JQUERY パブリッシングによるレスポンシブ ウェブサイトの全体制作プロセスを通じて、中級レベルのパブリッシング スキルを身につけるための基本をしっかり学び、実戦的なパブリッシングのノウハウを習得します。特に、十分な説明と実作業によるウェブサイトの全体制作プロセスを経験し、個人ポートフォリオ ウェブサイトの制作に自信が持てるようになります。(レスポンシブ制作方法は、従来の float と position を利用したレスポンシブ レイアウト制作方法です。現在では、従来のウェブサイトのレイアウトはほとんど従来の方法で制作されているため、Flex と Grid も学習する必要がありますが、従来の方法のレイアウトを必ず学習して、正しく使用できるようにしてください。)

  • codingworks
HTML/CSS
jQuery
Web Design
Responsive Web

学習した受講者のレビュー

こんなことが学べます

  • HTML+CSS+JQUERY の基本理論を基に、公開の実践能力を向上させる

  • 全体的なウェブサイトの公開スキルとノウハウの向上

  • position 属性の正確な概念と活用

  • hover before after checked active 仮想クラスの理解と活用

  • CSSタブメニューコンテンツ、JQUERYタブメニューコンテンツ作成能力

  • モバイル対応レスポンシブウェブパブリッシング制作能力(メディアクエリ)

  • PC バージョンとモバイル バージョンの両方で最適化されたレスポンシブ ウェブの完全な制作機能

  • 3D 画面切り替え機能で Creative Responsive Website を作成

HTML+CSS+JQUERYレスポンシブウェブサイトポートフォリオ制作プロセス

「合計24時間以上のレスポンシブウェブサイトパブリッシング講義」

「パブリッシャー就職のための個人ポートフォリオホームページ制作コース」

「中級パブリッシングスキルアップのためのジャンプアップ理論映像」

「実務パブリッシング本当の実力のためのハードコーディングクラス」

📔コーディングワークスレスポンシブウェブサイトの制作の特徴

01)フルUI / UX - 3Dセクション切り替えアニメーション

製作されるレスポンシブウェブサイトの全体的なUXは、マウスホイールを上げ下げしながらセクションを移動する方法です。セクションを移動しながら3Dアニメーション効果を表示するので、創造的なUI / UXを表示するのに十分です。また、用意されているいくつかのオプションを変更すると、回転するアニメーションからサイズが変わる合計9つのさまざまなセクション切り替えアニメーションに変更できます。

どのセクション切り替えアニメーションを使用したくない場合は、オプションでセクション切り替えアニメーションをオフにするオプションもあります。

このセクションの切り替えアニメーションオプションの変更はとても簡単で簡単に設定されているため、JavaScriptの知識がまったくなくても十分に変更できます。

※PCレイアウトの全セクション切替UI/UXはジェイクエリプラグインで製作されます。
※PCレイアウトセクション切り替えアニメーションプラグインをダウンロードして使用するだけでなく、ユーザー設定(カスタマイズ)する過程も講義で十分学習できます。
※製作されるレスポンシブ全体のウェブサイトはクロスブラウジングも完璧にサポートするため、Chrome、Firefox、Edge、Internet Explorer(IE)で問題なく見られます。

02) クローンサイト、コピーサイトではなくコーディングワークスが直接製作したウェブサイト

今回制作されるレスポンシブウェブサイトは、コーディングワークスが直接企画からUI/UXデザインそしてパブリッシングまで、あらゆる作業を受講生のために最初から最後まで創造的に製作されたレスポンシブウェブサイトです。

一般的にクローンサイト制作講義やコピーサイト制作講義の場合、十分な理論と経験学習が可能です。しかし、コピーサイトだから、製作された結果物を修正して自分のポートフォリオウェブサイトとして使うには無理があります。しかし、今回のレスポンシブウェブサイトは、コーディングワークスが企画、デザイン、パブリッシングまで全ての過程を自ら作った結果であるため、十分な学習後のテキストや画像修正、そしてある程度のレイアウト変更で受講生の皆様の個人ポートフォリオホームページとしてご利用いただけます。

03) 講義セクション別15個の段階別完成本とPSDファイル提供

段階別完成本とは、ウェブサイト全体の制作過程で、Inflearn授業内容のセクション別に制作映像の結果物が段階別にzipファイルで用意されています。最終完成本のみを提供する場合、受講生の皆さんが困難を経験する可能性があると考え、段階別完成本を作業の途中ですべて保存して準備しました。

段階的に完成した本がなく、最終本だけがあれば発生する可能性のある問題を例に挙げると...

ジェイクエリプラグインを修正してUI / UXに基づいて起動する必要がありますが、この部分で問題が発生した場合は、起動も正しくできません。このような場合は、最初の手順を完了したzipファイルを解凍して次のセクションに従ってください。できない部分は2回目でもう一度勉強すれば良いと思います。しかし、最終版だけを提供すれば開始できない場合が生じると思われ、段階的に完成本を提供します。

もちろん、最初から最後まで、あなたが純粋に作ったファイルで最終的な成果物を作るのが最善ですが、今回のレスポンシブウェブサイト制作の目的は、成果物を作り出すよりも結果物を作り出す過程、そしてその過程でパブリッシングの多くを学ぶことです。目的ははるかに大きいです。その過程の中で、全レスポンシブなウェブサイトを作っていくパブリッシング過程、ノウハウ、実戦理論を学ぶことです。

※Photoshopで製作されたUIデザインPSDファイルが資料室にあります。後で個人ホームページ制作の際に受講生の皆様の個人用途に合わせて修正してご使用ください。

※Photoshop UIはPhotoshop CC 2019バージョンで製作され、製作に使われたフォントも含まれています。

04) レスポンシブフレームワークを使わない100%ハードコーディングモバイル制作

今回のレスポンシブウェブサイトの製作は、100%ハードコーディングして製作する方法で製作されました。

ブートストラップなどのレスポンシブCSSフレームワークを使用すると、レスポンシブウェブサイトの作成がはるかに簡単になります。しかし、ハードコーディングしてレスポンシブWebを作成する経験と実力がある状態でレスポンシブCSSフレームワークを使用することは大丈夫ですが、ランダムレスポンシブCSSフレームワークにのみ依存しながらレスポンシブWebを作成することはお勧めできません。

もちろん、最初から一つ一つハードコーディングしてレスポンシブウェブを作るのは難しいです。手もすごくたくさん行きます。しかし、このような過程の中でパブリッシングの実力が急成長すると思います。

今回の反応型ウェブサイト制作講義では、水平配置とポジショニングはパブリッシングの基本となるfloat、position、transformを使用しました。 Flexで配置すると簡単ですが、基本が重要であるため、今回の操作ではflexプロパティを使用していませんでした。

05) 合計20時間以上の製作講義

総製作講義時間が20時間を超えます。制作講義時間が長いです。私が考えても長いです。
作るのに私も大変でした。 😢😢
説明虫と同じ説明が何度も入っています。同じ話を何度もするのも大変でした。

このようにしなければならないと考えて長くする私も大変でしたが、やはり講義を見る受講生も大変だと思います。
でも、ゆっくりゆとりと考えながら理解しながら作るのが大事だと思いました。

先ほど申し上げましたが、目的は早い時間に結果物を作るのではなく、作っていく過程で経験とパブリッシングノウハウ、実戦スキルを上げることで考えるために作ってみると授業映像が多く長くなりました。

06) 製作講義に使用されたテキストエディタ

今回のレスポンシブウェブサイト制作講義に使用されたテキストエディタはブラケットです。もちろん、ビジュアルスタジオコードなどの受講生がおなじみのテキストエディタを使用してください。ただし、リアルタイムプレビュー機能を持たないテキストエディタはフォローしてください。

※Live Preview機能のあるBracketsまたはVisual Studio Codeをお勧めします。


🙋🏻‍♂️ 画面切り替えジェイクエリプラグインの設定は難しくありませんか?

どうやら慣れていない方には、画面切り替えジェイクエリプラグインの設定が少し複雑な方です。
画面切替ジェイクエリプラグインセッティングは映像見ながら十分に行うことができますが必ずしも学生自らする必要はありません。

その画面切り替えジェイクエリプラグインの設定がうまくできず、パブリッシングの実力があっていないと決めるのはまったくありません。負担しないでください〜^^

プラグインの設定が複雑で難しい方のためにステップバイステップの完成版が用意されています。
ステップバイステップの完了は、プラグイン設定が完了したすべてのフォルダとファイルであるため、ダウンロードして解凍し、次のセクションに従ってください。

画面切り替えジェイクエリプラグインの設定が完了したファイルは、[セクション01.段階別完成本]または[セクション02.段階別完成本]受け取ればよく、モバイル全体のレイアウトとナビゲーションパブリッシング完成本を受け取り始めるには[セクション03.段階別完成本]を。

セクション 18. 資料のダウンロード(段階別完成本、ビジュアルコードの使い方、Photoshop UIデザイン)

  • [セクション01.ステップバイステップ完了]レイアウト全体を制御するプラグインの使い方とカスタマイズ
  • [セクション02.段階別完成本] 全体レイアウト ワイヤフレームパブリッシング(PC ver.)
  • [セクション03.段階別完成本]モバイル全体のレイアウトとナビゲーションパブリッシング(Mobile ver.)

🙋🏻‍♂️ 講義受講のための選手知識

今回のレスポンシブウェブサイト制作の難易度は入門または初級は難しいです。受講レベルは中級に似ているか近くになければよく従うことができます。少なくとも初級ではないと思われる方ならフォローしてくるのに大きな難しさではないと思います。

受講のための選手の知識としては、HTML+CSSに関する基本的な内容を知っていれば良いです。だからといってHTML+CSSを上手にする状態である必要はありません。 20時間を超える講義で余裕を持って十分説明しています。もし映像をご覧ください 受講生のコーディングが遅くてHTML+CSS作成が遅い場合は、映像を停止してHTML+CSS作成をして、次のステップに従ってください。

映像を止めてコーディングし、他の人より時間が少し必要なだけです。むしろ、落ち着いて自分でコーディングする時間があるという点でより良いです。あまり心配しないで一緒に勉強してほしいです^^

の講義の中には、「HTML + CSS + JQUERYポートフォリオ中級実践パブリッシング講義」があります。この講義にある理論内容と実戦例制作内容が今回のレスポンシブウェブサイト制作必要な内容がほぼすべて入っています。まもなく、 HTML+CSS+JQUERY 基本機をしっかり作れる講義だと思います。

今回のレスポンシブウェブサイト制作からいくつかを除いて HTML+CSS+JQUERY ポートフォリオ中級実戦パブリッシング講義にある内容を1回目程度学習していただくと、フォローアップがはるかに簡単になると思います。

結論は...

入門や初級でなければついてくるのは問題ありませんが、ちょっと凄い感じになりますよ。
他の講義を通じてHTML+CSSの基礎を身につけて来られたら、十分に追いつくだけでなく、なぜこれをするのかについての理解度を持ち、レスポンシブなウェブサイトの制作過程を終えることになると思います。


🙋🏻‍♂️講義に関する予想される質問と必読事項

Q. 例制作しながら出てくる中級CSS理論説明映像はありますか
A. '例の製作に基礎理論に出ていない中級理論が多く出ていますが、中級理論授業はどこで聞きますか? 'これらの質問が掲示板に頻繁に来ます。

今のコースは初級パブリッシングの例制作を​​する過程ではありません。初級~中級パブリッシングの例を製作する過程です。だからCSS初中級理論はある程度知っておくべきです。だから必ずしもよく知る必要はありません。 CSS超中級理論は、例を作成しながら継続的に繰り返します。そして、コーディングワークスのYouTubeパブリッシングチャンネルに[中級理論] CSS中級理論というプレイリストに、サンプル制作に必要な必須の中級理論映像が詳しいので、今のコースを聞きながら中級理論を並行すれば良いです。

Q.このコースを受講すれば、実務でパブリッシャーとして働くことができますか?

A. このプロセスにあるパブリッシングの内容をすべて理解し、よく活用できれば可能です。しかし、パブリッシングというのに十分な経験と様々な種類のウェブサイトを作った経験がなければ、実務で働くことができます。今、コースのような講義をさらに勉強し、全体のウェブサイトの制作過程をいくつか勉強すれば良いと思います。もちろん個人ポートフォリオのホームページ制作もしていただく必要があります。パブリッシングが進入障壁が思ったより高い方です。映像 一度ご覧いただくとその中に内容とノウハウが共に学生に伝わるわけではありませんので、上記の学習方法を通じて私のものにする過程をお願いします。

Q. ウェブサイト制作しながら出てくる理論を説明する理論パーツが別にありませんでしたか?
A. 今受講するコースは入門初級コースではなく、中級レベルのレスポンシブウェブサイト全体制作パブリッシング講義です。基本理論パートと実戦例制作学習は、異なるコースを通じてスキルアップすることをお勧めします。

Q. 勉強して知らないことがあれば質問はどこにありますか?
A. ご質問がございましたら、[質問&回答]掲示板に文を残すとすぐではなくても確認されれば答えをいたします。そして
質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。だから質問するときは、気になる内容と一緒に作成中のHTML、CSS、JQUERYコーディング画面をキャプチャして添付していただくと、回答がずっと簡単です。

Q. 講師様授業中にパブリッシャー就職本当の実戦ガイドを先に見ればいいでしょうか?
A. パブリッシングスキルをより身につけることも重要ですが、まずパブリッシャーとして基本基を備えることが優先されなければなりません。パブリッシャー就職実践ガイド電子ブック(PDF)では、パブリッシング基本基とは、好ましいコーディング習慣と原則、キャリアのようにパブリッシングするなどパブリッシャーとして必ず知るべき内容を慎重にまとめました。パブリッシャー就職実践ガイド電子書籍(PDF)をまず見て、パブリッシング基本基についての理解度を十分に持って学習することをお勧めします。下の画像をクリックすると、授業紹介内容をご覧いただけます。


💡PCレイアウトセクション切り替えプレビュー(Preview)

▼セクション切り替え#01:3D回転

▼セクション切り替え#02:サイズ拡大縮小

▼セクション切り替え#03:前のセクションから次のセクションを引く

▼セクション切り替え#04:サイズ変更&透明度交差

▼セクション切り替え#05:一般的なアニメーションセクション切り替え

▼セクション切り替え#06:フレームスタイルでサイズ変更後に移動


💡 Mobile レイアウトUI/UXプレビュー(Preview)

▼モバイルUI/UX#01:フルモバイル画面

▼モバイルUI/UX#02:モバイルナビゲーション

  • ジェイクエリ相互作用(addClass、toggleClass、removeClass)
  • マウスホイールを検出してヘッダーデザイン、上にボタンデザインを変更するJavaScript
  • モバイルナビゲーショントリガーアニメーション
  • ジェイクエリーでGNBを見て隠す
  • Aタグアンカーでセクションidを探す
  • ジェイクエリプラグインまたは純粋なCSSプロパティでスムーズなスクロール

▼モバイルUI/UX#03:モバイルホームセクション(CSSキーフレームアニメーション)

▼モバイルUI/UX#04:モバイルプロジェクトセクション(CSSタブメニューコンテンツ、Slick.jsスライダー)

▼モバイルUI / UX#05:モバイルプランセクション(Slick.jsコンテンツスライダ responsive option)


💡PCレイアウトセクション別のUI / UXプレビュー(Preview)

▼ PC レイアウトセクション別 UI/UX #01 : Home セクション

  • 4種類の連続した純粋なCSSキーフレームアニメーション
  • オーバーレイ&背景画像アニメーション、Text Revealアニメーション
  • 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #02 : About セクション

  • filter属性を適用したホバー効果
  • 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #03 : Project セクション

  • 隣接兄弟選択、input属性選択、:checkedを活用したCSSタブコンテンツスライダ
  • JQueryプラグインを活用したSlick.js自動再生画像スライダ
  • ジェイコーリーアイフレームモーダル(Iframe Modal)を活用したプロジェクトサブページ

▼ PC レイアウトセクション別 UI/UX #04 : Plan セクション

  • JQueryプラグインを活用したSlick.jsコンテンツスライダ
  • レスポンシブ対応オプションなどSlick.js重要オプションの使い方
  • 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #05 : Awards セクション

  • ポジション属性を活用したコンテンツの並べ替えとaタグ外部サイトの接続
  • 各種マウスホバーエフェクト
  • 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #06 : Location セクション

  • フォントアサムを活用したアイコンデザイン
  • 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC レイアウトセクション別 UI/UX #07 : Contact セクション

  • フォーム要素を扱う、:hoverと:focusを活用した入力フィールドデザイン
  • フォントアサムを活用したアイコンデザイン
  • 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用


💡 PC & Mobile サブページレイアウトUI/UXプレビュー(Preview)

▼PC&Mobileサブページレイアウト#01:Hiringサブページ

  • アイフレームモーダル(Iframe Modal)でオープンするサブページ
  • フォントアサムを活用したSNSアイコンホバーエフェクト
  • 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用

▼ PC & Mobile サブページレイアウト #02 : Project Detail サブページ

  • アイフレームモーダル(Iframe Modal)でオープンするサブページ
  • 配置、書式、エフェクト、ボックスモデル、バリアントなど、さまざまなCSS属性を活用


💡 中級レベルジャンプアップパブリッシング理論とヒント(Tip)リスト

レスポンシブウェブサイトの作成に必要な理論だけでなく、パブリッシングスキルアップに必要なコア理論とヒントを常に更新します。スキルアップに必要なコア理論とヒント画像が更新されている場合は、新しいニュースを通じてお知らせします。

スキルアップに必要なコア理論とヒント画像は、セクション17で順次更新されます。新しいニュースを受け取っていない場合でも、セクション17に来て、学習が必要なビデオがあるかどうかを確認してください。ファイティング〜^^

※レスポンシブウェブを製作講義を学習される方は、製作講義を終える前に聞く必要はありません。ただし、2番、3番、4番はレスポンシブウェブを制作講義に必要な核心理論なので、まず聞いてレスポンシブウェブサイト制作講義を始めることをお勧めします。

※Jump Up パブリッシング理論とヒント映像で勉強する学習例 完成本は、該当映像の右上に授業資料を押すとzipファイルを受け取ることができます。

セクション17.中級レベルJump Upパブリッシング理論とヒント(Tip)

  1. WebパブリッシャーのためのChrome拡張機能の推奨(6つ) (完了、2020.05.31)
  2. aタグアンカーで目的の部分をスムーズに探す2つの方法(ジェイクエリプラグイン、CSSプロパティ) (完了、2020.07.25)
  3. bodyの中で別のhtmlを呼び出すことによって示すiframeを利用する(完了、2020.07.25)
  4. input タグの :checked と拡張選択子 (隣接選択、兄弟選択、属性選択) で作る CSS クリックイベント(完了、2020.07.25)
  5. インラインJavaScriptを活用する(divにhrefリンクを掛ける、戻る、進む、更新、ウィンドウを閉じる) (完了、2020.07.26)
  6. パブリッシング講師が講義がうまくいかないかを区別する(display属性の理解度) (完了、2020.08.2)
  7. 相対フォントサイズem単位とrem単位を理解する (完了、2020.08.2)
  8. ウェブサイトの制作時に必ず知っておくべきフォルダファイルのパスを理解する(絶対アドレス対相対アドレス) (予定)
  9. ジェネレータに依存せずに直接座標を見つけて直接コーディングするイメージマップ(Image Map)製作(予定)
  10. 要素の前後をデザインする仮想クラスの花(before、after)完璧を理解する(予定)
  11. [ダウンロードPSD]レスポンシブウェブ制作フォトショップUIデザイン(メインページ、サブページ、使用フォント)

▲パブリッシャー就職のためのコーディングワークスパブリッシング講義ロードマップ

❤コーディングワークスの受講生に来たパブリッシャー合格ニュース


▲国費支援パブリッシング過程 私に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.レスポンシブウェブサイトの作成講義の紹介とテキストエディタの使い方

  1. レスポンシブウェブサイトポートフォリオ制作講義紹介
  2. ブラケットの使い方とショートカットの活用
  3. ブラケットでのEmmetの基本的な使い方とショートカットの活用
  4. ブラケットのリアルタイムプレビュー、実技試験フォルダ構造の作成
  5. ビジュアルスタジオコード(Visual Studio Code)の使い方と環境設定
  6. ビジュアルスタジオコード(Visual Studio Code)でのEmmetの使い方

セクション 1. レイアウト全体を制御するプラグインの使い方とカスタマイズ

  1. UI UX全体を制御するプラグインの使用方法と必須事項
  2. UI UX全体を制御するプラグインのダウンロードとフォルダファイルの設定
  3. UI UX全体を制御するプラグインプロトタイプを作成する
  4. ウェブサイト全体のindexファイル構造を設定し、必要なファイルをリンクする

セクション2.フルレイアウトワイヤフレームパブリッシング(PC ver。)

  1. フルレイアウトワイヤフレームパブリッシング(PC) - 基本フォーマット
  2. フルレイアウトワイヤフレームパブリッシング(PC) - フルレイアウト、ヘッダ領域

セクション 3. モバイル全体のレイアウトとナビゲーションパブリッシング (Mobile ver.)

  1. モバイルナビゲーションパブリッシング - Media Query
  2. モバイルナビゲーションパブリッシングパブリッシング - 基本構造とリンクの作成
  3. モバイルナビゲーションパブリッシング - モバイルトリガー、GNBの表示を隠す
  4. モバイルナビゲーションパブリッシング - aアンカーを作成し、スムーズにセクションを探す
  5. モバイルナビゲーションパブリッシング - スクロールするとヘッダーを変更するJavaScript
  6. モバイルナビゲーションパブリッシング - 右下のヒリングボタンの作成

セクション 4. セクション詳細パブリッシング(Awards Section)

  1. PCレイアウトセクション詳細パブリッシング - セクション別パブリッシング作業手順
  2. PCレイアウトセクション詳細パブリッシング(Awards Section) - #01
  3. PCレイアウトセクション詳細パブリッシング(Awards Section) - #02

セクション 5. セクション詳細パブリッシング(About Section)

  1. PCレイアウトセクション詳細パブリッシング(About Section) - #01
  2. PCレイアウトセクション詳細パブリッシング(About Section) - #02

セクション 6. セクション詳細パブリッシング (Location Section)

  1. PCレイアウトセクション詳細パブリッシング(Location Section) - #01
  2. PCレイアウトセクション詳細パブリッシング(Location Section) - #02

セクション 7. セクション詳細パブリッシング(Contact Section)

  1. PCレイアウトセクション詳細パブリッシング(Contact Section) - #01
  2. PCレイアウトセクション詳細パブリッシング(Contact Section) - #02
  3. PCレイアウトセクション詳細パブリッシング(Contact Section) - #03

セクション 8. セクション詳細パブリッシング(Plan Section)

  1. PCレイアウトセクション詳細パブリッシング(Plan Section) - #01
  2. PCレイアウトセクション詳細パブリッシング(Plan Section) - #02(Slick.jsダウンロード)
  3. PCレイアウトセクション詳細パブリッシング(Plan Section) - #03(Slick.jsの使い方)
  4. PCレイアウトセクション詳細パブリッシング(Plan Section) - #04(Slick.jsスタイルの変更)

セクション 9. セクション詳細パブリッシング(Project Section)

  1. PCレイアウトセクション詳細パブリッシング(Project Section) - #01(プロトタイプ製作)
  2. PCレイアウトセクション詳細パブリッシング(Project Section) - #02(プロトタイプ製作)
  3. PCレイアウトセクション詳細パブリッシング(Project Section) - #03(タブコンテンツパブリッシング)
  4. PCレイアウトセクション詳細パブリッシング(Project Section) - #04(タブコンテンツパブリッシング)
  5. PCレイアウトセクション詳細パブリッシング(Project Section) - #05(タブコンテンツパブリッシング)
  6. PCレイアウトセクション詳細パブリッシング(Project Section) - #06(Slick.jsイメージスライダ)

セクション 10. セクション詳細パブリッシング(Home Section)

  1. PCレイアウトセクション詳細パブリッシング(Home Section) - #01(HTML + CSS構造)
  2. PCレイアウトセクション詳細パブリッシング(Home Section) - #02(アニメ1)
  3. PCレイアウトセクション詳細パブリッシング(Home Section) - #03(アニメ2)
  4. PCレイアウトセクション詳細パブリッシング(Home Section) - #04(アニメ3)

セクション 11. サブページパブリッシング(Hiring Info)

  1. PCレイアウトサブページパブリッシング(Hiring Info) - #01
  2. PCレイアウトサブページパブリッシング(Hiring Info) - #02
  3. PCレイアウトサブページパブリッシング(Hiring Info) - #03
  4. PCレイアウトサブページパブリッシング(Hiring Info) - #04
  5. PCレイアウトサブページパブリッシング(Hiring Info) - #05
  6. PCレイアウトサブページパブリッシング(Hiring Info) - #06(SNSアイコンアニメーションエフェクト)

セクション 12. サブページパブリッシング(Project Detail)

  1. PCレイアウトサブページパブリッシング(Project Detail) - #01
  2. PCレイアウトサブページパブリッシング(Project Detail) - #02

セクション 13. サブページをリンクする (Modal Iframe Jquery Plugin)

  1. サブページをリンクする(Modal Iframe Jquery Plugin)#01(モーダルが必要な理由)
  2. サブページをリンクする(Modal Iframe Jquery Plugin)#02(モーダルアイフレームプラグイン)
  3. サブページをリンクする(Modal Iframe Jquery Plugin)#03(プラグインCSSデザインの変更)

セクション14.メインページすべてのセクションモバイルに変換する(indexファイル)

  1. メインページレイアウトモバイル変換(必須コア理論)
  2. メインページレイアウトモバイル変換(重要設定)
  3. メインページレイアウトモバイル変換#01(Home Section)
  4. メインページのレイアウト モバイル変換 #02(About Section)
  5. メインページのレイアウト モバイル変換 #03(Plan Section)
  6. メインページレイアウトモバイル変換#04(Awards Section)
  7. メインページレイアウトモバイル変換#05(Location Section)
  8. メインページのレイアウト モバイル変換 #06(Contact Section)
  9. メインページレイアウトモバイル変換#07(Project Section)

セクション15.サブページモバイルに変換する(hring、project)

  1. サブページモバイルに変換する #01 (hring subpage)
  2. サブページモバイルに変換する#02 (project subpage)

セクション16.終了

  1. コーディングワークス受講生の皆さん〜苦労しました!

セクション17.中級レベルJump Upパブリッシング理論とヒント(Tip)

  1. WebパブリッシャーのためのChrome拡張機能の推奨(6つ)
  2. aタグアンカーを作成し、2つの方法でSmooth Scrollingする(ジェイクエリプラグイン、CSSプロパティ)
  3. body内で別のhtml読み込むiframeを活用する
  4. input と checked を活用した拡張選択子(隣接選択子、兄弟選択子、属性選択子)
  5. インラインJavaScriptを活用する(onclick JavaScriptイベント)
  6. パブリッシング講師が講義がうまくいかないかを区別する(display属性の理解度)
  7. 相対フォントサイズem単位とrem単位を理解する
  8. 親要素の値を継承するinheritを理解する
  9. CSS calc() 算術式(四則演算)
  10. CSSで変数var()を使用する
  11. 仮想クラスの花(:before:after)の使い方
  12. ハードコーディングでイメージマップを作成する

セクション 18. 資料のダウンロード(段階別完成本、ビジュアルコードの使い方、Photoshop UIデザイン)

  1. [セクション01.ステップバイステップ完了]レイアウト全体を制御するプラグインの使い方とカスタマイズ
  2. [セクション02.段階別完成本] 全体レイアウト ワイヤフレームパブリッシング(PC ver.)
  3. [セクション03.段階別完成本]モバイル全体のレイアウトとナビゲーションパブリッシング(Mobile ver.)
  4. [セクション04.段階別完成本]セクション詳細パブリッシング(Awards Section)
  5. [セクション05.段階別完成本]セクション詳細パブリッシング(About Section)
  6. [セクション06.段階別完成本]セクション詳細パブリッシング(Location Section)
  7. [セクション07.段階別完成本]セクション詳細パブリッシング(Contact Section)
  8. [セクション08.段階別完成本]セクション詳細パブリッシング(Plan Section)
  9. [セクション09.段階別完成本]セクション詳細パブリッシング(Project Section)
  10. [セクション10.段階別完成本]セクション詳細パブリッシング(Home Section)
  11. [セクション11.段階別完成本] サブページパブリッシング(Hiring Info)
  12. [セクション12.段階別完成本]サブページパブリッシング(Project Detail)
  13. [セクション 13. 段階別完成本] サブページリンクする (Modal Iframe Jquery Plugin)
  14. [セクション14.段階別完成本] メインページ すべてのセクション モバイルに変換する(indexファイル)
  15. [セクション15.段階別完成本] サブページモバイルに変換する(hring, project)
  16. [ダウンロードPDF]ビジュアルスタジオコード(Visual Studio Code)とエミット(Emmet)
  17. [ダウンロードPSD]レスポンシブウェブ制作フォトショップUIデザイン(メインページ、サブページ、使用フォント)

インタビューと就職を呼ぶパブリッシャー 個人ポートフォリオ ホームページ制作スクリプト、レイアウト、インタラクティブウェブ、インタラクティブウェブ、ウェブデザイン、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン機能士実技試験、ブートストラップ、ブートストラップ、css frameworks、フレームワーク

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Web サイトの制作プロセス全体を体験したいパブリッシャー

  • 実用的なウェブサイト制作に出版の基本スキルを活用したい方

  • パブリッシング個人ポートフォリオホームページ制作が必要な方

前提知識、
必要でしょうか?

  • HTML+CSS 基本コーディング能力

こんにちは
です。

12,648

受講生

747

受講レビュー

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

カリキュラム

全体

114件 ∙ (24時間 30分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

55件

5.0

55件の受講レビュー

  • suhbyungsik1535님의 프로필 이미지
    suhbyungsik1535

    受講レビュー 3

    平均評価 5.0

    5

    58% 受講後に作成

    Xin chào. Tôi là người đến muộn, lười biếng và có xu hướng ghét học tập. Tôi bắt đầu nghĩ đến việc học viết mã cách đây 5, 6 năm nên thỉnh thoảng tôi đã thử, nhưng tôi liên tục thất bại. Kể từ tháng 12 năm ngoái, tôi có chút thời gian rảnh rỗi, và nếu trì hoãn lâu hơn nữa thì tôi sẽ không còn nữa. có thể làm điều đó cho đến cuối đời. Điều này khiến tôi phải suy nghĩ, vì vậy tôi đã học viết mã đều đặn trong vài tháng. Lần này, 'Danh mục trang web đáp ứng (Cơ quan kiến ​​trúc)' Tôi chăm chú lắng nghe bài giảng và hoàn thành nó chỉ trong 15 ngày. Thực ra, tôi đã dành bài giảng này để học vào mùa xuân năm ngoái, nhưng một năm sau tôi mới học nó. Viết mã trong khi nghe giảng rất thú vị vì tôi học muộn, nhưng vấn đề là ngay cả sau hai ngày, "Hả?" Đó có phải là điều tôi đã làm không?' Vấn đề là điều này xảy ra. Như mọi người đều cảm nhận trong cuộc sống, dường như có một mối quan hệ riêng biệt. Trước khi gặp Coding Works, tôi đã tham gia nhiều khóa học khác nhau và xin lời khuyên, nhưng tôi nghĩ điều khó khăn nhất đối với người mới bắt đầu là biết phải làm gì. Theo những gì tôi nghe được từ mọi người, tốt hơn hết là nên nghiên cứu WordPress hoặc Bootstrap. Đối với những người khác, tốt hơn hết là ngừng tham gia các lớp học tại học viện. Có nhiều ý kiến ​​​​khác nhau, tôi đã nghe nhiều bài giảng khác nhau trên YouTube, nhưng tôi thực sự không hiểu người ta nói gì, nhưng sau khi nghe một vài bài giảng của Coding Works, tôi cảm thấy tai mình như ù đi. Có lẽ đó là ý nghĩa của nó. Tôi gặp rất nhiều khó khăn khi nghe bài giảng này, nhưng mỗi lần tôi đăng câu hỏi đều được họ phản hồi tận tình và nhanh chóng nên tôi đã có thể tạo được một trang web mà không gặp bất kỳ trở ngại nào. Tất nhiên, đối với tôi, việc tạo ra nó là quan trọng, nhưng khi nhìn lại, mã thường khó và tôi tự hỏi liệu mình có phải thử thêm vài lần nữa trước khi nó trở thành của mình hay không, nhưng dù sao thì, hoàn thành một trang web như thế này là một điều thực sự tuyệt vời và bổ ích đối với tôi, người đã thực hiện bước đi đầu tiên. Một lần nữa xin cảm ơn bạn và tôi hy vọng rằng nhiều người sẽ thích bài giảng tuyệt vời này. Cảm ơn

    • codingworks
      知識共有者

      Nhìn vào các đánh giá về khóa học, tôi nghĩ nó sẽ là một hướng dẫn tốt cho các học viên tương lai. Tôi còn nhiều thiếu sót, nhưng cảm ơn vì những lời tốt đẹp của bạn ~!!

  • hamham00님의 프로필 이미지
    hamham00

    受講レビュー 6

    平均評価 5.0

    5

    42% 受講後に作成

    Tôi thấy thiết kế đáp ứng khó và hơi khó theo dõi, nhưng nó thực sự giúp tôi cải thiện kỹ năng xuất bản của mình! Mặc dù tôi chỉ mới gặp bạn qua các bài giảng trực tuyến, nhưng bạn quả là một điều may mắn đối với tôi, người đang học một mình. Tôi đã theo học một số bài giảng của bạn và hiện đang nộp sơ yếu lý lịch, nhưng tôi thực sự muốn kiếm được việc làm! Tất cả các bài giảng của bạn thực sự tuyệt vời và hữu ích!! Tôi đánh giá cao nó.

    • codingworks
      知識共有者

      Cảm ơn bạn đã xem xét của bạn. Tôi sẽ luôn ủng hộ bạn. cố gắng đi!!

  • snrtn943653님의 프로필 이미지
    snrtn943653

    受講レビュー 67

    平均評価 4.9

    5

    20% 受講後に作成

    Tôi đã hoàn thành tất cả các bài giảng theo lộ trình và đang tiếp tục nghe. Nó rất dễ hiểu vì nó được giải thích chi tiết. Vì tài liệu đã được chuẩn bị sẵn nên tôi có thể tập trung rất tốt vào bài giảng. Rất khuyến khích!!

    • codingworks
      知識共有者

      Junhan, cảm ơn bạn đã đánh giá. Những đánh giá chi tiết về khóa học sẽ rất hữu ích cho những học viên quan tâm. ^^

  • nextdev님의 프로필 이미지
    nextdev

    受講レビュー 9

    平均評価 4.6

    5

    86% 受講後に作成

    Tiếp nối bài giảng trước, tôi rất hài lòng với bài giảng này!😀😀 Tôi đang học được rất nhiều điều khi tạo toàn bộ trang web Haha. Trước hết, thời gian giảng dài và lời giải thích rất kỹ lưỡng và dễ hiểu nên mặc dù mức độ khó khi tạo một trang web rất khó nhưng tôi nghĩ mình có thể theo dõi mà không gặp bất kỳ trở ngại nào. Nó hơi khó hiểu và khó tạo bằng cách sử dụng nhiều plugin jQuery khác nhau, nhưng mặt khác, cũng rất tốt khi tìm hiểu cách nhập và sử dụng các plugin hữu ích cũng như tùy chỉnh chúng cho phù hợp với người dùng. Cá nhân mình trước khi nghe giảng của thầy thì mình thiếu khái niệm về HTML, CSS và không tạo được nhiều ví dụ dựa trên những gì đã học nên CSS rất khó và không thú vị, nhưng giờ mình thấy vui và tự tin hơn. Cảm ơn bạn rất nhiều!

    • codingworks
      知識共有者

      Coder, cảm ơn bạn đã đánh giá khóa học chi tiết. Sau khi đọc bài đánh giá khóa học của người viết mã, đây có thể là một hướng dẫn hữu ích cho các sinh viên tương lai. Tôi tự hào vì sự chăm chỉ mà bạn làm đã được thể hiện rõ ràng và bạn sẽ tiếp tục phát triển theo đó. Hãy luôn chiến đấu như bạn bây giờ nhé~ ^^

  • ds88284553245님의 프로필 이미지
    ds88284553245

    受講レビュー 1

    平均評価 5.0

    5

    4% 受講後に作成

    Việc tham gia một lớp học mà bạn có thể học web đáp ứng thông qua mã hóa cứng là điều không phổ biến và lớp học này kéo dài 18 giờ để bạn có thể cảm nhận được nỗ lực của người hướng dẫn. Tôi rất cần một trang chủ danh mục đầu tư cá nhân để làm việc và lớp học này chính xác là thứ tôi cần. Tôi hy vọng sẽ mang đến cho bạn nhiều bài giảng hay hơn nữa trong tương lai.~ ^^

    • codingworks
      知識共有者

      Xin chào. Đây là Công việc mã hóa. Bạn đang chuẩn bị cho công việc là một nhà xuất bản? Nếu bạn muốn có được công việc là một nhà xuất bản, bạn cần phải có ít nhất một trang chủ cá nhân có thể sử dụng được để thể hiện trong sơ yếu lý lịch cũng như các kỹ năng của bạn, vì vậy tôi hy vọng bạn sẽ nhanh chóng hoàn thành khóa học tạo trang web đáp ứng này và đưa ra ý tưởng cá nhân. trang chủ sau khi lấy phần thứ hai. Tôi hy vọng rằng bài giảng xuất bản Coding Works sẽ giúp ích phần nào trong việc tìm việc làm nhà xuất bản. Cảm ơn bạn đã đánh giá khóa học tốt. Cố lên~ ^^

¥7,508

codingworksの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!