環境構築から、タグの意味・セレクタ・ボックスモデル・Flexbox と Grid・レスポンシブ、そして公開まで。全20レッスンで 1 つのポートフォリオサイトを作りきります。ほとんどのレッスンはブラウザ上でそのままプレビューできます。
全20レッスンを5つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 HTML と CSS はブラウザだけで動かせるので、環境構築でつまずくことがほとんどありません。
環境構築から、タグの意味・リンクと画像・フォームの部品、そして意味のあるページの骨組みまで。ここを抜ければ「自分で書いてブラウザに出す」ことができます。
セレクタで狙った場所に当て、文字と色を整え、ボックスモデルで幅と余白を制御する。CSS が効かない・幅が合わないの原因をここで潰します。
Flexbox で並べ、Grid で組み、position で重ねる。今のページレイアウトはこの 3 つでほとんど組めます。
スマートフォンで崩れないページにし、画像・変数・動きで仕上げる。作りっぱなしにしないための整理術も扱います。
フォームのアクセシビリティ、開発者ツールでの原因特定、メタタグと公開。作ったものを人に見せるところまで進みます。
全20レッスンを終えたら、次はページに動きをつける JavaScript へ。メンバーシップで全コースが解放されます。