강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト with Figma

SCSS(SASS)とFLEX Layoutを実戦に完璧に活用します!ピグマでウェブサイト全体のメインページとコアサブページUIを設計し、一貫性のあるクラスネームとともにHTMLワイヤフレーム構造を作成し、パブリッシングまで完了する体系的なレスポンシブWebサイトプロジェクトの制作過程です。合計41時間以上のプロセスの中で、コア理論と実務活用能力を十分に習得し、PC - モバイル - タブレット対応のレスポンシブレイアウトを設計および制作しながら、レスポンシブWebプロジェクトの経験とノウハウはもちろん、JQueryのコア理論と実務活用能力まで大幅に向上させます。

  • codingworks
실습 중심
웹퍼블리싱
HTML/CSS
Sass
scss
JavaScript
jQuery

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

受講後に得られること

  • 体系的なレスポンシブ ウェブ サイト プロジェクトの作成プロセス

  • SCSS(SASS) の基本理論と実務活用能力

  • FLEX レイアウトの核心理論と実務活用能力

  • PC、モバイル、タブレット対応のレスポンシブレイアウトの設計と制作

  • レスポンシブ ウェブ プロジェクトの作成のための jQuery の基本理論と実務活用能力

  • Figma で作成する Web サイト UI デザインのスキル

  • 体系的な HTML ワイヤーフレーム構造とクラス名設計能力

  • Web パブリッシャーと開発者向けの最高のレスポンシブ Web ポートフォリオの作成

Webパブリッシャーと開発者のための圧倒的なポポールを探しているなら?
SCSS(SASS)+FLEXレスポンシブオンライン講義サイトプロジェクト!

「SCSS(SASS)+FLEX実戦レスポンシブWebプロジェクト with Figma講義で
体系的なレスポンシブウェブサイトプロジェクト制作能力の完成」
「41時間以上の膨大な学習量」

やや不慣れなSCSS(SASS)パブリッシング作業なので入門者は少し難しいかもしれませんが、初心者はセクションごとに順番にうまく従うことで十分に完了することができます。

SCSS(SASS)とFLEXを実戦に完璧に活用します!

Point 1.ピグマ(Figma)でSCSS(SASS)+FLEXウェブサイトUIデザイン製作
Point 2. SCSS(SASS)+FLEX ウェブサイト HTML ワイヤフレーム 全てのページ 詳細な製作
Point 3. SCSS(SASS)+FLEXを活用した多様な多数のWebページパブリッシング制作
Point 4. PC、モバイル、タブレット対応レスポンシブレイアウト設計、製作、完璧なパブリッシング作業まで
Point 5.レスポンシブ Web プロジェクトを作成するためのジェイクエリーのコア理論と実務活用能力

コーディングワークスがこれまで数多くのオフライン学園や個人ポートフォリオホームページ制作過程で授業した中上級パブリッシング制作ノウハウが込められています。特に、SCSS(SASS)+FLEXをベースに製作するレスポンシブWebパブリッシングプロジェクトで、SCSS(SASS)+FLEX能力を最大限に引き上げることができます。
完成後、さらに向上した中上級レスポンシブWebパブリッシング能力を持つことになると確信しています!

SCSSコア理論映像アップデート(5時間9分)

シームレスなSCSS(SASS)+ FLEX本番レスポンシブWebプロジェクトの公開作業のために、SCSSのコア理論(Essential Theory)を更新しました。 SCSSコア理論(Essential Theory)映像は5時間9分にわたってSCSSのほぼすべての理論を扱っているので、SCSSコア理論を十分に深く深めることができます。

セクション5以降、パブリッシング作業のために追加された完全なビデオをすべて学習する必要はありません。セクション5から、パブリッシング作業に不可欠な理論映像は次のとおりですが、これだけ学習してもパブリッシング作業に支障は全くありません。

1. SCSS コア理論(01) - セレクタのネスト(Nesting)

2. SCSS コア理論(02) - 親セレクタ参照(&)と注釈処理

3. SCSSコア理論(03) - 親セレクタ参照(&)アプリケーション

4. SCSSコア理論(04) – 代表的なCSSセレクタSCSSで作成

5. SCSS コア理論(05) - 親セレクタ参照(&) 仮想クラス

6. SCSS コア理論(06) - 親セレクタ参照(&) 属性選択子

7. SCSS コア理論(07) - 親セレクタの入れ子になる @at-root

10. SCSS コア理論(10-1) - 変数(Variables) 01

11. SCSS コア理論(10-2) - 変数(Variables) 02

13. SCSSコア理論(11-1) - 外部ファイルのインポート@import

※残りの映像は今後SCSSをより深く学習する必要がある場合、その時見ても十分です。

================================================== ============

