jacksontian/fks

★ 17,946JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((fks))
    What it does
      Frontend skill map
      Topic catalogue
      Learning roadmap
    Topics covered
      Languages and runtimes
      Frameworks and libraries
      Standards and specs
      Tooling and testing
    Use cases
      Self-study plan
      Team onboarding
      Skill gap check
    Audience
      Junior developers
      Frontend learners

mindmap root((fks)) What it does Frontend skill map Topic catalogue Learning roadmap Topics covered Languages and runtimes Frameworks and libraries Standards and specs Tooling and testing Use cases Self-study plan Team onboarding Skill gap check Audience Junior developers Frontend learners

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Use the topic outline as a self-study roadmap to plan what to learn next as a frontend developer.

USE CASE 2

Design an onboarding curriculum for new frontend engineers using the structured topic map.

USE CASE 3

Check your existing knowledge against the full map to find skill gaps in your frontend expertise.

USE CASE 4

Browse links to official documentation and tools organized by frontend category.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Frontend Knowledge Structure, abbreviated FKS, is a curated map of everything a frontend engineer (someone who builds the part of websites and web apps that runs in the browser) might want to learn about. It started as a hand-drawn knowledge tree by a developer known as @jayli, and was rebuilt as a GitHub project so that the community could keep it up to date as the field changes. The README itself is the map: a deeply nested outline of topics with links out to the official site of each tool, library, standard, or technique. The outline groups frontend work into broad buckets, the browsers a frontend engineer should know and the rendering engines behind them, programming languages used in the browser (JavaScript, TypeScript, CoffeeScript) and on the server side with Node.js, markup and styling (HTML5, CSS3, Sass, LESS, Stylus, PostCSS), design tools, editors and IDEs, debugging tools, version control systems and hosting, code quality and unit testing tools, automated testing, popular libraries and frameworks (Vue, React, jQuery, AngularJS, Bootstrap and many more), web standards (HTTP, the ECMAScript specs, W3C standards, semantic web, accessibility), performance tools, SEO, and general computer-science background reading. You would use this repository as a study syllabus or as a checklist when designing a curriculum, an onboarding plan, or a self-learning roadmap. The diagram is also available as an interactive visualisation linked from the README. The repository is primarily JavaScript and is maintained through normal pull requests so that the catalogue can evolve as the frontend ecosystem moves on. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1

I am a beginner learning frontend development, using the FKS knowledge map, create a 3-month study plan covering the most important topics in order.

Prompt 2

Based on the FKS knowledge map, what JavaScript and TypeScript concepts should I learn before picking a framework like React or Vue?

Prompt 3

Using the FKS map as a guide, create an onboarding checklist for a junior frontend engineer joining a team that uses React and TypeScript.

Prompt 4

I know HTML and CSS but not much JavaScript, walk me through the FKS map sections I should focus on to become job-ready as a frontend developer.

Prompt 5

Based on the FKS frontend knowledge map, which browser debugging tools and performance profiling techniques should I learn alongside JavaScript fundamentals?

Open on GitHub → Explain another repo

← jacksontian on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.