Web開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
4.2 (1,115 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,078 students enrolled

Web開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!

HTML、CSSの基礎を1から学びカフェのWebサイトの制作やフォトギャラリーの制作、Ruby on Railsを使ったタスク管理アプリ開発、そしてJavaScript, MySQL, GitなどWeb開発に必須なスキルを学ぶ。
Bestseller
4.2 (1,115 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,078 students enrolled
Last updated 4/2019
Japanese
Current price: $12.99 Original price: $199.99 Discount: 94% off
30-Day Money-Back Guarantee
This course includes
  • 18 hours on-demand video
  • 19 articles
  • 151 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • HTML5とCSS3を使ってWebサイトのコーディングができるようになります。
  • Bootstrapを使ってレスポンシブ対応のWebサイトのコーディングができるようになります。

  • JavaScriptを使って動的なWebサイトを開発できるようになります。

  • MySQLを使ってデータベースの設定と操作が行えるようになります。
  • RubyとRuby on Railsを使ってWebアプリケーションが構築できるようになります。
  • AWS Cloud9を使ったクラウド統合開発環境を設定して利用できるようになります。
  • Git / GitHubを使ったソースコードのバージョン管理ができるようになります。
Course content
Expand all 285 lectures 18:19:23
+ コース概要
4 lectures 04:51
ビデオ速度の変更
01:57
Q&Aコーナーについて
00:01
+ フロントエンド開発概容
4 lectures 13:14
イントロダクション -フロントエンド開発概容-
01:05
開発環境構築
04:36
インターネット入門
02:56
フロントエンド開発で重要な3要素
04:37
+ HTML入門
21 lectures 01:16:23
HTMLの基本構文
00:54
補足:日本語が文字化けする場合
00:05
補足:添付ファイルのダウロードについて
00:01
HTMLの雛形(テンプレート)
00:01
Atomの設定 不可視文字
00:41
コメント
03:58
基本的なタグ
08:23
文法チェック
03:30
リスト
06:59
演習:リスト
02:17
演習回答:リスト
06:15
div, span
05:20
属性(Attribute)
05:36
リンク
08:52
演習 : HTML基礎
02:13
演習回答 : HTML基礎
04:55
+ HTMLステップアップ編
15 lectures 01:11:44
テーブル
14:56
補足:HTMLのthタグとtdタグの違いについて
00:01
行と列の覚え方
00:45
演習 : テーブル
01:41
演習回答:テーブル
09:06
フォーム
03:45
シンプルなフォーム
06:15
色々なフォーム部品①
06:31
色々なフォーム部品②
08:13
訂正:演習 フォーム
00:00
演習:フォーム
02:12
演習回答:フォーム①
07:48
演習回答:フォーム②
04:54
+ CSS入門
12 lectures 01:03:21
はじめてのCSS②
05:13
HTMLテンプレート配布
00:00
CSSのコメント
03:25
色の指定
07:45
背景とボーダー①
06:59
背景とボーダー②
03:40
セレクター
08:42
演習回答:CSS基礎
05:33
+ CSSステップアップ編
8 lectures 42:41
フォント①
06:34
フォント②
05:47
フォント③
06:01
Google Webフォント日本語
05:11
ボックスモデル
08:09
フロートレイアウトの基本
06:41
+ 実践:Webサイトのコーディング
10 lectures 49:19
補助教材:サンプルコード
00:01
ファイルの作成
04:21
CSSによるスタイルの設定 1
09:52
CSSによるスタイルの設定 2
07:57
CSSによるスタイルの設定 3
06:17
メイン画像の設定
01:04
メタデータの設定
02:31
+ Bootstrap 4入門
15 lectures 01:31:45
はじめてのBootstrap 1
04:34
はじめてのBootstrap 2
07:53
ナビゲーションバー
12:43
グリッドシステム 1
07:46
グリッドシステム 2
04:21
グリッドシステム 3
06:52
グリッドシステム 4
06:08
実践:フォトギャラリーの制作 2
09:31
実践:フォトギャラリーの制作 3
07:43
補足:フォントオーサム公式サイトについて
00:01
実践:フォトギャラリーの制作 4 フォントオーサムの導入
05:07
実践:フォトギャラリーの制作 5 仕上げ
05:35
+ JavaScript入門
31 lectures 01:42:12
JavaScriptの歴史
02:01
JavaScriptの開発環境構築
00:25
はじめてのJavaScript
06:37
JavaScriptのエラーを自力で解決するための方法
02:59
コメント
02:34
変数
06:30
インクリメントとデクリメント
04:26
条件分岐
01:06
条件分岐 if / else
05:45
条件分岐 if / if else / else
07:12
条件分岐 switch
08:18
演習:テーマパークの入場料計算
01:34
演習回答:テーマパークの入場料計算
03:34
繰り返し処理とは
00:25
繰り返し処理 for
03:50
繰り返し処理 while
03:25
繰り返し処理 do while
03:28
演習:繰り返し処理
00:53
演習回答:繰り返し処理
01:52
配列
06:27
連想配列
05:15
演習:配列を使ったテストの点数の集計
01:51
演習回答:配列を使ったテストの点数の集計
03:36
関数とは
01:44
function命令
03:10
関数リテラル
02:26
Functionコンストラクタ
02:12
演習:関数
01:08
演習回答:関数
01:53
+ JavaScript DOM操作
13 lectures 57:08
イントロダクション - JavaScript DOM操作 -
00:44
DOMとは
04:13
IDをキーに要素を取得
10:47
タグ名をキーに要素を取得
06:19
name属性をキーに要素を取得
04:35
class属性をキーに要素を取得
05:43
ノードを追加
06:06
補足:ノードを追加
00:18
ノードの削除
06:13
演習 : DOM操作
02:03
演習回答:DOM操作
02:49
補足:演習回答:DOM操作
00:16
Requirements
  • 基礎的なパソコン操作の知識
Description

このコースは、プログラミング初心者の方がプログラミングを1から学び、IT系エンジニアを目指す方向けのコースです。

HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, GitGitHubを用いたWebアプリケーション開発の方法を総合的に学べます18時間の大型コースでお得に学べます。

☆☆コースの内容をしっかりと確認した上で受講をいただけるように、無料プレビューを60分公開しております。ぜひご覧ください!!☆☆

IT人材は、2030年に最大78万人不足すると経済産業省から発表がされました。

現在、ITエンジニアの転職市場は売り手市場です。また、自らWebアプリケーション開発ができるようになり、素早くアイディアを形にできれば、システム開発の費用が削減できて、起業への挑戦もハードルが下がります。

基本的なWebページの(HTML, CSS)の構築方法を学習したあと、画面サイズによって動的にレイアウトが変わるモバイルフレンドリーでレスポンシブ対応のWebサイトの作り方を学習します(Bootstrap)。

その後に、プログラミングを学習します。主にブラウザ側で動作させるJavaScriptと、サーバー側で動かすRubyを学習します。

よく使う機能が用意されていて、高速に開発が行えるWebアプリケーションフレームの使い方を学習します。スタートアップ企業でもよく使われるフレームワークを使用します(Ruby on Rails)。

Webアプリケーションを開発を行う上でキーポイントとなるデータを体系的に扱うデータベースの使い方を、学習します(MySQL)。

開発環境構築も丁寧に手順を追って説明します(AWS Cloud9)。

私は約10年の豊富なエンジニア経験があるとともに、初心者向けのプログラミング勉強会の講師や、エンジニア志望の大学生向けインターン講師、大手ITスクールでのティーチング・アシスタント経験があるのが強みです。ベテランになるにつれて、初心者のころに困っていたことを忘れてしまうものですが、初心者の時によくつまずく箇所が、分かっているので講座では丁寧な解説をしています。

皆さんの今後の自己実現のためのお役に立てるコースとなれば幸いです。
それでは、皆さんとコースの中でお会いできることを楽しみにしております。


想定する受講生

  • 実務未経験からITエンジニアに転職したいですか?

  • 自らWebアプリケーションを開発して公開できるようになりたいですか?

  • 駆け出しのWeb開発者の方でさらにスキルアップしたいですか?

⇒ あなたの答えが1つ以上YESなら、これはまさにあなたが探しているコースです!


※Web開発初心者向けの講座です。実務経験豊富なエンジニアの方にとっては、物足りない可能性がありますので、ご注意ください。


利用ソフトウェアとバージョン

下記を使用してWebアプリケーション開発を学習します。

  • HTML5 ・・・Webページの文章を構造化して記述

  • CSS3・・・Webページの見た目を整える

  • JavaScript (ES5)・・・Webページを動的に操作することができるプログラミング言語

  • Bootstrap4 ・・・よく使うWebぺージのデザインが簡単に設定できるCSSフレームワーク

  • MySQL 5.7・・・データベース

  • Ruby 2.5・・・サーバ側で動かすプログラミング言語

  • Ruby on Rails 5・・・Webアプリケーションを高速で開発するためのフレームワーク

  • AWS Cloud9・・・アマゾン ウェブサービスが提供するWebブラウザで動作開発環境

  • Git 2.13・・・ソースコードのバージョン管理

  • Atom 1.x・・・テキストエディタ

  • Google Chrome ・・・Webブラウザ

学習環境について

  • パソコン(Mac または Windows)が必要。

  • レクチャーの動画ではMacを使用します。Windows環境での学習については補足説明。

  • インストールして使うアプリケーションとして、Webブラウザ Google ChromeとテキストエディタAtomを使います。MacでもWindowsでもOK。無料。

  • 開発環境には、AWS Cloud9というブラウザでWeb開発が行えるアマゾンのサービスを利用。無料枠で1年間学習可能。

  • アマゾン ウェブ サービスのアカウント作成が必要で、メールアドレス、クレジットカード、電話番号の用意が必要(認証のためクレジットカード登録が必要ですが、無料枠内で学習すれば課金発生しません)

  • GitHubアカウント(無料プラン)

更新履歴

  • 2019/4/2 AWS請求アラートのUI変更(設定→Billling設定)に対応

  • 2019/1/29 「Rubyのバージョン管理 1」rvmの設定手順を一部変更

  • 2019/1/17 「AWS Cloud9による開発環境構築」セクション テキストエディタの設定レクチャーをアップデート

  • 2019/1/5 「AWS Cloud9による開発環境構築」セクションの、RVMインストール手順を修正

  • 2018/11/06 「HTML入門」セクションのコードの文字が小さい問題を修正

  • 2018/8/28 セクション8 Bootstrap 4入門の「ナビゲーションバー」 class指定について補足

  • 2018/8/8 実践:Webサイトのコーディング「CSSによるスタイルの設定 2」補足テロップ追加

  • 2018/6/15 レクチャー新規追加「JavaScriptのエラーを自力で解決するための方法」

  • 2018/5/22 動画アップデート 「コース紹介動画」

  • 2018/5/16 レクチャー新規追加 「リモートリポジトリからプル」

  • 2018/4/25 誤植修正 イントロダクション - Ruby入門

  • 2018/4/2  レクチャー新規追加「ビデオ速度の変更」

  • 2018/2/16 セクションを新規追加「Git/Git Hub入門」

Who this course is for:
  • 実務未経験からITエンジニアに転職したい方
  • 自分でWebサービスを開発して公開したい方
  • 駆け出しのWebエンジニアでスキルアップしたい方
  • Webアプリを構築できるようになって仕事の幅を広げたいWebデザイナー
  • Webアプリを構築できるようになって仕事の幅を広げたいマーケター
  • エクセルやパワポ仕事が多いSEの方でプログラムを自分でもっと書けるようになりたい方。
  • ★★既にプログラマーとしての実務経験を積んでいる方には向きません★★