Udemy

【超厳選】UdemyでHTML/CSSを学べるおすすめ講座4選

こんにちは。ヨノと申します。
私は独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、フリーランスエンジニアをやっています。

今回はHTML/CSS学習におすすめのUdemy講座を紹介します

HTML/CSSって簡単なようで奥が深いですよね!?特にCSS!!

HTML/CSSを学んでゼロからWEBサイトを作ろうとしても

  • 「何から手をつければ良いのだろう...」
  • 「思ったようなデザインにならない...」

といった状態になりませんか?(私はそうでした...)

こういった人向けに「実践的なHTML/CSSスキルを学べる」Udemy講座を紹介します。

UdemyはHTML/CSSを学ぶのに最適!

おすすめ講座を紹介する前に、「なぜUdemy講座なのか」を簡単に説明しておきます。

Udemyをおすすめする理由

  • PCの画面や資料を映しながら説明してくれるので理解しやすい
  • 動画で説明を聞く方が、書籍より早く学べる(効率アップ)
  • 講師に質問でき、他の人の質問とその回答も見れる
  • 復習として2周目、3周目するときは、倍速再生を使うことで効率が上がる

HTML/CSSの場合は、特にUdemyをおすすめします。

なぜなら、紙面より動画の方が「どの部分のCSSを書いているのか」、「どんな見た目になるのか」といった点が理解しやすいので学習効率が上がる!!

HTML/CSSを学べるUdemyのおすすめ講座

HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座

HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座

コース時間 10.5時間
評価 ☆4.2(2020/10/20現在)
受講者数 3,702人 (2020/10/20現在)
言語 日本語
講師 大手半導体メーカー販促部門でデザイナーとして勤務後、WEBデザイン会社を設立。
現在は現場でのデザインとともに新人教育を多く行っている。
対象者 これからHTML、CSSを学ぶ人

講座内容

この講座はhtml5とCSS3を使ってWEBサイトページを制作するために必要なことを学ぶことに特化した講座です。
全編を手を動かして作品を制作しながら解説しているので、理論や機能を単独で学ぶ講座のように、途中で集中力を切らして飽きることがありません。

  • WEBページ制作に必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでサイト作成のスキルを身につけられます。
  • 将来役立つかもしれないけれど今は必要はないという知識は含んでいません。実践を重視した講座です。
  • 「実際に手を動かしてコードを書き」、ひとつのサイトを制作することを通して身につけます。
  • 解説はすべて動画で行い、現役のデザイナーがページを制作する工程をマウスの動きひとつまで収録しています。
  • ナレーション付きでわかりやすく解説しています。
  • 必要な画像素材など作業に必要な素材はすべて添付されています。
  • 仕事で必要なことだけをOJTで集中的に学ぶ講座です。
ユーザー
基本的なWebの構成から始まって、実際に書き換えてみたらどうなるかを体験しながら講座を進めることができる。わかりやすく、テンポの良い授業。私の様な初心者にもわかりやすく、理解しやすい講座でした

こんな方におすすめ

  • HTML/CSSを初めて学ぶ人
  • まずは基礎的な知識をしっかりと見に付けたい人

↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓

>>この講座の詳細をみる

 

いますぐはじめる 【最新2020】HTML5、CSS3 未経験からエンジニアを目指す 実践マスターコース

いますぐはじめる 【最新2020】HTML5、CSS3 未経験からエンジニアを目指す 実践マスターコース

コース時間 17.5時間
評価 ☆4.4(2020/10/20現在)
受講者数 542人 (2020/10/20現在)
言語 日本語
講師 大手半導体メーカー販促部門でデザイナーとして勤務後、WEBデザイン会社を設立。
現在は現場でのデザインとともに新人教育を多く行っている。
対象者 これからHTML、CSSを学ぶ人
基礎知識はあるが、復習しながら実践的なコーディングを学びたい人

講座内容

このコースは最新のHTML5とCSS3を基礎から完全にマスターすることを目的に作られた講座です。
WEBサイトの制作ははじめてという初心者の方から、中級以上の方の学び直しやトレーニングにも役立つよう、ひとつひとつ詳しく、丁寧に説明しています。

特に理論や原理だけでなく、実際にいくつものページを制作し、ひとつひとつ機能を確実に身につけられるよう実践的なコーディングにも多くの時間を使い、即戦的なスキルが身につけられるよう構成されたコースです。

初心者にも分かりやすいコース構成
コーディングは初めてという方でも、確実にHTML5とCSS3の技術を身につけ、WEBサイトを公開することができます。すべてのセクションで理論だけでなく実際に手を動かしてコードを書く演習が行われるので、初心者でも実践的な技術が身につきます。

最新のCSS Grid LayoutとResponsive WEB Designが学べる
WEB制作は日進月歩で変化しています。少し前までは主流であった技術が明日には陳腐化します。このコースでは最新のCSS Gridによるレイアウト技術と、あらゆるデバイス機器に対応するレスポンシブページ制作技術が身につけられます。

最新HTML5とCSS3のすべてが確実に学べる

  • HTML5とCSS3のほぼすべての機能を詳しく、分かりやすく解説しています。
  • CSS Gridのスキルが確実に身につきます。
  • レスポンシブWEBであらゆるデバイス機器に対応するレスポンシブページを作る力が身につきます。
  • ありきたりの解説書とちがい、実際の作品制作を通して実践的なスキルを身につけられます。
  • 初心者の方にも分かる、誤解のない説明
  • きちんと基礎から体系的に学びなおしたい方にも最適です。
