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

HTML/CSS Programming

悩める人「プログラミングを独学したいです。1番、効率よく学べる手順を教えてください!」

こういった悩みにお応えします。

この記事の内容

  • プログラミング独学の最短ルート|5つの手順【未経験から初案件獲得まで】
  • さらに高単価の案件を受けるための勉強法

こんにちは、
TOMO(@Tomo___san_2525)です。

2020年からプログラミングを独学しています。

しかし、効率の悪い独学をしてしまったと感じており、、、。
この記事で、「最短ルートでプログラミングを独学する手順」をまとめます。

5つの手順について、「超くわしく」まとめました。

この記事を読むと、下記のゴールに到達できます

  • 1番効率よく学べるプログラミング独学の手順が分かる
  • HTML/CSSの知識を使い、お金を稼げる
  • さらに高単価の仕事を受注するための方法も分かる

上記です。
完全未経験から、副収入ゲットに成功した僕が、少しエラそうに語りますね(笑)。

プログラミング独学の最短ルート|5つの手順【未経験からサイト制作まで】

プログラミング独学の最短ルート|5つの手順

大まかな手順は、下記のとおり。

  • 手順①|Progateで基礎を学ぶ
  • 手順②|カンタンなページを模写する
  • 手順③|ドットインストールで知識を広げる
  • 手順④|ややボリュームのあるページを模写する
  • 手順⑤|HTML/CSSのみの案件を受注する

上記です。

【体験談】順番は、マジで大事です

どういう順番で学ぶかって、かなり大事なはず。

例えばProgateとドットインストールの2つであれば、絶対にProgateから始めるべき。

僕は同時に両方(ついでもUdemyの教材も)の有料プランに課金しましたが、、、。
ドットインストールの内容は難しかったので、Progateしかやっていませんでした。
2ヶ月近く、無駄に課金してました(笑)。

さらに、「サイト模写(=実戦練習)」についてもタイミングが重要。

Progateを終えた後にいきなり複雑なサイト模写をしても、詰みます。
結局丸写しになって、何の勉強にもならず終了、、、というオチですね。

ということで、順番が大切です。
未経験からの独学の最短ルートを、順に詳しく見ていきましょう。

手順①|Progateで基礎を学ぶ

まずは、ProgateでHTML/CSSの基礎をざっくり学びます。

Progate

Progateのスクリーンショットです

料金