▼追加されたセクションと全体理論映像内容(2023.07.06)

セクション 4. SCSS コア理論 (Essential Theory)

  1. SCSSコア理論(01) - セレクタのネスト(Nesting)

  2. SCSSコア理論(02) - 親セレクタ参照(&)と注釈処理

  3. SCSSコア理論(03) - 親セレクタリファレンス(&)アプリケーション

  4. SCSSコア理論(04) – 代表的なCSSセレクタSCSSで作成

  5. SCSSコア理論(05) - 親セレクタリファレンス(&)仮想クラス

  6. SCSSコア理論(06) - 親セレクタ参照(&)属性選択子

  7. SCSSコア理論(07) - 親セレクタの入れ子になる@at-root

  8. SCSS コア理論(08) – プレフィックスを使用して CSS 属性を自動生成

  9. SCSSコア理論(09) – 仮想クラス:isでセレクタの重複を減らす

  10. SCSSコア理論(10-1) - 変数(Variables) 01

  11. SCSSコア理論(10-2) - 変数(Variables) 02

  12. SCSSコア理論(10-3) - 変数(Variables)有効範囲とCSS変数宣言

  13. SCSSコア理論(11-1) - 外部ファイルを取得する@import

  14. SCSSコア理論(11-2) - @importに分割されたファイルを読み込む

  15. SCSSコア理論(12) - 演算子(Operations), 出力ウィンドウを取り除く

  16. SCSSコア理論(13-1) - グループを宣言する@mixin、グループを使う@include

  17. SCSSコア理論(13-2) - @mixinと@includeを適用する

  18. SCSSコア理論(13-3) - @mixinと@includeを活用したボタンデザイン

  19. SCSSコア理論(13-4) - @mixinのパラメータ(引数)を@includeとして使用する

  20. SCSSコア理論(14) - セレクタ属性を取得する@extend

  21. SCSSコア理論(15) - @extendで使用するプレースホルダーセレクタ%

  22. SCSSコア理論(16) - 多変数宣言、組み込み関数(map-get)

講義オープン記念受講評イベント😋

該当講義に受講評を書いてくださる方に限り、SCSS(SASS)+FLEXコア理論 PDF教材及び活用例ファイルを提供します。提供されるPDF教材とファイルはパブリッシング作業と今後の実務で作業する時のために良いリファレンスになります。

受講評は受講生分が該当講義を見て感じた率直な受講評を書いてください。受講評価を作成し、作成した受講評価をキャプチャして下記のメールでお送りください。

受講評イベントは期間限定で講義オープン割引期間4週間行われます。
※受講評イベントは期間なしで進行することにしたので、いつでも受講評作成してください。

■期間:4週間(2023年7月1日~7日28日)
■対象:該当講義受講評を作成されたすべての方
■Eメール:webnlife@naver.com

🚩提供ファイル

- SCSS(SASS)コア理論教材(PDF、67ページ)および完成本活用例
- FLEXコア理論教材(PDF、36ページ)と完成本の活用例

※完成本活用例は、該当教材に出てくるすべての例を作った完成本です。
※ SCSS(SASS)+FLEX 核心理論教材及び提供ファイル詳細紹介を見る : https://inf.run/qzdx
※GRIDコア理論教材と活用例は含まれていません。
※受講坪作成確認メールをお送りいただくと、提供ファイルは24時間以内に発送されます。

SCSS(SASS)活用能力は優遇事項であり必須事項👍

以前や今や規模のある会社の場合、Webパブリッシャーとフロントエンド開発者の採用公告を見ると、SCSS(SASS)活用能力が常に採用で「優遇事項」として扱われます。優遇事項というのは必須資格要件ではありませんが、やると分かればもっと優遇するという言葉です。まもなく、他の志願者に比べて高い競争力を持つという言葉でもあります。

🔥パブリッシャーとして、または開発者として入社支援と面接でSCSS(SASS)活用能力があると言うだけで話すことは不足しています。 SCSS(SASS)を実際にはただ聞いたり、しばらくしてみたくらいなのですが、面接を見る時はやると分かると言う志願者たちは本当に多いです。言葉だけのパブリッシング活用能力、言葉だけの開発能力は人々がよく信じていません。しかし、実際にSCSS(SASS)を活用して製作したレスポンシブWebプロジェクトを見せてくれれば、SCSS(SASS)活用能力を証明する最良の方法となり、採用にも当然優遇されます。

昨年だけでもSCSS(SASS)活用能力をウェブパブリッシャーに優遇事項として採用公告に載せることが大半でした。開発者にはSCSS(SASS)活用能力を求めるケースがあまり多くありませんでした。ところが最近講義オープン準備ができて採用公告を見ると、SCSS(SASS)活用能力をウェブパブリッシャーの資格要件に上げたり、開発者にも優遇事項や資格要件に上げる場合をよく見ます。特に、WebパブリッシャーにはFigmaの活用能力を求めるところもかなり多い。

