見出し画像

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

MTECH


HTML・CSSを学び終えた方は実際にサイトを制作しましたか？
動画や本で知識を得ることは重要ですがアウトプットである模写コーディングの練習を重ねないと新たな気づきや制作スピードの向上は生まれません。
なのでここでおすすめの初心者が作れるサイトを選択しました。

模写コーディング練習ページ

初級#1

1カラムのシンプルなプロフィールサイトです。

コーディング量が少なく構成もシンプルなので、基礎学習を終えたばかりの方が模写するのにぴったりのサイトですが、学べる内容はいっぱいつまっています。

＜課題内容＞
ロードバイクが趣味の友人から、自転車を紹介するための簡単なWebサイトを作ってほしいと頼まれました。
サイトに掲載するのは、簡単な自己紹介と自転車の写真だけです。
画像は画像を右クリックして保存で使用するか下記のサイトでフリー素材画像を取得してください。

＜設定単価＞
コーディング1ページ：1万円

＜学べる内容＞

  • header、footer、main、navの使い方

  • sectionの使い方

  • リストタグ（ul、li）の使い方

  • inline-blockの使い方

  • Flexboxを使用した横並びの配置

  • CSSで画像を丸く表示

  • レスポンシブ対応

初級#2

こちらは1カラムのLPタイプのポートフォリオサイトです。
入門編よりも少しコンテンツのボリュームが増してますが、基礎のHTMLとCSSだけでコーディングできます。

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

＜設定単価＞
コーディング1ページ：5万円

＜学べる内容＞

  • header、footer、main、navタグを使ったレイアウトの組み立て方

  • sectionの使い方

  • h1、h2タグの使い方

  • メインビジュアルの全幅表示（高さ固定）

  • PCとスマホでの画像切り替え

  • リストタグ（dl、dt、dd、ul、li）の使い方

  • Flexboxを使用した画像の横並び

  • コンタクトフォーム（form、input、textarea）の使い方

  • レスポンシブ対応

中級#1

サイドバーのある2カラムのレイアウトもWebサイト制作の定番レイアウトです。1

難しいタグは使用していないのですが、2カラムのレイアウトは作り慣れていない人にとっては少しとまどうかもしれません。
しかし、勉強のやりがいのあるレイアウトですのでぜひチャレンジしてみてください。

学習の内容は下記の通りです。

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

＜設定単価＞
コーディング（トップページのみ）：5万円

＜学べる内容＞

  • 2カラムのレイアウト

  • article、asideの使い方（article、aside）

  • Flexboxを使用した横並びの配置

  • スマホ時のグローバルナビ横スクロール

  • Google Fontsの使い方

  • Twitter埋め込み

  • レスポンシブ対応

中級#2

学習のポイントは、CSS Grid を使用したグリッドレイアウトとハンバーガーメニューのコーディングです。

こちらの練習では、トップページだけでなく実サイトと同じように全ページ制作します。

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

＜設定単価＞
コーディング：15万円
・トップページ
・Productsページ
・Products詳細ページ（16ページ）
・Aboutページ
・Companyページ

＜学べる内容＞

  • グリッドレイアウト

  • 固定ヘッダー

  • リストタグの使い方（dl、dt、dd、ul、li）

  • Google Mapのモノトーン化と埋め込み

  • ハンバーガーメニュー

  • レスポンシブ対応

上級#1

写真や記事のサムネイルをタイル状に配置するグリッドレイアウトです。
メディアなどのサイトでよく使用されています。

上級編のサイトでは、特にjQueryの学習に重点をおいています。
よく使用されている定番のjQueryを何個か盛り込みました。

＜課題内容＞
スニーカー専門のニュースメディアの制作依頼です。
最終的にはWordPressで制作を行いますが、まずはトップページのみHTMLでコーディングを行います。
動画の埋め込み、カルーセルスライダー、グリッドレイアウトなどコーディングのポイントがたくさんあります。

＜設定単価＞
コーディング（トップページのみ）：12万円

＜学べる内容＞

  • グリッドレイアウト

  • 動画の埋め込み（video）

  • ハンバーガ―メニュー（css、jquery）

  • カルーセルスライダー（jquery）

  • スムーススクロール（jquery）

  • スクロール時の画像フェード表示（jquery）

  • レスポンシブ対応

エンジニア講師からこれらのサイトを踏まえて

こちらのサイトを完成できれば良く知識をつけて学べていますね！
Mtechのサイトを閲覧しながら成長され得ているのであれば幸いです。

下記のサイト制作できるレベルは最高です🔥

いいなと思ったら応援しよう！