【30日間無料体験】AI初心者が無料で基礎知識を学ぶなら「Audible」

【UdemyのWeb講座感想】世界で30万人が受講!フルスタック・Webエンジニア講座

【UdemyのWeb講座感想】世界で30万人が受講!フルスタック・Webエンジニア講座

記事には広告が含まれています

なかぴょん

Udemyにある「【世界で30万人が受講】フルスタック・Webエンジニア講座」を受けてきたよ。

未経験からWebエンジニアになりたいという方におすすめの講座だよ。

へびにょん

なかぴょんです。
今回はUdemyの講座、【世界で30万人が受講】フルスタック・Webエンジニア講座を受けてきました。

未経験からWebエンジニアになりたいという方におすすめの講座です。

最終的にtwitterのクローンアプリまで作れるようになります。

2022年11月現在、36000人以上の方が受講されている人気の講座です。

それでは、詳しく解説していきます。

Webエンジニア講座は誰向きなのか

【UdemyのWeb講座感想】フルスタック・Webエンジニア講座のおすすめのポイント!

こんな人におすすめ
・ウェブプログラミングを学びたい方
・起業したり、フリーランスとして仕事をしたい方
・ウェブサイトを作りたい方
・プログラミングで新しい収入源を得たい方
・プログラミングで経済的自由を得たい方

Webエンジニア講座で何が学べるのか

  • ウェブサイトやウェブアプリが作れるようになる
  • HTMLベースのモバイルアプリを作れるようになる
  • ウェブ開発者としての仕事につける
  • フリーランスとしてウェブサイト構築プロジェクトを担当できる
  • オンラインストアを作れるようになる(WooCommerce+WordPress)
  • フロントエンド開発者になれる
  • データベースとサーバーサイド言語を扱えるようになる

Webエンジニア講座を学ぶ際の事前準備

【UdemyのWeb講座感想】フルスタック・Webエンジニア講座で学習するプログラミング言語

事前知識は必要ありません。PCでもMacでも受講できます。

受講前にソフトウェアを購入する必要もありません。 (コース内で使用するソフトウェアはすべて無料です)

Google ChromeとBracketsエディターを使用します。

Webエンジニア講座特典

今回の講義を受講することで、有料(300ドル相当)のBootStrapテーマを3つ入手できます。

ウェブホスティングを利用できます。(ただし、英語メニューのみ提供)

(日本語版ではローカルにApache/PHP/MySQLをインストールするMAMPパッケージで学べるようにカスタマイズしています)

Webエンジニア講座詳細

講座ページに記載されている詳細も載せておきます。

講座内容の中で気になる部分がありましたら、実際に講座ページを覗いてみてください。

セクション1 はじめに(Getting Started)

セクション1では、講義の進め方や開発環境の構築方法に関して説明があります。

Windows、MACそれぞれのOSに対して解説が用意されていますので、手元にあるOSに対応した動画をご視聴ください。

  • 1. セクション1の概要
  • 2. オリジナルコースの無料特典の入手サイトへの登録方法
  • 3. 無料特典のダウンロード
  • 4. Macの学習環境構築をしよう
  • 5. (オプション)Mac版MAMPの導入(2017年2月8日版以降をお使いの場合)
  • 6. Windowsの学習環境構築をしよう
  • 7. 効果的な学習方法

セクション2 HTML 5

ウェブページの基本的な構造を学び、実際にHTMLを使ったウェブページの作成を行っていきます。

プログラミング経験が少しでもあるのでしたら、もう学習している内容かもしれません。

復習するつもりでご覧いただけると良いかと思います。

  • 8. セクション2(HTML5)のイントロ
  • 9. はじめてのウェブページを作成しよう
  • 10. 練習課題:はじめてのウェブページの作成
  • 11. 日本語が文字化けする場合の対応方法
  • 12. HTMLファイルの基本構造
  • 13. HTMLタグを使って、ウェブページを作成してみよう
  • 14. 練習課題:HTMLページの作成(解答例)
  • 15. ヘッダー(見出し)タグ
  • 16. パラグラフタグ
  • 17. テキストのフォーマット
  • 18. 番号なしリスト
  • 19. 番号つきリスト
  • 20. イメージ
  • 21. フォーム
  • 22. テーブル
  • 23. リンク
  • 24. HTMLエンティティ(実体参照)
  • 25. iFrame(インラインフレーム)
  • 26. HTMLセクションの最終課題

セクション3 CSS3

  • 27. CSS 3のイントロダクション
  • 28. CSSとは?
  • 29. インラインCSS
  • 30. インラインCSS サンプルコード
  • 31. 内部CSS
  • 32. 内部CSS サンプルコード
  • 33. Class・id・span
  • 34. Class・idサンプルコード
  • 35. Div要素
  • 36. divサンプルコード
  • 37. Color属性
  • 38. color: サンプルコード
  • 39. Floatレイアウト
  • 40. Floatレイアウト:サンプルコード
  • 41. Position属性
  • 42. position: サンプルコード
  • 43. マージン(margin)
  • 44. マージン: サンプルコード
  • 45. パディング(padding)
  • 46. パディング: サンプルコード
  • 47. ボーダー(border)
  • 48. ボーダー(サンプルコード)
  • 49. フォント(Fonts)
  • 50. CSSセクションの課題
  • 51. CSSセクション課題: サンプルコード

セクション4 Javascript

  • 52. Introduction To Javascript Section
  • 53. はじめてのJavascriptを使ってみよう
  • 54. inline JS サンプルコード
  • 55. Internal Javascript
  • 56. 要素にアクセスする
  • 57. クリックでスクリプトを実行する
  • 58. クリックで文字列を追記してみよう
  • 59. スタイルを操作してみよう
  • 60. ミニチャレンジ(円を消す)
  • 61. ミニチャレンジのサンプルコード
  • 62. 変数
  • 63. 配列
  • 64. If文
  • 65. 繰り返し(forループ)
  • 66. While文による繰り返し
  • 67. 関数
  • 68. 外部 Javascript

