강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Publishing

CSS ネストを使用したモバイル Web パブリッシング ポートフォリオ

19ページ、合計22種類 さまざまなモバイルレイアウトを作成することで、出版社就職や出版社実務で最も競争力のあるモバイルウェブ作成能力を向上させることができます。出版社としてモバイルウェブを作成するためのほぼすべての作成方法とノウハウを習得できます。モバイルウェブパブリッシングの授業で最も強みとなる部分であるHTMLワイヤーフレームの詳細な作成方法を、すべてのページを詳細に説明します。講義を通じて、HTMLワイヤーフレーム作成能力が大幅に向上します。特に、CSSネスト方式を十分に学習できます。中上級のCSS実戦能力を、Flexレイアウトを中心に十分に身につけることができます。

  • codingworks
실습 중심
퍼블리싱
Mobile App Design
HTML/CSS
wireframe
slick-slider
iframes

こんなことが学べます

  • 純粋な CSS 中置 (ネスト) 方式の公開機能

  • 中上級 CSS 実践コーディング、Flex & Grid レイアウトを中心に

  • 19ページ、合計22種類のさまざまなモバイルレイアウトの作成

  • モバイル Web パブリッシング制作に必要な理論とノウハウ、実制作

  • CSS 変数 (Var) を活用してモバイルに最適化されたレイアウトを作成する

  • プロのように公開するクリーンコーディングの教科書

  • Slick Slider の使い方と CSS の変更方法

  • HTML+CSS モバイル モックアップの作成後、iframe の活用

CSS Nesting方式モバイルWebパブリッシングの制作
必須理論とノウハウ、体系的な実戦制作

Step 01.合計19ページ、合計22種類のモバイルレイアウトHTMLワイヤフレーム詳細製作
Step 02. CSSネスト(Nesting)方式を活用した多様なレイアウトパブリッシングの制作
Step 03.完成したパブリッシング結果をより完璧にするパブリッシング仕上げ作業

コーディングワークスがこれまで数多くのオフライン学園生徒に授業したモバイルWebパブリッシング制作ノウハウが盛り込まれています。完成後、さらに向上したパブリッシングの実力を持つことになると確信しています。特に、CSS Nesting方式のコーディングに大きな自信を持っています。

SCSS(SASS)でのみ利用可能
CSSネスト方式のコーディングを通常のCSSでコーディングします!


この講義の「モバイルWebパブリッシングポートフォリオ with CSS Nesting」は、一般的なCSSコーディング方式ではなく、最新技術であるCSSネスト(Nesting)方式のコーディングで製作されました。 CSS Nestingは1年前まではSCSS(SASS)でしか使用できませんでしたが、今はSCSS(SASS)を使用せずに使用できます。 CSS NestingでモバイルWebプロジェクトを公開しながら、かなり成長すると思います。

既存のSCSS(SASS)を使用するための準備が必要です。準備とともにコンパイルという過程も経て、ブラウザが認識するCSSになります。 SCSS(SASS)を使用するほとんどの理由は、セレクタネスト(Selector Nesting)です。もちろん、SCSS(SASS)だけのより多くの機能がありますが、最も重要な機能はネストされていますが、SCSS(SASS)を使用せずにCSSネストとしてコーディングすることができます。

講義のテーマ📖

コーディングワークスの<モバイルWebパブリッシングポートフォリオ with CSS Nesting>を通じて、パブリッシャー就職とパブリッシャー実務で最も競争力のあるモバイルWeb制作能力を向上させることができます。そして、パブリッシャーとして、モバイルウェブを制作するためのほぼすべての制作方法とノウハウを誓うことができます。

  1. 純粋なCSSネスト方法パブリッシング能力

  2. Flex & Gridレイアウトを中心に中上級CSS実践コーディング

  3. モバイルウェブパブリッシング制作 必須理論とノウハウ、実戦制作

  4. HTML+CSS モバイルモックアップ(Mockup)制作後 iframe 活用

  5. CSS変数(Var)を活用したモバイル向けに最適化されたレイアウト作成

  6. Slick Sliderの使い方とCSSの変更ノウハウ


  7. キャリアのようにパブリッシングするクリーンコーディングの定石

