『ユソンベ ウェブデザイン技能士実技個別指導ノート』の著者が直接運営します。
毎日1パートずつミッションに取り組んで身につけ、週ごとのライブ配信で要点の整理から質問解決まで一緒に進めます。
学習目標：公開問題の構成（要件、詳細な領域別指示事項、技術的遵守事項、提出方法）を理解し、ワイヤーフレームをセマンティックタグに置き換えます。
基本課題
VS Code、Chromeをインストールした後、デスクトップに'受験番号なし'フォルダーとindex.html、css、js、imagesフォルダーを作成する（Live Serverを使わず、index.htmlをChromeで直接開いて確認する）
公開問題を1問選び、要件をレイアウト・機能・デザイン・技術遵守の4つに分類する
ワイヤーフレームをheader、nav、main、section、footerでマークアップ（メニューはul > li > aの2階層、すべてのリンクは仮リンク#）
チャレンジ課題：3時間の時間配分表（レイアウト／機能／デザイン／検証）を作成する
提出物：フォルダ構成のスクリーンショット、要件分類表、index.htmlコード
チェックポイント: <!DOCTYPE html>、lang="ko"、charset="utf-8"、Tabキーでメニューリンクが順番どおりに選択されるかどうか
学習目標：Tableを使わずCSSでA型・B型を数値どおりに実装し、試験規格のロゴを自分でデザインします。
基本課題
リセットCSSの作成（margin、padding、list-style、aタグの下線の削除、box-sizing: border-box）、背景#ffffff、基本文字色#333333
提供されたデザイン案を基準に、A型・B型レイアウトボックスを実装（1200px固定型とA・Bエリア100%幅型の両方）
PhotoshopまたはIllustratorで200×40pxのワードタイプロゴ（シンボルなしでロゴ名のみ）を作成し、PNG形式で挿入してください。
課題：提供されたロゴを使用する問題のように、別のロゴを縦横比を維持したままサイズだけ変更して配置する
提出物：A型・B型の結果のスクリーンショット、CSSコード、ロゴ画像
チェックポイント：ブラウザのCSSを無効にしたときにコンテンツが縦に並ぶか、ロゴ画像にaltが設定されているか
学習目標：C型・D型の配置を習得し、公開問題に繰り返し登場するフッター構成要素を完成させます。
基本課題
提供されたデザイン案を基準にC型・D型レイアウトボックスを実装する
フッターロゴをグレースケール化（filter: grayscale(100%)または無彩色の画像）
Copyright、SNS 3つ、下部メニュー、ファミリーサイトをテキスト（HTML）で構成
チャレンジ課題：A～D型共通のCSSを分離し、再利用可能な自分だけのテンプレートを作成する
提出物：C型・D型の成果物のキャプチャ、フッターコード
チェックポイント：各領域の高さの合計が全体の高さと合っているか、コンテンツを画像として入れていないか（1次ライブ11/4でミッション1～3のコードも一緒にレビューします）
学習目標：左側の縦型メニューと最近のタイプ（左サイドバー＋カード型コンテンツ）を含むE型・F型を完成させ、A～F型の6種類を整理します。
基本課題
提供されたデザイン案を基準に、E型・F型のレイアウトボックスを実装（1000px左揃え型、左側200pxサイドバー＋残り100%型）
A〜F型6種類の構造を1枚にまとめた整理表を作成
チャレンジ課題：タイマーをスタートし、公開問題のワイヤーフレーム1つを30分以内にレイアウトまで完成させる
提出物：E型・F型の成果キャプチャ、タイプ整理表
チェックポイント：ブラウザウィンドウの幅を変えてもレイアウトが崩れないか（さまざまな解像度での一貫性）
学習目標：公開問題のメニュー指示事項をそのまま実装します。
基本課題
jQueryファイルをjsフォルダに入れてローカルで読み込む（試験会場ではインターネット接続が遮断され、CDNは使用不可）、$(function(){ })の基本構造を記述する
メインメニュー・サブメニューにマウスを乗せるとハイライトされ、離れると解除される
サブメニュー領域がスムーズに表示・非表示される方式を実装：メニューごとの個別ドロップダウン、サブメニュー領域全体の展開など、2種類以上
チャレンジ課題：縦型メニューでサブメニューが横に表示される方式を実装し、stop()でアニメーションの蓄積を防止する
提出物：動作画面のキャプチャ（またはGIF）、script.jsコード
チェックポイント：サブメニューがスライドの上に表示されているか（position、z-index）、ConsoleタブにERRORがないか
学習目標：スライド画像にテキストをデザインして適用し、公開問題の3種類の切り替え方式をすべて実装します。
基本課題
提供画像3枚に提供テキストを適用（フォント・太さ・色・サイズを調整して可読性を確保、HTMLテキストオーバーレイまたはPhotoshopで編集）
フェード（fadeIn／fadeOut）、左右移動、上下移動のスライドをそれぞれ実装してください。
3つすべて3秒以内に切り替え、ページを開くと自動的に開始し、最後の画像の次に最初の画像へ繰り返す
課題：最後の画像の次に最初の画像へ途切れることなく戻るように処理する
提出物：3種類の動作キャプチャ、コード
チェックポイント：画像が領域外に表示されていないか（overflow: hidden）。動くスライドがなければ失格です
学習目標：公開問題コンテンツ領域のすべてのバリエーションを実装します。
基本課題
タブ型：お知らせ・ギャラリーをタブで構成し、クリックすると該当する内容を表示（addClass / removeClass、show / hide）
別途型：お知らせとギャラリー（画像3枚を横並び）をそれぞれの領域に配置する
お知らせの最初の記事をクリックした際にレイヤーポップアップを開閉する機能を、通常型とモーダル型（半透明の背景＋中央固定）の両方で実装する
バナー・ショートカットを提供されたファイルでHTMLコーディング（画像として丸ごと配置しない）
チャレンジ課題：お知らせの日付を右揃え、長いタイトルを省略表示（text-overflow: ellipsis）
提出物：タブ型・独立型のキャプチャ、ポップアップ2種類のキャプチャ、コード
チェックポイント：リンクをクリックした際にページが上に飛ばないか、ポップアップの閉じるボタンにTabキーでアクセスできるか
学習目標：公開問題のタブ型1問を実際の試験と同じように3時間以内に完成させます。
基本課題
チャレンジで指定された公開問題1問（タブ型＋通常ポップアップ）をタイマーを開始して完成させる（リソースはチャレンジ提供資料を使用）
完成できなかった部分をリストアップする
チャレンジ課題：パートごとの所要時間を記録し、ミッション1の時間配分表と比較する
提出物：開始・終了時刻のスクリーンショット、結果画面のスクリーンショット、未完成項目のリスト
チェックポイント：修了必須のミッションです。未完了リストは3回目のライブ（11/11）で一緒に確認します。
学習目標：1次模擬試験で見落とした部分を補完し、公開問題の技術的遵守事項と失格条件に基づく検수ルーティンを作ります。
基本課題
見落とした部分をパート別（レイアウト／メニュー／スライド／コンテンツ／ポップアップ／フッター）に整理した間違いノートを作成する
最も苦手なパートを1つ再実装する
検수チェックリスト作成：W3C HTML・CSSエラー0、Consoleエラー0、Tabキーでの移動、CSSを無効にすると縦に並ぶ、すべての画像にalt、テキストの階層、非番号フォルダ・index.htmlを最上位に配置、画像パス・ファイル名、ai・psdを除外、10MB以下、圧縮せずに提出
チャレンジ課題：validator.w3.orgで1次模擬試験の成果物を検証し、エラーを修正する（試験会場ではインターネットが遮断されて使用できないため、今のうちに習慣づける）
提出物：誤答ノート、再実装の結果、検収チェックリスト
チェックポイント：チェックリストの項目のうち、失格条件（スライドの動作不良、圧縮して提出、容量・時間超過、番号なしフォルダへの未保存）を別途表示したか、】【
学習目標：1回目とは異なるタイプの公開問題で、本番と同じ条件で最終確認を行います。
基本課題
チャレンジで指定された公開問題1問（別型＋モーダルポップアップ、1次とは異なるスライド方式）を3時間以内に完成させる
最後の30分は、ミッション9の検収チェックリストの適用に使用します。
チャレンジ課題：第1回模擬試験と所要時間・完成度を比較した振り返りを作成
提出物：開始・終了時刻のスクリーンショット、結果画面、1回目との比較に基づく振り返り（挑戦）
チェックポイント：修了必須のミッションです。レイアウト30分／機能90分／デザイン30分／検収30分の配分が守られたかを確認します。
学習目標：無理をせずに手を慣らし、試験当日の準備を整えます。
基本課題
最も自信のないタイプを1つ、30分以内にレイアウトだけ組み直す
メニュー・スライド3種・タブ・ポップアップ2種の主要コードを1枚にまとめた要約ノートを確認
受験票、身分証明書、黒色の筆記用具、試験会場の場所と入室時間を確認（参考資料・USB・私用キーボード・マウスの持ち込み不可）
挑戦課題：ミッション9の検収チェックリストを試験会場で使う順番に並べ直す
提出物: 30分レイアウトのキャプチャ、要約ノートのキャプチャ
チェックポイント：3回目のライブで受け取ったミスのチェックリストをもう一度確認し、早めに休んでください。