▼最近ジョブコリアで検索したWebパブリッシャー、Web開発者実際の採用公告内容


架空の講義サイトを自分で作って
実力を確実に上げてみてください。

💡 [SCSS(SASS)+FLEX実戦レスポンシブWebプロジェクト with Figma]講義を通じてSCSS(SASS)コア理論と実務活用能力、FLEX Layoutコア理論と実務活用能力、PC、モバイル、タブレット対応レスポンシブレイアウト設計と製作実力を中上級まで上げることができます。

コーディングワークスが「Beyond Insight」という仮想で作ったオンライン講義のウェブサイトを制作します。 Inflearnまたはクラス101に似ていると見てください。メインページからサブページまで、プロジェクトコンセプトで様々なページと様々なレイアウトをSCSS(SASS)でコーディングし、すべてのレイアウトをFLEXレイアウトで製作される中上級の実力向上のためのレスポンシブウェブサイト制作プロジェクトです。

  • 体系的なレスポンシブウェブサイトプロジェクト制作プロセス
  • SCSS(SASS)コア理論と実務活用能力
  • FLEX Layout コア理論と実務活用能力
  • PC、モバイル、タブレット対応レスポンシブレイアウトの設計と製作
  • レスポンシブWebプロジェクトを作成するためのジェイクエリコア理論と実務活用能力
  • Figma(ピグマ)で製作するウェブサイトUIデザイン能力
  • 体系的なHTMLワイヤフレーム構造とクラスネーム設計能力
  • 実務でぴったり!必要不可欠なジェイクエリ相互作用の完全学習
  • すべての制作ソース提供(Figmaデザインファイル、パブリッシングソースファイル、講義資料PDF、パブリッシング完成本)

SCSS(SASS)ができるというだけでもパブリッシャー就職と離職で良い競争力を持つようになります。ところで、SCSS(SASS)を使ってレスポンシブウェブサイトプロジェクトを素敵にすることで、その能力と成果は就職や職場で誰よりも大きな競争力を持つことになると確信しています。もちろん、中上級レベルに近い授業内容であり、分量なのでただだけではありませんが、よく従うとコーディングワークスのどんな講義よりも大きな成果を持つことになると思います。

今回の講義で制作するレスポンシブWebプロジェクトは、単にメインページだけを作成するものではありません。全ウェブサイトの最も重要なページであるフロントページ、講義紹介ページ、カテゴリーメインページ、受講申込受講バスケットページ、会員登録ページの合計5ページです。すべてのページは、PC、モバイル、タブレットのレイアウトに変更するレスポンシブパブリッシング作業が行われるレッスンです。そして様々なジェイクエリーの相互作用を学び、様々なモーダルも製作します。


レスポンシブWebプロジェクト講義の学習手順🙆‍♀️

  • 手順01.レスポンシブウェブサイトPCレイアウトピグマ(Figma)UIデザイン
  • 手順 02.フィグマでのクラスネームとともに HTML ワイヤフレーム構造設計
  • 手順03.テキストエディタでHTMLをコーディングする
  • 手順 04.ジェイクエリの相互作用を伴うテキストエディタでの SASS(SCSS)コーディング
  • 手順05. PCレイアウトをMobileレイアウトに変更するパブリッシング
  • 手順06. PCレイアウトをタブレットレイアウトに変更するパブリッシング
  • 手順07.すべてのWebページの細かいパブリッシング最終仕上げ作業

1) ピグマ(Figma)でSCSS(SASS)+FLEX実戦反応型WebプロジェクトUIデザイン製作

2) ピグマ(Figma)でSCSS(SASS)+FLEX実戦反応型WebプロジェクトHTMLワイヤフレーム構造の製作

3)HTMLワイヤフレーム構造に基づいてテキストエディタでHTMLをコーディングする

4)HTMLワイヤフレーム構造に基づいてテキストエディタでSCSS(SASS)コーディング

5) モバイル対応レスポンシブウェブレイアウトによる変更作業

6) タブレット対応レスポンシブウェブレイアウトで変更作業

7) 全ウェブページのジェイクエリー相互作用作業と細かいパブリッシング最終仕上げ作業

▼ さまざまな種類の実際のデバイスモックアップで詳細な仕上げ作業

パブリッシング完成版のプレビュー&機能定義🙆‍♀️

この講義で製作するウェブページは、フロントページ、講義紹介ページ、カテゴリーメインページ、受講申請受講バスケットページ、会員登録ページです。すべてのページは、PC、Mobile、Tabletレイアウトに変更するレスポンシブパブリッシング作業が行われる講義です。そして様々なモーダルも一緒に制作します。

