ホーム>プログラミング関連>その他のソースコード
ダウンロード

フロントエンド開発

やあ

これは、フロントエンド開発を学びたいすべての人のためのオープンソースリポジトリです。


フロントエンド開発


フロントエンドのWeb開発は、 HTML、CSS、およびJavaScriptを使用して、データをグラフィカルインターフェイスに変換する練習であり、ユーザーがそのデータを表示および対話できるようにします。

スターマークによるサポートを表示し、リポジトリを共有してください

フロントエンド開発者向けの有用なリソースのリスト

目次

  • フロントエンド開発
  • やあ
  • フロントエンド開発者向けの有用なリソースのリスト
    • 目次
    • ロードマップ
    • 役に立つ
    • 学ぶ
    • A11y
    • YouTubeチャンネル
    • ブログ
      • 雇用
    • ポッドキャスト
    • コードエディター
      • ビジュアルスタジオコード拡張機能
    • ツール
    • CSSフレームワーク
    • アイコン
    • 色
    • タイポグラフィ
    • デザインのインスピレーション
    • アニメーションフレームワーク
    • 在庫リソース
    • ジオロケーション
    • API
    • モックアップ
    • 本
    • チャレンジ /ゲーム
    • 学生向けの無料ツール
    • YouTubeビデオ
    • テスト

ロードマップ

  • ロードマップ - フロントエンド開発者向けの十分に説明されているステップバイステップロードマップ用。

役に立つ

  • BGJAR -Webサイト、ブログ、アプリ用の無料のSVGバックグラウンドジェネレーター。
  • 検査 - MacまたはWindowsから直接iOSデバイスでモバイルWebアプリやWebサイトを検査してデバッグします。

学ぶ

  • FlexBoxの完全なガイド| CSS -Tricks-フレックスボックスレイアウトの包括的なガイド。
  • グリッドの完全なガイド| CSS -Tricks-グリッドレイアウトの包括的なガイド。
  • コマンドラインパワーユーザー - ZSH、Z、および関連ツールを使用した最新のコマンドラインワークフローを学習するWeb開発者向けのビデオシリーズ。
  • CSSグリッド - CSSグリッドに関するすべてのビデオコース
  • あなたのお気に入りのJSフレームワークのための最高のgithubリポジトリをチェックするためのサイトのベストAサイト
  • Codecademy-世界にコーディングの方法を教える一連のインタラクティブコース。さまざまな言語で無料および有料のサブスクリプションを提供します。
  • Codementor -Learning Journeyで、さまざまなコーディング言語の経験豊富な開発者からヘルプを得るためのツール。
  • スケーラートピック - HTML、Java、JavaScript、Pythonなどのプログラミング言語を学習するプラットフォーム。
  • レスポンシブレイアウトの征服-Kevin Powell（https://twitter.com/kevinjpowell）。このコースでは、彼の素晴らしい21日間のコースでレスポンシブレイアウトを作成するために知っておく必要があるすべてのものをご利用いただけます。
  • Coursera-スタンフォードやイェールなどの非常に評判の良い学校からのコースのセレクション。
  • CSS Almanac | CSS -Tricks -CSSの多くの機能に関する簡単なリファレンスガイド。
  • CSSグリッドプレイグラウンド - モジラチームがキュレーションした視覚ガイドは、多くのコードの例とデモを備えたCSSのグリッドレイアウト機能を学ぶのに役立ちます。
  • 設計リソース - Skullfaceの設計リソース。
  • dev.to-プログラマーがアイデアを共有し、お互いを成長させるのを助ける場所。
  • Devprojects-無料のコミュニティは、理論と実践の間のギャップを埋めるために、上級開発者からのキュレーションされたプロジェクトで構成されています。 ！
  • DICODING ACADEMY-誰もが基礎からプログラミングを学ぶことができる（バハサインドネシアでのみ利用可能）。
  • EDX-ハーバード、MIT、ウォートンなどの一連の大学レベルのコース。
  • Egghead-「一口サイズ」セグメントのWeb開発ビデオチュートリアル。無料と「Pro」（有料）のメンバーシップの両方があります。
  • enboard |フロントエンドのリソース - フロントエンド開発に関する整理されたリソース。
  • FlexBox- FlexBoxの知識をレベルアップ - オンラインのゾンビ中心のストーリーコース。
  • FreeCodeCamp-プログラミングプロジェクトを組み込んだ無料のリソースと、開発者の仕事のためのインタビューの準備。
  • FrontEnd Masters-業界リーダーからのWeb開発ビデオチュートリアル（頻繁に更新）。無料（期間限定）と有料メンバーシップの両方があります。
  • フルスタックオープン - ヘルシンスキー大学によるフルスタックWeb開発のコース。 React、Redux、Node.js、Mongodb、GraphQl、TypeScriptを一度に学習してください！このコースでは、最新のJavaScriptベースのWeb開発を紹介します。主な焦点は、node.jsで構築されたREST APIを使用するReactJを使用して単一ページアプリケーションを構築することです。
  • Geeksforgeeks-オタクのコンピューターサイエンスポータル。
  • Khan Academy-開発者向けの重要なコースも提供するユニバーサルオンライン学習プラットフォーム。
  • 学習 - インタラクティブなマインドマップを検索して、何でも学びます。
  • JavaScriptを学ぶ - インタラクティブな環境でJavaScriptを学びます。ブラウザでは、短いレッスンを読んで、メモを取り、完全な課題を直接読み取ります。
  • Mastering Markdown-ドキュメントの作成方法を変更するミニシリーズ。
  • Mozilla Developer Network-オープンWebテクノロジーに関する最新情報。
  • 完全なWeb開発チュートリアル-lyty.dev完全な説明の例を備えた完全なWeb開発チュートリアル。
  • PluralSight-業界の専門家からの無制限のオンライン開発者トレーニング。
  • Saylor-学生に大学の信用機会を提供するオープンなオンライン学習ソリューション。
  • Scrimba-さまざまな言語でのコード画面ベースの学習。
  • Scotch-多くのWeb開発コース。無料と「プレミアム」（有料）の両方のメンバーシップがあります。
  • 検索コース - トレンドコースとチュートリアルの選択。
  • SoloLearn- Web開発を学習するための無料のポータル。
  • チームツリーハウス - さまざまな言語や科目にわたる自己ペースの学習。
  • 現代のJavaScriptチュートリアル - JavaScript言語に関するすべて。
  • Odin Project -Web開発を学ぶためのオープンソースカリキュラム
  • チュートリアルポイント - インタラクティブコードの例を備えたさまざまな言語のチュートリアル。
  • udacity-オンラインで何でも学ぶ - ディープラーニング、機械学習、フロントエンド言語。
  • Udemy-オンライン学習および教育市場。
  • 視聴とコード - 知的厳格さと深さを要求する生徒のためのコンピューターサイエンススクール。
  • W3School- Web開発リファレンスライブラリ。 HTML、CSS、JavaScript（JQuery、Ajaxなど）、および一部のサーバー側の言語をカバーしています。説明とインタラクティブな例が含まれています。
  • Web API | MDN-初心者がWeb APIについて知る必要があるすべて。
  • Bulma CSSとMarksheet.ioのJeremy Thomas Creatorによって4分でWebデザイン。
  • WESBOS-ウェブ開発における無料およびプレミアムコース
  • Web Dev Tricks -すべてのCSS、JS、JQUERYトレンドコードを1か所に配置します。あらゆる種類の最新のWeb開発とデザインの便利なパートナー。
  • Web.dev- Google開発者による最新の高速Webサイトのガイドとリソース。
  • フロントエンドのWeb開発者になる - HTML、CSS、JavaScript、およびJQueryとの能力を開発します。
  • webglossary.info- 3,500以上のエントリを備えたWeb開発とデザインの用語集（2023年8月による）
  • Webスキル - Web開発者として学習するための有用なスキルの視覚的な概要。
  • アプリ醸造所 - すべてが1つのプラットフォームで、あなたのウェブ開発スキルをカバーする
  • フルスタックオープン2021-このコースは、JavaScriptを使用した最新のWebアプリケーション開発の紹介として機能します。
  • DevTools Tech-高品質の現実世界プログラミングの質問に焦点を当てたFrontEndエンジニア向けの無料インタビュー準備プラットフォーム。

