【最短】プログラミング独学の手順5つ【ゼロからサイト制作まで】

悩める人「プログラミングを独学したいです。1番、効率よく学べる手順を教えてください!」
こういった悩みにお応えします。
この記事の内容
- プログラミング独学の最短ルート|5つの手順【未経験から初案件獲得まで】
- さらに高単価の案件を受けるための勉強法
こんにちは、
TOMO(@Tomo___san_2525)です。
2020年からプログラミングを独学しています。
この記事で、「最短ルートでプログラミングを独学する手順」をまとめます。
5つの手順について、「超くわしく」まとめました。
この記事を読むと、下記のゴールに到達できます
- 1番効率よく学べるプログラミング独学の手順が分かる
- HTML/CSSの知識を使い、お金を稼げる
- さらに高単価の仕事を受注するための方法も分かる
上記です。
完全未経験から、副収入ゲットに成功した僕が、少しエラそうに語りますね(笑)。
プログラミング独学の最短ルート|5つの手順【未経験からサイト制作まで】

大まかな手順は、下記のとおり。
- 手順①|Progateで基礎を学ぶ
- 手順②|カンタンなページを模写する
- 手順③|ドットインストールで知識を広げる
- 手順④|ややボリュームのあるページを模写する
- 手順⑤|HTML/CSSのみの案件を受注する
上記です。
【体験談】順番は、マジで大事です
どういう順番で学ぶかって、かなり大事なはず。
例えばProgateとドットインストールの2つであれば、絶対にProgateから始めるべき。
ドットインストールの内容は難しかったので、Progateしかやっていませんでした。
2ヶ月近く、無駄に課金してました(笑)。
さらに、「サイト模写(=実戦練習)」についてもタイミングが重要。
結局丸写しになって、何の勉強にもならず終了、、、というオチですね。
ということで、順番が大切です。
未経験からの独学の最短ルートを、順に詳しく見ていきましょう。
手順①|Progateで基礎を学ぶ
まずは、ProgateでHTML/CSSの基礎をざっくり学びます。
Progate

