先日に下記のツイートをしました。

✅大学生がプログラミングで稼ぐ方法
①ドットインストールなどで勉強する
②仕事を取って実績を作るorオリジナルサービスを作る
③ ②をもとに企業にアピールしてインターンor就職してスキルアップ
これで時給は跳ね上がります

私はこれで稼げました😌

— しもむらともき/web系学生エンジニア (@shimo_tmk) October 3, 2019

上記を深堀りします。
※今回は大学生向けに書いていますが、会社員でも可能だと思います

大学生向けに無料で勉強できるサイトを紹介しています。

本記事のもくじ

大学生が「プログラミングの基礎」を独学する方法

僕のプログラミング学習方法は下記です

✅僕のプログラミングの学習方法
1.Progate
2.ドットインストール
3. YouTubeで言語＋tutorial
4.サイトを模写
5.ポートフォリオ制作
すべて無料で出来ます👍

※ポートフォリオは1週間を目安にサクッと公開しましょう
過去の僕はポートフォリオ作りに時間を割きましたがあまり意味は無かったです😌

— しもむらともき/web系学生エンジニア (@shimo_tmk) October 3, 2019

ちなみに僕のポートフォリオはこちら

この記事の通りに学習を進めていけばクラウドワークスやランサーズで１万〜５万円程度の案件が獲得できるレベルになります

独学は苦しいこともあるけど頑張りましょう

それでは、まとめて解説してきます

1.Progateでプログラミングに触れる

まずはProgateでプログラミングに触れましょう

Progateはプログラミングに必要なソフトなどをインストールする必要がないので誰でも簡単に出来ます

Progateでやるべきコース

• HTML & CSS
• JavaScript Ⅰ
• jQuery 初級編

プログラミング学習の第一歩は現代だとProgate一択かなと。僕も新しい言語を初めて触れるときは、まずはProgateで触っています

なお、Progateを何周も回したりしている人もいますがそれではいつまで経っても稼げるようにはならないです

Progateができたらサクッとステップアップしましょう

2.ドットインストールでプログラミングを学習する

ドットインストールを使って自分のパソコンでプログラミング学習をしましょう

プログラミングコードを書くエディタをインストールして自分のパソコンで実行します

ドットインストールでやるべきコース

• Visual Studio Code入門
• はじめてのHTML
• はじめてのCSS
• Chrome Developer Tools入門

ドットインストールもWeb界隈ではかなり有名なサイトになります

ドットインストールは３分くらいの動画で分かりやすく解説してくれるサイトで僕もかなりお世話になりました。

3.YouTubeで言語＋tutorialで学習する

最近だとYouTubeで良質なチュートリアル動画が増えています
無料で学習できることに感謝しつつ学びましょう

YouTubeでやるべきコース

• はじめてのレスポンシブWebデザイン入門講座
• Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3
• jQuery入門 2020

progateやドットインストールには申し訳ないのですが、有料版は課金しなくてOKです

なぜなら英語でYouTubeで勉強できるからです。プログラミングは英語でエラー文が表示されることがほとんどなので英語には慣れておいた方が良いです

※真面目な人は英語を勉強しないといけない？と思う人もいますがそれは必要ないです。定番の単語だけ徐々に覚えればOK　Gooogle翻訳で十分に意味が分かります

4.既存のサイトを模写

ここからは、Web制作の案件を獲得するための学習になります

既存のWebサイトを模写します。模写とは既存のWebサイトと同じサイトを自分でコーディングすることを言います

模写すべきサイト

• iSara
• Airbnb

ただ、既存のWebサイトには著作権があるのでインターネットなどにアップなどはせずに学習用としてまとめておきましょう

なお、模写したら案件でも使いまわせるようにまとめておきましょう

ボタンならこんな感じでまとめると便利に使いまわせます

5.ポートフォリオ制作

ここまで出来たら、ポートフォリオサイトを制作しましょう

ポートフォリオサイトとはクライアントや就職先に自分のスキルを見せるためのWebサイトのことです

ポートフォリオサイト制作で参考になるサイト

• ポートフォリオサイト制作
• Build A Complete HTML & CSS Website with Bootstrap 4

すみません。上の動画は僕の動画です。。とはいえ、かなり作り込んだので参考にしつつ学習してみてください

↓こんな感じのサイトができます

そして、この動画を参考にポートフォリオサイトを作るのも良いのですが今までの学習を踏まえて自分なりにカスタマイズしてくと、かなり勉強になると思います

