最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。
(11-09 12:45) Progate, atomを追加
導入編
🐠 Webサイトを作ることは楽しい！
プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに
プログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。
今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられる方法だと思っています！
🎉 今できることの範囲内で、作りたいWebサイトは？
今知っている知識、今できることの範囲内できるWebサイトを考えてみてください。大切なことは最大でも4-5時間あれば十分できてしまう作業量の範囲内にすること。1日を超えてしまうとモチベーションが下がったり、難易度が高すぎて途中で挫折してしまう可能性がありもったいないです。
😼 お勧めテキストエディタ
Atom
GitHub社がオープンソースで開発しているエディタ、Mac、Windowsに対応していてパッケージのインストールなどが楽ちん。
Sublime Text2
多くのプログラマーが好んで使っている、お勧めのテキスト・エディタです。WindowsもMacにも対応しています。ダウンロードして評価する場合は無料です。継続して使う場合はシェアウェアとなります。
😀 HTML
HTMLとは、インターネット・エクスプローラ(Internet Explorer)やクローム(Chrome)などのブラウザにわかりやすい文章のこと。
HTMLの基本テクニック
HTMLの要点中の要点が書かれています。最低限ここを見ておくだけで最低限のHTMLは書けます。
HTML入門 (全16回) | ドットインストール
HTMLについてわかりやすく解説した動画(約3分)が全16回あります。最初から全部を覚えようとしたり、真似して書く必要はありません。タイトルを見ながら、興味があるところや作りたいことに関係しそうなところをつまみ食いしてみてください。
🍮 CSS
HTMLが、ブラウザが解釈しやすい文章。CSSはその文章の飾りや体裁を整えるための言語。
初級 CSS 解説｛初心者向けの、ごく簡単な、スタイルシート の使い方の説明です。｝
HTMLとCSSを使う方法が書かれています。もし分かりづらければコメントください！
CSS3入門 (全19回) | ドットインストール
CSSについてわかりやすく解説した動画(約3分)が全19回あります。最初からすべてを理解する必要は全然な然です。自分の興味があるタイトルや内容があればちょっと見てみるくらいがオススメです。
🐹 JavaScript
HTMLが文章構造、CSSがデザイン、JavaScriptは主にブラウザ側での「動き」を表現するための言語。
JavaScriptではじめるプログラミング超初心者講座
JavaScriptはすごく奥が深いので、まずはここを見てこんなことができるだなってイメージを持ってもらえれば十分です。
JavaScript入門 (全24回) | ドットインストール
JavaScriptについてわかりやすく解説した動画(約3分)が全16回あります。ブラウザの中で動くものを作りたいと思ったら、ちょっと覗いてみてください。自分のやりたことにマッチするタイトルの動画があればちょっと見てみるくらいで十分です。
🎂 プログラムを学ぶことの意義
Facebook元役員「プログラミングを学ぶのなら、生涯仕事に困らないことを私が保証しよう。」
かなりインパクトのあるタイトルですが、内容はプログラムを学ぶことがどんな未来につながるか、海外では今どんなことが起こっているかを俯瞰的に理解できるすばらしい記事です！
ここからは参考リンク
🐝 書きながら覚えるHTML/CSS/JavaScript
Progate
Hackathon Houseによく来ていた学生さんが中心になって開発をしているサービス。
Webサービスを作り出すことを体系的に学ぶことができる。日本人がつまずやすいポイントをしっかりとフォローしてます！
CODEPREP
オンラインでプログラミングを書きながら覚えることができます。HTML5、CSS、JavaScriptを基礎から応用まで勉強できます！
Codecademy
日本語と英語がまじってはいますが、CODEPREPと同じく、オンラインでブラウザ上でプログラムを覚えることが出来るしくみです。
🎃 CSSをより使いこなす
CSS基礎文法最速マスター
CSSの要点が詰まっている。やや中級者向けの内容ですので、わからなければ読み飛ばしてください。
🏀 JavaScriptをより使いこなす
JavaScript基礎文法最速マスター
中級者向けの内容ですが、知っておくと後からの理解が早まりそうな内容です。ちょっとJavaScriptを触ってから読み直すと、理解が深まるかも。
🍄 Qiitaでアウトプット
Qiita
僕は未来の自分が困らないようにブログを書いています。そうすることで、次に同じことをやるときに効率的に作業ができるようになりました。またこのアウトプットを続けたことで、ブログ経由でいろいろな出会いを得られたり、転職ができたりしました。
Mac限定ですが、QiitaはKobitoというMacアプリケーションがあり、メモを気軽に公開できます。Macな人で自分でブログを始める前の練習でQiitaにアップするのはすごくいい方法だと思います！
😸 お願い事項
このやり方は賛否両論あると思いますが、僕が個人的に試行錯誤を重ねた経験やたくさんの人からアドバイスをもらった結果の仮説です。未完成な仮説をネットにアップすることは申し訳ないと思5つも、シェアすることでより良くなると信じています。もしもっといい方法があればぜひコメントお願いします！
🚌 参考リンク
Sublime Textの料金体系について勘違いしていました。『@economixmeister』さん、ありがとうございます！
短期間でプログラミング言語を覚えるのに役に立ちそうなサイトまとめ
🗻 変更来歴
(04/27 16:50) 書きながら覚えるHTML/CSS/JavaScriptを追加
(05-04 07:50) Webサイトを作ることは楽しい！ を追加
(11-09 12:45) Progate, atomを追加
🖥 VULTRおすすめ
「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！
📚 おすすめの書籍
