HTML
CSS
Rails
tool
新人プログラマ応援

これからエンジニアとかウェブデザイナーになりたい人に役に立ちたい無料の学習教材一覧

More than 1 year has passed since last update.

概要

プログラミングやってみたいけど何から手を付けていいのかわからず困ってる人向けに使えそうな勉強材料を拾い集めてみました。

独断と偏見で分類しております。これまとめた自分がエンジニア歴半年のペーペーなので悪しからず:bow:
他にこんなのあるよーって方いらっしゃいましたらコメントいただければ追加します!

分類の仕方

※あくまで主観の分類です

手軽さ : ★★★★★ … 内容が比較的軽く、すぐに終わらせれるテーマほど星が多い。
学習度 : ★★★ … やり終わった後に、やったった感がありそうなほど星が多い。
有名度 : ★★★★ … やり終えると、人に「やったよ俺すごいでしょ!」と言いやすそうだと星が多い
入門度 : ★★★★★ 初心者でもとりかかりやすそうであればあるほど星が多い

エンジニア系

ドットインストール( ハンズオン系 )

http://dotinstall.com/
手軽さ : ★★★★★
学習度 : ★★★
有名度 : ★★★★
入門度 : ★★★★★

定番の動画学習サイト。3分動画で手を動かしながら学べる。倍速で見てサクッと学習するのオススメ。

Ruby on Rails チュートリアル( ハンズオン系 )

https://railstutorial.jp/

手軽さ : ★★
学習度 : ★★★★★
有名度 : ★★★★
入門度 : ★★★

知る人ぞ知るRails学習のためのチュートリアル。Rails学習を通して、Web開発の全体が学べるのでかなりオススメ。
0から12くらいまで細かく書いているのですごく進めやすいが文字量多すぎてビビる人が多いらしい。

サルでもわかるGit入門( ハンズオン系 )

http://www.backlog.jp/git-guide/
手軽さ : ★★★★
学習度 : ★★
有名度 : ★★★★★
入門度 : ★★

Gitのハウツーの定番

Buzzword( 読み物系 )

http://www.buzzword.jp/
手軽さ : ★★★
学習度 : ★★★
有名度 : ★★★
入門度 : ★★★

情報の網羅性高い印象。

ロシアの天才ハッカーによる【新人エンジニアサバイバルガイド】( 読み物系 )

http://qiita.com/jacksuzuki/items/b2fa6b44962e73a53d08
手軽さ : ★★★★
学習度 : ★★★
有名度 : ★
入門度 : ★★

新人エンジニアに向けた記事らしいけど、初心者の俺には全然理解できない単語多かったので中級者向け。なんかおもしろそう。

はじめてのAndroidアプリ開発レッスン( ハンズオン )

https://anharu.keiji.io/
手軽さ : ★★★★
学習度 : ★★★★
有名度 : ★★
入門度 : ★★★★★

漫画でAndroid開発学べる。電卓アプリをゼロから作りきるところまでコミットしていて、かなりわかりやすい印象。読めばアプリ作れるようになるよ。

Android開発( ハンズオン )

http://techinstitute.jp/material/02/
手軽さ : ★★
学習度 : ★★★★★
有名度 : ★★
入門度 : ★★★★

Android開発の教本が無料で公開されてる。内容はかなり濃い目やけどわかりやすい。ボリューム多めなので長い目で学習したい人にオススメ

サルでもわかるJenkins入門( 読み物系 )

https://ics.media/tutorial-jenkins
手軽さ : ★★★
学習度 : ★★★
有名度 : ★★
入門度 : ★★

自動テスト環境の構築に必要なCIツールについての入門記事。俺も勉強してみたい。

npm とか bower とか一体何なんだよ!Javascript 界隈の文脈を理解しよう( 読み物系 )

http://qiita.com/megane42/items/2ab6ffd866c3f2fda066
手軽さ : ★★★★★
学習度 : ★★★
有名度 : ★
入門度 : ★★★★

個人的にJavascript 界隈って横文字多すぎて何言ってるのかわからないんですけども、少しこれ読んでわかった気がした。

Codeacademy( ハンズオン )

https://www.codecademy.com/
手軽さ : ★★★★★
学習度 : ★★★
有名度 : ★★★
入門度 : ★★★★★

HTML,CSSから順序立てて、すべてサービス内で学ぶことができます。途中から有料ですが、その分内容はかなり丁寧な印象。

Code4Startup( ハンズオン )

https://code4startup.com/
手軽さ : ★★
学習度 : ★★★★★
有名度 : ★★
入門度 : ★★★★

有名なアプリケーションを実際に模倣して学べる良サイト。お金はかかりますが、かなり勉強になりそうでオススメ。

CODEUPSTART( ハンズオン )

http://www.codeupstart.com
手軽さ : ★★
学習度 : ★★★★★
有名度 : ★★
入門度 : ★★★★

上記と同じ。模倣して学ぶ。無料のプロジェクトあり。

TechDRILL( ハンズオン )

http://tech-drill.in/
手軽さ : ★★★
学習度 : ?
有名度 : ★★
入門度 : ★★★★

TECH::CAMP運営の株式会社divが提供しているプログラミングの問答集。使ったことがなかったから学習度はわからないけど、テーマだけ俯瞰すると内容は濃そうな印象。
開発環境の構築についてはあまり触れられていないようなので、事前に調べておく必要はありそう(近いうちにこの記事の中でもフォローできるようにします)

freeCodeCamp( ハンズオン )

https://www.freecodecamp.com/
手軽さ : ★★★
学習度 : ★★★★
有名度 : ★★★★
入門度 : ★★★★★

プロゲートの海外版みたいなUI。非営利活動団体が制作した教材ですべて無料なのでかなりオススメ!
参加者、卒業生のコミュニティがあり、気軽に相談もできるので文句なしの最高な教材。海外ではこのコースを修了しておくと就職に有利になることもあるらしい。
ただ、すべて英語なので苦手な人には厳しいのかも。。(Chromeのアドオンの翻訳がオススメ)

デザイン系

MATERIAL DESIGN( 読み物系 )

https://material.io/
手軽さ : ★★★
学習度 : ★★★★
有名度 : ★★★★★
入門度 : ★★★★

少し古いけど、Google発のデザインの話。

ノンデザイナー向けのスライド・「Webデザインのセオリーを学ぼう」( 読み物系 )

http://kachibito.net/web-design/slide-for-non-web-designer.html
手軽さ : ★★★★
学習度 : ★★★
有名度 : ★★
入門度 : ★★★★

これ、俺が読んでみたいやつ

誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック( 読み物系 )

http://tomoyukiarasuna.com/make-images/
手軽さ : ★★★★
学習度 : ★★★
有名度 : ★★★
入門度 : ★★★

最近(2017年1月)バズってた、デザインのテクニックについての記事。読むだけなら15分ほどで読めます。
既にデザインに関わっている方なら、すぐに適用できるテクニックばかりなのではないでしょうか。自分がデザインする際にも、後でこの記事を読みながらチェックしたい。

最後に少し宣伝、、

もくもく会や、プログラミング初心者に向けたイベントを個人で定期的に開催しています。良かったら来てほしいな~。
詳細はこちら

記事についてのフィードバックめっちゃほしいです!ありがとうございます!:fire: