HTMLとCSSとJavaScriptをまとめて勉強できるコンテンツ

Tweet

Udemyで「フロントエンジニアになりたい人のWebプログラミング入門

」というコンテンツをやってみたので感想を書いてみます。結構幅広く勉強できて、実際に１からWebページを作る内容になっていたので、「これからWebサイトを作れるようになってみたい」、「Webサイトを作ってみたいけど、どっからとっかかればいいかわからない」という方にはとてもおすすめの内容になっています。

Udemyでは数万円のコンテンツが定期的に1500円くらいで購入ができます。

すごいですよね。適当な書籍を購入するよりも下手すると安いです。

本の内容をもとにプログラムを書くのは大変ですが、動画で学ぶとスラスラ進めることができるので好きですし、Webの話はどんどん進化していくので書籍を買っても1年後には古い内容になってしまったりして物理的に邪魔になったりしてしまいます。

Webでどんどん効率的に学べる時代なのでぜひぜひおすすめです！

CSSの基本テクニック

まず、このコンテンツでは基本的なCSSの書き方を実際にコーディングしながら学びます。

実際にコーディングするので変化が目で見えてわかりやすいです。

RWD(Responsive Web Design)を実現する基本機能のメディアクエリについても触れてくれます。

うまくRWDとして機能しないなと思ったらこんなところにで引っかかってました（笑）

以下はうまく動作しません。

		@media only screen and(max-width: 600px){
			xxxxxx
		}
	

以下は動作します。

		@media only screen and (max-width: 600px){
			xxxxxx
		}
	

「@media only screen and」の後ろにスペース入ってなかっただけでした。

なかなか見つけられずに苦労しました・・・。ぜひお気をつけて

またこのコンテンツではbootstrap3を使ってグリッドシステムの学習も盛り込まれています。

「なんだそりゃ？」な方や、「聞いたことはあるけど・・・」な人も理解できるようになります。

でも、あえてbootstrap4を適用して学習を進めることをおすすめします。

bootstrapのバージョン違いでどのような差分があるかや、その調べ方も合わせて学習できるからです。

具体的には以下のことなどが知識としてえやすくなります。

• オフセットカラムの記述の仕方が異なる
• btn-deffaultがbootstrap4ではなくなっていて、

  https://cccabinet.jpn.org/bootstrap4/components/buttons
  を参考にしながら修正すること

• bootstrap3では「label-default」と記述するがbootstrap4では「badge」で記述される

また、UX的にコンポーネントをどのように使い分けるべきかも説明してくれているのはありがたかったですね。

Javascriptの基本テクニック

jsに関しても下記のことを一通り学習できます。

• Javascriptの基本操作(イベントの取り扱い)
• DOM(Document Object Model)の基本操作
• ajaxによるJSONデータの取り扱い
• JSONデータをもとにDOMをjqueryを用いて書き換える
• jqueryで実装した内容をVue.jsを使って効率的に実装する

JSONデータの取り扱いや、Vue.jsは、ちゃんとイメージ感もつかみやすくてとても参考になりました。

JSONデータはサーバサイドとのプログラミングにおいてもよく登場するので、Web担当者なら一度は必ず取り扱うようにしましょう。

まとめ

Udemyで提供されていた「フロントエンジニアになりたい人のWebプログラミング入門

についてご紹介しました。

1,500円で結構いろいろ実践できたのでなかなかおすすめできる内容でした。

※1,500円はタイムセール的に購入したので、ご注意ください。

これからWebを学習してみたいという方は、どんどんコーディングを実践することが最も近道なので、

書籍もいいですが、このコンテンツも一度トライしてみるといいとおもいます！

Tweet