しもむらのITブログ

(更新日: )

【基礎講座】Web制作プログラミング独学手順 【まとめ記事】

,

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

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

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

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

本記事のもくじ

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

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

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

✅僕のプログラミングの学習方法
1.Progate
2.ドットインストール
3.YouTubeで言語＋tutorial
4.サイトを模写
5.ポートフォリオ制作
すべて無料で出来ます👍
※ポートフォリオは1週間を目安にサクッと公開しましょう

過去の僕はポートフォリオ作りに時間を割きましたがあまり意味は無かったです😌

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

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

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

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

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

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

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

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

Progateでやるべきコース

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

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

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

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

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

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

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

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

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

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

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

YouTubeで言語＋tutorial

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

YouTubeでやるべきコース

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

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

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

4.既存のサイトを模写

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

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

模写すべきサイト

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

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

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

5.ポートフォリオ制作

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

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

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

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

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

ポートフォリオサイト

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

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

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

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

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

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

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

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

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

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

営業して仕事を取る

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

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

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

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

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

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

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

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

WordPressの学習もする

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

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

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

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

Webデザインの学習もする

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

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

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

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

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

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

モチベの保ち方フォローしておくべきTwitter

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

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

フォローしておくべきTwitter

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

ザックリ紹介すると

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

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

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

Tags ,

関連記事

新着記事