topに戻ります

A11y

  • A11yスタイルガイド - KSS文書化されたスタイルから生成されたリビングスタイルガイドまたはパターンライブラリ...アクセシビリティのひねりを加えています。
  • ax-アクセシビリティテストツールキット。
  • Color Contrast Analyzer -CCAは、テキストの読みやすさと、グラフィカルコントロールや視覚インジケーターなどの視覚要素のコントラストを判断するのに役立ちます。
  • Deque University- Webおよびモバイルアクセシビリティスキルのオンラインコース。
  • W3C Webアクセシビリティへのイントロ - 戦略、標準、障害のある人がWebにアクセスできるようにするためのリソース。

topに戻ります

YouTubeチャンネル

  • HTML、CSS、Bootstrap、JavaScript、Git、Github、SQLに関するAPNAカレッジチュートリアル
  • HTML、CSS、Bootstrap、JavaScript、React、ReactのAdrian Twarog-Tutorials
    ネイティブ、UI/UX、クールなデザインのもの
  • 1stWebdesigner- WordPressのチュートリアル、PSDからHTML
  • Brad Hussey-ブートストラップ、Sass、jQuery、PHP、フリーランスに関するチュートリアル
  • CSSトリック-Chris Coyierによる有名なWebデザインおよび開発ブログCSSトリックのYouTubeチャンネル。
  • CSSチュートリアル - CSSのすべての基本をカバーするフサインサーによるヒンディー語のチュートリアル。
  • Coder's Guide -HTML、CSS、JavaScript、Bootstrapに関するチュートリアル
  • Codevolution -React、Vue、Angular、Mongodb、JavaScript、Mean Stack、HTML、CSSに関するチュートリアル。
  • 賢いプログラマー - React、Mongodb、JavaScript、Mern Stack、HTML、CSS、CSS、React Nativeに関するチュートリアル。
  • Derek Banas -C＃、Visual Basic、Django、Python、Nodejs、Angularjs、Mongodb、Jquery、Javascript、CSS、Ruby on Rails、Java、Sqlite、Android、HTML、PHP、Objective C
  • Devtips- HTML5、CSS、SASS、Bootstrap、Foundation、jQuery、Ruby on Rails、Githubのチュートリアル。
  • DesignCourse- UI/UXデザインまたはHTML5、CSS、SASS、アニメーションライブラリに関するチュートリアル。
  • Dennis Ivy- Django＆FlaskのフルスタックWeb開発プロジェクトに関するチュートリアル
  • Elzero Web School-アラビア語のみ
  • FreeCodeCamp- jQuery、JavaScript、React、Math、Science、ソフトウェアエンジニアリングに関するチュートリアル
  • 楽しい機能 - JavaScript、React、Functionalプログラミング、GraphQL、開発者としての生活に関するチュートリアル
  • Google Chrome Developers -Pro -Tips、Insights、およびTechniqueを使用した最新のWeb開発に関する最新かつ最大の講演は、Web開発スキルを高めるのに役立ちます。
  • Kevin Powell- HTML、CSSに関するチュートリアル、CSSを簡単に理解するのに役立ちます
  • LearnCode.Academy -HTML、CSS、jQuery、JavaScriptのチュートリアル、React JS / Redux、ノードJS
  • Leveluptuts -HTML、CSS、SASS、WordPress、Magento、Drupal、React、Meteorのチュートリアル
  • Mackenzie Child -Design to Code Challenge -UIに関するチュートリアル、複数のスタイルのサイトの設計とコーディングの方法。
  • コーディングトレイン - JavaScript、ノード、機械学習、ニューラルネットワーク、アルゴリズムに関するチュートリアル
  • NET NINJA- HTML、CSS、JQUERY、JavaScript、Git and Github、Bootstrap、Mangodb、PSD To WordPress、PSD To HTMLなどのチュートリアル。
  • Thedigicraft -HTML、CSS、jQuery、PHP、Ajax、Bootstrap、MySQLに関するチュートリアル。
  • Thenewboston -ecmascript 6、React JS / Redux、Django、Angular 2、Gulp、Git、Python、SEO、Sass、SCSS、Grunt、Illustrator、Mongodb、PHP、Java、Ruby、Objective C Cのチュートリアル
  • Traversy Media -HTML、CSS、JQUERY、PHP、AJAX、AJAX、BOOTSTRAP、MYSQL、ECMAScript 6、React JS / Redux、Django、Angular、Ionic、Gulp、Git、Python、Node JS、PHP、LARAVEL、CAKE PHP、SIMFON、CODEIGNITER、CODEIGNITER、PROGRAMINTER TIPSのチュートリアル
  • Codewithharry- HTML、CSS、JavaScript、ノードJS、MongoDBおよびホスティングに関するチュートリアル。
  • MOSHによるプログラミング - React、Nodejs、Python、JavaScript、Angular、Typecipt、C＃に関するチュートリアル。
  • 開発 - Web開発、Webデザイン、3Dモデリング、Figmaなどのツールを学ぶ
  • Web Dev Simplified -HTML、JavaScript、CSS、および同じプロジェクトなどのその他のフレームワークを使用してWebサイト開発を学ぶ
  • Mozilla開発者 - Webデザイナー、Web開発者、またはWebサイトやWebアプリを作成する人としての仕事に役立つビデオ
  • アカデミンド - 常に学ぶべきことがあります。 Angularチュートリアルやガイド、vue.js、その他のフロントエンド開発コンテンツやデータサイエンスのトピックなどを見たいかどうかにかかわらず、あなたはおそらく正しい
  • React、Redux、Next JS＆React Nativeに関するSonny Sanghaプロジェクトのチュートリアル
  • WB Web開発 - HTML、CSS、Bootstrap、SASS、JavaScript、Git and Github、Mongodb、Nodejs、Reactjsに関するチュートリアル
  • オンラインチュートリアル - フロントエンドのWeb開発のトップクラスのコンテンツ。 HTML、CSS、JavaScriptに関する充実したチュートリアルがあり、驚くべき効果があります。すべてのフロントエンド開発者の必須訪問
  • フロントエンドのインタビューのヒント、インタビューの経験、およびJavaScriptの特別なコアコンセプトに関するAkshay Saini-Videos。
  • DevTools Tech-高度なフロントエンドの概念に関するビデオ、インタビューの質問と経験、および高度なJavaScriptの概念に焦点を当てます。

topに戻ります

ブログ

  • 10 JavaScript Conceptsコースを知る必要があります - 基本からAdvance JavaScriptのコンセプトまで、すべてのJavaScript開発者が知る必要がある簡単な方法で説明されています。
  • より創造的になるための100の方法-ShauntaGrimesからより創造的になる100の方法。
  • 2017デザインラウンドアップ - 2017年のすべてのコドロップWeb開発リソースのコレクション。
  • あなたが[おそらく]デザインを忘れた50のこと - UXパワーツール - ミディアム - あなたがおそらくJon Mooreからデザインを忘れたこと
  • コード2K17のACM月：Building Moodify -ACM Month of Code 2K17：Ajay NSからのBuilding Moodify。
  • Github＆CloudFlareを使用してWebサイトを設定するための図解ガイド - Karan ThakkarのGithubとCloudFlareを使用してWebサイトを設定するための図解ガイド。
  • Brad Frostブログ - Atomic Design、CSS＆HTMLの建築設計システムの著者。
  • ベストフリーフォント-70+デザイナー用のベスト無料フォント - 2019年の商業使用は無料
  • CSSアニメーション対WebアニメーションAPI：ケーススタディ
  • CSSトリック - CSS、HTML、JavaScript、およびWebデザインと開発に関連するすべてのものに関する毎日の記事。
  • デザインと創造性の引用-72マーガレットケルシーからのデザインと創造性に関する引用。
  • 設計リソース - デザインについて作業して学習するためのリソースのリスト。
  • 設計のための設計 - Viba Mohanによる再生および持続可能な設計に関する記事。
  • ドメインレジストラDNSおよびホスティング - ドメインレジストラ、DNS、およびKirby Kohlmorgeからのホスティング
  • Gatsbyへの初心者ガイド-Gatsby.js：Aman MittalのReact静的サイトジェネレーターのセットアップと使用方法
  • 2016、2017、2018のECMAScriptのすべての例
  • Flavio Copesチュートリアル - JavaScriptとFlavio CopesによるWeb開発に関する毎日のチュートリアル
  • URLからインタラクティブまで - World Wide Webがどのように機能するかについての説明。
  • フロントエンドドグマ - フロントエンド開発のためのニュースとツール、通常は1日2回更新されます
  • FrontEnd Weekly -FrontEnd開発に関連する最高の記事、リンク、ニュースは、週に1回、受信トレイに配信されます。
  • CSSでBitsofCodeロゴをアニメーション化する方法 - カスタムCSSアニメーションのプロセス記事。
  • minmax（）関数の動作方法 - CSSグリッドレイアウトに使用できるCSS minmax（）関数の説明。
  • あなたがテクノロジーに慣れていないときに印象的なポートフォリオを構築する方法 - Randle BrowningのTechに慣れていないときに印象的なポートフォリオを構築する方法
  • 絶対初心者向けのJavaScriptとHTMLを使用してランダムな引用ジェネレーターを構築する方法 - Sophanarith Sokの絶対的な初心者向けに、JavaScriptとHTMLを使用してランダム見積ジェネレーターを構築する方法。
  • 最初のVueコンポーネントを構築する方法 - Sarah DayanによるVueコンポーネントを構築するための初心者プロジェクトチュートリアル。
  • ニューラルネットワークをゼロからコーディングしましょう - パート1 - タイプ - ミディアム - チャールズフライドからゼロからニューラルネットワークをコーディングしましょう
  • 音楽プレーヤーのインスピレーション - MuzliのMusic Player Inspiration 2017。
  • フロントエンドチェックリスト - Webサイトを制作する前に、必要な/テストする必要がある/テストする必要があるすべての要素の徹底的なリスト。
  • あなたがたった14歳のときにチャットボットを構築して販売するのはどんなものか - アレック・ジョーンズからの14歳のときにチャットボットを構築して販売するのはどんなものか
  • 折りたたみ可能なマージンとの取引は何ですか？ -CSSの崩壊マージン機能の説明。
  • FernandocometによるUXのキュレーションされたリソースリストのUXの適切にキュレーションされたリスト。
  • Airbnbオープンソース - エンジニアリングおよびデータサイエンス記事およびオープンソースプロジェクト。
  • JSのコスト - Addy Osmaniによる貴重なユーザーエクスペリエンスのためにJavaScriptを効率的に提供する方法。
  • CSS Scroll -Snap- CSSスクロールスナップに関するチュートリアルにより、ユーザーがスクロールを終了した後にビューポートをロックできます。
  • Chromeのプリロード、プリフェッチ、優先順位 - Addy OsmaniによるChromeのNeworking StackでPrimitivesがどのように機能するかについての記事。
  • あなた自身のためにgitを学ぶ - 伝統的な中国人
  • Web開発者向けのIDES- Web開発のためにIDEを選択する際に考慮すべき要因と優れたオプションの例。
  • 2020年のトップ8気象API- 2020年のトップ8気象API-開発者にとって最高の無料天気API
  • デジタルオーシャンコミュニティチュートリアル - 専門家からの無料のチュートリアルコレクション。すべてがデジタルオーシャンコミュニティから貢献しました。
  • 初心者向けのReact - フロントエンド開発者向けのReact.JSハンドブック - フロントエンド開発者向けのReact.JSハンドブック
  • 究極のReactリソース - ブログには、ブログ投稿、無料の電子書籍、キュレーションされたリストを備えたGithubリポジトリ、実用的なコードを使用したReact.jsの実用的な実装が含まれています。
  • CSSグリッドの完全な紹介 - さまざまな複雑なレイアウトを構築することにより、CSSグリッドの基礎を学ぶブログ。
  • Radoのブログ） - React依存関係と実装、GraphQLなどに関する記事を構成するブログ！
  • Roblog-テクノロジー、javascript、node.js、およびWeb開発に関連するすべてのものの頼りになる目的地。
  • Monica Powellブログ - JavaScript、React、Gatsby、Gitの素晴らしいブログ。
  • DevTools Tech-フロントエンジニア向けの高品質のリソースを慎重にキュレーションしました。

