わかるからできるまで
一歩ずつ学べる
プログラミングスクール

学習ロードマップ&カリキュラムを無料公開!
Twitterで質問も受付中!

お知らせ

岡山県岡山市で現地開催のプログラミングスクールを開講します

2021年9月に岡山県岡山市、岡山駅前でプログラミングスクールを開講いたします。開講に伴い、現地受講の第一期生を募集しています。
詳細は、リンクからご確認ください。

プログラミング学習ロードマップ

PROGRABIではWebサイト構築に必要なカリキュラムを無料で配信しています。環境構築が最小限ですむフロントエンドの学習から始めましょう。

フロントエンドの基礎

1 学習準備
最低限必要なタイピングやショートカットキーについて学習します。
開発に使用する無料のエディタやブラウザをインストールします。
Basic
2 HTML
HTMLはWebページの骨組みとなる重要な言語です。
書き方や使い方を学習します。
HTML5
3 CSS
CSSはWebページを装飾するために必要です。
レイアウトを自由に構築できるようになることが目標です。
CSS3
4 JavaScript
JavaScriptでユーザーと対話できるWebページを作成します。
近年で最も人気のあるプログラミング言語です。
JavaScript
5 基礎学習終了!
目標は3ヶ月ですが、計画は人それぞれです。
応用に進みましょう!

フロントエンドの応用

1 CSSフレームワーク
Bootstrapは最も使用されているフレームワークです。
フレームワークの使い方を学習します。
2 Git
Gitでファイルのバージョン管理について学習します。
git
3 GitHub
ファイルをリモートで管理する方法を学習します。
GitHub PagesでWebページを公開してみましょう。
4 課題作成
制作してみたいWebページがあれば作成しましょう。
もしくは、PROGRABIの課題に挑戦してみましょう。
5 フロントエンド学習終了!
より高度なスキルを得たいですか?→ReactかVueを学習しましょう。
まだ自信がないですか?→自分のWebサイトを作成してみましょう。
仕事を請けたいですか?→知り合いのWebサイトから取り組んでみましょう。

HTML

Webページを表現するための言語です。
HTMLの要素についてや要素の子孫関係について理解することが大切です。

CSS

Webページを装飾します。
CSSのセレクタと、属性と値について理解することが重要です。

JavaScript

Webページに動きを与えるプログラミング言語です。他の言語と共通するプログラミングの基本を覚えましょう。

Bootstrap

多くのWebサイトで使用されている Bootstrap を学習します。なぜCSSフレームワークを使用するのかについても考えてみましょう。

Git

開発に必須とも言えるファイルのバージョン管理について学習します。新しい用語に慣れていく必要があります。

GitHub

Gitリポジトリをリモートで管理する方法を学習します。GitHub Pagesで成果物を公開してみましょう。

プログラミング学習の動機

プログラミング学習で最も重要なことは学習のモチベーションを継続することです。学習中に疑問に思ったことをTwitterに投稿してアドバイスをもらいましょう。

学習ページ内のアウトプットボタンから記事についての質問をいつでも投稿できます。

Q. プログラミングは何から学習したらいいですか?

HTML、CSS、JavaScriptの学習はパソコンの環境構築が最小限ですみ、実行結果が分かりやすく、初学者でも取り組みやすいのでオススメです。

Q. なぜアウトプットしなければならないのですか?カリキュラムを読むだけじゃダメですか?

カリキュラムを読むだけでも得られることはあります。しかし実際にパソコンで試したり言語化してみることで技術が身につきます。ゲームの説明書を読むだけではなく、実際にプレイした方がより多くのことを理解できるのと同じです。

Q. 学習のモチベーションが続きません...どうしたらいいですか?

多くの人はモチベーションが保てず学習を継続できません。分からないことにはストレスを感じますし、技術を実感するまでに時間も必要です。環境に左右されることが多いので、学習仲間を作ったり明確な目標を設定してみましょう。