本当！ウェブサイト制作！ Step by Step！ （「クルアラモード」_反応型ウェブ制作）

デザインからコーディング、デプロイまで網羅したフルスタックコース！！ [Figma + Vibe Coding (HTML/CSS/Tailwind/React) + Git + Vercel デプロイ] 自分のデザインをそのままVibe Codingで完成！ AIを活用して作業生産性を5倍高めるフルスタック攻略本！ デザインもコーディングもすべてこなせるフルスタックデザイナーに、あなたもなれます。 ✅ デザインの意図まで1ピクセルの誤差なく具現化 ✅ AIが理解できるデザインを設計 ✅ AIを正確にコントロールするプロンプト作成 ✅ AIが自動生成したコードも分析して修正 といった実務ワークフローを学びます。 本講義は、第1次・第2次に分けて公開される連載形式の講義です。 ✅ 第1次オープン：2026年2月22日 - Figma - デスクトップモードのデザイン - Figma - Variables登録および命名規則 - Figma - タブレットモード＆モバイルモードのデザイン - Vibe Codingのための準備 - 実践！Vibe Coding - Tailwind適用リファクタリング - Gitバージョン管理およびGitHubデプロイ ✅ 第2次オープン：2026年3月9日（順次公開） - React.jsリファクタリングおよびVercelデプロイ - JavaScriptによるインタラクティブウェブの実装

Figma UI3バージョンで、基礎から実務まで体系的かつ、簡単でスピーディーに完走（修了）できるように構成されています。

html/css初心者入門者を対象に基礎をしっかり固め、もちろん レスポンシブレイアウト作成の実践を学ぶことができます。

GSAPのScrollTriggerを活用して、スクロールに反応するインタラクティブなレスポンシブウェブポートフォリオを作ってみましょう！

本番！ ウェブサイト制作 Step By Step! フォーメイン（https://www.phomein.com/brand/main/main.do） 、実装してみる過程で複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^

本当！ウェブサイト制作 Step By Step!入門講座で、 さまざまな基礎レイアウトを制作しながら、HTMLとCSSの概念を確実に学べる講義です。

'ホテルヒュンダイラハン_木浦店'サイト制作で、実際のウェブサイトのメインページをそのまま製作・実装してみる講義です。 html/css基礎知識のある方を対象にhtmlMarkupとLayout制作の理解はもちろん、Fixheader、Image Slider、MenuOpen Bar、Scroll Animation制作までのウェブで必須のskillを学べるウェブページ制作実戦！講義です。

助けるサイト制作 Application Courseで、実際のウェブサイトのメインページをそのまま制作・実装してみる講義です。無料講義でオープンした助ける制作本番！講義です。 （本講義は助ける-Basic Courseを聞いて受講しなければ学習効果が大きいと見ることができます。）

