HTML と CSS ではじめての Web サイト
空のファイルから本物の 1 ページサイトを作ります。きれいな HTML、モダンな CSS レイアウト、スマートフォンで使えて基本的なアクセシビリティチェックに通るページです。
- 時間
- 24
- ユニット
- 4
- 回の授業
- 24
- 修了証のレベル
- 3
このコースについて
空のファイルから本物の 1 ページサイトを作ります。きれいな HTML、モダンな CSS レイアウト、スマートフォンで使えて基本的なアクセシビリティチェックに通るページです。
対象
初心者、小さな事業のオーナー、描いたものを自分で作りたいデザイナー。
ペース
標準 · フレキシブル
できるようになること
- セマンティックな HTML でページを構成する
- CSS でページをスタイリングし、flexbox と grid でレイアウトする
- スマートフォンとデスクトップの幅でページが使えるようにする
- ページの基本的なアクセシビリティを確認する
カリキュラム
4 ユニット · 24 トピック · 24 時間
01セマンティック HTML6 回の授業 · 6 時間
成果: セマンティックな HTML でページを構成する
- L01ウェブページの仕組み60 分
- L02要素、タグ、属性60 分
- L03見出し、段落、リスト60 分
- L04リンクと画像60 分
- L05ページの領域：header、main、footer60 分
- L06フォームとラベル60 分
- ✓ユニット確認：この成果を証拠で示す
02CSS とレイアウト6 回の授業 · 6 時間
成果: CSS でページをスタイリングし、flexbox と grid でレイアウトする
- L07セレクターとカスケード60 分
- L08ボックスモデル60 分
- L09タイポグラフィと色60 分
- L10Flexbox60 分
- L11CSS grid60 分
- L12余白のルールとカスタムプロパティ60 分
- ✓ユニット確認：この成果を証拠で示す
03レスポンシブなページ6 回の授業 · 6 時間
成果: スマートフォンとデスクトップの幅でページが使えるようにする
- L13ビューポートとモバイルファースト60 分
- L14メディアクエリ60 分
- L15伸縮する文字と画像60 分
- L16レスポンシブなナビゲーション60 分
- L17スマートフォンとデスクトップで試す60 分
- L18パフォーマンスの基本60 分
- ✓ユニット確認：この成果を証拠で示す
04アクセシビリティチェック6 回の授業 · 6 時間
成果: ページの基本的なアクセシビリティを確認する
- L19アクセシビリティは誰のためか60 分
- L20代替テキスト60 分
- L21キーボード操作とフォーカス60 分
- L22色のコントラスト60 分
- L23バリデーターと自動チェック60 分
- L24総仕上げ：ページを公開する60 分
- ✓ユニット確認：この成果を証拠で示す
ライブ授業の流れ
各トピックは 1 時間のライブ授業です。講師とメンターは AI で、そのことを明かします。
ホワイトボード · 考え方
ウェブページの仕組み
- Marek Quintがホワイトボードで一度に一つの考え方を、やさしい言葉で説明します。
評価のしかた
提出するもの
バリデーターとアクセシビリティチェックに合格する 1 ページのサイト
最終確認
依頼内容から 1 ページのサイトを作り、自動検証とレビューを受ける
修了証のレベル 3
スキルを証明した
あなたの証拠はコースの基準で評価され、人がこの修了証に署名します。
教えるのは
どのレッスンにも名前のある AI 講師と、進み具合を見守るメンターがつきます。どちらも AI で、すべての画面にそう表示されます。
- AI 講師Marek Quint
- AI メンターBastian Kwan
最初の授業 · 今すぐ体験
決める前に、最初の授業を受けてみてください
7 つのステップ、約 10 分、アカウント不要：学ぶ、確かめる、作る、評価を受ける、短い口頭試問で説明する、そして証明カードを受け取る。
このカテゴリーのほかのコース
デジタル・AI・ソフトウェア
Python プログラミング入門
最初の 1 時間から本物の Python を書きます。サンドボックスで一行ずつ実行し、エラーを読み、直し、自動テストに合格する小さなプログラムを完成させます。
デジタル・AI・ソフトウェア
SQL でデータを問い合わせる
データベースに本当の問いを投げかけ、根拠を示せる答えを得ます。サンプルデータに対してすべてのクエリを自分で書き、結果をサンドボックスで確かめます。
