「HTML/CSS」でWebの見た目をつかむ有名なプログラミングの学習サイトはProgateですが、僕は補助としてドットインストールも使用していました。ドットインストールは動画形式で学ぶことができ、プログラミングの全体像を把握するにはもってこいだからです。ドットインストールの動画を見てHTML/CSSはこんなことができるんだなぁ程度に全体像を学ぶ(有料会員であれば視聴スピードを2倍速まで早められる&女性ボイスに変換可能)その後、Progateで実際にコードを書き、それぞれの級を3周する最初からすべてを理解する必要はありません。全てを理解しようとすると中々先に進まず、挫折してしまいます。理解度は下記を目安にすると良いでしょう。50%初級を終わらせるのに1回目は4時間くらいかかっていたのが、3回目には1時間ちょいで終わるような感じです。サンプルサイトの制作Progateの道場編でもそうでしたが、0からコードを書くということがまったくできませんでした。Progateと違いヒントや答えがないので、ググる→試してみるこれをひたすら繰り返し、自分の中でのテンプレを増やしていきます。「Responsive」で各機器に対応させるProgateの上級編ではレスポンシブデザインを学習します。それのアウトプットとしてレスポンシブサイトの制作をしました。どんな制作をしたかと言いうと、既存サイトのレスポンシブ化です。僕はこれが苦手でかなり苦戦しました。思い通りに進まないので気分転換にバックアップを取り、一度サイトがめちゃくちゃになるまで遊んでみます。(750pxになると全く違うサイトになるような笑)これがうまく効いたのかだんだんと理解できるようになりました。※こういった息抜きも楽しみながら学習する上で重要なことです手を動かすのを止めずに片っ端から試していくサイト制作の際はレスポンシブのことを考えながら制作する「Bootstrap」で制作スピードを上げるBootstrapとはWebフレームワークのことで、簡単に説明すると、よく使う機能などをパッケージ化してさらに使いやすくしたものです。学習方法は以下の通りです。HTML/CSSの時と同じくまずはざっくりと全体像をみてから、実際に手を動かしコードを書いていく終了後、サンプルサイトの制作Bootstrapのよくある勘違いは、全てにおいてBootstrapを使用しなければならないと考えてしまうことです。使えるとこだけ使うというスタンスで進めると、うまく使いこなせるでしょう。ちなみにBootstrapはグリッドシステムが重要なので、まずはそこを重点的に学習することをオススメします。「jQuery」でWebサイトに動きをつけるやはりこれも学習方法はこれまでと一緒です。今まで全く動きのないサイト制作だったので、jQueryのサンプルサイトを見たときにこれは楽しい!とテンションが上がった反面、実装の難しさを感じました。実装が難しくひたすらにググり、最終的に分からないときの秘技、実装コードのコピぺを使いました。コピぺしたコードでなぜ動くのか、一つ一つコードの分析を行いました。プログラミングの学習スピードを上げる方法プログラミング以外にもパソコン自体初心者だった僕は、以下のことも意識して学んでいました。これらを身につけることで制作スピードが上がります。ショートカットキータイピングググり方ショートカットキーMacにはいくつものショートカットキーがあり、これを知っているかいないかでかなり制作スピードに差が出てきます。最前面のウィンドウを閉じるタイピングこれは言うまでもなく早ければ早いほど制作スピードが上がります。ブラインドタッチはもちろんできず、なんなら片手で入力していた自分はまずタイピングの型を知ることから始めました。タイピングにはホームポジションと言うものがあり、それぞれの指でどのキーを打つかが決まっています。この型を頭に入れ、毎日コードを書いていたら自然と早くなっていきました。ググり方」でまずググり方をググるということをしました。ありがち」これもなかなか役に立ちます。初心者はこんなところでミスをするんだなとあらかじめ知っておくことで、つまずきを減らせました。基礎学習+サンプルサイト制作これに尽きるね!基礎学習でインプットしたものをすぐにサンプルサイトを制作することでアウトプットしていく、王道ですがこの流れを続けることでどんどん身についていきます。プログラミングを始める前に僕の状態をさらっと紹介します。Web系フリーランス。世界30ヶ国を旅したのち、尾道に拠点を置く。尾道で再生中の空き家「AirShip」オーナー。