セクション5 jQuery

  • 69. jQueryセクションのイントロダクション
  • 70. What Is jQuery?
  • 71. jQueryを使ってみよう
  • 72. Clickイベントを検知する
  • 73. ウェブページのコンテンツを書き換えてみよう
  • 74. ウェブページのスタイル属性を変更してみよう
  • 75. フェードイン・フェードアウト
  • 76. アニメーション
  • 77. AJAXで非同期通信
  • 78. Regular Expressions
  • 79. jQuery UIを使ってみよう!
  • 80. Draggablesを使ってみよう
  • 81. Resizableを使ってみよう
  • 82. Droppables
  • 83. Accordian

セクション6 Bootstrap4

  • 84. Bootstrap 4セクションのイントロダクション
  • 85. Bootstrapとは?
  • 86. Bootstrapを使ってみよう
  • 87. グリッドシステム
  • 88. ナビゲーションバー
  • 89. フォーム
  • 90. Bootstrap4のコンポーネント
  • 91. ModalとJavaScriptによる処理の連携
  • 92. ScrollSpy
  • 93. ScrollSpy – Files
  • 94. Project – App Landing Page
  • 95. アプリのランディングページ課題の解答例

セクション7 WordPress

  • 96. WordPressのセクションの概要
  • 97. WordPressのセットアップ
  • 98. WordPressのダッシュボード
  • 99. WordPressのテーマ
  • 100. レクチャーで使うテーマの入手サイト
  • 101. Xテーマでサイトを作ろう
  • 102. ショッピングサイトを作る
  • 103. ウェブサイトを作るチャレンジ

セクション8 PHP

  • 104. Introduction To PHP Section
  • 105. Introduction To PHP
  • 106. Hello World With PHP
  • 107. Variables
  • 108. Arrays
  • 109. If Statements
  • 110. For And For Each Loops
  • 111. While Loops
  • 112. GET Variables
  • 113. POST Variables
  • 114. Sending An Email With PHP
  • 115. コンタクトフォームを作ろう

セクション9 MySQL

  • 116. MySQL 5 セクションのイントロ
  • 117. MySQLのデータベースを追加しよう
  • 118. データベースに接続してみよう
  • 119. データベースに接続してみよう(サンプルコード)
  • 120. データベースから値を取得する
  • 121. データベースから値を取得する(サンプルコード)
  • 122. データの挿入と削除
  • 123. データの挿入と削除(サンプルコード)
  • 124. データのループ処理(1/3)
  • 125. データのループ処理 (1/3)サンプルコード
  • 126. データのループ処理(2/3)
  • 127. データのループ処理(2/3・サンプルコード)
  • 128. データのループ処理(3/3)
  • 129. データのループ処理(3/3・サンプルコード)
  • 130. セッション変数
  • 131. セッション変数: ファイル
  • 132. クッキー
  • 133. クッキー:ファイル
  • 134. パスワードを安全に保存する
  • 135. パスワードを安全に保存する:ファイル
  • 136. プロジェクト課題とサンプルコード

セクション10 API

  • 137. Introduction To APIs Section
  • 138. APIの仕組み
  • 139. 天気情報APIを使ってみよう!(1/2)
  • 140. 天気情報API テンプレートファイル
  • 141. 天気情報APIを使ってみよう!(2/2)
  • 142. Weather API サンプルコード
  • 143. Google Maps API
  • 144. Google Maps Geolocation API
  • 145. Google Maps Geocoding API (1/2)
  • 146. Google Maps Geocoding API (2/2)
  • 147. ミニチャレンジ課題:郵便番号ファインダー

セクション11 モバイルアプリ

  • 148. モバイルアプリセクションのイントロ
  • 149. HTML5ベースのアプリ開発ツール
  • 150. App.jsを使ってみよう
  • 151. App.js – サンプルページ(ソースを参照)
  • 152. ローカルストレージを使ってみよう
  • 153. ローカルストレージを使ってみよう (サンプルコード)
  • 154. チャレンジ課題 Eメールクライアントアプリを作ってみよう!

セクション12 HTML5 & CSS3

  • 155. Introduction To HTML5/CSS3 Features Section
  • 156. What Is HTML5?

セクション13 Python

  • 157. このセクションの概要
  • 158. Pythonを学ぶ理由
  • 159. Hello Python! プログラムを書いてみよう
  • 160. Hello Pythonのソースコード
  • 161. 変数とリスト
  • 162. 変数とリスト(練習課題のソースコード)
  • 163. ループ(繰り返し処理)
  • 164. ループのサンプルコード
  • 165. If文

セクション14 ボーナスセクション:Twitterクローンを作ろう

  • 166. 最終課題: Twitterクローンを作ってみよう
  • 167. Twitterクローン: サンプルコード

Webエンジニア講座まとめ

今回はUdemyの講座、【世界で30万人が受講】フルスタック・Webエンジニア講座についてご紹介しました。

開発環境の構築から実際にWebアプリを制作するまでの一通りの流れを学ぶことができたので良かったです。

最終的にtwitterのクローンアプリまで作れるので、自分の制作物として他の人に見せることもできます。

自分でPythonやHTML5ベースのモバイルアプリ開発をしてみたいと考えている方はぜひ、一度講義を受けてみてください。

なかぴょんに受けてほしい学習サービスのリクエストなどありましたら、
お問い合わせにてお伝えください。

なかぴょん

リクエストお待ちしております(^^)