独学プログラミングハック

プログラミング独学をハックする初心者のためのTips

プログラミング独学はまず何から?無料サイトとロードマップ①Web制作編

ソフトウェアエンジニアの学習ロードマップの画像

プログラミングの勉強会やコミュニティを主催していると、

たくさんの参加者から様々な情報や体験談を受け取ります。

なのでこの記事では、
「プログラミング独学はまず何からやればいいですか?」
という方に向けて、無料サイトと学習ロードマップについての知見をまとめました。

具体的には、Web制作や、フロントエンドWeb開発の学習ロードマップ(無料サイト)についてです。

この記事が少しでも、効果的な学習や時間の節約になれば嬉しいです!

 

プログラミング独学はまず何から?無料サイトとロードマップまとめ: ①Web制作編

ここでは、以下の流れで解説していきます。
(全5パートのロードマップ)

  1. HTML, CSS ←この記事
  2. Github
  3. JavaScript
  4. React/ TypeScript
  5. Next.js

適宜、必要な箇所から読んで、区切りがついたらまたこの記事に戻ってきてロードマップを確認してみてください!

なお、ロードマップに関しては、世界で最も有名な開発者向けのロードマップの1つである、以下のサイトも参考にしています!

Developer Roadmaps - roadmap.sh

 

独学ロードマップ①HTML, CSSでWebサイトを制作

0からWeb制作を学ぶロードマップは以下の通りです:

  1. ProgateでHTML, CSSの基礎を学ぶ
  2. freeCodeCampでレスポンシブwebデザインを学び、HTML, CSSの理解を深める
  3. Codejumpで、模写コーディング&デザインカンプを行う
  4. オリジナルサイトを作成する🚀

 

1.のProgateは途中まで無料で、有料ユーザー限定の内容もあります。初心者には、1番人気の学習サービスと言っても良いほどの認知度です。

無料の部分だけでも、1, 2ヶ月だけ有料ユーザーになるなどでも、良いと思います。

2. 3. のサービスは無料なのでとても質も高いサービスです。

ここでのゴールは、簡単な1ページのサイトでいいので、自力で作れるようになることです。

自力で作れる自信があったら、途中の教材のステップなどは適宜飛ばしたり、
無理そうなら、少し戻ってみたりしてください。

また、webサイトの模写が難しかったら、まず写経をしてみるのがおすすめです。

  • 模写:ブラウザに表示されているサイトを見て、全く同じように作ること
  • 写経:サイトのソースコードを見て、そのまま(コピペではなく)打ち込んで写すこと

 

メモ:

もし学習を始めたら、合わせてX(Twitter)のプログラミング・Web制作の勉強用アカウントなどを作ることがおすすめです。

情報収集にもなり、モチベーションを維持する繋がりもできます。

同じように学習している初心者のリアルを知ることもできます!

 

 

そしてこの次は、

独学ロードマップ②Githubでプロジェクトを管理し、Webサイトを公開する

です!

多くの開発者が使用する最も人気のあるサービスの一つであるGitHub の使用に慣れて、作成したコードやプロジェクトを管理する方法を学びます。

また、作成したWebサイトを、実際にインターネット上に無料で公開できます。

 

🌱JavaScript/ React 初心者のためのコミュニティ

上記の技術を中心に、プログラミング初心者向けの勉強会を定期開催しているので、
ぜひ参加して学習のモチベーションを高めてください!

また、無料でコーチング(質問・相談に答えたり、定期的にミーティングしたり、繋ぎながら一緒に作業したり等)もやっています!ぜひ、X(Twitter)のDMで「コーチング興味あります!」などのメッセージを送ってください!

(1〜2ヶ月間限定の、Discordを使ったオンラインコミュニティも定期開催しています!)

 

おわりに

最後まで読んでいただきありがとうございます!

今後も引き続き、独学プログラマー向けの記事を作成していきます。
もし参考になったらスター読者になるボタンを押して頂けると励みになります!

 

また、X(Twitter)でも積極的にプログラミング学習やプロダクト開発に関する投稿をしています。

ぜひ様々な方と繋がり、学習のモチベーションを高めていけることを楽しみにしています。

 

Happy Hacking !

 

programming-hack.hatenablog.com