月額980円(税別

学習すべきコース

  • チュートリアル:検証ツールの使い方
  • HTML & CSSコース 全て

上記の2つです。

こんな感じで勉強できます

Progateの学習画面のスクリーンショットです

Progateでは、まずスライドを見て、それから実際にコードを打ちながら学習できます。

実際ではあり得ないのですが、、、。
コードを打つと、自動的にブラウザ表示してくれる学習画面なので、やりやすいはず。

難易度も1番やさしく、初心者向け。
人気があるので、分からないことをググるとすぐに出てきます。

»Progateの公式ページはこちら

※この時点で、『うわ、なんかツマラナイ・・・』となる可能性もあると思います。
そうなったら、次に進まず辞めればOK。
僕は、楽しかったです。友人は、2日で飽きてました(笑)。

手順②|カンタンなページを模写する

Progateで基礎を身につけたら、もうサイト模写を1回やるべき。

プログラミングは、学習をするだけだとほぼ無価値です。
実際にサイトをコーディングすることでしか、お金は稼げないですからね。

とはいえ、この段階では超簡単なサイトを練習すればOKです。

※なおProgateでは入力用のエディタが用意されていましたが、実際には自分で用意しなければなりません。
とくにこだわりが無ければ、»VSCode»BracketsのどちらかでOK。無料です。

おすすめの練習サイト①|みみペンカフェ

みみペンカフェのスクリーンショットです

初心者向けに、デザインカンプ(見本のこと)と必要な素材が公開されています。

Progateの上級編を終えていれば、作れるはず。

»練習用デザイン無料配布|みみぺんブログ

おすすめの練習サイト②|KROWL

KROWLのスクリーンショットです

こちらもProgateレベルでコーディング可能です。

»HTML/CSS練習用|KROWL MAGAZINE

みほんと違うコーディングでもOK

見た目がそっくりになっていれば、コードの記述が多少違っても大丈夫です。

もし分からないことがあっても、このレベルの模写ならググればすぐ解決します。

※なお、答えを見てしまってもかまいません。
とにかく、自分の手でイチから1つのページを作り上げるという経験が大切です。

ここまでくれば、HTML/CSSの最低限の知識は備わっています。

手順③|ドットインストールで知識を広げる

続いて、ドットインストールに課金しましょう。

ドットインストール

ドットインストールのスクリーンショットです

料金

月額1080円

学習すべきコース

  • HTML/CSSの学習環境を整えよう【無料】
  • 詳解HTML 全2コース
  • 詳解CSS 全7コース
  • Bootstrap入門

上記です。

※なお、Bootstrapはかなり重要だし、面白いのでここで勉強することをオススメします。

Progateでは学べない技術がたくさんあります

しかしゼロからドットインストールをやると、ペースの速さに萎えます。

ということで、手順③で取り組むのが1番効率がいいはず。

上記のとおりです。
ドットインストールをひととおり終えれば、HTML/CSSについてはほぼマスターです。

※僕の体感では、手順①~手順③まででトータル100~200時間ほど。
1日1時間の勉強でも3ヶ月~半年でOKです。

こんな感じで学べます

ドットインストールの学習画面のスクリーンショットです

1本3分ほどの動画をどんどん見ていくタイプの学習法になります。

ここも、手順②で使用したテキストエディタを立ち上げておき、動画を見つつ自分でもコードを書いてみることをオススメします。

Windowsキー+矢印キーで、画面を2分割すれば使いやすいはずです。

»ドットインストールの公式サイトはこちら

手順④|ややボリュームのあるページを模写する

より、本番に近いかたちでサイト模写をしましょう。

※なお、ほとんどのサイトにはjQueryやPHPなど、まだ学んでいない言語も使用されています。
しかし、HTML/CSSのみでも案件は取れるので、最初のうちは無視でもOK。

あくまでも、見た目を似せることに重点を置きましょう。

おすすめの練習サイト|iSara[イサラ]

ここは、一択です。
かなり時間がかかると思いますが、iSaraレベルのページがコーディングできれば、案件は取れます。

※なお、Bootstrapなしでもコーディング可能です。
しかし、Bootstrapができるようになっていないと、仕事がなかなか受注できない可能性アリ。

ドットインストールでサクッと学びつつ、iSaraで練習しておきましょう。

ムズカシイと感じるはず

ここで、レベルがグッと上がりますね。

iSara[イサラ]の場合、実際のコードを見ても『なんだこれ?』となる場合があります(笑)。

しかし、繰り返しですが「見た目」が似ていればOKですよ。
ゆっくりでも良いので、完成を目指しましょう。

僕がコーディングしたiSara模写

iSara(模写サイト)のスクリーンショットです

手順⑤|HTML/CSSのみの案件を受注する

ここで、初収益です。

下記のような流れになります。

  1. クラウドソーシングサイトに登録(無料)
  2. 「HTML/CSSのみ」で検索
  3. もしくは「コーディングのみ」で検索
  4. ひたすら応募し、受注する

上記です。

登録すべきクラウドソーシングサイト

他にもあるかもです。

いきなり仕事を取るのは抵抗があるかもですが、、、。
ここまでくれば、HTML/CSSのみの案件は普通に取れますよ。

しかしぶっちゃけ、今はHTML/CSSのみの仕事は以前より少ないかもです。
多くのサイトに登録し、根気よく応募しまくるしかないはず。
もしくは、リアルの知り合いに仕事をもらう、などですね。

案件の例(ランサーズ)

ランサーズの案件の例

こんな感じで募集がかかっています。

デザインカンプは依頼主が用意してくれるし、データの受け渡しの方法も向こうで決めてくれます。
仕事を進めるうえでの不明点は、聞けば指定してくれるので心配はいらないですよ。

»ランサーズの公式ページはこちら
»クラウドワークスの公式ページはこちら

※基本的に、エンジニアは「ググることを前提」にした仕事です。
全てを暗記など無理なので、分からないことは調べればOKです。

よくある質問:『他のプログラミング言語が必要なことに気付いた・・・』

基本的には、ドットインストールの他の動画で学べばOK。

有料会員になると、動画の文字起こしやサンプルコードも見れるので、ググるより早いかもです。
動画は1本2~3分なので、的を絞ればそこまでロスしないはず。

特に役立つコース(ドットインストール)

  • はじめてのJavaScript
  • 詳解JavaScript
  • 詳解PHP 基礎文法編

上記あたりがあるので心配無用です。

HTML/CSSのみの案件なら、他の言語が入っていたとしても「ほんの少し」です。
ドットインストールで学ぶなり、ググるなりして解決できることも多いです。

案件を取るとき、「サンプルサイト」が見れる場合がほとんどです。
それを見て、『あ~、、、なんとなく、いけそう』と思えば、応募しちゃってOKですよ。

さらに高単価の案件を受けるための勉強法

さらに高単価の案件を受けるための学習法

シンプルに、使えるプログラミング言語が増えればOK。

クラウドソーシングサイトの場合、下記の言語の需要が高いです。

  • PHP
  • WordPress
  • Ruby
  • Laravel
  • Typescript

例えば上記のとおり。

なお、このあたりを本格的にマスターするには、HTML/CSSよりも時間がかかります。

そして、Progateやドットインストールだけでは、少し知識の穴が目立つ可能性がありそう。

※ここは、実際に企業で働くフロントエンドエンジニアの友人から聞いた話です。
とくに、ProgateでPHPを学ぶのは無駄なのでおすすめしないそうです、、、(笑)。

【結論】Udemyで必要な教材を買えばOK【オススメも紹介】

1つの解決策として、»Udemyがあります。

Udemy

Udemyのスクリーンショットです
ベネッセが運営する学習コンテンツです。

  • Udemy独自の学習動画
  • 講師がそれぞれアップロードした動画

上記からなる総合的な学習サイトですね。

コスパ的には、間違いなくNO,1です。

例えば、「Laravel」と検索すれば、講師がアップロードした動画を選んで購入できます。
学びたいことだけをピンポイントで学習できるのでおすすめです。
Udemyで「Laravel」と検索した結果
ぶっちゃけプログラミングスクールとか、高すぎて手が出ない人も多いはず。
Udemyなら買い切りでずっと見れます。
プログラミング以外にも、デザインなどについても学べますよ。

»Udemyの公式ページはこちら

なお、僕が購入して、めちゃくちゃコスパが良いと感じたのは下記のとおり。

参考までにどうぞ。

また、Progateとドットインストールの「月額制」に抵抗がある人は、UdemyでHTML/CSSも学ぶという手もあります。

例えば初心者向けHTML&CSS基礎講座の動画なら、2400円で永遠に見れますからね。
金額的には、より安く抑えることができます。

プログラミング独学は、可能

プログラミング独学は、可能

ということで、プログラミングの独学は全然可能です。

むかしは参考書でカリカリと学ぶしかなかったかもですが、、、。
今は、オンラインにて効率よく学べます。

まったくの未経験だった僕でも、半年で案件が取れました。
この記事の方法で学習すれば、もっと早く成果を上げることができますよ。

それでは、この記事は以上です。

プログラミング独学の手順【リンクの総まとめ】

  1. »Progate
  2. »みみぺんカフェ
  3. »KROWL
  4. »ドットインストール
  5. »iSara[イサラ]
  6. »ランサーズ
  7. »クラウドワークス
  8. »Udemy