以下のセクションで[パブリッシング完成本のプレビュー&機能定義]映像をご覧になれば、その講義で何を作成するかパブリッシング機能定義が詳細に説明されています。そして[全カリキュラム]で授業内容目次をイメージでご覧いただけます。

▼ SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト : フロントページ(Front Page)

🚩 フロントページ(Front Page)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • ウェブサイトの最初のページは、ユーザーにそのウェブサイトのアイデンティティを表示します
  • 複雑なHTML構造を管理し、整理された階層を作成する方法(Clean Coding)
  • PC&Tabletレイアウトナビゲーションとモバイルナビゲーションを操作するスクリプトをif条件分岐させる
  • 一定の数値のスクロールをすると、Headerを上部に固定するスクリプトを使用
  • フロントページにメンター申請とイベントモーダルを表示
  • メインスライダーと講義アイテムスライダーをスリックスライダーとして製作
  • すべてのページが共通して走り回る Header & Footer をジェイクエリーでコンポーネント作業
  • カウントダウンタイマープラグインの使用
  • Footerのナビゲーションをモバイルレイアウト時にドロップダウンアコーディオン形式に変換
  • 検索フォーム要素にフォントアイコンを置くと:focus ::placeholderを使う
  • 仮想クラス:before:afterでフォントアイコンUnicodeを活用
  • SVG画像の使い方
  • CSS プロパティである Object-fit の本番使用方法
  • 必須のジェイクエリ相互作用メソッド(クラス制御、要素選択、イベントハンドラなど)
  • 不可欠なインラインJavaScriptの活用方法
  • 講義アイテムカードUIをさまざまな形でリサイクルする方法(@at-root)
  • フォントアイコン(Bootstrap Icons)の使い方と活用方法
  • メディアクエリブレークポイントごとにレスポンシブレイアウトを変更する(最小1024、768〜1024、最大767)

▼ SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト:講義紹介ページ(Class Detail)

🚩講義紹介ページ(Class Detail)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • 講義紹介ページで最も内容が多いため、パブリッシングワークが多いページ
  • 講義紹介 右サイドバー 一定スクロール後に固定する
  • 講義詳細内容サブナビゲーションスケジュールスクロール後に固定する
  • サイドバーを共有するボタンをクリックして共有するモーダルを表示する
  • カリキュラム紹介ジェイクエリアコーディオン
  • よく寄せられる質問
  • 受講後期別点改修棒CSSデザイン
  • カラー組み込み関数(built-in function)
  • メディアクエリブレークポイントごとにレスポンシブレイアウトを変更する(最小1024、768〜1024、最大767)

▼ SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト : カテゴリー メインページ(Category Main)

🚩カテゴリメインページ(Category Main)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • クラスレッスンリストスリックスライダー
  • ページングCSSデザイン
  • メディアクエリブレークポイントごとにレスポンシブレイアウトを変更する(最小1024、768〜1024、最大767)

▼ SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト : 受講申請受講バスケット(Take Course)

🚩 受講申込 受講バスケット(Take Course)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • JQueryを活用した受講カートアイテムの削除と全体削除
  • さまざまなCSS3属性(accent-color)
  • メディアクエリブレークポイントごとにレスポンシブレイアウトを変更する(最小1024、768〜1024、最大767)

▼ SCSS(SASS)+FLEX 実戦反応型ウェブプロジェクト : 会員登録ページ(Member Register)

🚩 会員登録ページ(Member Register)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • HTMLフォーム要素の特徴と属性の詳細な学習
  • フォーム要素仮想クラスの活用(:focus ::placeholder)
  • 重複したセレクタを効果的に整理する:is仮想クラス
  • カスタムチェックボックスできれいなチェックボックスとラジオボタンを作る
  • パスワードを表示/安全に設定するスクリプト

▼ SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト : ログインモーダル(Modal)

🚩ログインモーダル(Modal)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • HTMLフォーム要素の特徴と属性の詳細な学習
  • フォーム要素仮想クラスの活用(:focus ::placeholder)
  • 重複したセレクタを効果的に整理する:is仮想クラス
  • カスタムチェックボックスできれいなチェックボックスとラジオボタンを作る
  • パスワードを表示/安全に設定するスクリプト
  • @mixin @includeを活用する

🚩シェアするモーダル(Modal)、受講バスケット確認モーダル(Modal)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • 仮想クラス:before:afterで図形を作る
  • 受講バスケット確認モーダル setTimeoutで4秒後に自動閉じる

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

📝 [SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト with Figma] 全て完成本

