【副業】プログラミング初心者の月5万までの基礎学習を徹底解説!

ととまる君

プログラミング初心者なんだけどどうやって基礎をつけたらいいの??

そんな疑問にお答えします。



プログラミング初心者の方で一番挫折をしやすいのは【基礎固め】をしている時です。では、具体的な基礎固めの方法やロードマップがあればいかがでしょうか。


本記事ではプログラミング未経験の文系学生が3ヶ月で月収10万円になった学習法(基礎固め)を1つずつ丁寧に紹介します。


月収10万円までの全体像を知りたい!という方はこちらへどうぞ

文系学生のプログラミング未経験者が3ヶ月で収益6桁を達成できた話
文系学生のプログラミング未経験者が3ヶ月で収益6桁を達成できた話

続きを見る



こんな方におすすめ

  • プログラミング初心者の方
  • 基礎固めしている方
  • これからプログラミング始められる方

【副業・プログラミング初心者向け】基礎固めのロードマップ

プログラミングで稼ぎたくても、基礎ができないと無理ですよね。


でも、基礎固めの方法もよく分からないし、、、という声がチラホラ聞こえます。


結論から言うと、この通りです。これを一つずつ丁寧に説明していきますね。

プロセス

  • Progate
  • ドットインストール
  • 検証ツール/Bootstrap
  • 模写コーディング

【副業・プログラミング初心者向け】Progate

副業・プログラミング初心者向け【学習サイト①】

プログラミング学習を始めるならまずはProgateをオススメします。


Progateは未経験者や初心者の方に向けたオンラインサービスなので、ユーザーの気持ちをほぼ100%理解しているくらいつまずくポイントを抑えて作られています。

ですので、未経験者の方にはProgateをオススメします。

HTML & CSS 初級編


まずはWeb系言語の基礎であるHTML & CSS の初級編を学びます。


こちらではHTMLとCSSの基礎中の基礎を学びますが、最も重要である部分です。後々つまずかないように、ここはしっかりと抑えていきましょう。

ポイント

・コンテンツの構造
・margin/paddingsの使い方
・ブロック要素/インライン要素の違い


コンテンツの構造とは、なぜ<div>タグを2つ用意するのかといったタグの構造を理解することです。次のレベルになると、コンテンツの構造が複雑になってきます。その時に困らないように初級の時から意識していきましょう。

この辺りが理解できればさっそく中級編に行きます。

HTML & CSS 中級編


HTML & CSS の初級編が終われば次は中級編です。


こちらではHTMLとCSSを使って簡単なLP(ランディングページ)を作成します。

実際にプログラミングで稼ぐ一番最初の仕事はLP作成になると思いますので、まずはLPを作る雰囲気を掴んで、実際に仕事をするときのイメージをしておくといいですね。

ポイント

・レイアウト(コンテンツの配置)のイメージ
・コンテンツの構造
・インライン要素/インラインブロック要素/ブロック要素の違い

・複数クラスの概念
・FontAwesomeの使い方


背景画像の指定方法やopacityの使い方など、レイアウトを整える作業のうちよく使うものは覚えていきますが、他のものは忘れてしまいます。

全く問題はありません。忘れたら調べたら良いだけです。実際の仕事でも忘れてしまったら、ググれば良いですよ。


ただ、初級と違って複雑ですよね。1周目は少し難しく感じるかもしれません。3周もすれば、完璧には分かっていなくても何となく分かっている状態になっている思います。

「何となく分かっている」状態になったら、道場コースに進んでいきましょう。

注意

「完璧には理解できていない」という理由で4周も5周もしない。

70%くらいの理解で次に進みましょう。

HTML & CSS 道場コース


次は道場コースです。


こちらではこれまで習ったHTMLとCSSを使って「初級編/中級編」をはじめから自分で作っていく作業になります。見本と仕様書があるためコンテンツの構造もイメージしやすいですよ。

ポイント

・分からなければその部分だけ振り返る


ここで、初級・中級に取り組む際にポイントとしていた【コンテンツの構造】がしっかりとできているかどうかが確かめられます。できていない場合は<div>タグをいくつ準備したら良いのか分からなくなります。

この点でつまずいた方は道場コースで理解するようにしましょう。


また、理解度が70%の状態で道場コースに入ると分からない部分も絶対に出てきます。そんな時は分からなかった部分だけ復習すれば良いです。

しっかりと道場コースができるようになったら、上級編に進みましょう

HTML & CSS 上級編


上級編ではレスポンシブデザインについて勉強します。


中級までだと、パソコンで見ることを前提にしているため、スマホやタブレットで見た時にとても見にくいサイトになってしまいます。

ですので、ここでは使用端末の横幅によってレイアウトを変えれるようにします。

ポイント

・レスポンシブデザインを理解


上級レベルになれば、レスポンシブデザインにする方法を理解できれば大丈夫です。あまり難しくないと思いますが、CSSをテキトーにコーディングすると見にくくなり、レスポンシブ化するのに時間がかかってしまいます。

しっかりスタイルシートを書く際はきれいに書くことを心がけましょう。


ここまでできれば上級の道場コースで完璧にレスポンシブ化してみましょう。

上級の道場コースでも同じですが、分からなくなったらその部分だけ振り返ったらいいですよ。



【副業・プログラミング初心者向け】ドットインストール