すべてのブラウザで完全にサポート
CSS Nesting方式のコーディング

緑色で表示されればブラウザで完全サポートするという表示です。

Can i Useのウェブサイトでもっと見る:https://caniuse.com/?search=css% 20nesting

▲個人ポートフォリオ用途にモバイルモックアップ(Mockup)製作後iframeを活用

合計19ページ、合計22種類のモバイルレイアウトHTMLワイヤフレーム詳細製作

さまざまなファイルを提供する🗂

📝デザインファイル、ソースファイル、パブリッシング完成版、レッスンノート

  1. [CSS Nesting] デザインワークイメージソース

  2. [CSS Nesting]モバイルWeb HTMLワイヤフレーム(TXT)

  3. [CSS Nesting]モバイルWebデザイン作業(PSD)

  4. [ダウンロード] HTML+CSSモバイルモックアップ(Mobile Mockup)3種(iPhone、ギャラクシー)

  5. デザイン個別画面(PNG) [CSS Nesting] モバイルWebデザイン個別画面(PNG)

  6. ソーステキストと参考ウェブサイト [CSS Nesting]

  7. CSS NestingモバイルWeb - レッスンノート

▲CSS NestingモバイルWeb制作映像 - 映像講義で使用されたPPT講義資料提供

クリーンコーディングの定石🧽

<モバイルWebパブリッシングポートフォリオ with CSS Nesting>講義を受講しながらHTMLワイヤフレーム作成能力、パブリッシングのためのFlex使用能力など様々なことで実力が成長すると思います。これらの部分も非常に重要ですが、この中で最も重要な部分が「キャリアのようにパブリッシングするクリーンコーディング(Clean Coding)の定石」を学ぶことになります。講義では、すべてのパブリッシングをこの原則の下に作成しました。

<キャリアのようにパブリッシングするクリーンコーディング(Clean Coding)の定石>という部分は必要なところに必要な注釈を入れること、HTML出演順に合わせてCSSセレクタも順番にコーディングすること、共通のCSSセレクタの場合後でメンテナンスのためにCommon CSSというところにまとめること。このようなコーディングの原則と習慣を学ぶことができれば、実務で本当に多くの助けになります。具体的には、就職時に人事担当者またはそれに準ずる人が志願者のパブリッシング結果を見て、ソースコード(Source Code)を見ることになります。このような場合は、少しだけソースコードを見ても、申請者のパブリッシングベータについて判断できます。

💡この講義が違う魅力ポイントは?

  1. 新技術であるCSS Nesting方式のコーディング制作能力を備えることができます。

  2. パブリッシングのスキルを大幅に向上させるHTMLワイヤフレームの詳細な書き方を学びます。

  3. コーディングワークスのキャリアのようにパブリッシングするクリーンコーディングの定石を学びます。

  4. さまざまな練習や例、理解しやすい説明、深い概念を詳しく説明します。

  5. モバイルウェブパブリッシングのために受講生が知っておくべきことをすべて説明します。

モバイルWebフルUIデザイン

CSS Nesting パブリッシング📚


▲イントロページ with Overlay / イントロページ

🚩イントロページ with Overlay

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. フルスクリーンレイアウト

  3. トーストオーバーレイの表示/隠す

🚩イントロページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. イントロスリックスライダー

  3. 始める


▲ウェルカムページ/ログインページ


🚩ウェルカムページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. ログインボタンデザイン

🚩ログインページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォーム要素の処理


▲会員登録ページ/パスワード検索ページ

🚩会員登録ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォーム要素の処理

🚩パスワード検索ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォーム要素の処理


▲マイフレッシュメインページ/会員情報表示ページ

🚩マイフレッシュメインページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用、::before ::afterの活用

🚩会員情報表示ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用、::before ::afterの活用


