codestep 模写・デザインカンプ（2022.2.3〜）

【HTML / CSS】コーディング練習

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

✅ Profile：プロフィールサイト / 1カラム
✅ PHOTO BOOK：フォトサイト / 1カラム
✅ PHOTO BOOK 2：フォトサイト / 1カラム
✅ Recipe Diary：レシピサイト / トップページ
✅ Recipe Diary：レシピサイト / レシピページ
✅ Wooden Jewelry：ブランドサイト（ジュエリー） / 1カラム

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

✅ My Work：ポートフォリオサイト / 1カラム
✅ Mag88：ストアサイト（書店）/ トップページ
✅ TOTALLY：ECサイト（アパレル） / 商品ページ
✅ Web Entertainment Design：コーポレートサイト / 1カラム
✅ 創作：ストアサイト（和菓子） / 縦書きレイアウト

【中級編】少し複雑なHTML、CSS、JavaScript（jQuery）を使用した練習サイト

✅ Travel Blog：ブログサイト / 2カラム
✅ COFFEE：ストアサイト（カフェ）/ パララックス
✅ Furniture Design：ストアサイト（インテリア） / グリッドレイアウト
✅ BBB英会話スクール：ランディングページ / CSSアニメーション
✅ 明るいHOUSE：コーポレートサイト（住宅） / 固定サイドメニュー

【上級編】JavaScript（jQuery）をメインに使用した練習サイト

✅ Sneakers：メディアサイト / グリッドレイアウト
✅ FA EXHIBITION：ギャラリーサイト / スクロールイベント

【番外編＿HTML/CSS】Webサイト制作でよく使うHTML、CSSを練習

✅ 疑似要素の練習：記事のタイトルを疑似要素（before）で装飾します。
✅ positionの練習：positionを使って2つの要素を重ね合わせます。
✅ 行数が異なる画像の横並びの練習：左右で行数が異なる画像を横並びに配置します。
✅ 画像を斜めに表示する練習：CSSで画像を斜めに表示します。
✅ ドロップダウンメニューの練習：CSSでドロップダウンメニューを作ります。

【番外編＿jQuery】Webサイト制作でよく使うjQueryを練習

✅ jQueryの基礎と使い方
✅ アコーディオンメニュー：jQueryを使ってアコーディオンメニューを実装します。
✅ 複数画像をホバーで切り替え：jQueryを使ってホバー時に画像の切り替えを行います。
✅ プラグイン「slick」／スライダー：プラグイン slick を使用してスライダーを実装します。
✅ プラグイン「slick」／スライダー（カスタマイズ）：プラグイン slick をカスタマイズします。
✅ プラグイン「Datepicker」／カレンダー&入力チェック：フォーム作成と入力チェックを実装します。

【WordPress】コーディング練習

【解説】WordPressサイトを作ってみよう

□ オリジナルサイトを作ろう全19編
□ HTMLをWordPress化しよう　全10編

【入門編】はじめてのWordPress練習サイト

□ Profile：プロフィールサイト / 1カラム
□ photo：フォトサイト / 1カラム

【初級編】簡単なWordPressの練習サイト

□ My Work：ポートフォリオサイト / 1カラム
□ Web Entertainment Design：コーポレートサイト / 1カラム

【中級編】少し複雑なWordPressの練習サイト

□ Furniture Design：ストアサイト（インテリア） / グリッドレイアウト