ユーザー
基本から丁寧に説明されていてわかりやすく、学びやすかったです。今まで独学で勉強してきましたが、グリッドレイアウトという新しい分野のことを学ぶことができたことに感謝しております。村守先生、ありがとうございました。これから学んだことを復習して実践ですぐに使えるように頑張ります。

こんな方におすすめ

  • HTML/CSSを初めて学ぶ人
  • HTML/CSSの基礎から実践的なコーディングまでを学びたい人

↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓

>>この講座の詳細をみる

 

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

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

コース時間 9時間
評価 ☆4.2(2020/10/20現在)
受講者数 6,455人 (2020/10/20現在)
言語 日本語
講師 1000名以上の卒業生がいる実績あるWebデザインスクールが提供
対象者 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない人
より実践的なコーディングのスキルを身に着けたい人

講座内容

HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。
実際の3つのWebサイトを初級・中級・上級と段階を踏んで作りながら、実践的なWebサイトコーディングのスキルを身につけます。

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

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

【中級者向け】美容院のWEBサイト
仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。
シャドウや背景画像等の少し複雑なスタイルを使用します。

このサイトでは、マウスホバーでリンクに下線をつけるといった操作性も意識したマークアップ方法や要素内からはみ出た部分をスクロールできる新着窓、お問い合わせフォームの作成など、覚えておくと便利なマークアップ方法を学びます。

【上級者向け】Webマガジンサイトのマークアップ
Webメディアを、 HTMLとCSSを使って1からコーディングしていきます。
縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。

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

その他、ページの読み込み速度が早くなるよう心がけてマークアップや必要なページネーションや、フッター作成についても学んでいきます

ユーザー
ProgateでHTMLとCSSの基礎を学びましたが、いざ模写コーディングをしようとすると、まったくできない。。しかし、このコースを学ぶことにより、サイト構築の実践スキルが身につきますので、模写コーディングにも役立ちます。id属性やclass属性の使用パターンの違いやなぜその属性名をつけるのかなど、意図や意味などを深く学べます。説明もわかりやすい言葉を使われてますので、理解力が乏しい人でも安心して学んでいける教材だと思います。

こんな方におすすめ

  • 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない人
  • より実践的なコーディングのスキルを身に着けたい人
  • いろんな種類のWebサイトを作って経験を積みたい人

↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓

>>この講座の詳細をみる

CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~

CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~

コース時間 5時間
評価 ☆4.2(2020/10/20現在)
受講者数 977人 (2020/10/20現在)
言語 日本語
講師 フロントエンドエンジニアとして働いた後、2017年にフリーランスとして独立。
2019年にフィクセル株式会社にフルスタックエンジニアとしてジョイン。
対象者 CSSは書けるが、Sassは初めての人
就職、転職の際に有利なスキルとして技術を身につけたい人

講座内容

SassはCSSを拡張したメタ言語、CSSプリプロセッサであり、コードの再利用、変数、演算、関数、条件分岐などプログラミング要素をCSSに導入し、効率的で柔軟なコーディングを可能にした強力な言語です。
Sassが誕生してから10年余りが経ち、ある調査では開発者の60%以上がSassを使用しているという調査結果があるほど普及が進みました。
この傾向は今後Sassを超える画期的な言語が開発されて普及するまで続くでしょう。
CSSを生のまま書く現場は減っていき、当たり前のようにSassの技術が求められる時代になっています。

この講座では、CSS3の基本を習得済みの方が、ゼロからSassを学び、実践で使えるレベルまで習得することを目指しています。

プログラミングや黒い画面に苦手意識を持っている方でも大丈夫です。
最初から全部の機能を使いこなす必要はありません。
手順通りに、覚えた機能から少しずつ実戦投入していけばいいのです。CSSを初めて覚えた頃を思い出して、楽しんで学んでいきましょう!

ユーザー
説明が丁寧でとてもわかりやすかったです。
と言っても無駄な説明は一切なく、要点を絞って説明してくれているので、飽きずに楽しんで受講する事ができました。sassの導入部分やgulpなど、今までもやもやしていた部分も見えてきました。

この講座を一通り勉強すれば、直ぐ実践で使えるようになるのではないでしょうか。
sassは勉強中で実際使っていますが、関数をつかったりエラーを出力させたり、知らなかったけど使える実践的な説明も多く、とても勉強になりました。今すぐsassを書きたくなりました。

こんな方におすすめ

  • CSSは書けるが、Sassは初めてで興味のある人
  • 実務レベルのSassの技術を身に付けたい人
  • 就職、転職の際に有利なスキルとして技術を身につけたい人

↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓

>>この講座の詳細をみる


以上、UdemyでHTML/CSSを学べるハイクオリティなおすすめ講座4選でした!!

本記事で紹介しきれない優良コースもたくさんあるので、ご自身でも探してみてください!!

 

独学に限界を感じたら

独学に限界を感じていたらプログラミングスクールを利用するのも選択肢のひとつです。

参考【現役エンジニアが選ぶ】Webエンジニアを目指す人におすすめのプログラミングスクール

おすすめのプログラミングスクール

-Udemy

© 2021 フリエン生活 Powered by AFFINGER5