なお、ポートフォリオサイトを制作したらサーバーにアップして公開しましょう

サーバーはエックスサーバーがおすすめです

ファイルのアップロード方法はこちらに書いてあります

基礎学習後のスキルアップ方法

ここまでのスキルが身に付いたら次に進むのは大きく３つ

基礎スキル後のステップアップ方法３つ

• 営業して仕事を取る
• インターンや就職して現場に入る
• WordPressやデザインの学習を継続する

上記のとおり。それぞれ解説します

営業して仕事を取る

この辺りは別記事にまとめました

【経験談】Web制作フリーランス４つの営業方法【大学生OK】

クラウドソーシングサイトで仕事を取るのは正直キツイと思っている人、WEB制作の勉強をしていてそろそろ仕事を取りたい人へ営業方法です。クラウドソーシング、SNSや知人からの紹介、メール営業の方法を教えます

インターンや就職して現場に入る

やはり現場に入って仕事をするのが最もオススメ。

大学生だった僕でも新卒の初任給くらいの時給1200円でインターンをさせて頂いています

【実践済み】web制作インターン探し方【大学生OK】

WEB制作会社でインターンをしたい人向け。お金を貰いながらスキルアップ出来るので学生にはおススメです。スキルアップして優良な企業を見つけましょう

WordPressの学習もする

WEB制作の独学は以上ですがさらに学習を進めたいならWordPressを学習するのも良いと思います

WordPressの勉強方法は以下にまとめているのでここまで学習出来た方はこちらをご覧くださいませ。

WordPressを独学する勉強方法【仕事にするまでにしたこと】

WordPressを独学する勉強方法を解説しています。WordPressを使ってWebエンジニアをしている僕が、WordPressの勉強方法、おすすめの動画教材、書籍を教えます。

Webデザインの学習もする

Webデザインにいくのも楽しいと思います

僕はWeb制作のプログラミングがメインですがこのくらいのデザインは出来ます

Photoshopの勉強は最初はYouTubeがおすすめ
最初は切り抜き,テキスト,バナーデザインから入ると楽しいと思う
そして一番大切なのは使いながら慣れていくことですね😌

僕が作ったものはこれ
参考
１枚目 https://t.co/XuFDr2jhSu
２枚目 https://t.co/GAE9eKQVrU
３枚目 https://t.co/Ve2dGeV1XI pic.twitter.com/yZ3rjLg4NA

— しもむらともき＠Web制作フリーランス (@shimo_tmk) April 19, 2020

その辺りの学習した方法は下記にまとめました

Webデザインの始め方３ヶ月で達成可能【完全初心者向け】

WEBデザインを独学する手順。初心者向けた記事です。無料で学習できるサイトを紹介していきます。Webデザインを始めたい人HTML/CSSなどのプログラミングを始めたけど何から勉強すれば良いかな？といった疑問にお答えします

【モチベーションの保ち方】フォローしておくべきTwitter

WEB制作を独学で勉強しているとモチベの維持が一番難しいかなと思います

僕の場合、やる気が出る日と出ない日の差が大きく、やる気が出ない日はTwitterで他人からやる気をもらっています

フォローしておくべきTwitter

• かずたかさん
• 迫 佑樹さん
• ショーヘーさん
• マナブさん
• しもむらともきさん

すみません。最後は僕です、、、

ザックリ紹介すると

• かずたかさん
  →　独学で企業、旅人と企業をマッチングする「すごい旅人求人サイト」SAGOJOのCOO
• 迫 佑樹さん
  →プログラミング講師。SkillHacksなどのオンラインスクールを運営
• ショーヘーさん
  →　フリーランスメディアの東京フリーランスのCTO
• マナブさん
  →　過去にエンジニアとして年収1000万以上稼ぐ WEBに関する情報をmanablogで発信
• しもむらともきさん
  →　独学でエンジニアになる大学に通いながら月20万以上稼ぐ

Twitterのタイムラインを見ると、皆さんTwitterでアウトプットしていますね

WEB制作はプログラミングのトレンドだけでなくGoogleのアップデートやマーケティング分野も深く関係しているので最新の情報を得られるTwitterはうまく使うと良いと思いますよ

また、プログラミング勉強に行き詰まっている人などは、Twitterなどからご連絡いただけたら、可能な限り回答します。プログラミング勉強がんばりましょう！