雇用

  • テクノロジーの才能とそれらを引き付ける方法を発見するための2つの素晴らしい場所 - 2020年にテクノロジーの才能を雇う

    topに戻ります

ポッドキャスト

  • コーディングブロック - プロのプログラマーのチームによるソフトウェア開発ポッドキャスト。
  • フロントエンドハッピーアワー - 業界パネリストによるフロントエンド、ソフトウェア、キャリア開発ポッドキャスト。
  • JavaScript Jabber- JavaScript開発者向けのポッドキャスト。ウェブサイトは、他の多くのプログラミング関連のポッドキャストも提供しています。
  • 構文 - レベルアップツッツのWes BosとScott Tolinskiによるフロントエンド開発ポッドキャスト。

topに戻ります

コードエディター

  • Atom -Atomは、モダンで親しみやすいが、コアにハッキング可能なテキストエディターです。これは、何でもするためにカスタマイズできますが、構成ファイルに触れることなく生産的に使用できるツールです。オープンソース|すべてのプラットフォーム

  • ブラケット - フォーカスされた視覚ツールとプリプロセッサのサポートを備えたブラケットは、ブラウザで簡単に設計できる最新のテキストエディターです。 Webデザイナーとフロントエンド開発者のためにゼロから作られています。オープンソース|すべてのプラットフォーム

  • Geany -Geanyは、小さくて軽量の統合開発環境です。

  • Intellijidea-ジェットブレインからの普遍的なIDE。コード完了、統合、およびバージョン制御システム（VCS）があります。

  • Notepad ++ -Notepad ++は、無料の（「Free Speech」、および「Free Beer」のように）ソースコードエディターといくつかの言語をサポートするメモ帳の交換です。 Windowsのみ-Python言語用に使用されるPycharm -suseは、コード分析、グラフィカルデバッガー、統合ユニットテスター、バージョン制御システムとの統合を提供し、DjangoとのWeb開発、およびAnacondaのデータサイエンスをサポートします。すべてのプラットフォーム|オープンソース

  • 崇高なテキスト - コード、マークアップ、散文の洗練されたテキストエディター。すべてのプラットフォーム

  • VIM -VIMは、あらゆる種類のテキストを効率的に作成および変更するための高度に構成可能なテキストエディターです。ほとんどのUNIXシステムとApple OS Xを備えた「VI」として含まれています。

  • Visual Studioコード - 再定義されたコード編集。 IntelliSense、gitコマンドが組み込まれ、拡張可能でカスタマイズ可能な構文の強調表示とオートコンプリートがあります。オープンソース|すべてのプラットフォーム

  • WebStorm -Smartest JavaScript IDE、WebStormは、JavaScriptおよび関連技術の統合開発環境です。すべてのプラットフォーム

  • ultraedit -ultraeditは、Mac、Windows、Linuxで利用できる強力なHTMLおよびコードエディターです。組み込みのファイル比較ユーティリティ、オートコンプリティ、高度なレイアウト、マルチタブ、マルチペインエディター、および最も人気のあるプログラミング言語の強調表示が付属しています。

  • Nano -Gnu Nanoは、Unix -like OSのテキストエディターです。

  • stackblitz- javascriptフレームワークとライブラリのオンラインオープンソースの強力なコードエディター。Githubインポート、ライブサーバー、編集者からGithubへの直接コミットなどの素晴らしい機能があります。

