オンライン講座 Progateの勉強の仕方

反転学習として，Progateを各自で学習してもらいます．授業ではHTMLやCSSを使うこと(実践)に時間を使いたいので，HTMLやCSSの知識は各自で学習して欲しいのです．iPhoneやAndroidで使えるスマホ版もあります（Progateのダッシュボードのページ下部にリンクあり）．

一部，授業と異なるやり方で実装している個所もありますが，どこが違うのか，なぜ違うのかも考えると良い勉強になると思います．

「学習コース HTML&CSS 初級編」

• 1章：最重要：HTMLに触れてみよう！
  1. HTMLに触れてみよう！
  2. 見出しと段落
  3. リンク
  4. 画像
  5. リスト
• 2章：最重要：CSSに触れてみよう！
  1. 文字の色
  2. 文字の大きさと種類
  3. 高さと幅と背景の色
  4. タグに名前をつける
• 3章：最重要：レイアウトを作ろう！
  1. HTMLの全体構造
  2. HTMLの全体構造(2)
  3. 全体のレイアウト
• 4章：重要：ヘッダーを作ろう！
  1. ヘッダーの構造
  2. ヘッダーのレイアウト（float要素を使用）
  3. ヘッダーの余白
• 5章：重要：フッターを作ろう！
  1. フッターの構造
  2. フッターのレイアウト
• 6章：重要：コンテンツを作ろう！
  1. メインのレイアウト
  2. コンテンツの構造
  3. ボーダー
  4. paddingとmargin
• 7章：お問い合わせフォームを作ろう！
  1. お問い合わせフォームのレイアウト
  2. お問い合わせフォームのレイアウト(2)

Progateのその他のクラス

有料（月額980円）になりますが，「学習コース HTML&CSS 中級編」，「学習コース HTML&CSS上級編」も各自で学習すると力がつくと思います．「道場コース」や「実践コース」のHTML&CSSも学ぶと更に力が付きますよ．JavaScriptやjQueryまで学べば，この授業で扱っている知識を全てカバーできます．（どこまでが無料でどこからが有料かの詳細は「学習レッスン一覧」参照）

• HTML&CSS
• JavaScript
• jQuery

「学習コース HTML&CSS 中級編」（有料）

「中級編では、ランディングページと呼ばれる、サイトを訪問したユーザーが一番最初に目にするWEBページを作っていきます。WEBデザインの応用知識を身につけ、よりモダンなWEBページを作っていきましょう！」

1. レイアウトを作ろう
   1. 目標物を確認しよう
   2. レイアウトを作ろう
2. トップ部分を作ろう
   1. トップ部分のレイアウトを作ろう
   2. 透明度，文字の間隔を調整しよう
   3. ボタンを作ろう
   4. レイアウトを整えよう
   5. アイコンを使おう
3. ヘッダーを作ろう
   1. ヘッダーのレイアウトを作ろう
   2. ログインボタンを作ろう
   3. レイアウトを整えよう
4. レッスン一覧部分を作ろう
   1. レイアウトを作ろう
   2. レッスンを並べよう
   3. レイアウトを整えよう
5. メッセージ部分を作ろう
   1. レイアウトを作ろう
   2. ボタンを作ろう
   3. クリック時に変化をつけよう
6. フッターを作ろう
   1. フッターを作ろう
7. ヘッダーを固定しよう
   1. ヘッダーを固定しよう

「学習コース HTML&CSS 上級編」（有料）

「上級編では「レスポンシブデザイン」を学びます。スマホやタブレット、PCなど異なる画面幅でもレイアウトをきれいに保つ「レスポンシブデザイン」は、WEBページ開発の必須のスキルです。」

1. レスポンシブデザインとは
   1. 目標物を確認しよう
2. グリッドとメディアクエリ
   1. メディアクエリを設定しよう
   2. メディアクエリ(2)
   3. 要素間に余白を追加しよう
3. レスポンシブデザインの実装
   1. レスポンシブデザインの型を準備しよう
   2. タブレット向けのレイアウトを作ってみよう
   3. 共通のレイアウトを整えよう
   4. スマートフォン向けのレイアウト(1)
   5. スマートフォン向けのレイアウト(2)
   6. フォントをレスポンシブ化しよう
   7. max-width
   8. ヘッダーメニューを切り替えよう