Web Skills

Overview

GitHubGitHub

Web Skills is an open-source project that visually organizes the skills Web developers need to learn. Maintained by Andreas, it has earned over 7,600 stars on GitHub. The project divides Web development knowledge into several main modules, including: - **Fundamentals**: Covers basic syntax and core concepts of HTML, CSS, and JavaScript, along with browser principles, HTTP protocols, and debugging methods. - **Accessibility**: Includes screen readers, ARIA, keyboard accessibility, accessible forms, and color contrast. - **Web Components**: Introduces native component technologies such as Custom Elements, Shadow DOM, and HTML Templates. - **Progressive Webapps**: Covers PWA-related topics like Service Workers, offline-first strategies, performance metrics (e.g., LCP, TBT), rendering performance, and security policies (HTTPS, CSP, OWASP). - **Build tools**: Lists common build and engineering tools such as NPM, Yarn, Webpack, Rollup, Babel, TypeScript, ESLint, and Prettier. - **Frameworks & Libraries**: Mentions frontend frameworks like Vue, React, Angular, Svelte, lit-element, and Stencil. - **Testing**: Includes methodologies such as unit testing, integration testing, system testing, and acceptance testing. Users can view the interactive visual graph online or browse all skill points as a list in the README. This project is ideal for learners who want a systematic overview of the Web development landscape, or for teams assessing their skill coverage.

Q&A

What is Web Skills?AI-generated

Web Skills is a visual overview of skills for Web developers, organizing technical topics from beginner to advanced levels in both graph and list formats.

Where can I view this skill map?AI-generated

Visit https://andreasbm.github.io/web-skills for the interactive visual version, or browse the list directly in the README of the GitHub repository.

Which technical areas does this project cover?AI-generated

It mainly includes Fundamentals (HTML/CSS/JS/browsers), Accessibility, Web Components, Progressive Webapps, Build tools, Frameworks & Libraries, and Testing.

How were the skills selected?AI-generated

The original README contains a FAQ entry titled "How did you choose the skills?", but the text is truncated and the specific answer is not shown.

Why isn't a specific technology included?AI-generated

The original FAQ includes the question "Why haven't you included XYZ Technology?", but the explanation is not shown due to text truncation.