セクション7では、レッスンを作成するためのすべてのソースファイルと一緒に、デザイン完成本、パブリッシング完成本が提供されています。また、講義では、コア理論の説明と重要なポイントの説明のためのPPTファイルもPDFとして提供されています。

  • [ダウンロード] デザイン作業(Beyond Insight)
  • [ダウンロード] HTMLワイヤフレーム構造(Beyond Insight)
  • [ダウンロード] パブリッシング作業(Beyond Insight)
  • [講義ノート PDF] SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト with Figma

📝 ビデオ講義で使用されているPPT講義資料PDFを提供

  • 設計作業とパブリッシング作業のためのさまざまな参考資料を提供
  • [講義ノート] SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト with Figma(全39ページ)

SCSS(SASS)+FLEX クリーンコーディング(Clean Coding)の定石🧽

[SCSS(SASS)+FLEX実戦レスポンシブWebプロジェクト with Figma]講義を受講しながらピグマUIデザイン能力、HTMLワイヤフレーム作成能力、パブリッシングのためのSCSS(SASS) + FLEX Layout 使用能力など様々なことで実力が成長すると思います。これらの部分も非常に重要ですが、最も重要な「キャリアのようにパブリッシングするクリーンコーディング(Clean Coding)の定石」を学びます。講義では、すべてのパブリッシングがこの原則の下に書かれています。

特に、今回の講義では、SCSS(SASS) コーディングを階層に従って順番にしなければならない部分について頻繁に強調します。 SCSS(SASS)の場合、セレクタ階層は通常のCSSよりもはるかに重要です。

<キャリアのようにパブリッシングするクリーンコーディング(Clean Coding)の定石>という部分は必要なところに必要な注釈を入れること、HTML出演順に合わせてCSSセレクタも順番にコーディングすること、共通のCSSセレクタの場合後でメンテナンスのためにCommon CSSというところに整理すること... このようなコーディングの原則と習慣を学ぶことができれば、実務で本当に多くの助けになります。

具体的には、就職時に人事担当者またはそれに準ずる人が志願者のパブリッシング結果を見て、ソースコード(Source Code)を見ることになります。このような場合は、少しだけソースコードを見ても、申請者のパブリッシングベータについて判断できます。

💡今回の講義の特別な魅力ポイントは?

  • フィグマ(Figma)の実戦制作で、レスポンシブなWeb UI制作能力を備えています。
  • パブリッシングのスキルを大幅に向上させるHTMLワイヤフレームの詳細な書き方を学びます。
  • パブリッシングキャリアのようにパブリッシングするクリーンコーディングの定石を学びます。
  • さまざまなページやレイアウトの作成、わかりやすい説明、深い概念を詳しく説明します。
  • レスポンシブWebパブリッシングのために受講生が知る必要があるすべてを説明します。
  • SCSS(SASS)とFLEXの深い理解と活用能力を学びます。
  • SCSS(SASS)コーディングは、階層に従って順次的で体系的な方法を学びます。
  • FLEXレイアウトを実務ですぐに理解して適用しながら、FLEXを確実に学びます。
  • パブリッシャー就職と転職のための最高のポートフォリオ、SCSS(SASS)レスポンシブWebプロジェクト

受講前の注意事項📢

🌈実習環境(テキストエディタ)

  • テキストエディタはビジュアルスタジオコード(Visual Studio Code)で作成されました。
  • ブラケット、サブライムなどの他のテキストエディタを使用することもできますが、そのテキストエディタはエクステンションとしてLive Sass Complierをサポートする必要があり、講義に従うことができます。
  • SCSS(SASS)コーディングには、ビジュアルスタジオコードの拡張であるLive Sass Complierを必ず使用してください。このレッスンでは、Live Sass Complierを使用するためにビジュアルスタジオコードを必ず使用してください。

学習資料のダウンロード

すべての学習資料は以下のセクションで入手できます。フォルダー変路押出ファイルとして提供されるので、ダウンロード後に解凍し、講義を順番に従います。

💡ダウンロードファイルの使い方とフォルダの内容

①デザイン作業とパブリッシング作業に必要な資料
② 設計作業開始時に必要な資料
③パブリッシング完成本資料

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

該当講義はビジュアルスタジオコード(Visual Studio Code)で制作された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。すべてのレッスンビデオは、ビジュアルスタジオコードベースで説明されています。

