今回は自身の経験を元に、HTML/CSSの学習ロードマップを書きました。 これから、プログラミングの学習を始める方は参考にして頂けると幸いです。マナビトこんにちはマナビトです。 普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを メインに開発業務を行なっています。
HTML/CSSの学習ロードマップ
実践的な学習サイトを作成できるまで
1.環境構築 ～VScodeの導入～
先ずは、HTMLファイル・CSSファイルを編集することができるテキストエディタを自身のPCにインストールしていきましょう。
テキストエディタはAtom、Sublime Textなどいろいろ種類がありますが、私がおすすめするのは、Visual Studio Code(VScode)です。
VScodeはwindowsを開発しているマイクロソフトが提供している無料のテキストエディターで、拡張機能が豊富で、自分の環境に合わせて簡単に機能を追加する事ができます。またGitHubとの連携もしやすく、特にこだわりがなければ、VScodeを選ぶのが良いかと思います。
VScodeはVisual Studio Code公式ダウンロードサイトに移動して、無料でダウンロードする事ができます。
・VCcode 公式サイト https://code.visualstudio.com/
VScodeは最初は英語で表示されており、英語が苦手な人はJapanese Language Pack for Visual Studio Codeをインストールすると、日本語表記に変更する事ができます。
これでコードを編集する環境が整いました。
2.おすすめの学習サイト
実際にコーディングをする際は、書籍を購入して学習しても良いですが、今回はWebで公開されている学習サイトを紹介します。
先ず初めに紹介するサイトはProgataです。
ProgateはHTML/CSSからJavaScript、PHP、Rubyなど様々な言語を学ぶ事ができ、とにかく「プログラミングを始めてみたい」、「プログラミングを始めたいが何から学べばいいのか分からない」といっや初心者にとって、初め易いサービスとなります。またアプリ版をダウンロードすると、携帯からも学習する事が可能です。
初めの基礎部分のみ無料で、途中から月額会員980円で有料になりますが、もしコードを書く事が面白いと感じたら有料会員になって続けてみてもよいかもしれません。
ただブライザ上でコードを記載することになる為、実際にテキストエディタ等で書く環境をイメージし辛いことがマイナス点かなと思います。
次に紹介するのは、ドットインストールです。
ドットインストールはProgateと同じく、プログラミング初心者にとって学びやすいサイトで、言語もProgate以上に色々な言語が学べます。また学習動画も3分程度なので集中して学ぶ事ができます。
Progateでも、ドットインストールであっても、とにかく意識してほしいのは、とにかく手を動かしてコードを書いてみることかと思います。
ある現役のエンジニアから、「プログラミングの一年間の成長はどれだけコードを書いたかに比例する」という有り難いアドバイスを頂き、私もできる限り毎日コードを書いてどの様に動作するのか確認する事を心掛けています。
人によってはコードを書くことが億劫に感じられる人もいて、そこである程度Webデザインが向いているかどうか判断できる分かれ道になると思います。
■クリ☆スタ
ドットインストールやProgateである程度学習を終えたら、アウトプット中心のコーディング学習に移るのが良いかと思います。
クリ☆スタはコーディング初心者に向けてよりとても分かりやすく解説しているサイトです。また、Webデザインのコーディングに必須となる、jQueryやFlexboxが分かりやすくまとめられておりより実践的な内容になっています。
もともと用意されているデザインカンプからコーディングを行い、初級、中級、上級の3つのレベルまで挑戦する事ができます。
ここで注意してほしいのは、予想以上に分からないことが多かったとしても、インプット中心の学習に戻らないこと。実は私もここではまってしまって、コードをインプット ⇒ サイトの模写に挑戦 ⇒ 全く理解できないことに絶望しインプット中心の学習に戻る....というループを繰り返し、6ヶ月ほど時間を無駄にしてしまいました。
上級編まで終える事ができれば、実践的なサイトの作成をする事ができるようになります。
今日はここまでとなります。参考にして頂けると幸いです。