topに戻ります

ビジュアルスタジオコード拡張機能

  • Autoの名前変更タグ-1つのHTML/XMLタグの名前を変更すると、ペアのHTML/XMLタグの名前を自動的に変更します。
  • より良いコメント - この拡張カラーは、さまざまな種類のコメントをコードして、それらに異なる重要性を与え、コードの残りの部分から際立っています。
  • ブラケットペアColorizo​​r -Colors Colors blackets code nefer Your Codeをより読みやすくする - 非常に役立ちます。
  • コードスペルチェッカー - キャメルケースコードでうまく機能する基本的なスペルチェッカー。
  • ES LINT -JavaScriptコードエラーとベストプラクティスを強調表示するためのJavaScriptリナー。
  • トグルのフォーマット - 単純なクリックでフォーマッタ（きれいな、ビューディー化など）をオンとオフに切り替えることができるVSコード拡張機能。
  • git履歴 - gitログ、ファイルの履歴、枝を比較するか、コミットするかを見る
  • Gitlens-ビジュアルスタジオコードに組み込まれたGIT機能を超える - Git Blame Annotationsとコードレンズを介して一目でコード作成者を視覚化し、Gitリポジトリをシームレスにナビゲートおよび探索し、強力な比較コマンドを介して貴重な洞察を得るなど。
  • JSスニペット - この拡張機能には、VSコードエディターのES6構文のJavaScriptのコードスニペットが含まれています（JavaScriptとTypeScriptの両方をサポートしています）。
  • ライブサーバー - ライブブラウザのリロードを備えたクイック開発ライブサーバー。
  • マテリアルアイコンテーマ-Googleマテリアルテーマアイコンパック。
  • Path Intellisense-引用符でパスの入力を開始すると、ディレクトリとファイル名のIntellisenseが表示されます。
  • ピーコック - ワークスペースのワークスペース色を微妙に変更します。複数のVSコードインスタンスがあり、どちらがどちらであるかを迅速に識別する場合に理想的です。
  • Polacode-記事やツイートに表示される派手なコードスクリーンショットを知っていますか？まあ、ほとんどの場合、彼らはポラコードから来たでしょう。使いやすいです。コードをクリップボードにコピーし、拡張機能を開き、コードを貼り付け、クリックして画像を保存します！
  • きれいな - 保存時にコードを自動的にフォーマットします。
  • Quokka.js -Quokka.jsは、迅速なJavaScript / TypeScriptプロトタイピングの開発者生産性ツールです。ランタイム値は、入力するときにコードの横にあるIDEに更新および表示されます。
  • 設定同期 - 設定同期拡張拡張機能Githubで設定を節約します。次に、1つのコマンドを使用してVSコードの新しいバージョンにロードできます。

topに戻ります