▲会員情報確認ページ/会員情報修正ページ

🚩会員情報確認ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用、隣接選択者の活用

🚩会員情報編集ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用、隣接選択者の活用

  4. CSSカスタムスイッチボタン

  5. CSSカスタムチェックボックス


▲アドレス帳管理ページ/ショッピングカートページ

🚩連絡先管理ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置


🚩カートのページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用

  4. フォーム要素の処理


▲注文決済ページ/蒸しリストページ

🚩オーダー決済ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用

  4. 仮想クラス:before:afterでフォントアイコンUnicodeを活用


🚩蒸しリストページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置


▲最近見た商品ページ/注文リストページ

🚩最近閲覧した商品ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用、::before ::afterの活用


🚩オーダーリストページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用、::before ::afterの活用


▲検索ページ/カテゴリページ

🚩検索ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用、::before ::afterの活用


🚩カテゴリページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用

  4. 仮想クラス:before:afterでフォントアイコンUnicodeを活用


▲ホームメインページ/商品詳細を見る(商品説明)ページ

🚩ホームメインページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. ホームメインスリックスライダー

  3. 商品リストスライダー

  4. Flex レイアウトの配置

  5. フォントアイコンの活用、::before ::afterの活用

  6. バッジデザイン


🚩商品説明ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. タブメニューコンテンツ機能の活用

  4. JavaScriptの上部にスムーズに移動する機能

  5. フォントアイコンの活用、::before ::afterの活用


▲商品詳細を見る(レビュー)ページ/商品の詳細を見る(お問い合わせ)ページ

🚩商品詳細を見る(レビュー)ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用、::before ::afterの活用

  4. バッジデザイン


🚩商品詳細を見る(お問い合わせ)ページ

  1. CSS Nesting方式のHTMLワイヤフレーム構造の作成

  2. Flex レイアウトの配置

  3. フォントアイコンの活用

  4. 仮想クラス:before:afterでフォントアイコンUnicodeを活用

💡パブリッシングジョブテキストエディタ<ビジュアルスタジオコード>

その講義<モバイルWebパブリッシングポートフォリオ with CSS Nesting>は、ビジュアルスタジオコード(Visual Studio Code)で作成された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。すべてのレッスンビデオは、ビジュアルスタジオコードベースで説明されています。
以下のコーディングワークスのYouTubeビデオを通じて基本的な使い方を学び、パブリッシングを学んでください。

ビジュアルスタジオコード(Visual Studio Code)をダウンロードする

  1. ビジュアルスタジオコード(Visual Studio Code)の使い方と環境設定(ビデオを見る)

  2. ビジュアルスタジオコード(Visual Studio Code)でエミット(Emmet)を使用する(ビデオを見る)

  3. ビジュアルスタジオコード(Visual Studio Code)必須拡張機能のインストールと使い方(ビデオを見る)

  4. ビジュアルスタジオコードでCSSを変更したときに上がるフルリロードを防ぐ(ビデオビュー)


講義制作時に使用されたビジュアルスタジオコードテーマ(Theme):One Dark Pro

Q&A 👨‍🏫

質問は該当講義のコミュニティ質問掲示板にしていただければ最善を尽くしてお答えします。


Q. 選手知識、準備事項が必要ですか?

特別な選手知識や準備はありません。 HTML+CSS 基本的な使用経験であれば十分に追いつくことができ、期待するほどの実力向上と成果を得ることができます。ただし、CSS中級理論をよく使用するため、以下の学習内容はある程度知っておく必要があります。

😀 コーディングワークスYouTubeプレイリスト - モバイルWebパブリッシングをうまくするためのCSS中級理論


Q. 差別化される重要なコンテンツは何ですか?

[モバイルWebパブリッシングポートフォリオ with CSS Nesting] 講義は、一般的なCSSコーディング方式ではなく、最新技術であるCSSネスト(Nesting)方式のコーディングで作られました。 CSS Nestingは1年前まではSCSS(SASS)でしか使用できませんでしたが、今はSCSS(SASS)を使用せずに使用できます。 CSS NestingでモバイルWebプロジェクトを公開しながら、かなり成長すると思います。

