本?動画?どっちがいい?HTML/CSSの勉強方法 未経験から目指すWEBデザイナー

WEB関連

未経験からWEBデザイナーを目指すときにもはや必須科目のHTML/CSS

マークアップ言語と呼ばれ、WEB上での見せ方・見え方を指定するものです。

したことない人は難しく感じるかもしれませんが、IT系というくくりで考えると初心者向けで初めてでも取り組みやすい言語です。

私が学び始めたころより、今はずーーっと情報がたくさんになっていて、WEB上で検索するだけでもたくさんの情報がでてきます。

その中、有名な学習サイトや動画・私がわかりやすいと感じたYouTuberさんをご紹介します。

めっちゃ学習しやすい世の中になりました。楽しく学習していきましょう!

動画で学習?本で学習?どっちがおすすめ?

結論からいうと、動画がおすすめです。

勉強=本となる人も多いかと思いますが、普段から本を読む人ってどれくらいいますか?

動画見てる人の方が多いのではないでしょうか?普段慣れているものから始めた方が同じものを学ぶにもハードルが下がると思います。

まずはやる気を継続できる勉強方法を見つけましょう。

私も何冊か勉強用に本を買いましたが、本だと挫折しやすいことを実感しています。本で最後までできたものもなくはないですが、勉強しようという気になるのは、動画学習でした。

ただ、本もダメというわけではなく、メイン:動画+補助:本はありだと思います。

家のWifi環境で動画学習、仕事の行き帰りの電車では本で学習と隙間時間も有効に使えるからです。

HTML CSSのおすすめ動画学習サイト

有名な動画学習サイトといえば、

の3つかと思います。

この中でさらに絞るなら、Progateかドットインストールをおすすめします。

この2つは月額料金1,000円前後で始められます。内容も新しいものに更新されている印象です。

ドットインストールは、ずいぶん前から学習動画を始めていました。無料のみですが、復習する時にお世話になりました。短時間の動画で少しずつできるのがよかったです。

Progateは、インターネットだけでなく、アプリもあるようなので、隙間時間でも勉強ができそうです。こちらは使ったことがないのですが、もし私が初心者で今から始めるならこちらを選ぶと思います。

どちらか迷った場合は、基礎部分はProgateもドットインストールも無料で受講できるので、使いやすい・見やすいと思う方でよいかと思います。

ちなみにどれから学ぼうかと悩む場合は、

  1. HTML
  2. CSS
  3. JavaScript

の順番で勉強してください。順番は入れ替えない方がいいです。

WEBサイトを作るのに、HTMLで枠や要素を作り、 CSSで見た目を整えて、HTML/CSSでできないところをJavaScriptで作る。という順番になるからです。

JavaScriptをメインで仕事にする人も最低限のHTML/CSSの知識があった方が取り組みやすくなります。

月額利用ではなく、無期限買い取り学習動画

月額料金の学習動画サイトの良さは、短期間で集中すればものすごく安価で勉強できること。

1年間かけても1万円代と学校に通うよりはコスパが最高にいい!でも、全員に言えるわけさじゃないんですよね。

子育て中や介護中など突発的なことが起こりやすく、クタクタで月額料金制だといつ終わるかわからない。

仕事・家事・育児とやること山盛りで1日の中で自由な時間をとるには睡眠時間削るしかないという人もいるのではないかと思います。

こんな私もどちらかというと後者のタイプです。このブログをかくのも、通勤時間と昼休みがメインです。

JavaScriptの勉強をしたいけど、月額利用料のものだと思うように使いこなせないと思い、1つの動画を買い取っていつでも見れるものがないかと探してました。

ありました!

Udemyという、Benesse(ベネッセ)が運営する学習動画の販売サイトです。こどもちゃれんじや進研ゼミの会社なので、教育系というつながりで安心できます。

HTMLやCSS・JavaScriptはもちろん、マーケティングや英会話までそれぞれを専門とする講師が動画を配信しています。

これなら期間を気にせず好きな時に見れます。学習の定着を考えたら期間決めて集中した方がいいのはわかってるんですが、どうしても時間が取れそうとない人にはおすすめです。

年に何度かセールもしているので、私はセール時に気になる動画を買いだめしてます。普段は1万円を超えるものでも、セール期間は1,000円代になったりします。

講師の方により、教える内容が変わるので、内容を見てから買いましょう。

※ここで少しだけ注意点。

Progateやドットインストールならある程度、何をするかが絞られているのでサイトにあるものを順番にするとできるようになります。

Udemyだと、HTML/CSSがパックになっている動画もありますが、言語ごとだったり作りたいものごとだったり新旧混ざっていたりするので、自分が知りたいことを明確にしてから購入することをおすすめします。

流行ってそうだな、ベストセラーだからこれにしよう。という決め方だと思ったものと違う可能性があります。お気をつけてください。

月額利用料の学習サイトとは違い、選択肢が多いことが一長一短とも言えます。

▼Udemyで動画を探すならこちら
Webデザイン入門オンライン講座

動画学習と合わせて見るといいサイト

動画だけで勉強していると、先生がいるわけではないので、疑問を自分で解決することも必要な場面があります。

そんな時に役立つのが、リファレンスと呼ばれる、ガイドブックのようなWEBサイトがあります。

MDN Web Docs

MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

このサイトで勉強する強者もいるようですが、初心者だった私はこのサイトだけでは、知らない言葉が多すぎて理解できませんでした。

文字より動画が私にはあっているようです。

でも、動画でもなぜこの言葉がいるの?なんでこの書き方?というような疑問が起きて詰まる時があります。そんな時にこのサイトを見たら、これは構文だったのね。とかでなんとなく理解できました。

動画での勉強では???となった時に見るとよいと思います。

HTMLについて(MDN) https://developer.mozilla.org/ja/docs/Web/HTML

CSSについて(MDN) https://developer.mozilla.org/ja/docs/Web/CSS

JavaScriptについて(MDN) https://developer.mozilla.org/ja/docs/Web/JavaScript

最後に有料なみの情報を無料で教えてくれるおすすめYouTuber

JavaScriptの勉強を始めては挫折。そしてまた始める。ということを繰り返していました。

今は少しずつ続けられています。

続けるきっかけになったのがYouTubeで「しまぶーのIT大学」というチャンネルに出会ったことです。

しまぶーのIT大学

しまぶーのIT大学
オンラインサロンIT KINGDOM運営 👨‍💻 自己紹介 「Yahoo! JAPAN」でプログラマーとして働いていました。現在は起業家として新規サービスを開発中です。プログラミング講座、就活対策、IT業界ニュースについて発信しています。 🔥タグ #IT業界 #Web系 #自社開発 #プログラミング講座 #...

記号で計算が進むことが気になって数学につまづいた私。

どうも、記号とかそれが持つ意味とかが気になって、気を取られる性質のようです。

もし、同じような感覚を持っている人にはこのチャンネルがオススメです。

めちゃくちゃ丁寧に初心者でもわかるようにいろいろと説明してくれています。JavaScriptは概念から説明してくれるので納得感があります!

わからないことを調べる方法もご紹介

コメント

タイトルとURLをコピーしました