ツール

  • APIディレクトリ| ProgrambableWeb
  • Animista -CSSアニメーションプリセット/ジェネレーター
  • より良いコードハブ - ソフトウェアエンジニアリングガイドラインに対してGitHub CodeBaseをチェックし、フィードバックを提供します。
  • Browserling-仮想マシンでのライブインタラクティブなクロスブラウザーテスト。
  • lambdatest- 2000+ブラウザとOSのテストWebサイトとWebアプリ。
  • BROWSERSTACK-さまざまなブラウザやモバイルデバイスでWebサイトとモバイルアプリをテストします。
  • 使用できますか...-デスクトップおよびモバイルブラウザーでHTML5、CSS3などのサポートテーブル
  • CheckBot-SEO、スピード、セキュリティの問題のWebサイトをテストするブラウザ拡張機能
  • Codepen-ブラウザにコードを記述し、構築された結果を見ることができる社会開発環境。
  • Codeply -HTML、CSS、JavaScriptエディタープレイグラウンドデザイナーと開発者がフロントエンドフレームワークを比較、プロトタイプ、テストするためのプレイグラウンド。
  • CodeSandBox- Web開発のためのインスタントIDEおよびプロトタイピングツール。
  • 新しいフィドル-JSFiddle-オンラインコードエディターでJS、CSS、HTML、またはCoffeeScriptをテストします。
  • クリティカルパスCSSジェネレーター-Jonas Ohlssonによる - ブラウザがWebページをレンダリングするために通過する必要があるCSSの量を減らします。
  • CrossBrowsertEstingアプリ - モバイルおよびデスクトップWebブラウザーで機能的なWebテストを実行するためのWebサービス。
  • CSSチートシート - CSSセレクターとプロパティの非常に使いやすい1ページの参照。また、FlexBoxとGridのカテゴリも含まれています。
  • CSS Minifier- CSSファイルを縮小してください！
  • CSSリファレンス - CSSへの無料の視覚ガイド。
  • CSSトリガー - 特定のCSSプロパティを変異させるときにトリガーされるものを教えてくれます。
  • CSSフィルター - インタラクティブCSSフィルタージェネレーター
  • Colorlisa-偉大なアーティストに基づいたカラーパレットジェネレーター
  • DirtyMarkup- HTML、CSS、およびJavaScriptコードを整理します。
  • extendsclass-ブラウザで直接使用可能な機能を追加するためのツールを提供します。
  • Favicon Generator-画像をアップロードして、Webサイト用のFaviconを生成します。
  • iOS/Google Progressive Webアプリマニフェスト用Faviconジェネレーター - さまざまなプラットフォームでファビコンをテストするオンラインツール。
  • 無料の開発者のもの - 開発者による開発者向けの無料のもののリスト。一部のサービスは永遠に無料であるか、少なくとも1年間は無料のティアを持っています。
  • 開発者には無料 - このWebサイトには、FrontEnd開発者だけでなく、あらゆる種類の開発者向けにキュレーションされた無料の有料リソースリストがあります。
  • テキストに基づいてファビコンを生成 - テキスト、画像、または絵文字からファビコンを生成します。
  • 波を取得 - Webデザインで使用するために、多くの種類のSVG波を生成します。
  • グリッチ - グリッチはGoogleドキュメントで一緒に働くようなものです。
  • グラフィックジェネレーター - いくつかの一般的なフロントエンドアプリケーションのグラフィックを生成します。
  • Google Analytics -Webサイトのトラフィックを追跡および報告するWebサービス。
  • Google APIS Explorer-さまざまなGoogle APIをインタラクティブに探索するツール。
  • Sublime TextのJavaScriptコンソール - JavaScriptをテストし、Sublime Text 3のビルドシステムを介して実行するチュートリアル。
  • JQuery Megaチートシート - jQuery selectros、操作、イベントなどのチートシートPDF形式。
  • JS BIN- HTML、CSS、およびJS用のライブパステビン、およびさまざまなプロセッサ。
  • Lighthouse-オープンソース、Webページの品質を向上させるための自動化されたツール。
  • Modern JavaScriptチートシート - これは、JavaScriptやその他の関連フレームワークを始めたばかりの場合に慣れておく必要がある多くのことの素晴らしい概要として、Manuel BeaudruによるJavaScriptのヒントとコンセプトの優れたコレクションです。
  • ノードパッケージマネージャー（NPM） - JavaScriptのパッケージマネージャー。
  • YARN- npmのようなJavaScriptのパッケージマネージャー。
  • レスピタント - レスポンシブサイトが人気のあるデバイスでどのように見えるかを再現します。
  • React Cheatシート - ドキュメントベースのWebサイトは、オフラインでもうまく機能することを意味するプログレッシブWebアプリでもあります。キーワードで検索するか、事前定義されたフィルターのいずれかを選択できます。
  • レスポンシブグリッドシステム - 柔軟なグリッドを生成して、レスポンシブWebサイトを作成します。
  • 正規表現（Regex）エディター - 正規表現の作成と検証に役立ちます。
  • Sans Francisco-デザイナー向けツール - デザイナー向けツールのコレクション
  • Screensizemap-デバイスに依存しないピクセルの画面サイズの比較。
  • Sizzy：ブラウザテストツール - 複数のデバイスで応答性のある設計を一度に開発およびテストするためのツール。
  • スタックオーバーフロー - 開発者が質問をして回答を得るためのオンラインコミュニティ。
  • W3Cマークアップ検証サービス - HTML、XHTML、Smil、MathMLなどのWebドキュメントのマークアップ有効性をチェックします。
  • W3C CSS検証サービス - スタイルシートを使用したCSSおよびXHTMLドキュメントの有効性をチェックします。
  • タイムヘルパー - ミリをデータタイムに変換するのに役立ちます。
  • Tinypng -PNGおよびJPEG圧縮/オプティマイザー
  • Web開発者チェックリスト - Web開発中にカバーするものについて分類されたチェックリスト。
  • Webでパフォーマンスを最適化するためのプログレッシブツール - ページのパフォーマンスを向上させるために使用できるツールのリスト。
  • Stackblitz -Linkを介して共有できるAngularおよびReactプロジェクトのオンラインIDE。
  • Postman（APIをテストするためのツール） - APIクライアントは、APIを作成、共有、テスト、および文書化します。
  • 無料のブートストラップ5チートシート - これは、ブートストラップ5クラス、変数、ミキシンのインタラクティブなリストです。
  • JSont-オンラインシンプルで強力なJSONフォーマットツール。

