モバイルウェブパブリッシングポートフォリオ with CSS Nesting

19ページ、全22種類の多様なモバイルレイアウトを制作しながら、パブリッシャーへの就職や実務において最も競争力のあるモバイルウェブ制作能力を向上させることができます。パブリッシャーとしてモバイルウェブを制作するための、ほぼすべての制作手法とノウハウを固めることができます。モバイルウェブ・パブリッシング授業の最大の強みであるHTMLワイヤーフレームの詳細な作成法を、すべてのページ一つひとつ丁寧に説明します。講義を通じて、HTMLワイヤーフレームの制作能力が大きく向上するはずです。特にCSSネスト(Nesting)方式を十分に学習できます。Flexレイアウトを中心に、中上級のCSS実践能力を十分に身につけることができます。

難易度 初級

受講期間 無制限

Mobile App Design
Mobile App Design
HTML/CSS
HTML/CSS
wireframe
wireframe
slick-slider
slick-slider
iframes
iframes
Mobile App Design
Mobile App Design
HTML/CSS
HTML/CSS
wireframe
wireframe
slick-slider
slick-slider
iframes
iframes

受講後に得られること

  • 純粋なCSSネスト(Nesting)方式のパブリッシング能力

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

  • 19ページ、全22種類の多様なモバイルレイアウト制作

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

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

  • 経験者のようにパブリッシングするクリーンコーディング(Clean Coding)の定石

  • Slick Slider(スリックスライダー)の使い方とCSSカスタマイズのノウハウ

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

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

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

CodingWorksがこれまで数多くのオフラインスクールの学生たちに教えてきた、モバイルウェブパブリッシング制作のノウハウが詰まっています。完走後には、一段と向上したパブリッシングの実力を身につけられると確信しています。特に、CSS Nesting方式のコーディングに大きな自信を持つことができるはずです。

SCSS(SASS)でしか使えなかった
CSSネスト(入れ子)方式のコーディングを、標準のCSSでコーディングします!


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

従来のSCSS(SASS)を使用するためには準備が必要です。準備とともに、コンパイル(compile)という過程を経て初めてブラウザが認識するCSSになります。SCSS(SASS)を使用する主な理由は、まさにセレクタのネスト(Selector Nesting)です。もちろんSCSS(SASS)ならではの多様な機能は他にもありますが、最も重要な機能がネストであり、今ではSCSS(SASS)を使わずにCSSネストでコーディングすることができます。

講義テーマ 📖

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

  1. 純粋なCSSネスト(Nesting)方式のパブリッシング能力

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

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

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

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

  6. Slick Slider(スリックスライダー)の使い方およびCSS変更のノウハウ


  7. 経験者のようにパブリッシングするクリーンコーディング(Clean Coding)の定石

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

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

Can i Use ウェブサイトで詳しく見る : https://caniuse.com/?search=css%20nesting

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

計19ページ、計22種類の多様なモバイルレイアウトHTMLワイヤーフレームを詳細に制作

多様なファイルを提供 🗂

📝 デザインファイル、ソースファイル、コーディング完成版、講義ノート

  1. [CSS Nesting] デザイン作業イメージソース

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

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

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

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

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

  7. CSS Nesting モバイルウェブ - 講義ノート

▲ CSS Nesting モバイルウェブ制作動画 - 動画講義で使用されたPPT講義資料を提供

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

<モバイルウェブパブリッシングポートフォリオ with CSS Nesting> 講座を受講しながら、HTMLワイヤーフレーム作成能力、パブリッシングのためのFlex活用能力など、多方面で実力が向上すると思います。これらの部分も非常に重要ですが、その中でも最も重要な部分である「経験者のようにパブリッシングするクリーンコーディング(Clean Coding)の定石」を学ぶことになります。講義内のすべてのパブリッシングは、この原則に基づいて作成されています。

<経験者のようにパブリッシングするクリーンコーディング(Clean Coding)の定石>という部分は、必要な場所に必要なコメントを入れること、HTMLの出現順序に合わせてCSSセレクタも順序通りにコーディングすること、共通のCSSセレクタの場合は後々のメンテナンスのためにCommon CSSという場所に整理すること…このようなコーディング原則と習慣を学ぶことは、実務で非常に役立ちます。特に、就職活動の際、採用担当者やそれに準ずる人が志願者のパブリッシング成果物を確認し、ソースコード(Source Code)を見ることになります。そのような場合、少しソースコードを見ただけでも、志願者のパブリッシングの基礎力について判断することができます。

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

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

  2. パブリッシングの実力を大幅に向上させるHTMLワイヤーフレームの詳細な作成法を学びます。

  3. コーディングワークスの経験者のようにパブリッシングする、クリーンコーディング(Clean Coding)の定石を学びます。

  4. 多様な実習と例題、分かりやすい説明、深みのある概念を詳しく解説します。

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

