実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

実践的なWebサイトコーディングを学ぶコース。HTMLとCSSの基礎を持つ方に最適な内容です。

  • Overview
  • Curriculum
  • Instructor
  • Review

Brief Summary

このコースでは、HTMLとCSSの基本を知っている人が、実際に使えるWebサイトコーディングスキルを身につけます。初級から上級まで、3つのWebサイトを作りながら学べます。

Key Points

  • HTMLとCSSの基礎がある人対象
  • 初級から上級まで3つのWebサイトを作る
  • 1000名以上の卒業生がいる実績
  • 90本以上の5分動画レッスン
  • 無理せず学べる実践的コース

Learning Outcomes

  • 自信を持ってWebサイトを作れるようになる
  • 基本的なコーディングスキルを向上させる
  • 実践的なデザイン技術を習得する
  • さまざまなスタイルを使って複雑なレイアウトを可能にする
  • コーディングエラーを減らせるようになる

About This Course

HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。

HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです

実際の3つのWebサイトを初級・中級・上級と段階を踏んで作りながら、実践的なWebサイトコーディングのスキルが身につきます。

1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


★こんな人におすすめ★

  • 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない方

  • より実践的なコーディングのスキルを身に着けたい方


★特徴★

  • 90以上、9時間以上の充実したコース

  • 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供

  • 5分程度の動画が90レッスン以上 充実した内容ですが、無理せず学べる


★内容★

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

実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。 シンプルなデザインなので、マークアップもあまり複雑ではないため、初心者向けの章です。 初めてWebサイトをマークアップする方にオススメです。


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

実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。 画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。 【初心者向け】クリニックサイトのマークアップ(1) の続きの章になりますので、初めてご覧になる方はまず前の章から取り組んでください。


③【中級者向け】美容院のWEBサイト(1)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 シャドウや背景画像等の少し複雑なスタイルを使用しますので、やや中級者向けの章です。 完成版のファイルを一度見てみて、不安な方はまず「【初心者向け】クリニックサイトのマークアップ」から取り組んでみてください。


④【中級者向け】美容院のWEBサイト(2)〜トップページ編〜

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


⑤【中級者向け】美容院のWEBサイト(3)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 要素ないからはみ出た部分をスクロールできる新着窓の作成など、覚えておくと便利なマークアップ方法も学びます。 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜の続きの章になります。


⑥【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 作成したトップページのファイルを複製して、下層ページをマークアップします。 同じデザインやレイアウトで、コンテンツのみ違うページをマークアップする際は、ファイルを複製して必要な部分のみを変更した方が作業が楽になります。 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜の続きの章になります。


⑦【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 inputタグを利用した、お問い合わせフォームを作成する方法を学びます。CSSを利用して、入力しやすいようにデザインを反映させていきましょう。 【中級者向け】美容院のWEBサイト(4)〜トップページ編〜の続きの章になります。


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

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。 HTMLやCSSは、一文字でも違うと画面が真っ白になったり、エラーになってしまうので、繊細な作業を行う必要があります。 なるべくタイプミス等しないように注意してください。


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

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 さまざまなHTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法を学びます。 【上級者向け】Webマガジンサイトのマークアップ(1)の続きの章になります。


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

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 背景画像を利用して、なるべくページの読み込み速度が早くなるよう心がけてマークアップしていきます。 【上級者向け】Webマガジンサイトのマークアップ(2)の続きの章になります。


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

様々なコンテンツを提供するWebマガジンサイトをマークアップする方法を学びます。 縦に長い、コンテンツ量の多いサイトのマークアップは、些細なミスが命取りの上級者向けです。 Webメディアに必要なページネーションや、フッターを作成していきます。 10.【上級者向け】Webマガジンサイトのマークアップ(3) の続きの章になっていますので、初めてこの章をご覧になる方はまず前の章から取り組んでください。


  • HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです

Course Curriculum

Instructor

Profile photo of NEST online
NEST online

テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。卒業生は1000名以上です。★提供しているサービス2ヶ月のWebデザインコース2ヶ月で未経験からWebデザイナーへ。未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースですWebデザインキャンプ【2日間で全てを学ぶ!】Webデザイン集中講座RailsキャンプRailsCamp -2日間集中プログラミング入門講座-など

Review
4.9 course rating
4K ratings
ui-avatar of H S
H S.
3.0
2 years ago

FlexBoxやCSS Gridは一切出てこないうえ、レスポンシブデザインにも対応していない。また、box-sizing: border-boxを使わず、borderやpaddingをいじる度にwidthやheightをいちいち調整しているのも気になる。いまとなっては古い内容なのではないか。

  • Helpful
  • Not helpful
ui-avatar of Jiro
Jiro
4.0
2 years ago

丁寧でわかりやすい。中級の途中ですが、理解できています。

  • Helpful
  • Not helpful
ui-avatar of Stereocube
Stereocube
2.0
2 years ago

内容は普通だが、各コマ冒頭のサウンドロゴと講師の声の音量差がイラついてしょうがない。電車で聞いてるとナレーションはかき消され、ボリューム最大にするとサウンドロゴでいちいち音が割れる。1~2回程度ならまあ許せるが、各動画ごとにこれは厳しい。
この動画を編集した人は何とも思わなかったのだろうか。

もっとも動画はおそらく他のプラットホーム用の使い回しで、
Q&Aの返答がないもの担当者のやる気のなさが伺える。

  • Helpful
  • Not helpful
ui-avatar of 松廣剛史
松廣剛史
4.0
3 years ago

基本的にわかりやすく、非常に理解が深まりました。所々早い部分や、説明が不足していると感じた部分があったため、その辺りは別途確認しようと思います。

  • Helpful
  • Not helpful
ui-avatar of 野田頭宜教
野田頭宜教
4.0
3 years ago

トータル的な書き方を見たのがこれが初めてだったので色々と参考になりました。オンライン学習の動画編としては私は良い方だと思います。

  • Helpful
  • Not helpful
ui-avatar of 齊藤優樹
齊藤優樹
4.0
3 years ago

私は初心者なので、説明が足らず難しく感じる部分もあるが、以前にHTML5 CSS3を使ってサイトを作る講座を見ていたこともあり、基本的なやり方が分かっている人であれば、より実践的に知りたい部分を的確に簡潔に説明してくれていて、今見ている部分までは分かりやすいと感じます。

  • Helpful
  • Not helpful
ui-avatar of 川野 早苗
川野 �.
2.5
3 years ago

以前の動画と、ほぼ同じでした。float ではなくて、flexboxでの説明が欲しかったです。どこかにあるらしい、テキストもフォトショップにしかなく、結局手で打ちましたし。内容を新しくして欲しかったです。残念な感じでした。

  • Helpful
  • Not helpful
ui-avatar of 清水飛翔
清水飛翔
4.0
3 years ago

内容は充実しており、説明も何不自由なく理解することができた
しかし、星4にしたのは同じこと(同じ説明)を動画が変わるごと何十回もくり返し言うのが不満だった。

同じ説明は3回までとか回数を決めて言わないと、同じことを何十回も言われて時間の無駄になってくる

  • Helpful
  • Not helpful
ui-avatar of 池田優作
池田優作
3.0
3 years ago

同じ内容を記述しても同じように反映されない場合がある

  • Helpful
  • Not helpful
ui-avatar of 若井紗希
若井紗希
4.0
3 years ago

マークアップのやり方や丁寧にコードの使い方を説明しているので、基礎の復習にはとても分かりやすく理解できました。
他の方の評価でもあるように、オープニングの音が大きすぎるのに毎回驚きます。

  • Helpful
  • Not helpful
Leave A Reply

Your email address will not be published. Required fields are marked *

Ratings

Courses You May Like

Lorem ipsum dolor sit amet elit
Show More Courses