2020/07/17 (更新日: 2020/08/20)

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

HTML/CSS Programming

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

この記事の内容

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

こんにちは、
TOMO（@Tomo___san_2525）です。

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

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

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

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

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

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

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

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

上記です。

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

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

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

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

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

手順①｜Progateで基礎を学ぶ

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

Progate

料金

学習すべきコース

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

上記の2つです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

»HTML/CSS練習用｜KROWL MAGAZINE

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

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

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

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

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

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

ドットインストール

料金

学習すべきコース

• 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本3分ほどの動画をどんどん見ていくタイプの学習法になります。

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

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

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

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

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

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

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

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

ムズカシイと感じるはず

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

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

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

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

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

ここで、初収益です。

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

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

上記です。

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

• »ランサーズ
• »クラウドワークス
• »スキルクラウド
• »Bizseek

他にもあるかもです。

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

案件の例（ランサーズ）

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

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

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

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

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

特に役立つコース（ドットインストール）

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

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

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

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

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

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

• PHP
• WordPress
• Ruby
• Laravel
• Typescript

例えば上記のとおり。

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

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

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

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

Udemy

ベネッセが運営する学習コンテンツです。

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

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

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

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

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

• フロントエンドエンジニアになりたい人のWebプログラミング入門
• オンラインで学ぶWebデザイン講座
• よくわかるRuby on Rails入門 オンライン講座

参考までにどうぞ。

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

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

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

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

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

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

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

Programming

• facebook
• Tweet
• hatebu
• Share
• Read Later