モバイルウェブ全体の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. フォーム(form)要素の扱い


▲ 会員登録ページ / パスワード探しページ

🚩 会員登録ページ

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

  2. Flexレイアウト配置

  3. フォーム(form)要素の扱い

🚩 パスワード探しページ

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

  2. Flexレイアウトの配置

  3. フォーム(form)要素の扱い


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

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

  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. フォーム(form)要素の扱い


▲ 注文決済ページ / お気に入りリストページ

🚩 注文決済ページ

  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. ホームメインSlickスライダー

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

  4. Flexレイアウト配置

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

  6. バッジ(Badge)デザイン


🚩 商品説明ページ

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

  2. Flexレイアウト配置

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

  4. JavaScriptでトップへスムーズに移動する機能

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


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

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

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

  2. Flexレイアウト配置

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

  4. バッジ(Badge)デザイン


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

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

  2. Flexレイアウト配置

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

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

💡 パブリッシング作業テキストエディタ <Visual Studio Code>

該当講座<モバイルウェブパブリッシングポートフォリオ with CSS Nesting>は、ビジュアルスタジオコード(Visual Studio Code)で制作された講座です。ビジュアルスタジオコードは使用制限のないフリーソフトです。すべての講義動画はビジュアルスタジオコードを基準に説明しています。
以下のCodingWorksのYouTube動画を通じて、基本的な使い方を身につけてからパブリッシングを学習してください。

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

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

  2. Visual Studio Code(ビジュアルスタジオコード)でのEmmet(エミット)の使い方(動画を見る)

  3. Visual Studio Code(ビジュアルスタジオコード)必須拡張機能(Extension)のインストールおよび使用方法(動画を見る)

  4. Visual Studio CodeでCSSを修正する際、一番上に戻ってしまうFull Reloadを防止する方法(動画を見る)


講義制作に使用されたVisual Studio Codeのテーマ(Theme):One Dark Pro

Q&A 👨‍🏫

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


Q. 事前知識や準備事項は必要ですか?

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

😀 CodingWorks YouTubeプレイリスト - モバイルウェブパブリッシングを上達させるためのCSS中級理論


Q. 差別化される核心的なコンテンツは何ですか?

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

パブリッシングのオンライン・オフライン授業を長年行ってきた講師として、パブリッシングの実力を高めるための最も確実で体系的な方法で授業を行います。そして、モバイルウェブパブリッシングという不慣れで難しい作業を、段階的にハイレベルな成果物へと導けるように構成された授業が核心であると考えています。


Q. モバイルウェブパブリッシングの制作過程をなぜ学ぶべきであり、具体的な期待効果は何ですか?

モバイルウェブは個人のポートフォリオ制作物として最も重要度が高いです。そのため、モバイルウェブの制作物があれば就職競争力が高まります。就職ポートフォリオとしての役割だけでなく、ほとんどの企業でモバイルウェブプロジェクトを進行中、あるいは進行しようとしています。このような企業の立場からすると、完成度の高いモバイルウェブポートフォリオがあれば、就職や転職において非常に強力なリファレンスになると考えています。

モバイルウェブは、個人のポートフォリオ制作物として最も重要度が高いです。そのため、モバイルウェブの制作物があれば就職競争力が高まります。就職ポートフォリオとしての役割だけでなく、ほとんどの企業でモバイルウェブプロジェクトを進行中、あるいは進行しようとしています。このような企業の立場からすると、完成度の高いモバイルウェブポートフォリオがあれば、就職や転職において非常に強力なリファレンスになると思います。

具体的な期待効果は、実際には人によって異なります。しかし、CodingWorksが確信を持って言えることは、HTMLワイヤーフレーム構造を作る能力が大幅に向上するということです。多様なHTMLワイヤーフレーム構造を作りながら、複雑なHTML階層構造をどのように体系的に整理すべきか、十分なトレーニングを行います。また、一貫性のあるクラス名をどのようにネーミングし共有すべきか、一緒に作りながら詳細に講義します。

多様なモバイルレイアウトHTMLワイヤーフレームの詳細制作で、様々なHTMLワイヤーフレーム構造を作成し、 実践的なモバイルウェブパブリッシングに適用する段階まで訓練するため、今後、大抵のウェブUIレイアウトを作成することに自信が持てるようになります。


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

モバイルウェブの特性上、ファイル数やフォルダ数が多いです。そのため、かなりのスピード感で多くの内容が進行します。「どのレベルまで」というのは個人の基準によりますが、パブリッシャーの個人ポートフォリオとして十分なレベルで制作する授業内容です。それだけでなく、実務でモバイルウェブ制作を行うレベルと考えても十分なほどの授業内容となっています。


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

既存のモバイルウェブ講義と本モバイルウェブ講義は、どちらもモバイルウェブをCSS方式で制作する点は同じです。最も大きな違いは、既存の講義は親要素を毎回並べるCSS方式であるのに対し、本講義は親要素を一度だけ使用するCSSネスト(入れ子)方式の制作講義である点です。既存の講義よりも難易度が1.5倍ほど高くなり、より多くのページと多様なレイアウト制作を行うため、モバイルウェブパブリッシングの実力をさらに向上させることができます。

該当するモバイルウェブ制作講義の相違点

  • 授業でFigmaのデザイン作業は行いません。

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

  • CSS Nesting コーディング方式

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

  • すべて異なる22種類のレイアウト制作

  • 多様なスライダー制作方式(Slick Slider)



Q. 全体の講義時間はどのくらいですか?

動画講義の総時間は約16時間で、深い学習のために十分な内容が用意されています。

  • 事前必読動画およびモバイルウェブHTMLワイヤーフレーム構造の作成方法 - 2時間

  • [実践制作] モバイルウェブHTMLワイヤーフレーム構造 with PPT - 3時間

  • [実践制作] モバイルウェブ詳細パブリッシング with CSS Nesting - 10時間

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


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

授業内容が多く、スピード感を持って進められます。かといって十分な説明なしに通り過ぎることはなく、詳細に説明します。しっかりついてきていただけると信じています。ただし、シングルモニターで学習するよりも、デュアルモニター環境を整えることを強くお勧めします。セクション2の[必読] 努力の割にパブリッシングの実力が伸びない理由の動画に詳しく説明されていますので、参考にしてください。

セクション 1. 講義紹介

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

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

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

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


セクション 2. [必読] モバイルウェブ HTMLワイヤーフレーム構造の作り方

  • 【必読】努力の割にコーディングスキルが向上しない理由

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

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

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

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


セクション 3. [実践制作] モバイルウェブ HTML ワイヤーフレーム構造 with PPT

  • HTMLワイヤーフレーム構造(Join - スタート、ログイン、会員登録、パスワード探し)

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

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

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

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

  • HTMLワイヤーフレーム構造(Myfresh 05 - お気に入り、最近見た商品、注文履歴)

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

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

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

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

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


セクション 4. [実践制作] モバイルウェブ詳細パブリッシング with CSS Nesting

  • 【必読】モバイルウェブパブリッシングにおける幅(width)と高さ(height)の設定方法

  • 【必読】フォルダ構造の作成、Reset、変数(Variables)

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

  • [実践パブリッシング制作] イントロ 02(トーストオーバーレイ、絶対パス vs 相対パス)

  • [実践パブリッシング制作] 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. [参考にする] 完成したモバイルウェブをポートフォリオとして活用する

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

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

  • モバイルブラウザ検知JavaScript(アロー関数、User Agent)

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


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

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

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

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

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

学習中に気になることがあれば、ぜひ質問してください。質問される際は、うまくいかない内容とコード、そしてブラウザの結果画面のキャプチャをアップロードしていただく必要があります。コードについては、HTML、CSS、JSのコードをすべて載せていただければ、正確な回答を差し上げることができます。

質問にコードを載せず、文章のみで問題を説明された場合、非常に単純な内容でない限り、正確な回答を差し上げることは困難です。その場合、私から「HTML、CSS、JSのコードとブラウザのキャプチャをアップロードしてください」と再度返信せざるを得なくなり、結局解決までに手間と時間が余計にかかってしまいます。

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

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

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

講師紹介

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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • モバイルウェブUIデザインおよびパブリッシングのポートフォリオが必要な方

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

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

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

こんにちは
codingworksです。

13,116

受講生

789

受講レビュー

2,122

回答

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

もっと見る

カリキュラム

全体

56件 ∙ (16時間 19分)

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

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

受講レビュー

全体

4件

5.0

4件の受講レビュー

  • parkjb215682님의 프로필 이미지
    parkjb215682

    受講レビュー 11

    平均評価 5.0

    5

    30% 受講後に作成

    パブリッシャーがいる状態で開発をした開発者ですが、reactを勉強しながらcssを開発者が知っておくべきだと思い、授業を受けることになりました。 ワイヤーフレームという概念を知ることができたのが、今後仕事をする上で大きな助けになりそうです。

    • codingworks
      知識共有者

      受講レビューありがとうございます。^^

  • kimkm67923205님의 프로필 이미지
    kimkm67923205

    受講レビュー 1

    平均評価 5.0

    5

    30% 受講後に作成

    • codingworks
      知識共有者

      受講評価ありがとうございます。

  • n5i4님의 프로필 이미지
    n5i4

    受講レビュー 3

    平均評価 5.0

    5

    32% 受講後に作成

    • codingworks
      知識共有者

      受講レビューありがとうございます。

codingworksの他の講座

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

似ている講座

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