topに戻ります

CSSフレームワーク

  • ブートストラップ - 責任あるモバイルファーストサイトを設計およびカスタマイズします。
  • Bulma CSS- FlexBoxに基づくモジュラーオープンソースフレームワーク。
  • Caramel-シンプルでモダンなレスポンシブなWebサイトフレームワーク。
  • Cardinal-パフォーマンスとスケーラビリティのためのモジュラーモバイルファーストフレームワーク。
  • 要素CSS -VUE 2.0ベースのコンポーネントライブラリ。
  • Foundation CSS-レスポンシブフロントエンドフレームワークのファミリー。
  • ハーフムーン - ダッシュボードとツールを構築するための完全にカスタマイズ可能でレスポンシブなフロントエンドフレームワーク。
  • JEET-サスとスタイラス用の分数グリッドシステム。
  • Less -Adaptive Webサイトを設計するためのCSSグリッドシステム。
  • マテリアルデザインライト - バニラCSS、JS、およびHTMLの材料設計コンポーネントの実装。
  • CSS -CSSフレームワークは、あらゆるプラットフォーム上のすべての製品にわたって統一されたユーザーエクスペリエンスを可能にすることを目的としています。
  • ミリグラム - ミニマリストCSSフレームワーク。
  • きちんとした - 軽量で柔軟なサスグリッド。
  • ペタルCSS -LESTに基づくLight CSS UIフレームワーク。
  • 純粋なCSS-小さな応答性のあるCSSモジュールのセット。
  • セマンティックUI -UIフレームワークテーマとレスポンシブデザインのために設計されています。
  • スケルトンCSS-応答性のあるプロジェクトをキックスタートするためのシンプルで応答性の高いボイラープレート。
  • Specter CSS-より速く拡張可能な開発のための軽量、応答性、最新のCSSフレームワーク。
  • 暗黙 - グラフィックデザインの初心者向けの原始的で魅力的なフレームワーク。
  • TailWindCSS-高度にカスタマイズ可能、低レベルCSSフレームワーク。
  • UIキット - Webインターフェイス用の軽量およびモジュラーフロントエンドフレームワーク。
  • 無気力 - セット数の列ではなく、パーセンテージに基づく流体グリッドシステム。
  • Vital CSS -SASSおよびSLIMで構築されたWebアプリケーション用の低侵襲CSSフレームワーク。

topに戻ります

アイコン

  • Brandicons-アイコンフォントジェネレーターと視聴者。
  • フラットアイコン - PNG、SVG、EPS、PSD、およびBase64形式の無料アイコンのデータベース。
  • フォント素晴らしい - 一貫したスタイルのオープンソースアイコンセットとツールキット。
  • Glyphicon-ブートストラップ、その他のCSSフレームワーク、およびWebプロジェクトで使用するアイコン。
  • Googleマテリアルデザインアイコン - マテリアルアイコンの概要とプロジェクトにそれらを統合する方法。
  • ICOMOON -ICONフォントジェネレーターとアイコンコレクション。
  • Icongram-さまざまなソースからのアイコンパックのコレクション。
  • ICONSVG-プロジェクトのクイックカスタマイズ可能なアイコン
  • ICONS8-一貫してスタイルとカスタマイズ可能なアイコンパック。
  • Ionicons -SVGおよびWebFontのオープンソースアイコン。
  • Mapicons -Google Maps APIおよびGoogleで使用するアイコンフォントSVGマーカーとアイコンラベルを使用してAPIを配置します。
  • マテリアルデザインの象徴的なフォント - ウェブサイトまたはデスクトップで簡単にSVGを使用するためのマテリアルデザインアイコンの完全なスイート。
  • MFGLABS -ICONSET -MFGラボのアイコンセットWebFontsおよびCSSで使用します。
  • MICON -WindowsフォントとCSSツールキット。
  • 名詞プロジェクト - 包括的なアイコンコレクション。
  • Octicons-プロジェクト用のGithubのアイコンのコレクション。
  • Open Iconic、無料で開いたアイコンセット - SVG、WebFont、およびラスター形式のオープンソースアイコンセット。
  • OpenWebicons -Scalable VectorアイコンとロゴのWebFont。
  • Reacticons -SVG人気のあるアイコンパックの反応アイコン。
  • Remixicon-オープンソースのニュートラルスタイルのアイコンシステム。
  • shape.so-アイコンとアニメーションのカスタマイズ可能なコレクション。
  • Stackicons-ソーシャルブランド向けのカスタマイズ可能なアイコン。
  • ピオンティコン - ウェブフォントに埋め込まれた無料の使用ベクトルアイコン。
  • 天気アイコン - 天気をテーマにしたアイコンフォントとCSS。
  • Zocial | CSS3ボタンセット - CSSを使用してソーシャルボタンを作成し、ソーシャルアイコンをフォントとしてレンダリングします。

topに戻ります

