Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!

カフェのウェブサイト制作やフォトギャラリーの制作、Ruby on Rails を使ったタスク管理アプリ開発、 MySQL、Bootstrap、AWS Cloud9、GitなどWeb開発に必要な様々なスキルを1つのコースで沢山学ぼう!
Bestseller
Rating: 4.4 out of 54.4 (4,186 ratings)
22,941 students
Created by 中村祐太 (Yuta Nakamura), Proglus(プログラス) プログラミング教室
Last updated 4/2021
Japanese
30-Day Money-Back Guarantee

What you'll learn

  • HTML5とCSS3を使ってWebサイトのコーディングができるようになります。
  • Bootstrapを使ってレスポンシブ対応のWebサイトのコーディングができるようになります。
  • JavaScriptを使って動的なWebサイトを開発できるようになります。
  • MySQLを使ってデータベースの設定と操作が行えるようになります。
  • RubyとRuby on Railsを使ってWebアプリケーションが構築できるようになります。
  • AWS Cloud9を使ったクラウド統合開発環境を設定して利用できるようになります。
  • Git / GitHubを使ったソースコードのバージョン管理ができるようになります。
Curated for the Udemy for Business collection

Course content

20 sections • 376 lectures • 24h 51m total length

  • Preview03:11
  • Preview08:31
  • 補足:受講オリエンテーション
    00:31
  • Preview00:21
  • macOS Catalina環境でZipファイルが解凍できない場合
    00:25

  • イントロダクション -フロントエンド開発概容-
    01:05
  • インターネット入門
    02:56
  • フロントエンド開発で重要な3要素
    04:37
  • Google Chromeのインストール
    00:27
  • テキストエディタについて
    00:33
  • 【macOS】Visual Studio Codeのインストール
    02:45
  • 【Windows】Visual Studio Codeのインストール
    03:30

  • イントロダクション - HTML入門
    00:06
  • HTMLの歴史
    02:25
  • Preview01:55
  • Preview03:30
  • Preview13:29
  • Preview12:17
  • 技術ドキュメント MDN
    02:57
  • HTML文書のインデントと改行
    03:19
  • 【macOS】Visual Studio Codeの設定
    10:17
  • 【Windows】Visual Studio Codeの設定
    10:13
  • よくあるHTMLの記述間違い
    05:04
  • 補足:構文チェック
    00:24
  • 構文チェック
    03:16
  • 演習:HTMLのエラーを取り除く
    01:57
  • 演習回答:HTMLのエラーを取り除く
    02:43
  • よくあるご質問:要素の書き順
    02:03
  • HTMLのコメント
    05:19
  • 改行
    03:07
  • 区切り線
    02:04
  • リスト
    04:22
  • 入れ子になったリスト
    04:02
  • 演習:リスト
    01:11
  • 演習解答:リスト
    02:01
  • 説明リスト
    05:26
  • 見出し
    03:53
  • 属性と画像の表示
    05:32
  • リンク
    08:40
  • 強調
    02:10
  • 著作権表記
    03:00
  • 情報のグループ化
    09:47
  • span要素
    05:20
  • 演習 : HTML基礎
    03:10
  • 演習回答 : HTML基礎
    08:06

  • イントロダクション - HTMLステップアップ
    00:11
  • はじめてのテーブル
    05:16
  • 行と列の覚え方
    00:45
  • ヘッダーのあるテーブル
    02:38
  • thead、tbody、tfootがあるテーブル
    04:48
  • キャプション
    02:26
  • セルの結合
    06:14
  • 演習 : テーブル
    01:56
  • 演習回答:テーブル
    08:08
  • フォーム概要
    04:23
  • はじめてのフォーム
    04:19
  • お問い合わせフォームの制作① - 単一行のテキスト入力欄
    03:36
  • お問い合わせフォームの制作② - プルダウンメニュー
    02:45
  • お問い合わせフォームの制作③ - ラジオボタン
    01:43
  • お問い合わせフォームの制作④ - テキストエリア
    01:31
  • お問い合わせフォームの制作⑤ - チェックボックス
    01:42
  • お問い合わせフォームの制作⑥ - 送信ボタン
    01:09
  • お問い合わせフォームの制作⑦ - ラベル
    04:05
  • フォームバリデーション
    04:41
  • 演習:フォーム
    01:38
  • 演習回答:フォーム
    09:34

  • Preview00:56
  • Preview03:03
  • Preview10:12
  • Preview03:38
  • Preview06:07
  • 背景を指定しよう
    07:21
  • ボックスモデルの基本を理解しよう
    03:51
  • マージンを指定しよう
    07:55
  • マージンの相殺について理解しよう①
    03:56
  • マージンの相殺について理解しよう②
    05:24
  • パディングを設定しよう
    04:19
  • ボーダーを設定しよう
    06:48
  • ボックスの横幅と高さを指定しよう
    03:55
  • マージンとパディングの違いを学ぼう
    03:21
  • 3つのセレクターを使えるようになろう
    06:28
  • 結合子を使ったセレクタを指定しよう
    06:11
  • 複数のセレクタを指定しよう
    02:20
  • リンクで使用する疑似クラスを指定しよう
    04:20
  • フォントを指定しよう
    06:19
  • ウェブフォントを利用しよう
    04:58
  • テキストに様々なスタイルを設定しよう
    04:28

  • Preview01:34
  • よくあるご質問(必ずご確認ください)
    03:49
  • ファイルの作成
    09:03
  • HTMLによるマークアップ①
    11:31
  • HTMLによるマークアップ②
    12:01
  • HTMLによるマークアップ③
    04:29
  • CSSによるスタイルの設定①
    08:21
  • CSSによるスタイルの設定②
    12:00
  • CSSによるスタイルの設定③
    10:44
  • CSSによるスタイルの設定④
    07:27
  • レスポンシブ対応
    12:14
  • 画像の設定
    04:35
  • メタデータの設定
    02:55
  • よくあるご質問 その2(本セクション)
    00:55

  • Preview01:48
  • テキストエディタについて
    00:42
  • Preview09:12
  • 【重要】補足情報(Bootstrapの読み込み方法のアップデートについて)
    02:09
  • はじめてのBootstrap 1
    04:34
  • はじめてのBootstrap 2
    07:53
  • ナビゲーションバー
    12:43
  • グリッドシステム 1
    07:46
  • グリッドシステム 2
    04:21
  • グリッドシステム 3
    06:52
  • グリッドシステム 4
    06:08
  • Preview02:31
  • 実践:フォトギャラリーの制作 2
    09:31
  • 実践:フォトギャラリーの制作 3
    07:43
  • 補足:フォントオーサム公式サイトについて
    00:12
  • 実践:フォトギャラリーの制作 4 フォントオーサムの導入
    04:13
  • 実践:フォトギャラリーの制作 5 仕上げ
    05:35

  • Preview02:11
  • JavaScriptの歴史
    02:01
  • JavaScriptの開発環境構築
    00:25
  • はじめてのJavaScript
    06:37
  • JavaScriptのエラーを自力で解決するための方法
    02:59
  • コメント
    02:34
  • Preview03:25
  • 変数
    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:24
  • 関数とは
    01:44
  • function命令
    03:10
  • 関数リテラル
    02:26
  • Functionコンストラクタ
    02:12
  • 演習:関数
    01:08
  • 演習回答:関数
    01:53

  • イントロダクション - JavaScript DOM操作 -
    00:44
  • DOMとは
    04:13
  • IDをキーに要素を取得
    10:47
  • タグ名をキーに要素を取得
    06:19
  • name属性をキーに要素を取得
    04:35
  • class属性をキーに要素を取得
    05:43
  • ノードを追加
    06:06
  • 補足:ノードを追加
    01:21
  • Preview07:02
  • ノードの削除
    06:13
  • 演習 : DOM操作
    02:03
  • 演習回答:DOM操作
    02:49
  • 補足:演習回答:DOM操作
    01:22

  • イベントとイベントハンドラを関連付ける方法
    00:35
  • 開始タグの中で関連付ける方法
    03:11
  • プロパティで関連付ける方法
    02:48
  • loadイベント
    02:14
  • addEventListener
    03:55
  • 演習 : イベントとイベントハンドラ
    02:11
  • 演習回答 : イベントとイベントハンドラ
    02:09

Requirements

  • 基礎的なパソコン操作の知識

Description

プログラミングを学んで、ITエンジニアを目指そう!

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

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

☆☆コースの内容をしっかりと確認した上で受講をいただけるように、無料プレビューを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・・・ソースコードのバージョン管理

  • Visual Studio Code 1.x,  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アカウント(無料プラン)

更新履歴

  • 2021/1/22 セクションリニューアル「CSS入門」

  • 2020/9/26 セクションリニューアル「実践:ウェブサイトのコーディング」

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

Instructors

中村祐太 (Yuta Nakamura)
ウェブ開発, ソリューションアーキテクト
中村祐太 (Yuta Nakamura)
  • 4.3 Instructor Rating
  • 12,656 Reviews
  • 52,855 Students
  • 10 Courses

ITエンジニア / プログラミング講師. プログラミング入門ナビ編集長. 株式会社プログラス 代表取締役.

現役の技術者. エンジニア歴は10年以上. 高校時代の15歳からプログラミングをはじめる.

数々の開発プロジェクトに参画し, 勉強会の講師や, 大学生向けインターン講師に従事してきた経験も生かして, Udemyを使ったプログラミング教育に取り組む.

コース制作では, 受講生の皆さんが自己実現を達成できるように, わかりやすく説明し, 現場で使える内容を心がける.

Webアプリケーション開発、スマートフォンアプリ開発, インフラ, ディレクション, PM, サービスグロースハック, 新規事業立ち上げ, 人材採用など, 会社員として経験を積んだ後に起業. ソフトウェア開発事業、教育研修事業、インターネットメディア事業等に取り組む.

東京都在住, 長野県安曇野市出身.

主な経験:

Ruby (Ruby on Rails) , PHP(CakePHP, Symfony2, Laravel, WordPress), C# (.net)、データベース(SQL, MySQL, データベース設計)、Swift(iOS), Java(Android),  サーバ構築・保守(Linux, AWS, heroku), JavaScript(jQuery, Vue.js, Nuxt.js), Python, 開発ディレクション, PM, UI/UXDなど。

インターネット広告,  マッチングアプリ, イベントチケットEC,   eラーニングシステム, 旅行EC, グルメサービス, 家計簿,  電子書籍, 業務会計システム, 棚卸管理システムなど.

最終学歴:

群馬大学大学院 工学研究科 博士前期課程修了

Proglus(プログラス) プログラミング教室
プログラミング入門
Proglus(プログラス) プログラミング教室
  • 4.3 Instructor Rating
  • 12,656 Reviews
  • 52,855 Students
  • 10 Courses

東京都千代田区で活動する、社会人向けプログラミング教室 Proglus(プログラス)です。

講師の中村祐太を中心メンバーとして運営しています。

プログラミングをオンライン動画やセミナー形式により教えています。

プログラミング学習を通して、受講生の皆さまの自己実現をサポートいたします。


  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.