パブリッシング オンラインオフラインのレッスンを、長年パブリッシング講義をしてきた講師としてパブリッシングの実力を高める最も確実で体系的な方法で授業します。そして、モバイルWebパブリッシングという不慣れで難しい作業を段階的にレベルクラスの成果を引き出すことができるように制作された授業が重要だと思います。


Q. モバイルWebパブリッシングの制作過程をなぜ学ばなければならず、具体的な期待効果は何ですか?

モバイルWebは個人的なポートフォリオワークピースであり、最も重要性が高いです。したがって、モバイルWebワークピースがある場合は、雇用競争力があります。雇用ポートフォリオとしての役割だけでなく、ほとんどの企業がモバイルWebプロジェクトを進めており、進めていきたいと考えています。こういった会社の立場でうまく作られたモバイルWebポートフォリオがあれば、就職の転職のとても良いリファレンスになると思います。

モバイルWebは個人的なポートフォリオワークピースであり、最も重要性が高いです。したがって、モバイルWebワークピースがある場合は、雇用競争力があります。雇用ポートフォリオとしての役割だけでなく、ほとんどの企業がモバイルWebプロジェクトを進めており、進めていきたいと考えています。こういった会社の立場でうまく作られたモバイルWebポートフォリオがあれば、就職の転職のとても良いリファレンスになると思います。

具体的な期待効果は実は人によって異なります。しかし、コーディングワークスが確かにお話しできる部分HTMLワイヤフレーム構造を作る能力が大幅に向上します。さまざまなHTMLワイヤフレーム構造を作成しながら、複雑なHTML階層をどのように体系的に整理するかを十分に訓練します。また、一貫性のあるクラス名をどのようにネーミングして共有するかを一緒に作成しながら詳細に授業します。

さまざまなモバイルレイアウトHTMLワイヤフレーム詳細作成でさまざまなHTMLワイヤーフレーム構造を作成します 本物のモバイルWebパブリッシングを適用する段階まで訓練するので、今後はかなりのWeb UIレイアウトを作成することに自信があります。


Q. 授業内容をどのレベルまで扱いますか?

モバイルWebの性質上、ファイルの数とフォルダが多数あります。だからちょっとスピード感のあるように多くの内容が進みます。あるレベルまでというのが人の基準によって異なりますが、パブリッシャー個人ポートフォリオとして十分なレベルで作業する授業内容です。それだけでなく、実務でモバイルWeb作業するレベルで見ても十分な程度の授業内容です。


Q. 既存講義と「モバイルウェブパブリッシングポートフォリオ with Figma」との違いは何ですか?

既存のモバイルウェブレッスンとそのモバイルウェブレッスンの両方は、モバイルウェブをCSS方式で作成することと同じです。最も大きく異なる点は、既存の講義は親要素を毎回一覧表示するCSS方式であり、その講義は親要素を一度だけ使用するCSSネスト方式の制作講義です。従来の講義よりも難易度が従来より1.5倍程度高くなり、より多くのページとより多様なレイアウト制作を行うことになり、モバイルWebパブリッシングのスキルをさらに向上させることができます。

対応モバイルウェブ制作講義の違い

  • レッスンで Figma デザインに取り組んでいません。

  • 準備されたデザインの完成本を見ながらすぐにHTMLワイヤフレーム制作とパブリッシング制作

  • CSS Nestingコーディング方式

  • 2倍以上の制作量と学習量(基本講義は9ページ制作、該当講義は19ページ制作)

  • さまざまなすべての異なる22のレイアウトを作成

  • さまざまなスライダーの作り方(Slick Slider)



Q. 全体の講義時間はどうなりますか?