色

  • Adobe Color-カラーホイール、テーマを抽出し、グラデーションを抽出し、アクセシビリティツールなど
  • BADA55カラーコード - leetの単語をCSS 160色に変換します。
  • Branition Colors-ブランディングに最適なカラーパレットの手で覆われたコレクション。
  • カラーハント - 美しいカラーパレットのオープンコレクション
  • Natalya Shelburneによるカラー理論 - コードをする人のための実用的な色理論：例とともに色の使用に関するチュートリアル
  • カラーホイール|カラースキーム-AdobeカラーCC-さまざまな色ルールを備えたインタラクティブなカラーホイール（調整可能）
  • Colordesignerツール - このツールの主な目的は、カラーパレットの構築を支援し、それに基づいて色合いと色合いを生成することです。色を選ぶだけで、アプリは残りを行います。事前に選択された色またはカラーピッカーを使用して、よりコントロールできます。ここで他のツールも確認してください
  • Colormind -Bootstrap -Colormindは、深い学習を使用して、カラーパレットをライブWebサイトのモックアップに自動的に適用する配色ジェネレーターです。
  • クーラー - 多くの機能を備えた超高速カラースキーム作成者
  • CSSグラデーション - 勾配とカラーパレットを探索するためのサイトのキュレーションリスト。
  • データカラーピッカー - 視覚的に等距離の色のカラーパレットを生成します。データの視覚化に役立ちます。
  • 色のデザイン - 色のデザインの完全なガイド（媒体に関する記事）
  • フラットUI色 - フラットデザイン用のカラーピッカー
  • 画像カラーピッカー - 画像カラーピッカーとパレットジェネレーター
  • LOL色 - キュレーションされたカラーパレットのインスピレーション
  • マテリアルパレット - マテリアルデザイン用のカラーパレットジェネレーター
  • Palettable - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet
  • Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
  • Picular - Google, but for colors - Primary color generator using Google's image search.
  • Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
  • UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
  • W3school Color Picker - Find the perfect color from the color wheel, easy control
  • UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ！[無料]

⬆ back to top

タイポグラフィ

  • A Crash Course in Typography: The Basics of Type - First article of a series on Typography
  • Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
  • Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
  • Fontspiration - An iOS app for creating custom typographic designs
  • Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
  • Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
  • Just My Type - A collection of font pairings
  • Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
  • Typekit - "Quality fonts from the world's best foundries"
  • Typography Terms - An infographic on Typography Terms + explanations

⬆ back to top

デザインのインスピレーション

  • Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
  • Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
  • Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
  • Site Inspire - siteInspire is a showcase of the finest web and interactive design.
  • Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
  • Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
  • Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
  • Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
  • Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
  • Landings - Find the best landing pages for your design inspiration based on your preference.

⬆ back to top

Animation Frameworks

  • Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
  • Anime JS - It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
  • Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
  • Magic Animations - Showcase of different animations with link to GitHub repo
  • MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
  • Particles JS - A lightweight JavaScript library for creating particles.
  • Typed JS - A JavaScript typing animation library with a great documentation on GitHub
  • Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page

⬆ back to top

Stock Resources

  • Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
  • Canva - 8,000+ free templates and thousands of free photos
  • Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
  • Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
  • Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
  • I'd Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I'd Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
  • Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
  • MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
  • Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they're all completely free. The website does ask that you credit the photographer when possible.
  • Open Doodles - A Free Set of Open-Source Illustrations.
  • The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
  • Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
  • Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
  • Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
  • Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required
  • Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
  • StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
  • The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
  • UnDraw - "MIT licensed illustrations for every project you can imagine and create
  • UnSplash - "Beautiful, Free Photos" & themed collections of photos
  • 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
  • Design Stripe - "Create beautiful illustrations, no design skills needed

⬆ back to top

Geolocation

  • Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
  • Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
  • Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
  • OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
  • GeoJS - Free to use API for geolocation lookup by IP address

⬆ back to top

API

  • Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
  • Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
  • jsonplaceholder - Fake Online REST API for Testing and Prototyping
  • A list of public APIs
  • Lorem Picsum - Easy to use and customize placeholder photos
  • OpenWeatherMap - Weather API with free and paid licenses
  • Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
  • TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
  • Unsplash Source - API to retrieve random images from Unsplash.com
  • Web APIs | MDN
  • News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
  • Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.

⬆ back to top

Mockups

  • Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
  • Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
  • Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
  • Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
  • Rotato 3D Mockup Generator - Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
  • The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
  • MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
  • MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
  • Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
  • Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic

⬆ back to top

本

  • Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
  • HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
  • HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
  • HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
  • HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
  • Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
  • Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
  • You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
  • Guide to Git and Github - A beginner friendly guide to using git and working with Github.
  • Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
  • Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
  • HTML & CSS Books ![Free]
  • Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
  • Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid

⬆ back to top

Challenges / Games

  • Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
  • Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
  • Codewars - Improve your skills by training with others on real code challenges.
  • CSS Battle - CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate Targets in smallest possible CSS code and battle it out to get to the top of the leaderboard.
  • CSS Diner - It's a fun game to learn and practice CSS selectors.
  • CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
  • Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
  • Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
  • Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
  • Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
  • Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
  • Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
  • JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
  • Leetcode - Coding problems to solve in a range of categories and difficulties
  • Project Euler - Challenging computer science and mathematical problems.
  • 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
  • Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.

⬆ back to top

Free Tools For Students

  • JetBrains Student License : Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
  • Student Developer Pack : The best developer tools, free for students via @githubeducation

⬆ back to top

YouTube Videos

  • Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
  • SVGs can do that ? - Sarah Drasner's talk on nontypical pratical uses of SVGs.
  • CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
  • Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
  • 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!

⬆ back to top

テスト

  • Jest - JavaScript testing framework
  • Mocha - JavaScript testing framework
  • Karma - JavaScript test runner
  • Istanbul - JavaScript test coverage tool
  • TestCafe - Node.js end-to-end testing
  • Cypress - JavaScript end-to-end testing framework
  • Puppeteer - Google's Chrome automation tool for E2E testing.
  • Playwright - Microsoft's browser automation tool for E2E testing.
  • Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
  • Chai - Assertation library for JavaScript testing
  • PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
  • Vitest - Vitest is a blazing fast unit test framework powered by Vite

⬆ back to top

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて