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)
SCSSコア理論(01) - セレクタのネスト(Nesting)
SCSSコア理論(02) - 親セレクタ参照(&)と注釈処理
SCSSコア理論(03) - 親セレクタリファレンス(&)アプリケーション
SCSSコア理論(04) – 代表的なCSSセレクタSCSSで作成
SCSSコア理論(05) - 親セレクタリファレンス(&)仮想クラス
SCSSコア理論(06) - 親セレクタ参照(&)属性選択子
SCSSコア理論(07) - 親セレクタの入れ子になる@at-root
SCSS コア理論(08) – プレフィックスを使用して CSS 属性を自動生成
SCSSコア理論(09) – 仮想クラス:isでセレクタの重複を減らす
SCSSコア理論(10-1) - 変数(Variables) 01
SCSSコア理論(10-2) - 変数(Variables) 02
SCSSコア理論(10-3) - 変数(Variables)有効範囲とCSS変数宣言
SCSSコア理論(11-1) - 外部ファイルを取得する@import
SCSSコア理論(11-2) - @importに分割されたファイルを読み込む
SCSSコア理論(12) - 演算子(Operations), 出力ウィンドウを取り除く
SCSSコア理論(13-1) - グループを宣言する@mixin、グループを使う@include
SCSSコア理論(13-2) - @mixinと@includeを適用する
SCSSコア理論(13-3) - @mixinと@includeを活用したボタンデザイン
SCSSコア理論(13-4) - @mixinのパラメータ(引数)を@includeとして使用する
SCSSコア理論(14) - セレクタ属性を取得する@extend
SCSSコア理論(15) - @extendで使用するプレースホルダーセレクタ%
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受講生の方々にも役に立ったとの評価も受けています。