初心者のためのフロントエンド開発を学ぶための実用的なガイド

私は2018年春にコーディングの旅を始めました。1年弱前です。それ以来、プログラミングのスキルを身に付けましたが、それでも、今後学ぶべきことがたくさんあることを理解しています。とにかく、私はこれらのヒントを1つの場所に集めて、将来の開発者の進路を支援することにしました。この記事は、私が旅を始めたときに見つけたかったガイドです。

始める前に

自分で勉強することにした場合、インターネット上にはたくさんの情報があり、すべてに頭を悩ませることは困難です。構造化された計画を立て、あるリソースから別のリソースにジャンプして時間を無駄にしないことが重要です。

これらはフロントエンドユニバースへの最初のステップにすぎないことに注意してください。それはあなたが始めるのを助けるでしょうが、それは完全なガイドであることを意図していません。

免責事項として、以下のリソースは広告ではないことに注意してください。彼らはある時点で私を助けてくれたので、私はそれらについて言及し、私は個人的にそれらをお勧めします。それらのほとんどは無料です、そうでなければ、それは指定されます。

出発点として、freeCodeCampにサインアップすることをお勧めします。そして、残りは彼らのカリキュラムに基づいて行います。さまざまな理由から、これは優れたリソースであると考えています。

  1. カリキュラム。これがメインパスになります。それはあなたが学ぶべきことのよく構造化された概要であり、良い学習曲線を提供します。
  2. 演習。それらは一口サイズなので、毎日いくつか実行し、ヒートマップを緑色に保つことで、簡単にペースを維持できます。
  3. プロジェクト。すべての章を完了した後、認定を取得するために5つのプロジェクトを構築します。練習をして知識を深めることが理想的です。
  4. コミュニティ。それは単なる学習プラットフォームではありません。さまざまなレベルの開発者が知識を共有し、インスピレーションを見つけることができるフォーラム、ブログ、およびYouTubeチャンネルがあります。
  5. それは無料です。お金は多くの人にとって重要である可能性があり、ここでは、いずれにせよ、時間以外は何も費やしません。
上級者向けのヒント:まだアカウントを持っていない場合は Twitterアカウントを作成し、公にコミットすることができます。100DaysOfCodeチャレンジ。理由は単純です-この挑戦をしている多くの人々がいます。あなたはモチベーションとサポートを得るでしょう、そしてそれはあなたがペースを維持するのを助けるでしょう。私はそれを強くお勧めします、恥ずかしがらずにコミュニティを楽しんでください

これで、すべて開始する準備が整いました。?

レスポンシブウェブデザイン

最初のセクションでは、静的サイトを構築してスタイルを適用する方法の非常に基本的な方法について説明します。

基礎

基本的なHTMLとHTML5そして基本的なCSSセクションは、現代のインターネットの基本です。応用ビジュアルデザイン、応用アクセシビリティ、レスポンシブWebデザインの原則良いウェブサイトを書くための基本を教えてくれます。急いで慎重に踏み出さないでください。これらはあなたの知識の主要な構成要素です。

Interneting IsHardに関する優れたガイドであなたの研究を補完することができます。

次に、CSSFlexboxやCSSグリッドなどの強力なレイアウト手法を学びます先に進む前に、この短いガイドを完了して、Flexbox-Gridの時代以前に人々が使用していたさまざまなレイアウト手法の概要を理解してください。それらを使用する必要が生じる可能性はほとんどありませんが、現在のテクノロジーを認識し、評価することは常に良いことです。

CSSFlexbox

Flexboxのシンプルさとパワーのおかげで、私はFlexboxに夢中になりました。さまざまなプロパティが最初は混乱する可能性があるため、コンピュータの近くに虎の巻を置いて、いつでも簡単に検索できるようにすることをお勧めします。さらに、このインタラクティブなFlexboxチートシートをブックマークしてください。

そして最後に、中毒性のあるFlexboxFroggyをプレイして練習しますゲーム。?

CSSグリッド

グリッドはより高度で柔軟性がありますが、ほとんどの場合、Flexboxで十分です。とにかく、あなたはあなたの兵器庫に別の強力なツールを持っているでしょう。特に、グリッドガーデンで作物を育てるときに理解しやすい場合はなおさらです。

練習

最終プロジェクトに進む前に、次のことを行うことをお勧めします。

  1. Codepenでアカウントを作成しますこれは、プロジェクトを構築し、スニペットをテストし、練習できるフロントエンドのクールな遊び場です。
  2. インストールするコードエディタあなたのマシンでそれを操作する方法を学びます。
  3. このビデオからコマンドラインの基本を学ぶWesBosまたはUdacityのシェルワークショップによる。
  4. NetNin​​jaによるこのプレイリストでGitを使用する方法を学びます。
  5. ガイド付きの練習をしてください。Traversy Mediaによってこのプレイリストからプロジェクトを選択し、コードを記述します。自信が持てるまでビルドしてください。すでにコードエディターとバージョン管理を使用していて、Githubの特別なスタディリポジトリに作業内容をアップロードしておくと便利です。

これで、最初の認定を取得する準備が整いました。?

最終的なプロジェクトを作成して共有しますか?

Javascriptアルゴリズムとデータ構造

これで静的Webサイトの構築方法がわかり、JavaScriptを学ぶ時が来ました。

