![[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門](https://coder-memo.com/wp-content/uploads/2020/05/front_html_i-940x380.jpg)
疑問くん
今回はフロントエンドエンジニアになりたい人のプログラミング講座の解説をします。
Nakaさん
はじめまして！WEB制作会社で働いてるNakaさんです。
今回はUdemyの講座の[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門についてどんなことが学べるか？感想・レビューなどご紹介します。
- 何が学べるのか？どんなことができるようになるのか。
- どんな人におすすめの講座なのか。
- 講座の感想とデメリット
- 必要な知識と事前準備について
- 講座の詳細について
Udemyについて知らない方は、下記の記事を参考にしてください！
Udemy(ユーデミー)とは？誰でもわかるように詳しく解説します
学べる内容について
![[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門](https://coder-memo.com/wp-content/uploads/2020/05/front_html.jpg)
以下について学べます。
- HTML&CSSを使ったWEBページ制作
- レスポンシブWEBデザインの基本
- CSSフレームワーク「Bootstrap」
- JavaScript利用したプログラミング（Ajax通信・jQuery・Vue.js）
順番に解説していきます。
HTML&CSSを使ったWEBページ制作
HTML＆CSSを使って簡単な入会フォームを作成します。
headタグの内の記述など基本的なことから解説してくれているので初心者の人でもわかりやすい内容になっております。
レスポンシブWEBデザインの基本
CDアルバム紹介ページ作成をしながらレスポンシブ対応の基本を学びます。
メディアクエリ、リキッドデザイン、ブレイクポイントについて詳しく解説されていますので初めての方でもわかりやすいと思います。
CSSフレームワーク「Bootstrap」
CSSフレームワーク「Bootstrap」の導入方法、グリットシステム、フォームの作り方など基本的な使い方を学習します。
Bootstrapを使うことで素早くWEBページを作成できます。
案件によっては必要な時があるかもしれませんので基本的なことを学んでおいて損はないと思います。
JavaScript利用したプログラミング（Ajax通信・jQuery・Vue.js）
JavaScriptを利用して簡単なストップウォッチやフォトライブラリー作成します。
作りながら学べるので内容が入ってきやすくおすすめです。
しかし、jQueryとVue.jsについて簡単なことしか紹介されていませんのでjQueryとVue.jsを集中的に学びたい場合は別の講座をおすすめします。
講座を見ることで、できるようになること
[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門で学習することで、できるようになることは以下になります。
- スマホ対応の簡単なWEBページを作ることができるようになる
- Bootstrapを使って簡単なWEBページを作ることができるようになる
- JavaScriptを使った基本的なプログラムを書けるようになる
この講座で学習することによって、フロントエンドエンジニアの基本的なことを全てできるようになります。
感想とレビュー
[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門講座は、基本の基本を解説してます。
ある程度わかっている人であれば少し内容が薄いと思われるかもしれませんが、知識０または少しだけ知識がある人にとっては、HTML＆CSS、Bootstrap、JavaScript、JavaScriptフレームワーク（jQuery,Vue.js）の基本の基本が学べるのでおすすめです。
もっと濃い内容を学びたい場合は、各言語の講座を学ぶことをおすすめします。
Nakaさん
各言語の基本の基本を学びたい人はおすすめです。
デメリットについて
個人的なデメリットは以下になります。
- ある程度知っている人には内容が薄いと感じる
- 多数の言語を紹介するの各言語の内容が薄い
こんな人におすすめ
- フロントエンドエンジニアを目指している人
- HTML&CSS・Bootstrap・JavaScript、JSフレームワークの基礎を学びたいと思っている人
フロントエンドエンジニアに必要な言語の基礎を一通り学べるのでフロントエンジニアを目指している人におすすめです。
また知識0の初心者の人でも基礎の基礎から解説されているのでおすすめです！
必要な知識と事前準備について
必要な知識と事前準備は以下になります。
- 知識0でも安心して受講できます。
- テキストエディタはVisual Studio Codeが使用されてますが、他のエディタでも問題なしです。
Nakaさん
知識0でも安心して受講できます。
講座の内容について
講座の内容は以下になります。
- Udemyでの受講について
- Webの開発環境を整えよう（Windows編）
- Webの開発環境を整えよう（macOS編）
- 簡単なHTMLを作ってみよう
- Visual Studio CodeでのHTML編集
- テキストフィールドを作ろう
- ボタンを作ろう
- headタグの中に記述する決まり文句
- CSSで見た目を調整しよう
- CSSの内部参照でページ内の共通パーツのスタイルを調整しよう
- CSSの外部参照で複数ページに共通のスタイルを記述しよう
- sanitize.cssでブラウザーのデフォルトCSSをリセットしよう
- divタグと class属性で要素を区分けしよう
- marginプロパティの autoを使ってエリアを中央に揃えよう
- box-shadowプロパティで浮いたボタンを作ろう
- 適切な HTMLタグを利用しよう
- spanタグで「必須」ラベルを作ろう
- HTML/CSS：CDアルバムの紹介ページを作ろう
- HTML：セクショニングコンテンツ（header, section）
- CSS：タイトルの CSSを整える
- CSS：floatを使った回り込み
- CSS：clearで回り込みを解除する
- HTML： リンクを張る aタグ
- HTML：「実体参照」でコピーライト表記を追加する
- CSS：Webフォントを使う
- CSS：レスポンシブWebデザイン（RWD）のレイアウトを作る（メディアクエリー・リキッドデザイン・ブレイクポイント）
- CSS：CSSアニメーションを使う（Transition）
- Bootstrapを、CDNで利用する
- Bootstrap：Containerを使う
- Bootstrap：グリッドシステムを使う
- Bootstrap/HTML：オフセットとフォームパーツ
- Bootstrap/HTML：フォームのスタイルと placeholder属性
- HTML：ドロップダウンリスト（リストボックス）を作る
- HTML：チェックボックスを作る
- HTML/CSS：ラジオボタンと、!important指定
- Bootstrap 4での Labelから Badgeへの名称変更
- Bootstrap：ボタンとラベルを作る
- HTML/CSS：画面を作り上げよう
- JavaScript：オブジェクト・メソッド・パラメーター
- JavaScript：文字列・数字と四則演算、文字列連結
- JavaScript：変数の扱い
- JavaScript：オブジェクトとインスタンス
- JavaScript：Dateオブジェクトを使ってプログラムを仕上げよう
- HTML/CSS：画面の見た目を作成しよう
- JavaScript：getElementByIdとプロパティで要素を書き換えよう
- JavaScript：if構文で条件に沿ったプログラムを作ろう
- JavaScript：function（関数）定義をしよう
- JavaScript：イベントドリブンなプログラムを作成しよう
- JavaScript：setIntervalで定期的に実行されるプログラムを作ろう
- JavaScript：変数のスコープを理解しよう
- JavaScript：秒数から、分と時を計算しよう
- JavaScript：thisを使って、STOPボタンを実装しよう
- HTML/CSS：ページを形作っていこう1 – position: fixed
- HTML/CSS：ページを形作っていこう2 – position: relative, absolute
- JavaScript：JSONデータを配列で操ろう
- JavaScript：createElementと appendChildで HTML要素を作ろう
- JavaScript：for構文で繰り返し処理をしよう
- JavaScript：Ajax通信を行なおう
- JavaScript：Ajax通信で受信したデータを処理しよう – 論理演算子
- JavaScript：画面を仕上げよう
- jQuery：jQueryを使ってみよう
- jQuery：Ajax通信を行なってプログラムを仕上げよう
- Vue.js：Vue.jsを使ってみよう
- Vue.js：Vue.jsで画面を作り上げよう
安心の返金保証について
もしフロントエンドエンジニアなりたい人のWebプログラミング入門講座を実際に購入してみて自分に合わないと思っても安心してください！
Udemyの講座は、納得のいく受講体験をお届けするために、購入した全ての講座を30日以内に返金できるようになっております。
なので実際に購入してみて思っていた講座じゃなかった場合でも安心して購入できます。
詳しい詳細については、コースの返金をご確認ください。
まとめ
フロントエンドエンジニアになりたい人のWebプログラミング講座は、HTML＆CSS、Bootstrap、JavaScript、JSフレームワークの基礎の基礎を学びたい人はおすすめです。
また、知識0でも安心して受講できる内容になっていますので初心者の方にもおすすめです。
公式サイトの講座の評価については[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門からご確認ください。
また別の記事でコーダーになりたい人向けにUdemyのおすすめ動画５選まとめましたので是非ご参考ください。
