ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
4.2 (2,879 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.
16,291 students enrolled

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

HTML 、CSS の基礎を1から学びカフェのWebサイトの制作やフォトギャラリーの制作、Ruby on Rails を使ったタスク管理アプリ開発、そしてJavaScript, MySQL, GitなどWeb開発に必須なスキルを学ぶ。
4.2 (2,879 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.
16,291 students enrolled
Current price: $129.99 Original price: $199.99 Discount: 35% off
11 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 21.5 hours on-demand video
  • 29 articles
  • 154 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy 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 338 lectures 21:51:16
+ コース概要
5 lectures 12:20

このコースの説明をします。

  • このコースの概要

  • 学習内容やIT学習の意義について

  • 受講対象者について

Preview 02:32
受講オリエンテーション
08:31
補足:受講オリエンテーション
00:31

この講座での学習の進め方についてご説明します。

  • 学習スタイルについて

  • 実務で使える学習

  • わからない場合

Preview 00:21
macOS Catalina環境でZipファイルが解凍できない場合
00:25
+ フロントエンド開発概容
7 lectures 15:53

このセクションについての説明です。

  • フロントエンド開発概要の学習

  • フロントエンドとは?

  • 各動画の主な概要について

イントロダクション -フロントエンド開発概容-
01:05

インターネットの前提知識を説明します。

  • インターネットの概要と歴史

  • ドメイン名/ IP/I Pアドレスとは

  • DNS / wwwとは?

インターネット入門
02:56

フロントエンド開発で重要な3要素について説明します。

  • HTML/CSS/JavaScript

  • フロントエンドとバックエンド

  • 静的なページと動的なページ

フロントエンド開発で重要な3要素
04:37
Google Chromeのインストール
00:27
テキストエディタについて
00:33
【macOS】Visual Studio Codeのインストール
02:45
【Windows】Visual Studio Codeのインストール
03:30
+ 新HTML入門
32 lectures 02:32:41

このセクションについて説明いたします。

イントロダクション - HTML入門
00:06

HTML の歴史について学習します。

  • HTML の開発経緯について

  • 主要な HTML のバージョン

  • W3C について

HTMLの歴史
02:25

HTML の基本構文について学習します。

  • HTML の基本構文について

  • 構文について

  • 具体例について

Preview 01:55

HTML 文書の基本構造について学習します。

  • 概要について

  • 実例

  • 要素の入れ子とドキュメントツリー

Preview 03:30

【macOS】はじめてのHTMLについて学習します。

  • はじめての HTML を書いて、ウェブブラウザで表示

  • macOS ご利用の方向けレクチャー

  • Windows をご利用の方はスキップ

Preview 13:29

【Windows】はじめての HTML について学習します。

  • はじめての HTML を書いて、ウェブブラウザで表示

  • Windows をご利用の方向けレクチャー

  • macOS をご利用の方はスキップ

Preview 12:17

技術ドキュメント MDN について学習します。

  • MDN とは

  • 実際の活用例

  • 検索について

技術ドキュメント MDN
02:57

HTML 文章のインデントと改行について学習します。

  • HTML 文章のインデントと改行について

  • 動作について

  • 確認について

HTML文書のインデントと改行
03:19

【macOS】Visual Studio Code の設定について学習します。

  • macOS 版レクチャー

  • Visual Studio Code の基本的な設定

  • 時間短縮について

【macOS】Visual Studio Codeの設定
10:17

【Windows】Visual Studio Code の設定について学習します。

  • Windows 版のレクチャー

  • Visual Studio Code の基本的な設定

  • 時間短縮について

【Windows】Visual Studio Codeの設定
10:13

よくある HTML の記述間違いについて学習します。

  • よくある HTML の記述間違い

  • 全角スペース【macOS】

  • 復習

よくあるHTMLの記述間違い
05:04

HTML の構文チェックが行えるウェブサイトについて学習します。

  • HTML の構文チェックが行えるウェブサイトについて

  • 料金

  • URL

構文チェック
03:16

HTML のエラーを取り除く演習です。

  • HTML のエラーを取り除く演習

  • 記述間違いのある HTML ファイル

  • 修正について

演習:HTMLのエラーを取り除く
01:57

HTMLのエラーを取り除く演習の回答です。

  • 演習の解答

  • プラグイン

  • 構文チェック

演習回答:HTMLのエラーを取り除く
02:43

HTMLの構文チェックが行えるウェブサイトについて学習します。

  • コンテンツを先に書いて、タグで書く

  • タグを書いてから、コンテンツを書く

  • 余談

よくあるご質問:要素の書き順
02:03

HTML のコメントの使い方について学習します。

  • コメントとは

  • 注意点

  • コメントアウトとは

HTMLのコメント
05:19

改行について学習します。

  • 改行を行う要素

  • br とは

  • 復習

改行
03:07

区切りについて学習します。

  • 区切りを表す hr 要素 について

  • hr とは

  • 注意点

区切り線
02:04

リスト表示について学習します。

  • 順序なし ul 要素

  • 順序あり ol 要素

  • 余談

リスト
04:22

入れ子になったリストについて学習します。

  • ネストしたリスト

  • 補足

  • 結論

入れ子になったリスト
04:02

リストに関する演習です。

  • 各自制作

  • 見出し

  • HTML ファイル

演習:リスト
01:11

リストに関する演習の回答です。

  • 回答

  • ファイルの保存【mac】

  • ファイルの保存【Windows】

演習解答:リスト
02:01

説明リストについて学習します。

  • 説明リストとは

  • コードについて

  • よくあるご質問

説明リスト
05:26

見出しについて学習します。

  • 見出し要素について

  • 見出し要素のツリー構造

  • 注意点

見出し
03:53

属性と画像の表示について学習します。

  • 属性について

  • 属性の基本構文

  • 画像の表示について

属性と画像の表示
05:32

リンクについて学習します。

  • リンクとは

  • 構文: a 要素について

  • リンクの3つの種類について

リンク
08:40

強調について学習します。

  • strong 要素とは

  • 重要な語句について

  • 注意点

強調
02:10

著作権表記について学習します。

  • small 要素とは

  • 構造と表現の分離の原則について

  • 注意点

著作権表記
03:00

情報のグループ化について学習します。

  • 情報のグループ化について

  • グループ化のメリット

  • よく頂くご質問

情報のグループ化
09:47

span 要素について学習します。

  • span 要素とは

  • 実例

  • div と span の違い

span要素
05:20

HTMLの基礎演習です。

  • ウェブページ参照

  • HTML 基礎の演習問題

  • 補足

演習 : HTML基礎
03:10

HTMLの基礎演習解答です。

  • 解答例

  • 情報のグループ化

  • よくあるご質問

演習回答 : HTML基礎
08:06
+ 新HTMLステップアップ編
10 lectures 41:24
はじめてのテーブル
05:16
行と列の覚え方
00:45
ヘッダーのあるテーブル
02:38
thead、tbody、tfootがあるテーブル
04:48
キャプション
02:26
セルの結合
06:45
演習 : テーブル
01:56
演習回答:テーブル
08:08
フォーム概要
04:23
はじめてのフォーム
04:19
+ CSS入門
13 lectures 01:04:21
CSS入門セクション以降のテキストエディタについて
00:42

CSSとはなにかについて説明します。

  • CSSの概要

  • HTMLとCSSの役割

  • CSSのルール

Preview 02:58

基本的なCSSの記述を行います。

  • CSSのインライン記述

  • CSSの内部参照

  • CSSの外部参照

Preview 09:59

CSSを記述する際の特徴について説明します。

  • CSS外部参照のメリット

  • 特定のページのスタイルの変え方

  • CSSの組み込み方の優先順位

はじめてのCSS②
05:13

HTMLの新たなテンプレートの配布です。

  • 新しいテンプレート

  • linkタグ

  • レクチャーのリソース

HTMLテンプレート配布
00:18

コメントについて説明します。

  • コメントとは?

  • コメントの記述方法

  • 複数行のコメント

CSSのコメント
03:25

CSSのcolorプロパティについて説明します。

  • 色の指定方法について

  • RGBでの指定方法

  • カラー名での指定方法

色の指定
07:45

背景とボーダーについて説明します。

  • background-colorについて

  • border-colorについて

  • border-styleについて補足

背景とボーダー①
06:59

背景とボーダーについて説明します。

  • 背景に画像を設定

  • 背景画像の繰り返し(background-repeat)

  • 背景画像の位置(background-position)

背景とボーダー②
03:40

セレクターについて説明します。

  • セレクターとは?

  • セレクターの種類

  • 各セレクターの書き方

セレクター
08:42

Google Chromeデベロッパーツールについて説明します。

  • Google Chromeデベロッパーツールとは?

  • デベロッパールールでできることの実践

  • デベロッパーツール上でのコードの変更

Preview 07:24

これまで学習した基本的なCSSを使った演習です。

  • 目標物の確認

  • 添付ファイルの説明

  • 演習の準備

Preview 01:43

これまで学習した基本的なCSSを使った演習の回答です。

  • 各部分の記述

  • 完成物との比較

演習回答:CSS基礎
05:33
+ CSSステップアップ編
9 lectures 42:44

このセクションについて説明します。

  • 学習内容の確認

  • フォント

  • ボックスモデル/レイアウト

Preview 01:08

フォントについて説明します。

  • フォントの操作方法

  • フォント名の例

  • フォント名で指定する場合の注意

フォント①
06:34

フォントについて説明します。

  • ファイルの作成

  • フォント操作の練習

  • 実用的な指定の仕方

フォント②
05:47

フォントについて説明します。

  • フォントに関するプロパティ

  • 様々なフォントプロパティの練習

  • 単位について

フォント③
05:43

WEBフォントについて説明します。

  • Webフォントについて

  • 欧文フォント/和文フォント

  • 主なWebフォント

Preview 03:10

Google Webfontについて説明します。

  • Google Webfontについて

  • Google Webfontの注意

  • Google Webfontの練習

Google Webフォント日本語
05:11

ボックスモデルについて説明します。

  • ボックスモデルとは?

  • ボックスモデルの図解

  • ボックスモデルの練習

ボックスモデル
08:09

フロートレイアウトの基本について説明します。

  • 目標物の確認

  • フロートレイアウトの練習

  • フロートレイアウトの補足

フロートレイアウトの基本
06:41
補足:clearプロパティについて
00:21
+ 実践:ウェブサイトのコーディング
10 lectures 49:13

このセクションについて説明します。

  • 完成物の確認

  • 大事な要素について

  • コーディング仕様について

Preview 01:58
補助教材:サンプルコード
00:13

ファイルの準備をします。

  • フォルダ/ファイルの作成

  • 配布物の説明

  • html/cssファイルの編集

ファイルの作成
04:21

HTMLのマークアップ方法について説明します。

  • header部分のマークアップ

  • main部分のマークアップ

  • ダミー画像について

Preview 05:46

HTMLのマークアップ方法について説明します。

  • main部分のコンテントのマークアップ

  • サイドバーのマークアップ

  • フッターのマークアップ

Preview 09:32

CSSでスタイルをあてていきます。

  • 文字コード/フォントの設定

  • ヘッダーのスタイル作成

  • グローバルナビゲーションのスタイル作成

CSSによるスタイルの設定 1
09:52

CSSでスタイルをあてていきます。

  • メインエリアのスタイル作成

  • フロートレイアウトの作成

  • 小見出しの装飾作成

CSSによるスタイルの設定 2
07:57

CSSでスタイルをあてていきます。

  • サイドバーエリアのスタイル作成

  • フッターエリアのスタイル作成

  • マウスオーバーの設定

CSSによるスタイルの設定 3
05:59

メイン画像を配置します。

  • 素材の配置

  • ソース属性の値変更

  • 画像の差し替え

メイン画像の設定
01:04

メタデータを入れていきます。

  • メタデータとは?

  • description/keywords

  • metaタグの配置

メタデータの設定
02:31
+ Bootstrap 4入門
15 lectures 01:31:02

このセクションについて説明します。

  • Bootstrapとは?

  • 学習内容について

  • 実践の目標物確認

Preview 01:48

Bootstrapが何かについて説明します。

  • Bootstrapの概要

  • メリット/デメリット

  • 機能紹介

Preview 09:12

実際にBootstrapを使ってみます。

  • Bootstrapの読み込み

  • CSSとJSの読み込み

  • viewportの設定

はじめてのBootstrap 1
04:34

実際にBootstrapを使ってみます。

  • 様々なbuttonの使用

  • jumbotron

  • formの作成

はじめてのBootstrap 2
07:53

ナビゲーションバーについて説明します。

  • ナビゲーションの作成

  • ハンバーガーメニューの作成

  • ナビバーの色変更

ナビゲーションバー
12:43

グリッドシステムについて説明します。

  • グリッドシステムとは?

  • グリッドの列数について

  • カラムの使い方について

グリッドシステム 1
07:46

グリッドシステムについて説明します。

  • column3/4/6/12の場合

  • columnの大きさの組み合わせ

  • column合計数が12を超えた場合

グリッドシステム 2
04:21

グリッドシステムについて説明します。

  • サイズの指定方法について

  • サイズを指定の実践

  • グリッド数の指定

グリッドシステム 3
06:52

グリッドシステムについて説明します。

  • グリッドオプションの複数指定

  • 入れ子のやり方

  • 入れ子が12個分ない場合

グリッドシステム 4
06:08

ブートストラップを使ってフォトギャラリーを作ります。

  • 目標物の確認

  • アイコンのについて

  • 下準備

Preview 02:31

ブートストラップを使ってフォトギャラリーを作ります。

  • Unsplash

  • グローバルナビゲーションの作成

  • ジャンボトロンの作成

実践:フォトギャラリーの制作 2
09:31

ブートストラップを使ってフォトギャラリーを作ります。

  • ギャラリーの作成

  • グリッドシステム

  • レスポンシブ指定

実践:フォトギャラリーの制作 3
07:43

Font Awesomeの使用についてのお願いです。

  • Font Awesome

  • アイコン

補足:フォントオーサム公式サイトについて
00:12

ブートストラップを使ってフォトギャラリーを作ります。

  • アイコンの作成

  • Font Awesomeの使い方

  • Font Awesomeのコード挿入

実践:フォトギャラリーの制作 4 フォントオーサムの導入
04:13

ブートストラップを使ってフォトギャラリーを作ります。

  • ヘッダーの固定

  • フォントの指定

  • メタデータの作成

実践:フォトギャラリーの制作 5 仕上げ
05:35
+ JavaScript入門
31 lectures 01:42:00

このセクションについて説明します。

  • JavaScriptとは?

  • 用語の解説

  • 学習内容について

Preview 02:11

JavaScriptの歴史について説明します。

  • JavaScriptの経緯

  • ECMAScript

  • 利用するJavaScriptのバージョン

JavaScriptの歴史
02:01

このセクションの開発環境について説明します。

  • Google Chrome

  • Atom

JavaScriptの開発環境構築
00:25

Hello Worldのプログラムを作成します。

  • console.log

  • JavaScriptの外部ファイル化

  • JavaScriptファイルの読み込み

はじめてのJavaScript
06:37

JavaScriptのエラーの確認方法と種類について説明します。

  • エラーがある場合

  • エラーメッセージの確認

  • MDNのエラーリスト

JavaScriptのエラーを自力で解決するための方法
02:59

JavaScriptのコメントのやり方を説明します。

  • 一行コメントの記述方法

  • 複数行コメントの記述方法

  • コメントの実演

コメント
02:34

四則演算と余りの演算を説明します。

  • 四則演算

  • 余りの計算方法

  • 演算の実演

Preview 03:25

変数について説明します。

  • 変数とは?

  • 変数の宣言について

  • 変数の実演

変数
06:30

インクリメントとデクリメントについて説明します。

  • インクリメントとデクリメントの書き方

  • 後置演算子と前置演算子

  • 後置演算子と前置演算子の実演

インクリメントとデクリメント
04:26

条件分岐について説明します。

  • 条件分岐とは?

  • 条件分岐の例

  • 条件分岐のパターン

条件分岐
01:06

条件分岐if/elseについて説明します。

  • if/else構文と説明

  • 例題

  • 比較演算子について

条件分岐 if / else
05:45

条件分岐if/if else/elseについて説明します。

  • if/if else/else構文と説明

  • 例題

  • 様々な値での検証

条件分岐 if / if else / else
07:12

条件分岐switchについて説明します。

  • switchとは?

  • switch構文

  • break/defaultについて

条件分岐 switch
08:18

条件分岐に関する演習をします。

  • 問題について

  • if/else if/else構文

  • わからない場合

演習:テーマパークの入場料計算
01:34

条件分岐に関する演習の回答をします。

  • if/else if/else構文

  • 条件ごとの出力

  • 演習回答

演習回答:テーマパークの入場料計算
03:34

繰り返し処理について説明します。

  • for

  • while

  • do while

繰り返し処理とは
00:25

繰り返し処理forについて説明します。

  • for構文

  • 例題

  • for文の記述/解説

繰り返し処理 for
03:50

繰り返し処理whileについて説明します。

  • while構文

  • 例題

  • while文の記述/解説

繰り返し処理 while
03:25

繰り返し処理do whileについて説明します。

  • do while構文

  • whileとdo whileの違い

  • do while文の解説

繰り返し処理 do while
03:28

繰り返し処理の演習をします。

  • 問題について

  • ヒント

  • 繰り返し処理for文

演習:繰り返し処理
00:53

繰り返し処理の演習の回答をします。

  • for文の記述

  • 合計値

  • 演習回答

演習回答:繰り返し処理
01:52

配列について説明します。

  • 配列とは?

  • 配列の使い方

  • 多次元配列

配列
06:27

連想配列について説明します。

  • 連想配列とは?

  • 連想配列の使い方

  • キーとバリュー

連想配列
05:15

配列を使った演習を行います。

  • 問題について

  • 配列の長さ

  • わからない場合

演習:配列を使ったテストの点数の集計
01:51

配列を使った演習の回答を行います。

  • 配列の作成

  • 繰り返し処理

  • 演習回答

演習回答:配列を使ったテストの点数の集計
03:24

関数について説明します。

  • 関数とは?

  • 標準関数

  • ユーザー定義関数

関数とは
01:44

function命令について説明します。

  • function命令構文

  • 引数

  • 戻り値

function命令
03:10

関数リテラルについて説明します。

  • 関数リテラル構文

  • 関数リテラルによる定義

  • 関数リテラルの実演

関数リテラル
02:26

Functionコンストラクタの説明をします。

  • Functionコンストラクタ構文

  • Functionコンストラクタの実演

  • Functionコンストラクタ

Functionコンストラクタ
02:12

関数に関しての演習をします。

  • 問題について

  • Function命令

  • わからない場合

演習:関数
01:08

関数に関しての演習の回答をします。

  • Function命令

  • 演習回答

演習回答:関数
01:53
+ JavaScript DOM操作
13 lectures 59:18

このセクションについて説明します。

  • DOM操作とは?

  • 学習内容について

  • 各講座のテーマ

イントロダクション - JavaScript DOM操作 -
00:44

DOMとは何かについて説明します。

  • DOMツリーとは?

  • ノードについて

  • ブラウザオブジェクトについて

DOMとは
04:13

IDをキーに要素を取得する方法について説明します。

  • getElementsByIdメソッド

  • document.getElementsById構文

  • 補足(HTMLCollection)

IDをキーに要素を取得
10:47

タグ名をキーに要素を取得する方法について説明します。

  • getElementsByTagNameメソッド

  • document.getElementsByTagName構文

  • 補足(HTMLCollection)

タグ名をキーに要素を取得
06:19

name属性をキーに要素を取得する方法について説明します。

  • getElementsByNameメソッド

  • document.getElementsByName構文

  • 補足(HTMLCollection)

name属性をキーに要素を取得
04:35

class属性をキーに要素を取得する方法について説明します。

  • getElementsByClassNameメソッド

  • document.getElementsByClassName構文

  • 補足(HTMLCollection)

class属性をキーに要素を取得
05:43

ノードを追加する方法について説明します。

  • ノード追加の流れ

  • createElement/createTextNodeメソッド

  • appendChildメソッド

ノードを追加
06:06

ノードを追加するレクチャーの補足です。

  • 新たな処理方法

  • 一般的なコード

  • コードの見本

補足:ノードを追加
01:21

ノードを置換する方法について説明します。

  • replaceChildメソッド

  • replaceChild構文

  • replaceChildメソッドの実演

Preview 07:02

ノードを削除する方法について説明します。

  • removeChildメソッド

  • removeChild構文

  • removeChildメソッドの実演

ノードの削除
06:13

DOM操作についての演習をします。

  • 問題について

  • ノード

  • 目標物の確認

演習 : DOM操作
02:03

DOM操作についての演習の回答をします。

  • getElementメソッド

  • ノード作成

  • 演習回答

演習回答:DOM操作
02:49

DOM操作についての演習の回答の補足です。

  • 現状のコードについて

  • 一般的なコード

  • コードの見本

補足:演習回答:DOM操作
01:22
Requirements
  • 基礎的なパソコン操作の知識
Description

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

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

☆☆コースの内容をしっかりと確認した上で受講をいただけるように、無料プレビューを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アプリケーションを高速で開発するためのフレームワーク(現時点ではver6系での動作確認はしておりません)

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

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

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

  • Google Chrome ・・・Webブラウザ

学習環境について

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

  • 動画内ではmacOSを使用。Windows環境での学習については補足説明。

  • インストールして使うアプリケーションとして、Webブラウザ Google Chromeとテキストエディタ Visual Studio Code(レクチャーによってはAtom)を使います。MacでもWindowsでもOK。無料。

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

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

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

更新履歴

  • 2020/6/2 セクションリニューアル「HTML入門」「HTMLステップアップ」

  • 2019/6/25 「Atomの設定 不可視文字」 Windows版Atomの操作について補足

  • 2019/6/6 フォントオーサム公式サイトの仕様変更に対応

  • 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の方でプログラムを自分でもっと書けるようになりたい方。
  • ★★既にプログラマーとしての実務経験を積んでいる方には簡単すぎるため向きません★★