見出し画像
Photo by tomekantyou1

独学プログラミング学習のロードマップサイトまとめ！（＋αプログラミングの現実

山本楓人

Web系プログラミング独学のためのロードマップサイトまとめ！です

独学の方法が書かれたサイトをまとめたので、参考にしてください！


————————————————-

※おおまかな、おすすめの手順は以下です！

0-0.情報に惑わされすぎない

0.まず、プログラミングの大前提を心構えする

1.作りたいwebサイト、サービスを企画する(いつまでに何を何個作るのかなど目標設定もする！)

2.Progete ドットインストール…など(ロードマップ参考)

3.実践

理由は、作りたいものがあるとモチベーションが向上するからです、！

————————————————-


————————————————-





https://twitter.com/shota_ueyama/status/1220856712350982144?s=20



————————————————-


0.情報に惑わされすぎない


。。。。。その前に、

インフルエンサーに踊らされすぎるのはよくありません。

前提知識の＋αとして、

このベテランの方の記事を読んでください！


1.ブロガー界隈の有名フリーランスエンジニアを見てプログラミングを始めないでくれ（---渡るネットは嘘ばかり
元文系、米国大学院CS修士号持ちITエンジニア。自称エンジニアが撒き散らすゴミを少しでもキレイにしたい---）


2.文系でプログラマーになったけど色々失敗して３年半で会社を辞めた話


3.堀江貴文氏（ホリエモン）にとってプログラミングとは。学習方法と求められるマインドについて解説


そしてりゅうけんさんの意見

【16:40~の部分】

IT業界のヤバすぎる落とし穴5選


マナブさんの意見




0.大前提

・プログラミング（マークアップ）は嘘をつかない

→エラーが出ていても、エラーが出ていなくても、想定どうりにならないのは、何かしらの原因がある。

例）chromeで検証ツール使って幅を変更させてレスポンシブになるか見てるけど、反映されない。→幅変えるたびに更新ボタン押してみて！

例）インラインブロック・ブロック・インラインの違いが理解できていない→kindle unlimitedで配布されてるHTML&CSS辞典でよく理解してみて！


・BEMをマスターして、最低限みやすくてエラーの少ないコードにする


・具体的なロードマップ【プログラミング】

東京フリーランスというメディアサイトの30Daysトライアル
https://tokyofreelance.jp/howto-study-html/#outline__2_3

noteで公式マガジンに認定された、かずたかさんの、
プログラミング独学で2社起業した僕が考える、プログラミング独学ロードマップ
https://note.com/kazu55555/n/nc469e52c5cae?magazine_key=mcc7436b05969

shotaさんの
WEB×事業づくり実践学習サービス「STARTOUT」
https://startout.work



・参考にするべきロードマップ【プログラミング】

独学2ヶ月で初案件を獲得したみーつさんの独学方法（無料）
https://note.com/mwmwmw0093/n/n2b8a2e3f0440

未経験からHTMLコーダーになったKoheiさんの
【無料】完全未経験からのプログラミング独学方法まとめ【 Web制作】
https://keibloglife.com/programming/study/proggraming-load-map/


・営業のロードマップ

Web制作の仕事のとり方が分からない人に捧ぐ『直営業』の教科書
https://note.com/4_r_r_s/n/n86e664dce95c

ふるさんの、
フリーランスエンジニアが営業なしで案件受注する方法５つ【９割営業なしの経験談】
https://guuten.net/no-selling/


補足ロードマップ：

模写を始めるのに必要なProgateのコースは3つだけ【WEBサイト】

HTML/CSS
jQuery中級編まで
JavaScript+jQuery上級編


補足知識:

これは知っておくべきだなと思った知識をまとめます。

・環境構築

ドットインストールで学ぶべき！鬼わかりやすいので↓

https://dotinstall.com/lessons/basic_pcsetup_mac_v2

・HTML&CSSの設計

HTML、CSS設計方法！OOCSS、SMACSS、BEMについて
https://www.1915keke.com/entry/css-design

・ショートカット（MAC）


・Emmetについて

このシリーズを読むべき！↓

HTML/CSSを爆速コーディング Emmet入門 第5回 Emmetを使って、コードの編集を強力にサポートする（前編）


・プラグイン

え！？まだimgタグのwidthとheightを手入力してるの？imgタグの数値を自動入力させる方法


・スニペットの追加方法

https://haniwaman.com/vscode-snipet/


・バグ

【文字化け】Visual Studio Codeのソースコード、ターミナルの文字化け対策


・初期設定(VSCode)

VSCodeでemmetのHTMLテンプレート変更とenをjaにする！


VSCodeからブラウザを開く方法

https://stabucky.com/wp/archives/12385



・モチベーション維持





https://twitter.com/kei_01011/status/1220556883926376448?s=20





・有益情報



・為になるツイート、サイト





https://twitter.com/ChefKenta/status/1222242740278181888?s=20





https://twitter.com/tomo_life_is_cp/status/1220614000515223552







・マナブさん関連

身近なインフルエンサー「マナブさん」が1万フォロワーを越えるまでの過程を本気で分析してみた


・りゅうけんさん関連

「自分金欠なんで」と平気で言うやつは病気。貧乏が感染るから近寄らないで欲しい。
https://www.ryukke.com/?p=2726#i-2

【論破】本当に35歳を越えるとエンジニアは続けられないのか
https://www.ryukke.com/?p=10626

この記事が気に入ったらサポートをしてみませんか？