【初心者向け】コーディングを独学で勉強をするには?パソコンでできるおすすめの学習法を紹介

 

こんにちは!ちづみ(@098ra0209)です!私は今カンボジアにいながらこの記事を書いています。ノマドワーカーです。

私は小学校の先生を退職後、フリーで仕事をしたいために、コーディングの勉強をはじめました。今回はそのおすすめの勉強法を紹介します。

ちづみ
私の学習の経験からも、わかりやすくてスムーズな学習の流れを紹介するよ!

ちなみにhtmlからWordPressまでをわかりやすくした記事はこちらです。各言語の関係性などまとめて、学習前にざっと2分読むだけで学習速度が爆上がりするように書いてますので、ぜひ

【イラスト解説】WordPressでweb制作をするまでを宇宙一わかりやすく解説してみた

2018.09.11

まずはProgateで学ぶ

https://prog-8.com/

Progateのhtml、cssコースからやってみましょう。はじめての方に本当に親切にできています。ゲーム感覚でできますし、内容も本当にわかりやすいので、まずは概要をサクッと理解するためにもProgateをやりましょう。

目安としては道場コースまでを2周やると充分基礎は身につくかと思います。

 

ドットインストールで学ぶ

 

https://dotinstall.com/lessons

次はドットインストールがいいかと思います。動画の通りに作ればできるので、本当にわかりやすいです。

 

html、cssはパソコンの中にエディター(メモ帳のようなもの)があれば構築できてしまうので環境構築しやすい言語ですが、ドットインストールも自分のパソコン上で環境構築をするところから動画で教えてくれるのでとてもスムーズです。こちらのホームページを作れるようになろう!をやってみるのがおすすめです。

エディターを入れる

Progateやドットインストールにはあらかじめ学習のための環境が整えられておりますが、実際はhtml,cssを組む場合、エディターを使ってグーグルクロームなどのブラウザに表示させていきます。エディターはVScodeがおすすめです。

 

また、コーディングが捗るVScodeのおすすめ設定&プラグインはこちらからどうぞ!

【2019年最新】html,cssコーディング時に便利なVScodeの設定とプラグイン

2019.10.28

 

実際のサイトをマネして作ってみる

 

ここからはエディターを使って自分でサイトを選んで作るとより実践的かと思います。

 

デザインのレベルはPAS-POLという旅行サイトがちょうどいいのかなと思います。

http://pas-pol.jp/

これを基準に自分の好きなサイトを模写してみるといいですね!好きなデザインの方がモチベーションが上がりますね。

 

こんな感じのサイトを2〜3作ってみるとよりgoodです。多分デザイン被ってるところも出てくるので、どんどん制作のスピードは早くなるかと思います。

 

挫折せず、ちょうどいいレベルのものから取り組むには

ねこ
うーん、でもまずはちょうどいい難易度から取り組みたいにゃ

という声にお答えして、ポートフォリオにも掲載できるコーディング練習用課題を作りました!このようなデザインをコーディングします。(2019年10月30日デザインリニューアルしました。)

 

コーディングの練習ならこれやってみて!コーディング練習用XDデータを出してるよ!

2018.11.18

私自身、未経験からコーディングの勉強を初めたのですが、Progateが終わった方でも取り組むことができ、実践にも使われるレベルのXDの仕様で課題を出しているので、もしよければご活用ください。(^_^)(有料ではありますが、800円から1500円程度です)

累計500部ほど利用いただいています。

また、こちらはポートフォリオ掲載OKなので、コーディングの実績作りとしても、とても有利です。

入門編、初級編、中級編と出しておりますので、ご自身のレベルに合わせてご活用ください!

コーディングの練習ならこれやってみて!コーディング練習用XDデータを出してるよ!

2018.11.18