Your cart is empty.
Keep shopping
Web開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
51,537 students
Web開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
Node.js/React/MySQL/Bootstrap/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう！カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、天気情報アプリ等の開発に挑戦！
Created by中村 祐太 Yuta Nakamura, Proglus （プログラス）
Last updated 6/2026
Japanese
What you'll learn
- HTML5、CSS3（Flexbox、グリッドレイアウトを含む）を使ってウェブサイトのコーディングができるようになります。
- Bootstrapを使ってレスポンシブ対応のウェブサイトのコーディングができるようになります。
- JavaScriptを使って動的なウェブサイトを開発できるようになります。
- MySQLを使ってデータベースの設定と操作が行えるようになります。
- Node.jsを使ったアプリケーションが開発できるようになります。
- Git / GitHubを使ったソースコードのバージョン管理ができるようになります。
- Reactを使った基本的な開発ができるようになります。
Explore related topics
Course content
26 sections • 405 lectures • 23h 33m total length
Requirements
- 基礎的なパソコン操作の知識
- 学習にはパソコン（macOS 又は Windows）が必要です
Description
プログラミングを学んで、ITエンジニアを目指そう！
このコースは、プログラミング初心者の方がプログラミングや関連スキルを1から学び、ITエンジニアを目指すためのコースです。
想定する受講生
実務未経験からITエンジニアに転職したいですか？
自らウェブアプリケーションを開発して公開できるようになりたいですか？
駆け出しのウェブ開発者の方でさらにスキルアップしたいですか？
⇒ あなたの答えが１つ以上YESなら、これはまさにあなたが探しているコースです！
HTML, CSS, Bootstrap 5, JavaScript, MySQL, Node.js, React, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。20時間超えの大型コースでお得に学べます。
☆☆コースの内容をしっかりと確認した上で受講をいただけるように、無料プレビューを30分公開しております。ぜひご覧ください！！☆☆
IT人材は、2030年に最大78万人不足すると経済産業省から発表がされました。
現在、ITエンジニアの転職市場は売り手市場です。また、自らWebアプリケーション開発ができるようになり、素早くアイディアを形にできれば、システム開発の費用が削減できて、起業への挑戦もハードルが下がります。
基本的なWebページの（HTML, CSS）の構築方法を学習したあと、画面サイズによって動的にレイアウトが変わるモバイルフレンドリーでレスポンシブ対応のWebサイトの作り方を学習します(Bootstrap)。
その後に、プログラミングを学習します。主にブラウザ側で動作させるJavaScriptを学習します。
現代のウェブ開発では知識が必須となりつつある、サーバーサイドでJavaScriptを実行するためのランタイム環境を使った開発について学習します（Node.js）。
Webアプリケーションを開発を行う上でキーポイントとなるデータを体系的に扱うデータベースの使い方を、学習します(MySQL)。
開発環境構築も丁寧に手順を追って説明します。
私は10年以上の豊富なエンジニア経験があるとともに、初心者向けのプログラミング勉強会の講師や、エンジニア志望の大学生向けインターン講師経験があるのが強みです。初心者の時によくつまずく箇所が分かっているので、講座では丁寧な解説をしています。
皆さんの今後の自己実現のためのお役に立てるコースとなれば幸いです。
それでは、皆さんとコースの中でお会いできることを楽しみにしています！
利用ソフトウェアとバージョン
下記を使用してWebアプリケーション開発を学習します。
HTML 5 ・・・Webページの文章を構造化して記述
CSS 3・・・Webページの見た目を整える
JavaScript (ES2015・ES6以降)・・・Webページを動的に操作することができるプログラミング言語
Bootstrap 5 ・・・よく使うWebぺージのデザインが簡単に設定できるCSSフレームワーク
MySQL 8.0・・・データベース
Node.js 20.x・・・JavaScriptを使ってサーバーサイドプログラムを実行できる環境
React 19.1・・・Webアプリの見た目（UI）を効率よく作るための、JavaScriptライブラリ
GitHub Codespaces ・・・ クラウド開発環境（GitHubの個人アカウントであれば無料枠が利用可能）
Git 2.13・・・ソースコードのバージョン管理
GitHub・・・Gitによるソースコード管理を行えるウェブサービス
Visual Studio Code （VSCode）・・・テキストエディタ
Google Chrome ・・・ウェブブラウザ
学習環境について
パソコン(Mac または Windows)が必要。
動画内ではmacOSを使用。Windows環境での学習については適宜補足説明。
インストールして使うアプリケーションとして、Webブラウザ Google Chromeとテキストエディタ Visual Studio Codeを利用。MacでもWindowsでもOK。無料。
GitHub （個人アカウントの無料プランで学習可能）
Q＆Aコーナーのご利用について
主に、カリキュラム通りに学習が進められない場合のアドバイスや、ディスカッションを行っております。
本コースの内容を超えるご質問にはお答えできませんので、あらかじめご了承ください。
コース内で紹介する動作確認済みの手順以外は、サポート対象外とさせていただいております。
コースにご満足いただけない場合は？
受講するか迷っていますか？30日以内返金保証制度があるため安心です（Udemy ウェブサイトよりコースをご購入の場合）
旧版のコンテンツ（古いコンテンツ）について
すでに学習中の方への配慮として、旧版のコンテンツを一定期間は視聴いただけるようにしている場合がありますが、メンテナンスとサポート（Q&A）は終了しています。できるだけ新しいコンテンツで学習していただきたいという思いもあり、旧版のコンテンツは一定期間経過後に廃止します。
補足
ウェブ開発初心者向けの講座です。実務経験豊富なITエンジニアの方にとっては、物足りない可能性があります。
セクション「実践：ECサイトのコーディングをしよう」は、コースの難易度調整のために、β版のコンテンツとして試験的に公開中です。予告無く公開中止とする場合があります。
更新履歴
2025/11/18 セクションリニューアル「ウェブ開発の概要を知ろう【第3版】」
2025/7/18 React入門カリキュラムを追加
2025/2/5 カリキュラムリニューアル「ウェブ開発の概要を知ろう【第2版】」
2025/1/19 新規セクション追加「Node.jsの基本を習得しよう」
2024/4/9 セクションリニューアル「CSSの基本を習得しよう【第3版】」
2023/12/19 セクションリニューアル「学習の準備をしよう【第3版】」「HTMLの基本を習得しよう【第3版】」「新・HTMLステップアップ編【第3版】」
2023/8/15 動画確認済みのMySQLバージョンを8.0へ変更（旧：5.7）
2023/7/22 レクチャー「Cloud9の基本的なセットアップをしよう」を最新情報へアップデート
2023/5/31 レクチャー「IAMユーザーを作成しよう」を最新情報へアップデート
2022/12/19 セクションリニューアル「新・Git / GitHub入門 - ソースコードのバージョン管理をしよう」
2022/12/14 新規セクション試験公開「実践：ECサイトのコーディングをしよう」
2022/11/9 新規セクション追加「CSSグリッドレイアウトでタイル状のレイアウトを作成しよう」
2022/8/4 セクションリニューアル「MySQL入門」
2022/7/4 セクションリニューアル「JavaScript入門」(ES5 → ES2015・ES6以降へ)
2022/5/24 新規セクション追加「Flexboxの基本を習得しよう」
2022/3/3 新規セクション追加「ウェブ開発の概要を知ろう」
2022/3/1 セクションリニューアル 「Ruby on Rails」関連（Ruby on Rails7 へ対応。旧：Ruby on Rails 5）
2022/3/1 動作確認済みのRubyバージョンをv3.0.2へ変更（旧：v2.5.0）
2022/3/1 セクションリニューアル 「Rubyの開発環境構築をしよう」
2021/12/22【β版・試験的公開】ポートフォリオサイト - 作品紹介サイトを制作しよう
2021/10/07 HTMLの基本 のVisual Studio Codeのemmet設定のUI変更に対応(macOS, Windows)
2021/5/28 セクションリニューアル「Bootstrap5でフォトギャラリーを制作しよう」
2021/5/20 セクションリニューアル「Bootstrap」※Bootstrap5 対応
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デザイナー
- ウェブアプリを構築できるようになって仕事の幅を広げたいマーケター
- エクセルやパワポ仕事が多いSEの方でプログラムを自分でもっと書けるようになりたい方。
- ★★既にプログラマーとしての実務経験を積んでいる方には簡単すぎるため向きません★★