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

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

HTML 、CSS の基礎を1から学びカフェのWebサイトの制作やフォトギャラリーの制作、Ruby on Rails を使ったタスク管理アプリ開発、そしてJavaScript, MySQL, GitなどWeb開発に必須なスキルを学ぶ。
Highest Rated
4.2 (2,810 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.
15,910 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
  • 18.5 hours on-demand video
  • 23 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 290 lectures 18:33:38
+ コース概要
5 lectures 12:20

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

  • このコースの概要

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

  • 受講対象者について

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

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

  • 学習スタイルについて

  • 実務で使える学習

  • わからない場合

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

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

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

  • フロントエンドとは?

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

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

Google ChromeとAtomのインストールを説明します。

  • Google ChromeとAtomの概要

  • Google Chromeのインストール

  • Atomのインストール(macOS/Windows)

開発環境構築
04:36

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

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

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

  • DNS / wwwとは?

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

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

  • HTML/CSS/JavaScript

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

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

フロントエンド開発で重要な3要素
04:37
+ HTML入門
22 lectures 01:26:34

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

  • 学習の流れ

  • 学習内容の説明

  • 学習のやり方、狙い

Preview 00:45

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

  • HTMLの誕生

  • HTMLのバージョン

  • 用語についての説明

Preview 02:33

HTMLの基本構文について説明します。

  • HTMLの基本構文について

  • 具体例

  • タグと要素

HTMLの基本構文
00:54

MDNについて説明します。

  • MDNとは?

  • MDNのサイト

  • 実務での使い方

Preview 02:29

HTML文章の基本構造について説明します。

  • HTML文書の基本構造の説明

  • html要素について

  • head/body要素について

Preview 01:00

HTMLを記述していきます。

  • Atomの起動

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

  • はじめてのHTML(HTMLコード記述)

Preview 08:51

HTMLを記述していきます。

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

  • Atomの起動

  • はじめてのHTML(HTMLコード記述)

Preview 09:23

日本語の文字化けが起こる場合の対応方法を説明します。

  • 解決方法

  • 文字エンコーディングを指定

  • サポート記事について

補足:日本語が文字化けする場合
00:25

添付ファイルのダウンロード方法について

  • 添付ファイルダウンロードの指示について

  • ダウンロード方法

  • サポートページ

補足:添付ファイルのダウロードについて
00:11

template.htmlについての説明

  • 雛形となる部分のコピー

  • 動画で説明してない部分について

  • レクチャーのリソース

HTMLの雛形(テンプレート)
00:44

Atomの設定についての補足をします。

  • 設定手順

  • Show Invisibles

  • インデントについて

Atomの設定 不可視文字
01:00

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

  • コメントとは?

  • コメントアウト

  • コメントの記述方法

コメント
03:58

HTMLの基本的なタグを説明します。

  • 見出しについて(hタグ)

  • 段落について(pタグ)

  • 改行/強調/字体を表すタグ

基本的なタグ
08:23

HTMLの文法をチェックします。

  • W3Cのバリデーター

  • HTMLのチェックの仕方

  • 文法エラーがある場合

文法チェック
03:30

リスト表示について説明します。

  • リストの種類

  • アンオーダーリストの作成

  • オーダーリストの作成

リスト
06:59

リストを作成するリストを作成する演習です。

  • 目標物の確認・ファイルの作成

  • わからない場合演習です。

  • 目標物の確認・ファイルの作成・わからない場合

演習:リスト
02:17

リストを作成する演習の回答です。

  • 見出しタグ

  • リストタグ

  • 回答の表示

演習回答:リスト
06:15

divとspanタグについて説明します。

  • div、spanの用途

  • div、spanの違い

  • div、spanの実践と注意点

div, span
05:20

属性(Attribute)について説明します。

  • 属性(Attribute)とは?

  • 相対パス、絶対パス

  • imgを使った属性タグの記述

属性(Attribute)
05:36

リンクについて説明します。

  • aタグについて

  • リンク先の種類

  • リンクを作成する実践

リンク
08:52

このセクションで学習したことを演習します。

  • 目標物確認

  • 素材について

  • タグの説明

演習 : HTML基礎
02:13

このセクションで学習したことの演習の回答をします。

  • 完成形の確認

  • HTMLファイルの編集

  • 演習回答

演習回答 : HTML基礎
04:55
+ HTMLステップアップ編
15 lectures 01:11:57

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

  • セクションの概要

  • 学習の仕方について

  • 学習内容について

Preview 00:41

テーブルについて説明します。

  • tr/th/tdタグの説明

  • thead/tfoot/tbodyタグの説明

  • セルの結合

テーブル
14:56

thタグとtdタグの違いについて補足の説明をします。

  • thとtdの違いがよくわからなかった方へ

  • サポートページ

補足:HTMLのthタグとtdタグの違いについて
00:09

行と列を見分ける覚え方を説明します。

  • 行と列がわからなくなった時

  • 漢字を使った覚え方

  • アルファベットを使った覚え方

行と列の覚え方
00:45

テーブルに関する演習です。

  • 目標物確認

  • 添付資料について

  • リンクについて

演習 : テーブル
01:41

テーブルに関する演習の回答です。

  • 目標物の確認

  • テーブルの作成

  • 演習回答

演習回答:テーブル
09:06

フォームについて説明します。

  • フォームとは?

  • フォームタグ/GETとPOST

  • インプットタグについて

フォーム
03:45

シンプルなフォームを作ります。

  • formのアクションと属性

  • インプットタグの種類

  • プレイスホルダー

シンプルなフォーム
06:15

色々なフォーム部品を使ってみます。

  • プルダウン

  • ラジオボタン

  • サブミットボタン

色々なフォーム部品①
06:31

色々なフォーム部品を使ってみます。

  • selectタグ/optionタグ

  • selected(初期値)/value属性

  • textarea/checkbox

色々なフォーム部品②
08:13

フォームバリデーションについて説明します。

  • バリデーションとは?

  • 入力必須制約

  • ラベルタグ

Preview 04:55

次のレクチャーの訂正です。

  • 正しい表記

  • 誤った表記

訂正:演習 フォーム
00:05

フォームに関する演習です。

  • 目標物の確認

  • 素材のダウンロードについて

  • 作り方の説明

演習:フォーム
02:12

フォームに関する演習の回答です。

  • フォームの設置

  • テーブルの設置

  • フォーム部品の確認

演習回答:フォーム①
07:48

フォームに関する演習の回答の続きです。

  • email入力欄の設置

  • プルダウンの設置

  • テキストエリアの設置

演習回答:フォーム②
04:54
+ CSS入門
12 lectures 01:03:39

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
+ 実践:Webサイトのコーディング
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アプリケーション開発の方法を総合的に学べます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アプリケーションを高速で開発するためのフレームワーク(現時点ではver6系での動作確認はしておりません)

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