副業・プログラミング初心者向け【学習サイト②】

Progateの「上級道場コース」まで終われば次はドットインストールで勉強していきましょう。


ドットインストールはProgateとは違い自分でエディタを用意する必要があります。

実は自分でエディタを用意してコーディングすることがとても重要になります。

エディタはいくつかありますが、僕のオススメはこの2つですね。




僕は最初にAtomを使っていましたが、現在はVS Codeです。

特に大きな差はありませんが、僕はVS Codeの方が合っているかなと思っています。


ちなみにVS Codeのダウンロード方法や使い方はドットインストールで分かりやすく説明されているのでそちらを参考にしてください。

HTML/CSSの概要を理解しよう


さっそくドットインストールでHTML/CSSの学習を始めていきましょう。


「HTML/CSSの概要を理解しよう」編ではProgate初級編のように基礎中の基礎を学びます。

ポイント

自分のエディタでコーディングする


見ていただくとわかる通り、ほとんどProgateと重なっています。ですが、最も重要なのが自分のエディタにコーディングすることです。


知っていることでもエディタを使って慣れておきましょう。

しっかりとコーディングできたら次の「もっと詳しくHTML/CSSを学んでみよう」編にすすみましょう。

もっと詳しくHTML/CSSを学んでみよう


ドットインストールで一番大事なのはこのコースです。<article>タグや<Table>タグ、新しい属性などProgateでは見かけなかったものが出てきます。


新しいものばかりで少し難しく感じるかもしれませんが、ここを理解できるといろんなサイトが作れるようになります。

ポイント

・擬似要素の使い方
・擬似クラスの使い方
・属性セレクタの使い方
・flex-boxの使い方


Progateの時と同様に70%くらいの理解で良いので前に進むことを頭の片隅に置いておいてください。

難しく感じるからといって5周もしないようにしましょう。多くても3周で十分です。


このコースが終わる頃には少しずつ初心者の域を超えてくるようになります。次の「ウェブサイトをゼロから制作してみよう」編でさらなるレベルアップをはかりましょう!

ウェブサイトをゼロから制作してみよう


このコースはProgateでいう「道場コース」です。

こちらの場合は一人でやるのではなく、一緒に目標物を完成させていきます。

ポイント

・分からない部分は振り返る



説明しながら作成していくので、分からない部分は少ないかもしれませんが、出てきたらしっかりと振り返ってくださいね。

より高度な技術にチャレンジしてみよう


このコースではCSSだけでアニメーションのあるものを作っていきます。


動きをつけることができるため、面白くワクワクしてきますよ。

ポイント

・transformの使い方
・transitionの使い方
・@keyframesの存在


transformとtransitionはWebサイトを作っていく上でかなり重要になってくるので、理解しておくようにしましょう。@keyframesが使えるようになるとかなり楽しくなるので、ぜひトライしてみてください。



Progateとドットインストールで学んできた今、プログラミング初心者という肩書きは捨ててください。

ここまで来れば、月1万円のレベルまで来ていると思っていただいても大丈夫です。

あとはGoogleChromeの検証ツールBootstrapの使い方を理解できれば模写コーディングできるレベルに到達しています。

【副業・プログラミング初心者向け】検証ツール/Bootstrap

副業・プログラミング初心者向け【ツール】

模写するレベルになるためにはGoogleChromeの検証ツールを使えるようにならなければなりません。

また、Bootstrapを使うことでWebサイトの作成時間がかなり速くなります。


この2つのアイテムを使って模写コーディングしていきましょう。

検証ツール


検証ツールを使うことで、ページのHTMLを確認することができます。どのプログラマーもWebサイトを作る時は必ず使って作業しています。

それくらい大事なツールとなっていますので、使えるようになっておきましょう。


使い方はProgate「HTML & CSS」のチュートリアルの中に入っています。画像付きが分かりやすいのでそちらを参考にしてください。

ドットインストールにもあるので、好きな方を見て学んでくださいね。

Bootstrap


Bootstrapとはコーディングの時間をかなり短くしてくれるフレームワークです。加えて、誰でも簡単にオシャレなWebサイトを作ることができます。

そんなBootstrapの使い方はこちらを参考にしてくださいね。

Bootstrap入門編
【Bootstrap入門】これであなたも脱初心者|ブートストラップ使い方

続きを見る

【副業・プログラミング初心者向け】脱初心者

副業・プログラミング初心者向け【ゴール】

おめでとうございます。

ProgateからBootstrapの使い方まで理解できたら、基礎固めは終了です。

初心者の肩書きはもう降ろして模写コーディングへ進みましょう。


模写コーディングの段階で、基礎固めで身につけたことが忘れてしまっている、、、という状況はたくさんあると思います。ですが、その度に調べたら良いですよ。

詳しいやり方はこちらの後半部分にあるので、参考にしてください。

【副業・プログラミング初心者向け】まとめ

いかがでしょうか。


この記事ではプログラミング未経験から基礎固めまでを紹介しました。

基礎固めが終われば模写コーディングで経験を積んでくださいね。

その後は、実際に案件受注や仕事に移っていきます。月5万円までほとんど手がかかっていますよ。


最後まで読んでくださり、ありがとうございました。

-プログラミング学習
-,

Copyright© ととろぐライブラリー , 2021 All Rights Reserved.