全体映像講義時間は約16時間で、深い学習のための十分な講義で用意されています。

  • 事前に必読のビデオとモバイルWeb HTMLワイヤフレーム構造を作成する方法 - 2時間

  • [本番制作]モバイルWeb HTMLワイヤフレーム構造 with PPT - 3時間

  • [本番制作]モバイルWeb詳細パブリッシング with CSS Nesting- 10時間

  • [参考にする]完成したモバイルWebをポートフォリオとして活用する - 1時間


Q. 受講に関する注意事項(必要な環境、その他の留意事項など)はありますか?

授業内容が多く、スピード感があります。だからといって十分な説明なしで通り過ぎずに詳細に説明します。よく従うと思います。ただし、シングルモニターで学習するよりも、デュアルモニター環境を整えることを強くお勧めします。セクション2の[必読]努力に対するパブリッシングの実力が増えない理由映像に詳しく記載されていますので参考にしてください。

セクション1.講義の紹介

  • [講義紹介]モバイルWebパブリッシングポートフォリオ with CSS Nesting

  • [完成版のプレビュー]モバイルWebパブリッシングポートフォリオ with CSS Nesting

  • [必須]純粋なCSSセレクタのネスト01 - CSS Nestingの基本的な使い方

  • [必読]純粋なCSSセレクタのネスト02 - CSS Nesting活用例(ログインフォーム)


セクション2. [必須]モバイルWeb HTMLワイヤフレーム構造を作成する方法

  • [必読]努力に対するパブリッシングのスキルが増えない理由

  • [必読] HTMLワイヤフレーム構造の作り方とノウハウ

  • [実習] HTMLワイヤフレームの作成実習(カスタムチェックボックスログインフォーム)

  • [必読] HTMLワイヤフレーム構造(ボーダーボックスおよびクラスネーミングコツ)

  • [参考]モバイルWeb(Web)&モバイルアプリ(App)の概念を理解する


セクション3. [本番制作]モバイルWeb HTMLワイヤフレーム構造 with PPT

  • HTMLワイヤフレーム構造

  • HTMLワイヤフレーム構造(Myfresh 01 - マイフレッシュメイン)

  • HTMLワイヤフレーム構造(Myfresh 02 - 会員情報表示確認修正)

  • HTMLワイヤフレーム構造(Myfresh 03 - 配送先管理、注文決済)

  • HTMLワイヤフレーム構造(Myfresh 04 - カート)

  • HTMLワイヤフレーム構造(Myfresh 05 - 蒸し、最近見た商品、注文リスト)

  • HTMLワイヤフレーム構造(検索、カテゴリ - 検索、カテゴリ)

  • HTMLワイヤフレーム構造(よくある質問 - よくある質問)

  • HTMLワイヤフレーム構造(Customer Center - カスタマーセンター)

  • HTMLワイヤフレーム構造(Home - メインページ)

  • HTMLワイヤフレーム構造(Detail - 商品説明、詳細、レビュー、お問い合わせ)