以下のコーディングワークスのYouTubeビデオを通じて基本的な使い方をまず理解し、<セクション3.モバイルWeb詳細パブリッシング(HTML+CSS+JS)>を学習してください。

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

  • ビジュアルスタジオコード(Visual Studio Code)の使い方と環境設定(ビデオを見る)
  • ビジュアルスタジオコード(Visual Studio Code)でのEmmetの使い方(ビデオを見る
  • ビジュアルスタジオコード(Visual Studio Code)必須拡張機能のインストールと使用法(ビデオを見る)
  • ビジュアルスタジオコードでCSSを変更したときに上がるフルリロードを防ぐ(ビデオを見る)
  • ✅ Live Sass Compilier ExtensionのインストールビデオはYouTubeにはありませんが、必ずインストールしてください。
  • ✅パブリッシングの前に、必ず以下のセクションでLive Sass Compilier Extensionのインストール方法を学んでください。


Q&A 💬

下記の予想質問以外の質問は、該当の講義コミュニティ質問掲示板に残していただければ最善を尽くしてご回答いたします。

Q. SCSS(SASS)とFLEXについて勉強したことがないのですが、授業によく従えますか?

🔊 FLEX先行学習
FLEXはあまり普遍的な内容なので、YouTubeでフレックスレイアウトまたはCSS Flexと検索すると、20~30分程度の映像でフレックスの理論をまとめた映像がかなり多いです。こんな映像1~2本くらい見て実習すればフレックス先行学習は十分です。フレックスレイアウトは思ったより理論的な内容が多くはありません。

🔊 SCSS(SASS) 先行学習
SCSS(SASS) 先行学習は講義に含まれるセクション 4. SCSS コア理論(Essential Theory)を学習すれば不足はありません。

Q. パブリッシング選手の知識がどのくらい必要ですか?

HTML+CSS 基本的な使用経験であればフォローすることができ、期待するほどの実力向上と成果を得ることができます。ただし、CSSの実力があまりにも基礎段階にある方には負担されることがあります。 CSSの実力がある程度しか揃っていなくても十分に追いつくことができます。

そして、SCSS(SASS)に初めて接する方のためにセクション4. SCSSコア理論(Essential Theory)に5時間以上の理論授業も用意されているのでセクション4を学習してセクション5~7まで十分に従って来てプロジェクトを完了することができるあります。

Q. コーディングワークス講義中にSCSS(SASS)すでに2つありますが、今講義とどう違いますか?

はい。既存のコーディングワークス講義中2つの講義があります。

< SCSS(SASS)+FLEX 実践反応型Webプロジェクト with Figma >講義は映像講義であり、SCSS(SASS)の核心理論と実戦活用を勉強する過程です。しかし、今回のコースのようにSCSS(SASS)で全体のウェブサイトを作る過程ではなく、受講生の立場では難易度負担が少ない講義です。そこで、SCSS(SASS)に初めて接する方には、SCSS(SASS)の経験とSCSS(SASS)で作った実践例を作るのに適した講義です。

講義は映像講義ではなく、教材や実践例ファイルを提供する講義です。パブリッシャーとしてリファレンス用に持っていれば役に立ちます。

上記の2つのコースを先行しなくても、今回のSCSS(SASS)+FLEXレスポンシブWebプロジェクト講義を受講することは問題になりません。ただし、CSSの実力がある程度は準備されていなければなりません。

Q. グラフィックプログラムの使用経験がないのにピグマ(Figma)デザインできますか?

紹介映像でも言及しましたが、ピグマは努力に比べてパフォーマンスがとても良いです。パワーポイントを最小限に扱うことができれば、十分にピグマデザインの授業に従うことができます。ただ、もう少し授業をうまく消化するために、<[必読]SCSS(SASS)+FLEX実戦反応型Webプロジェクトピグマ基礎講座(ft.デュアルモニター使用)>映像をご覧になって紹介したYouTubeを通じて先行学習をしてください。

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

デザイン専門家としてではなく、事前知識が全くない人がピグマをうまく活用できるレベルのデザイン講義なので、<セクション1. SCSS(SASS)+FLEXレスポンシブWebプロジェクトUIデザイン制作 with Figma> ピグマデザイン作業授業は専門家のための授業というよりピグマを初めて始める人が受け入れる無難なレベルです。
しかし、<セクション2. SCSS(SASS)+ FLEXレスポンシブWebプロジェクトHTML Wireframe with Figma>レッスンは、長い間パブリッシング講義を行ってきた講師として、パブリッシングのスキルを高める最も確実で体系的な方法で授業します。そして、モバイルWebパブリッシングという不慣れで難しい作業を段階的にレベルクラスの成果を引き出すことができるように制作された授業が重要だと思います。

特に、SCSS(SASS)レスポンシブWebプロジェクトを行うためのセクション4では、SCSSコア理論(Essential Theory)を5時間以上カバーしているため、SCSSコア理論を完全に学習できます。

さまざまなページのさまざまなレイアウトHTML構造を作成し、それをパブリッシングしながら、中上級パブリッシングのスキルを持つことになると思います。

Q. デザイン非専攻者も聞ける講義ですか?

十分可能です。私もデザインと全く関係のない専攻です。セクション1の<[必読] SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト ピグマ基礎講座> 映像にもありますが、パワーポイントをよく扱う程度ならピグマ学習して活用するのにまったく支障がありません。私もピグマ講義のために短期間学習したのに良いデザイン結果を得ることができました。

Q.デザイナーのPigmaはうまくいきますが、セクション1のPigmaデザインを学ぶ必要がありますか?

紹介映像にも言及しましたが、私がピグマを長くしてくれたり上手な人ではありません。だからピグマ作業に自信がある方なら<セクション1. SCSS(SASS)+FLEXレスポンシブWebプロジェクトUIデザイン制作 with Figma>は通り過ぎて<セクション2. SCSS(SASS)+FLEXレスポンシブWebプロジェクトHTMLワイヤフレームwith Figma>ですぐに行って学習してください。

セクション2のHTMLワイヤフレーム構造の作成からは、デザイン領域ではなく、パブリッシング講義領域です。

Q. SCSS(SASS)+FLEXレスポンシブWebプロジェクト制作過程をなぜ学ばなければならず、具体的な期待効果は何ですか?

[SCSS(SASS)+FLEX実戦レスポンシブWebプロジェクト with Figma]講義を通じてSCSS(SASS)コア理論と実務活用能力、FLEX Layoutコア理論と実務活用能力、PC、モバイル、タブレット対応レスポンシブレイアウト設計と製作実力を中上級まで上げることができます。

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

<セクション 2. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト HTML ワイヤフレーム with Figma>でさまざまな HTML ワイヤフレーム構造を作成し、<セクション 5~7。 SCSS(SASS)+ FLEXレスポンシブWebプロジェクト詳細パブリッシング>から本番Webパブリッシングを適用する段階まで訓練するので、今後はかなりのWeb UIレイアウトを作成することに自信があります。

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

SCSS(SASS)+ FLEXレスポンシブWebプロジェクトは、性質上、ファイルの数とフォルダが数が多いです。だからちょっとスピード感のあるように多くの内容が進みます。あるレベルまでというのが人の基準によって異なりますが、パブリッシャー個人ポートフォリオとして十分なレベルで作業する授業内容です。

SCSS(SASS)+ FLEXレスポンシブWebプロジェクトの講義は初中級レベルですが、中級に近いと思います。まもなく、すごく多くの内容を扱います。初心者には負担になることがありますが、コースを終えればパブリッシング能力がかなり成長したことを感じられると思います

Q. コーディングワークス様講義中に< モバイルウェブパブリッシングポートフォリオ with Figma>を受講しましたか?

モバイルWebパブリッシングポートフォリオ with Figma レッスンを受講したら、[セクション 1. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト UI デザイン制作 with Figma デザイン]内容を必ず学ぶ必要はありません。 (可能であれば速い速度で作ってみることをお勧めします。)

[ セクション 2. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト HTML ワイヤフレーム with Figma]から学習を始めても大丈夫です。

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

全映像講義時間は41時間以上で、深い学習のための十分な授業時間で用意されています。全体の授業率は、ピグマデザイン作業が15%、パブリッシング作業が85%を占めます。全体のビデオでは、セクション1はPigma UIデザインタスクであり、残りのセクションはレスポンシブWebパブリッシング学習領域です。

  • セクション 1. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト UI デザイン制作 - 6 時間 37 分
  • セクション2. SCSS(SASS)+ FLEXレスポンシブWebプロジェクトHTMLワイヤフレーム - 5時間21分
  • セクション3.ビジュアルスタジオコードでLive Sass Compilerを設定して使用する - 1時間15分
  • セクション 4. SCSS コア理論(Essential Theory) - 5時間 9分
  • セクション 5. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト for PC Layout - 15時間 44分
  • セクション 6. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト for Responsive Layout - 3 時間 35 分
  • セクション7. [最終仕上げ] SCSS(SASS)+FLEXレスポンシブWebプロジェクト - 2時間53分

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

授業内容が多く、スピード感があります。とはいえ、十分な説明なしで通り過ぎずに詳細に説明します。よく従うと思います。ただし、シングルモニターで学習するよりも、デュアルモニター環境を整えることを強くお勧めします。セクション1にある[必読] SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト ピグマ基礎講座(ft.デュアルモニター使用) 映像は受講申請前に必ずご覧ください。


知識共有者の紹介✒️

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

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

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

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

▲該当講義コミュニティのよくある質問の見方をまず確認してください〜

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

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

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

知識共有者の紹介

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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • SCSS(SASS) の基本理論と実務活用能力が必要な方

  • 体系的なレスポンシブ ウェブ サイト プロジェクトの作成ポートフォリオが必要な方

  • フロントエンド開発者としてパブリッシングの真髄を知りたい方

  • 最も競争力のあるレスポンシブ ウェブ プロジェクトを必要とするパブリッシャー

  • 履歴書で競争力を高めたいSCSS(SASS)の活用能力をお持ちの方

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

  • HTML+CSS の基本以上の能力

こんにちは
です。

12,814

受講生

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

カリキュラム

全体

125件 ∙ (41時間 14分)

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

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

受講レビュー

全体

24件

4.9

24件の受講レビュー

  • ds4odk님의 프로필 이미지
    ds4odk

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    Front Web開発は初めてなので心配がたくさんありました。 講義が他の講座に比べて多少大きな違いがあります。 心配を少ししたけど(ㅎㅎㅎ) 私の選択が神の一人になりましたね。 (講義を本当に上手にします。!!) Web開発経験が1もありません。 開発されたメインプログラムをWeb/モバイルでサービスしなければならないという考えに 事前準備と勉強をしなければならない、講義申請して休暇を1週間程度 出してチョン~走行しました。 4日目になった日~土出せようとしましたね。 とにかく5日目、すべての講義を終えて ASP.Net Core 7 Razor page でいくつかテストしてみました。 (Udemy サイトの ASP.NET Core Web Application Using Razor Pages 15,000ウォン講義を聞いてから〜ㅎㅎ) テストした結果がDBとうまく連動して表現がうまくいくことに とても喜んで新世界を経験しました。 過去のコボル、Fortranで始まり、現在はC#、VB.NETなどいくつか 開発ツールでデスクトップ実務を開発した旧式(?)技術で 果たして、私は現在のトレントに合った開発環境に適応できますか?したかったのに… 詳細な説明に簡単に理解できました。 おかげで大きな力になって勇気ができました。 SCSS / ピグマ(有料決済) / Jクエリ / HTML 上記4つの項目とサンプル例講座だけでもレベルアップ! これまでPhotoshopを20年近く使っていましたが、おかげでPhotoshop 使うことがほとんどないようですね。 ㅎㅎ 死族が長かったですね。 長い講義を100%終えたのは初めてだから… 素晴らしい先生の講義に感謝します。 いつも元気です~祈ります。

    • codingworks
      知識共有者

      実務者として具体的な内容なので、予備受講生に助けがたくさんありそうです。受講評ありがとうございます〜!

  • pcdoomco44801님의 프로필 이미지
    pcdoomco44801

    受講レビュー 3

    平均評価 5.0

    5

    83% 受講後に作成

    インフラストラクチャで最もコスパがあると思われるインストラクターの中には、コーディングワークスがあります。最近開講されるのは最新技術なので価格帯が少しありますが、既存のコンテンツを見ると、とても安い受講料に膨大なボリュームが印象的にコーディングワークスを知り、講義を受講することになりました。オフライン学園に通ってもこのように膨大なボリュームを誇る授業密度は、閲覧するのが難しい程度で全体講義構成を見ると講義時間が40時間を超えて行くほどにディテールが肉のあるコンテンツです。しかもウェブパブリックの中高級段階最新技術を集約して実際に実習中心の授業で実際の高級技術を総網羅した結果物まで得ることができます。何より講師様の回答がすごく早いというのが印象的でした 日曜日に質問があって講座受講関連質問を2件残しましたが、その日すぐに回答が走りましたね 膨大なボリューム推奨しない理由はありません。フロント&開発者もリアクトビューの前に正直、基本だと思うんですよ要塞業種別に境界線が崩れてマルチを求める時代なんだからこれをやり遂げる人が高額年俸の席に上がることができると少なくとも画面実装だけに自分の頭の中にいることを自分で作れなければならない方はリアクトやビュー勉強している方も、この講座は個人的に学習してみることをおすすめします。まだ頑張ったわけではありませんが、説明をとても親切にしてくださって勉強する面白いですね^^そして勉強していますが、画面実装と同じくらい専門家レベルまで自分で実力を育てようという趣旨で李講義を選びました。

    • codingworks
      知識共有者

      具体的な受講評ありがとうございます〜!

  • gyumin님의 프로필 이미지
    gyumin

    受講レビュー 13

    平均評価 5.0

    5

    30% 受講後に作成

    • codingworks
      知識共有者

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

  • pdyok6696님의 프로필 이미지
    pdyok6696

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    • codingworks
      知識共有者

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

  • davyjeong7658님의 프로필 이미지
    davyjeong7658

    受講レビュー 5

    平均評価 5.0

    5

    100% 受講後に作成

    • codingworks
      知識共有者

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

¥14,828

codingworksの他の講座

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

似ている講座

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