5. HTML×CSS レベル2

コーポレートサイトをつくろう!

なぜ学ぶのか

Why Learn

前回、HTML×CSS レベル1(初級編)で学んだHTMLとCSSの知識を使いより本格的なWebサイトを作ります。このコースの内容を習得すればHTMLとCSSの基礎はできる!と胸を張って言えるでしょう。さらに、ほとんどのWebサイトを自分で作り上げることができるようになります。具体的にはFlexBoxによるFlexデザインや、レスポンシブ化といった部分を中心として、ひとつの大きなコーポレート(企業)サイトをつくっていく内容になっています。

ゴール

「成果物で作成するコーポレートサイトを自分で調べながら作れる」ことがゴールになります。全てのレクチャーを受講したあとは、必ず自分でも同じサイトを作成しましょう。

何ができるようになるのか

優れたデザインかつレスポンシブ化したWebサイトを作ることができるようになります。

学べること

Webサイト制作(実演!) HTMLで土台作り編
1.成果物を確認しよう!
START
2.フォルダとファイルを作って、構築環境を整えよう!
START
3.Terminalからvisual studio codeを起動してみよう!
START
4.top.htmlに定型文を書こう!
START
5.ヘッダーとフッターを作ろう!
START
6.画像を配置しよう!
START
7.HTMLを完成させよう!(前編)
START
8.HTMLを完成させよう!(後編)
START
Webサイト制作(実演!) CSSでスタイリング編
9.サイト全体に適応するグローバルなCSSをつくろう!
START
10.ヘッダーを整えよう!
START
11.フッターを整えよう!
START
12.トップページの画像を整えよう!
START
13.Missionのコンテンツを整えよう!
START
14.Businessのコンテンツを整えよう!
START
15.ABOUT USのコンテンツを整えよう!
START
16.topページ以外のページを追加しよう!
START
17.お問い合わせフォームを作ろう!
START
Webサイト制作(実演!) 最終調整+レスポンシブ対応編
18.レスポンシブ化について学ぼう!
START
19.ヘッダーをレスポンシブ化しよう!(前編)
START
20.ヘッダーレスポンシブ化しよう!(中編)
START
21.ヘッダーをレスポンシブ化しよう!(後編)
START
22.メインコンテンツをレスポンシブ化しよう!
START
23.top以外のページもレスポンシブ化しよう!
START
24.問い合わせフォームをレスポンシブ化しよう!
START
25.全体確認をしよう!
START
【課題に挑戦!】1.同じデザインのWebサイトを自分で作ってみよう!
START
【課題に挑戦!】2.自分のポートフォリオサイトを作成してみよう!
START