料金
月額980円(税別
学習すべきコース
- チュートリアル:検証ツールの使い方
- HTML & CSSコース 全て
上記の2つです。
こんな感じで勉強できます

Progateでは、まずスライドを見て、それから実際にコードを打ちながら学習できます。
コードを打つと、自動的にブラウザ表示してくれる学習画面なので、やりやすいはず。
難易度も1番やさしく、初心者向け。
人気があるので、分からないことをググるとすぐに出てきます。
そうなったら、次に進まず辞めればOK。
僕は、楽しかったです。友人は、2日で飽きてました(笑)。
手順②|カンタンなページを模写する
Progateで基礎を身につけたら、もうサイト模写を1回やるべき。
プログラミングは、学習をするだけだとほぼ無価値です。
実際にサイトをコーディングすることでしか、お金は稼げないですからね。
とはいえ、この段階では超簡単なサイトを練習すればOKです。
おすすめの練習サイト①|みみペンカフェ

初心者向けに、デザインカンプ(見本のこと)と必要な素材が公開されています。
Progateの上級編を終えていれば、作れるはず。
おすすめの練習サイト②|KROWL

こちらもProgateレベルでコーディング可能です。
みほんと違うコーディングでもOK
見た目がそっくりになっていれば、コードの記述が多少違っても大丈夫です。
もし分からないことがあっても、このレベルの模写ならググればすぐ解決します。
とにかく、自分の手でイチから1つのページを作り上げるという経験が大切です。
ここまでくれば、HTML/CSSの最低限の知識は備わっています。
手順③|ドットインストールで知識を広げる
続いて、ドットインストールに課金しましょう。
ドットインストール

料金
月額1080円
学習すべきコース
- HTML/CSSの学習環境を整えよう【無料】
- 詳解HTML 全2コース
- 詳解CSS 全7コース
- Bootstrap入門
上記です。
※なお、Bootstrapはかなり重要だし、面白いのでここで勉強することをオススメします。
Progateでは学べない技術がたくさんあります
しかしゼロからドットインストールをやると、ペースの速さに萎えます。
ということで、手順③で取り組むのが1番効率がいいはず。
Progateでは学べないCSSの重要な項目
✅marginの相殺
✅calc
✅::beforeと::after
✅nth-of-child
✅nth-of-type
✅詳細度について
✅!importantこの辺は、Progateの課題にはなかったはず
しかしサイト模写などで、けっこう出てくる印象なので注意です☺️#プログラミング初心者#駆け出しエンジニア— ともさん@積み上げパパ|元消防士 (@Tomo___san_2525) July 14, 2020
上記のとおりです。
ドットインストールをひととおり終えれば、HTML/CSSについてはほぼマスターです。
1日1時間の勉強でも3ヶ月~半年でOKです。
こんな感じで学べます

1本3分ほどの動画をどんどん見ていくタイプの学習法になります。
Windowsキー+矢印キー
で、画面を2分割すれば使いやすいはずです。
手順④|ややボリュームのあるページを模写する
より、本番に近いかたちでサイト模写をしましょう。
しかし、HTML/CSSのみでも案件は取れるので、最初のうちは無視でもOK。
あくまでも、見た目を似せることに重点を置きましょう。
おすすめの練習サイト|iSara[イサラ]
ここは、一択です。
かなり時間がかかると思いますが、iSaraレベルのページがコーディングできれば、案件は取れます。
しかし、Bootstrapができるようになっていないと、仕事がなかなか受注できない可能性アリ。
ドットインストールでサクッと学びつつ、iSaraで練習しておきましょう。
ムズカシイと感じるはず
ここで、レベルがグッと上がりますね。
iSara[イサラ]の場合、実際のコードを見ても『なんだこれ?』となる場合があります(笑)。
しかし、繰り返しですが「見た目」が似ていればOKですよ。
ゆっくりでも良いので、完成を目指しましょう。
僕がコーディングしたiSara模写

手順⑤|HTML/CSSのみの案件を受注する
ここで、初収益です。
下記のような流れになります。
- クラウドソーシングサイトに登録(無料)
- 「HTML/CSSのみ」で検索
- もしくは「コーディングのみ」で検索
- ひたすら応募し、受注する
上記です。
登録すべきクラウドソーシングサイト
他にもあるかもです。
いきなり仕事を取るのは抵抗があるかもですが、、、。
ここまでくれば、HTML/CSSのみの案件は普通に取れますよ。
多くのサイトに登録し、根気よく応募しまくるしかないはず。
もしくは、リアルの知り合いに仕事をもらう、などですね。
案件の例(ランサーズ)

こんな感じで募集がかかっています。
仕事を進めるうえでの不明点は、聞けば指定してくれるので心配はいらないですよ。
»ランサーズの公式ページはこちら
»クラウドワークスの公式ページはこちら
※基本的に、エンジニアは「ググることを前提」にした仕事です。
全てを暗記など無理なので、分からないことは調べればOKです。
よくある質問:『他のプログラミング言語が必要なことに気付いた・・・』
基本的には、ドットインストールの他の動画で学べばOK。
動画は1本2~3分なので、的を絞ればそこまでロスしないはず。
特に役立つコース(ドットインストール)
- はじめてのJavaScript
- 詳解JavaScript
- 詳解PHP 基礎文法編
上記あたりがあるので心配無用です。
ドットインストールで学ぶなり、ググるなりして解決できることも多いです。
案件を取るとき、「サンプルサイト」が見れる場合がほとんどです。
それを見て、『あ~、、、なんとなく、いけそう』と思えば、応募しちゃってOKですよ。
さらに高単価の案件を受けるための勉強法

シンプルに、使えるプログラミング言語が増えればOK。
クラウドソーシングサイトの場合、下記の言語の需要が高いです。
- PHP
- WordPress
- Ruby
- Laravel
- Typescript
例えば上記のとおり。
なお、このあたりを本格的にマスターするには、HTML/CSSよりも時間がかかります。
そして、Progateやドットインストールだけでは、少し知識の穴が目立つ可能性がありそう。
とくに、ProgateでPHPを学ぶのは無駄なのでおすすめしないそうです、、、(笑)。
【結論】Udemyで必要な教材を買えばOK【オススメも紹介】
1つの解決策として、»Udemyがあります。
Udemy
ベネッセが運営する学習コンテンツです。
- Udemy独自の学習動画
- 講師がそれぞれアップロードした動画
上記からなる総合的な学習サイトですね。
コスパ的には、間違いなくNO,1です。
Laravel
」と検索すれば、講師がアップロードした動画を選んで購入できます。学びたいことだけをピンポイントで学習できるのでおすすめです。

Udemyなら買い切りでずっと見れます。
プログラミング以外にも、デザインなどについても学べますよ。
なお、僕が購入して、めちゃくちゃコスパが良いと感じたのは下記のとおり。
参考までにどうぞ。
また、Progateとドットインストールの「月額制」に抵抗がある人は、UdemyでHTML/CSSも学ぶという手もあります。
金額的には、より安く抑えることができます。
プログラミング独学は、可能

ということで、プログラミングの独学は全然可能です。
むかしは参考書でカリカリと学ぶしかなかったかもですが、、、。
今は、オンラインにて効率よく学べます。
この記事の方法で学習すれば、もっと早く成果を上げることができますよ。
それでは、この記事は以上です。
プログラミング独学の手順【リンクの総まとめ】