freeCodeCampのJavaScriptセクションは素晴らしいですが、javascript.infoを参照することを強くお勧めします追加の参照として。これは、JavaScriptに関連するすべての包括的な情報を提供する最高のリソースです。

その他の推奨事項

  1. ビジュアルガイドをご希望の場合は、BeauCarnesによるJavaScriptの基本コース。
  2. JavaScriptの新しい標準に関して、私のお気に入りは誰にとっても素晴らしいコースES6です!(有料)WesBosとBeauCarnesによるModernJavaScript。
  3. Scrimbaの正規表現コース。
  4. NetNin​​jaによるオブジェクト指向JavaScriptコースは私にとって非常に役に立ちました。

アルゴリズム

これは、認定の私のお気に入りの部分です。私がそれらを解決し始めたとき、彼らがどれほど挑戦的であったかを覚えています。私は一日中可能な解決策を考えることができました。これは、JavaScriptを学び、プログラマーのように考えるための優れた方法です。

少しの助けとして、TraversyMediaによるJavaScriptカーディオセッションをご覧になることをお勧めします。

もっと練習のために、私は非常にCodeWarsにサインアップして達成するために、最初の目標を設定することをお勧めいたします6kyu。チャレンジを完了すると、他の人の解決策を調べて、新しいトリック、アプローチ、アイデアを見つけることができるので、非常に役立ちます。

私を含む他の100DaysOfCodeチャレンジャーを見つけるには、アカウント設定に移動し、クランフィールドに#100DaysOfCodeと入力します。

最終プロジェクトに進む前に、最終ボスであるレジの準備をする必要があります。?

あなたがそれを打ち負かした後、私はそれを言うことができます…

…JavaScriptの操作方法がわかりました。

物事をくっつける

それでは、WesBosによるJavascript30チャレンジに挑戦してみましょう。これは、HTML、CSS、およびJavaScriptがどのように連携するかを学び、基礎知識を磨き、DOMを理解するための最良の方法です。これらの小さなプロジェクトを構築することは素晴らしい経験であり、私にとって本当に楽しいものでした!

フロントエンドライブラリ

この時点から、あなたは本当のフロントエンド開発者になりますか?

ブートストラップ

最も人気のあるCSSフレームワーク。YouTubeのガイドと一緒にいくつかのウェブサイトを構築します。Bootstrapの有名な列グリッドレイアウトに慣れてください。

jQuery

jQueryが死んだと言う人もいますが、純粋なJavaScriptのソリューションが風変わりで、JSフレームワークの使用が多すぎる場合は常に役立ちます。これはあなたの兵器庫のもう一つの素晴らしいツールになります。練習用にそれを使っていくつかの小さなアプリを作成します。

サス

CSSフレームワークの真の力を見るまで、私はCSSフレームワークを十分に理解していませんでした。高度なCSSテクニックを学びたかったので、すばらしい高度なCSSとSassを購入しました。Jonas Schmedtmannによるコース(有料)。CSSスキルを磨き、ワークフローを理解したい場合は、強くお勧めします。私はそれを見つけてまだ幸せです。

React&Redux

これは、フロントエンドライブラリセクションの主要部分です。Reactは、最初に学ぶJavaScriptライブラリとして最適です。

率直に言って、freeCodeCampの形式でそれを操作する方法を理解するのは難しいです。なぜなら、最初から何かを構築することはできず、いくつかのものは内部で機能するからです。したがって、ReactとReduxのコースを受講し、時間をかけてそれらのアイデアとツールを理解してください。

私の個人的なお気に入り:

  1. 完全なReactチュートリアル(Redux付き)NetNin​​ja
  2. ウェス・ボスによる初心者向けの反応(有料)
  3. React-Academindによる完全ガイド(有料)

あなたが最終的なプロジェクトであなたの新しい知識を使うことに興奮していることを願っています。

今、あなたはあなたが望むものを何でも作ることができますか?

さらに移動

あなたは今、本当のフロントエンド開発者であり、優れたWebアプリケーションを構築するのに十分なスキルを持っています。たぶんあなたは次に何をすべきか興味があり、答えは「ビルド、ビルド、ビルド!」と同じくらい簡単です。。あなたの現在の仕事はあなた自身のためのポートフォリオを作成し、より多くの練習をすることです。

次に何をすべきかについてのヒントをいくつか紹介します。

  1. でプロジェクトのアイデアを得る持ち帰りプロジェクトfreeCodeCampのセクション。
  2. コースと一緒にプロジェクトを構築し、新しい機能を追加してプロジェクトを変更および改善します。
  3. D3.jsとNode.jsに取り組み、次のfreeCodeCamp認定を取得してください!
  4. EloquentJavaScriptを読んであなたはJSを知らないJavaScript忍者になるために。
  5. Codewarsでのランクを上げましょう。
  6. このWeb開発者向けWebデザインから高度なWebデザインを味わってくださいコース。
  7. GitHubアカウントをアクティブに保ち、オープンソースに貢献してみてください。

これらのリソースのいずれかが機能しない場合は、問題ありません。イライラしないでください。誰かのために働くことは、必ずしもすべての人のために働く必要はありません。

このガイドがあなたの学習に役立ち、うまくいけば時間を節約できることを願っていますか?

幸運を!