[ウェブサイト制作 Step By Step] Basic-courseで、助ける(http://dopda.co.kr/) メインページをそのまま製作してみる過程です。本Basic CourseはCSSレイアウトの制作とアニメーションについて取り上げ、続いてApplication-courseではイメージスライド効果、レスポンシブ制作、スクロールアニメーション、Fix Headerなどのインタラクティブ要素を追加して開設される予定です。

[ウェブサイト制作 Step By Step] 初級講座で、韓国消費者時代ウェブ陣（現在はリニューアル済み）メインページをそのまま製作してみる過程です。

[ウェブサイト制作 Step By Step] 3段階講義で、ミュージャイン（https://musign.net）メインページをそのまま製作してみる過程です。サイトに盛り込まれている派手なインタラクティブウェブをそのまま製作、実装してみる過程で、複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^

[ウェブサイト制作 Step By Step] 3段階講義で、大方産業メインページをそのまま製作してみる過程です。 サイトで盛り込んでいる華やかなインタラクティブウェブをそのまま製作実装してみる過程で華やかな分、難易度のある講義です。

HTML5とCSS3を活用してウェブサイト（ハンファケミカル/ソリューション）を制作する実習過程で、PCモードのレイアウトとレスポンシブページの制作を完璧に理解し、活用できる「実戦！ウェブページ制作！Step by Step!」のBasic Course講座です。（講義の完成ファイルを添付！）

実践！ウェブサイト制作！Step By StepのApplication Courseで、HTML/CSS/jQueryとプラグインを使用して、Y Studio（http://www.ystudio.co.kr/）のメインページをそのまま制作してみるコースです。（講義の完成ファイルを添付！）

本当！ウェブサイト制作 Step By Step!入門講座で、 さまざまな基礎レイアウトを制作しながら、HTMLとCSSの概念を確実に学べる講義です。

[ウェブサイト制作 Step By Step] 3段階講義で、ミュージャイン（https://musign.net）メインページをそのまま製作してみる過程です。サイトに盛り込まれている派手なインタラクティブウェブをそのまま製作、実装してみる過程で、複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^

本番！ ウェブサイト制作 Step By Step! フォーメイン（https://www.phomein.com/brand/main/main.do） 、実装してみる過程で複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^

HTML5とCSS3を活用してウェブサイト（ハンファケミカル/ソリューション）を制作する実習過程で、PCモードのレイアウトとレスポンシブページの制作を完璧に理解し、活用できる「実戦！ウェブページ制作！Step by Step!」のBasic Course講座です。（講義の完成ファイルを添付！）

実践！ウェブサイト制作！Step By StepのApplication Courseで、HTML/CSS/jQueryとプラグインを使用して、Y Studio（http://www.ystudio.co.kr/）のメインページをそのまま制作してみるコースです。（講義の完成ファイルを添付！）

[Tailwind CSS実践ポートフォリオパブリッシング]は、Tailwind CSSを活用して26種類以上の実践例を製作する過程です。実践例を素早く多様に制作することで、その中で必須の理論を説明します。この講義は、開発者とパブリッシャーが作成するTailwind CSSスタイリングを中心に作成されました。

入門編で練習で作ってみたVDサイトのメインページを実戦にしてみましょう〜

ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

デザイナーと開発者のためのオールインワン講座！新しいUI3を反映

これまで200人以上のオフライン アカデミーの学生の新人パブリッシャー就職ポートフォリオ指導経験を通じて、Coding Works が心を込めて作成しました。面接と就職を呼び込むパブリッシャー「個人ポートフォリオ ホームページ」作成講座は、パブリッシャー就職のために必ず準備しなければならない個人ポートフォリオ ホームページをどのようにどこから準備するかを教える忠実なガイドです。 講座には、合計19時間以上の講座内容が含まれています。個人ポートフォリオ ホームページ作成前に、パブリッシング関連の必須事項、就職と実務で最も重要なパブリッシングの基本、就職のための jQuery と JavaScript & コーディング ミッション、個人ポートフォリオ ホームページに挿入するポートフォリオ成果物の作成方法、個人ポートフォリオ ホームページのセクション別のコンテンツ レイアウトと詳細内容、応募する企業の区別とパブリッシャーの実戦面接のヒントなど、新人パブリッシャーとして知っておくべきすべての内容が含まれています。

html/css初心者入門者を対象に基礎をしっかり固め、もちろん レスポンシブレイアウト作成の実践を学ぶことができます。

就職のためには面接を頻繁に受ける必要があります。面接の機会を増やすためには、質の高いパブリッシャーの個人ポートフォリオサイトが不可欠です。CodingWorksが心血を注いで作成した、質の高い個人ポートフォリオサイト制作ガイド教材（PDF）です。 この教材は、インターネットで検索して手に入るような内容ではありません。CodingWorksが長年現場で300人以上の学生にパブリッシングの理論、実践、個人ポートフォリオサイト制作を講義し、学生たちが一日も早く希望する企業に就職できるよう、個人ポートフォリオサイトの制作方法を詳細に盛り込んだ、世界に一つだけのパブリッシャー就職用個人ポートフォリオサイト制作ガイド（PDF）です。

全国合格率60%のうち、うちのクラスの合格率は90%！ 試験の要求事項を把握すれば可能です。 実技書は買わないで。難しいです。

認定試験でなくても練習するのに良い例です。 Webデザイン機能会社実技B-3タイプを千天～～ヒットしてみてください

🔥 漢字学習のためのカスタムプラットフォーム構築！ Google Gemini AIとFirestoreを活用し、自分だけの漢字単語帳、画数アニメーション、手書き認識まで直接実装してみましょう！

パブリッシャー就職のための真のガイド電子書籍（PDF）で、効率的なパブリッシング学習方法、質の高いパブリッシング講義や教え方の手際が良い講師を見極める眼、新人でありながら経験者のようにパブリッシングするコツ、望ましいコーディング習慣と原則、個人ポートフォリオサイトの制作方法、デザイナーや開発者との協業のコツ、パブリッシャーとして知っておくべき必須サイト、フォトショップUIデザインの実力向上など、パブリッシャー就職のために必ず知っておくべきHTML+CSS+JQUERYパブリッシングの基礎を詳細にお伝えします。また、国費支援パブリッシャー課程についても詳しく説明します。

PhotoshopとAdobe XDプログラムを活用して、さまざまなデバイスのWeb、アプリレイアウトを設計した後、簡単なコーディング技術を学習して直接実装してみることができます。

ウェブデザイン開発技能士（旧ウェブデザイン技能士）出題基準（2025.1.1 ～ 2027.12.31）まで施行される出題基準に正確に合わせたウェブデザイン技能士実技試験の内容に最適化されている実技試験専門講義として、HTML+CSS+JQUERYパブリッシング、コーディングワークスのウェブデザイン開発技能士実技試験講義は一味違います。 2026年ウェブデザイン開発技能士のすべての試験タイプ（A, B, C, D, E, Fタイプ）を完璧に制作した授業動画がすべて反映されています。

JavaScriptを正しく学びたい初心者のための最も堅実な基礎講義です。この講義ではJavaScriptという言語を理解するための出発点となり、フロントエンド（Vue、React、Angular）開発者、サーバー（Node.js）開発者になるための基礎を完璧に準備できます。