セクション 4. [本番制作] モバイル Web 詳細パブリッシング with CSS Nesting

  • [必読]モバイルWebパブリッシングで幅(width)の高さ(height)を設定する

  • [必須]フォルダ構造の作成、リセット、変数(Variables)

  • [本番パブリッシング制作] イントロ01(イントロ画面、スライダー、スライダーカスタムCSS)

  • [本番パブリッシング制作] Intro 02(トーストオーバーレイ、絶対アドレス対相手アドレス)

  • [本番パブリッシング制作] Join 01(ウォルカム

  • [本番パブリッシング制作] Join 02(ログイン)

  • [本番パブリッシング制作] Join 03(会員登録、秘密検索)

  • [本番パブリッシング制作]マイフレッシュメイン01(ページヘッダ、コンテンツレイアウト)

  • [本番パブリッシング制作]マイフレッシュメイン02(詳細コンテンツ、gnb)

  • 【本番パブリッシング制作】マイフレッシュメイン03(gnbインクルード)

  • [本番パブリッシング制作] Container 高さを整理する(auto, 100vh)

  • [本番パブリッシング制作]会員情報01(会員情報を見る)

  • 【本番パブリッシング制作】会員情報02(会員パスワード確認)

  • [本番パブリッシング制作]会員情報03(会員情報修正)

  • 【本番パブリッシング制作】配送先管理

  • [本番パブリッシング制作]中間コード修正(Common CSS)

  • [本番パブリッシング制作]カート

  • [本番パブリッシング制作] 注文決済(:not :has 仮想クラス)

  • 【本番パブリッシング制作】蒸しリスト

  • 【本番パブリッシング制作】最近見た商品

  • 【本番パブリッシング制作】オーダーリスト

  • [本番パブリッシング制作]検索、カテゴリ

  • [本番パブリッシング制作] ホーム(Home) 01 - メインスライダー、カテコリ、バナー、フッター

  • [本番パブリッシング制作] ホーム(Home) 02 - SNS, パコム商品スライダー

  • [本番パブリッシング制作] 商品説明 01 - タップボタンチェック、タップメニュー機能、蒸しカートボタン

  • [本番出版制作]商品説明02 - 商品詳細、商品情報

  • [本番出版制作]商品説明03 - 商品レビュー、商品お問い合わせ

  • [本番パブリッシング制作] ページ別幅と高さ調整と修正(モバイルデバイス確認)

  • [パブリッシング修正補完]商品説明ページから上部にスムーズに移動する

  • [パブリッシング修正補完] - ファイルリンク & GNBナビゲーションチェック

  • [パブリッシング修正補完] ホーム(Home) メインスライダー数、商品スライダータブレットサイズ


セクション5. [参考にする]完成したモバイルWebをポートフォリオとして活用する

  • ナイスなモバイルモックアップ(Mockup)を作る

  • 製作したモバイルモックアップ(Mockup)をiframe活用する(マルチビュー、シングルビュー)

  • モバイルブラウザ検出JavaScript(矢印関数、User Agent)

  • 完成後に製作したモバイルウェブをポートフォリオに適用(コーディングワークス学生ポートフォリオを見る)


セクション 6. [ダウンロード] 受講生参考資料

  • [ダウンロード] 受講生参考資料ダウンロード(モバイルウェブ with CSS Nesting)

  • [PDF教材]モバイルWeb - HTMLワイヤフレーム(PDF)

  • [PDF教材]モバイルWeb - 講義ノート

🙋🏻‍♂️質問する前に必ず!読んでください〜!

学習しながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合は、HTML、CSS、JSのコードをすべてアップロードしてください。

質問文にコードなしでグローだけ問題を説明すれば、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。

 効果的な学習のためにぜひ!コーディングワークスパブリッシングYouTubeを参照してください。

コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。

コーディングワークスパブリッシングYouTubeチャンネル: https: //www.youtube.com/codingworks

知識共有者の紹介

コーディングワークスは現在までに300人以上の国費パブリッシングコースの学生にパブリッシング理論、活用、個人ポートフォリオホームページ制作講義を行っています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完全にガイドしながら、学生のほとんどのコース終了後すぐに就職ができるように、長年にわたりパブリッシング講義だけが専門的にやってきた講師です。また、Inflearnでパブリッシング関連講義を進めながら、Inflearn受講生の方々にも役に立ったとの評価も受けています。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • モバイル ウェブ UI デザインおよび公開ポートフォリオが必要な方

  • 実務でモバイルウェブパブリッシング作業のための実践経験が必要な方

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

  • HTML+CSS の基本的な使用体験

こんにちは
です。

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

カリキュラム

全体

56件 ∙ (16時間 19分)

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

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

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • 김경민님의 프로필 이미지
    김경민

    受講レビュー 1

    平均評価 5.0

    5

    30% 受講後に作成

    • 코딩웍스(Coding Works)
      知識共有者

      수강평 감사합니다.

  • bellmore님의 프로필 이미지
    bellmore

    受講レビュー 1

    平均評価 5.0

    5

    30% 受講後に作成

¥9,381

codingworksの他の講座

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

似ている講座

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