実践的なWebサイト制作を動画講座で学ぼう！HTML5とCSS3を使って、カフェのサイトやWebメディアサイト制作

なかぴょんです。

今回はUdemyの講座、実践Webサイトコーディング講座｜HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみようを受けてきました。

HTMLとCSSを学んでいて、実際にWebサイト制作をやってみたいと考えている方におすすめの講座です。

それでは、詳しく解説していきます。

実践的なWebサイト制作講座は誰向きなのか

実際に学んだ知識を使ってWebサイトを作ってみたいけど、どこから手を付ければいいのかわからない方は多くいるかと思います。

この講座はそんな方のためにあるような講座です。

実際にWebサイトを制作して自分が学んだ知識を形にできるようになります。

実践的なWebサイト制作講座で何が学べるのか

この講座では特に実践的なWebサイト制作に重きを置いております。

Webサイトを制作する際には、どのような手順で作られていくのかがしっかり学べるかと思います。

実践的なWebサイト制作講座を学ぶ際の事前準備

HTMLとCSSの基礎知識が必要となりますが、講座内でも最低限の知識は学べますので、プログラミング初心者の方でも問題なく受講できる講座です。

自分の学習レベルなどは特に気にしなくて良いでしょう。

実践的なWebサイト制作講座詳細

セクション1 【初心者向け】クリニックサイトのマークアップ(1)

実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、１からマークアップしていきます。

シンプルなデザインなので、マークアップもあまり複雑ではないため、初心者向けの章です。 初めてWebサイトをマークアップする方にオススメです。

セクション2 【初心者向け】クリニックサイトのマークアップ(2)

実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、１からマークアップしていきます。

画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。

【初心者向け】クリニックサイトのマークアップ(1)　の続きの章になりますので、初めてご覧になる方はまず前の章から取り組んでください。

セクション3 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。

シャドウや背景画像等の少し複雑なスタイルを使用しますので、やや中級者向けの章です。

完成版のファイルを一度見てみて、不安な方はまず「【初心者向け】クリニックサイトのマークアップ」から取り組んでみてください。

セクション4 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。
マウスホバーでリンクに下線をつけるなど、操作性も意識したマークアップ方法を学びます。

【中級者向け】美容院のWEBサイト(1)〜トップページ編〜の続きの章になります。

セクション5 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。

要素ないからはみ出た部分をスクロールできる新着窓の作成など、覚えておくと便利なマークアップ方法も学びます。

【中級者向け】美容院のWEBサイト(2)〜トップページ編〜の続きの章になります。

セクション6 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。

作成したトップページのファイルを複製して、下層ページをマークアップします。

同じデザインやレイアウトで、コンテンツのみ違うページをマークアップする際は、ファイルを複製して必要な部分のみを変更した方が作業が楽になります。

【中級者向け】美容院のWEBサイト(3)〜トップページ編〜の続きの章になります。

セクション7 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。

inputタグを利用した、お問い合わせフォームを作成する方法を学びます。

CSSを利用して、入力しやすいようにデザインを反映させていきましょう。

【中級者向け】美容院のWEBサイト(4)〜トップページ編〜の続きの章になります。

セクション8 【上級者向け】Webマガジンサイトのマークアップ(1)

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って１からコーディングしていきます。

縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。

HTMLやCSSは、一文字でも違うと画面が真っ白になったり、エラーになってしまうので、繊細な作業を行う必要があります。

なるべくタイプミス等しないように注意してください。

セクション9 【上級者向け】Webマガジンサイトのマークアップ(2)

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って１からコーディングしていきます。

さまざまなHTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法を学びます。

【上級者向け】Webマガジンサイトのマークアップ(1)の続きの章になります。

セクション10 【上級者向け】Webマガジンサイトのマークアップ(3)

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って１からコーディングしていきます。

背景画像を利用して、なるべくページの読み込み速度が早くなるよう心がけてマークアップしていきます。

【上級者向け】Webマガジンサイトのマークアップ(2)の続きの章になります。

セクション11 【上級者向け】Webマガジンサイトのマークアップ(4)

様々なコンテンツを提供するWebマガジンサイトをマークアップする方法を学びます。

縦に長い、コンテンツ量の多いサイトのマークアップは、些細なミスが命取りの上級者向けです。

Webメディアに必要なページネーションや、フッターを作成していきます。

10.【上級者向け】Webマガジンサイトのマークアップ(3) の続きの章になっていますので、初めてこの章をご覧になる方はまず前の章から取り組んでください。

まとめ

今回はUdemyの講座、実践Webサイトコーディング講座｜HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみようについてご紹介しました。

HTMLとCSSを使って、実際にWebサイト制作を学ぶことができて良かったです。

なかぴょんに受けてほしい学習サービスのリクエスト等ございましたら、
お問い合わせにてお伝えください。

リクエストをいただいた講座は受け終わった後で記事にします。