HP制作で良い模写の練習ができるサイト公開

初級1「模写コーディング」

＜課題内容＞

ロードバイクが趣味の友人から、自転車を紹介するための簡単なWebサイトを作ってほしいと頼まれました。 サイトに掲載するのは、簡単な自己紹介と自転車の写真だけです。

＜設定単価＞

コーディング1ページ：1万円

＜学べる内容＞

• header、footer、main、navの使い方
• sectionの使い方
• リストタグ（ul、li）の使い方
• inline-blockの使い方
• Flexboxを使用した横並びの配置
• CSSで画像を丸く表示
• レスポンシブ対応

初級2「模写コーディング」

＜課題内容＞

東京の西麻布を拠点に活動するフォトグラファーから、ポートフォリオ用のサイトを作ってほしいと依頼がありました。 プロフィール欄の他に、作品の紹介、近況の活動を知らせるニュース、コンタクトフォームが必要とのことです。

＜設定単価＞

コーディング1ページ：5万円

＜学べる内容＞

• header、footer、main、navタグを使ったレイアウトの組み立て方
• sectionの使い方
• メインビジュアルの全幅表示（高さ固定）
• h1、h2タグの使い方
• リストタグ（dl、dt、dd、ul、li）の使い方
• PCとスマホでの画像切り替え
• Flexboxを使用した画像の横並び
• コンタクトフォーム（form、input、textarea）の使い方
• レスポンシブ対応

初級3「模写コーディング」

＜課題内容＞

旅するブロガーから旅行記事を公開するためのブログサイトの制作依頼です。 最終的にはWordPressで制作を行いますが、まずはトップページのみHTMLでコーディングを行います。レイアウトはブログ定番の2カラムです。

＜設定単価＞

コーディング（トップページのみ）：5万円

＜学べる内容＞

• 2カラムのレイアウト
• article、asideの使い方（article、aside）
• Flexboxを使用した横並びの配置
• スマホ時のグローバルナビ横スクロール
• Google Fontsの使い方
• Twitter埋め込み
• レスポンシブ対応

中級1「模写コーディング」

＜課題内容＞

南青山で家具やインテリアの企画、販売を行う会社から、製品を紹介するためのWebサイトを制作してほしいと依頼がありました。 オリジナルの製品を一覧で見せられるよう、グリッドレイアウトでコーディングを行います。

＜設定単価＞

コーディング：15万円

＜学べる内容＞

• グリッドレイアウト
• 固定ヘッダー
• リストタグの使い方（dl、dt、dd、ul、li）
• Google Mapのモノトーン化と埋め込み
• ハンバーガーメニュー
• レスポンシブ対応

中級2「模写コーディング」

＜課題内容＞

制作依頼です。 動画の埋め込み、カルーセルスライダー、グリッドレイアウトなどコーディングのポイントがたくさんあります。

＜設定単価＞

コーディング（トップページのみ）：12万円

＜学べる内容＞

• グリッドレイアウト
• 動画の埋め込み（video）
• ハンバーガ―メニュー（css、jquery）
• カルーセルスライダー
• スムーススクロール
• スクロール時の画像フェード表示
• レスポンシブ対応

上級1「模写コーディング」

＜課題内容＞

食堂HPの制作依頼です。 色使い、フォントの使い込み、hoverなどコーディングのポイントがたくさんあります。

＜設定単価＞

コーディング:20万円

＜学べる内容＞

• フォントの使い込み
• API実装
• hover機能
• API実装
• SNS連携
• レスポンシブ対応

上級2「模写コーディング」

＜課題内容＞

皮膚科HPの制作依頼です。 清潔感あるシンプルでかつSEO対策も必須。

＜設定単価＞

コーディング:30万円

＜学べる内容＞

• グリッドレイアウト
• Googleマップ
• スムーススクロール
• レスポンシブ対応

上級3「模写コーディング」

＜課題内容＞

スタジオHPの制作依頼です。 動画の埋め込み、フォントの使い込み、グリッドレイアウトなどコーディングのポイントがたくさんあります。

＜設定単価＞

コーディング:30万円

＜学べる内容＞

• フォントの使い込み
• API実装
• 自動スライダー
• API実装
• JSのマウス追跡機能
• レスポンシブ対応