Awsome-Front-End-learning-resource

:octocat:GitHub最全的前端资源汇总仓库（包括前端学习、开发资源、求职面试等）

9,701

1,893

9,701

View on GitHub

Top Related Projects

FrontEndGitHub

6,317

:octocat:GitHub最全的前端资源汇总仓库（包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等）

Front-End-Checklist

70,483

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

front-end-guide

15,231

📚 Study guide and introduction to the modern front end stack.

Front-end-Developer-Interview-Questions

60,460

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

front-end-interview-handbook

43,351

🌐 Front End interview preparation materials for busy engineers (updated for 2025)

developer-roadmap

332,955

Interactive roadmaps, guides and other educational content to help developers grow in their careers.

Quick Overview

The "Awsome-Front-End-learning-resource" repository is a comprehensive collection of front-end development learning resources curated by helloqingfeng. It provides a wide range of materials, including tutorials, articles, tools, and frameworks, aimed at helping developers enhance their front-end skills and stay up-to-date with the latest trends in web development.

Pros

Extensive collection of resources covering various aspects of front-end development
Well-organized structure with categorized content for easy navigation
Regularly updated with new and relevant materials
Includes both beginner-friendly and advanced resources

Cons

Some links may become outdated over time
Primarily in Chinese, which may limit accessibility for non-Chinese speakers
Lacks detailed descriptions or reviews of individual resources
May be overwhelming for beginners due to the vast amount of information

Note: As this is not a code library, the code example and quick start sections have been omitted.

Competitor Comparisons

FrontEndGitHub

6,317

:octocat:GitHub最全的前端资源汇总仓库（包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等）

Pros of FrontEndGitHub

More comprehensive and regularly updated content
Better organization with clear categories and subcategories
Includes a wider range of topics, including tools, frameworks, and job-related resources

Cons of FrontEndGitHub

Primarily in Chinese, which may limit accessibility for non-Chinese speakers
Less focus on beginner-friendly resources compared to Awsome-Front-End-learning-resource
Some links may lead to external Chinese platforms, potentially requiring additional accounts

Code Comparison

While both repositories primarily consist of curated lists and don't contain much code, FrontEndGitHub includes some HTML structure for better organization:

FrontEndGitHub:

<details open>
  <summary>目录</summary>
  <ul>
    <li><a href="#JavaScript">JavaScript</a></li>
    <li><a href="#TypeScript">TypeScript</a></li>
    <!-- More list items -->
  </ul>
</details>

Awsome-Front-End-learning-resource:

## 目录
- [前端学习网站推荐](#前端学习网站推荐)
- [前端文档推荐](#前端文档推荐)
<!-- More list items -->

Both repositories use Markdown for content organization, but FrontEndGitHub incorporates HTML elements for enhanced structure and navigation.

Front-End-Checklist

70,483

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

Pros of Front-End-Checklist

More structured and organized, with clear categories and subcategories
Regularly updated with recent commits and active community involvement
Includes a comprehensive checklist format, making it easy to track progress

Cons of Front-End-Checklist

Primarily in English, limiting accessibility for non-English speakers
Focuses mainly on best practices and guidelines rather than learning resources
May be overwhelming for beginners due to its extensive and detailed nature

Code Comparison

While both repositories primarily contain markdown files and don't have significant code samples, Front-End-Checklist includes some HTML for its website:

<h2 align="center">
  <img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Checklist/master/src/img/logo-front-end-checklist.jpg" alt="Front-End Checklist" width="100">
  <br>
  Front-End Checklist
</h2>

Awsome-Front-End-learning-resource doesn't have comparable code snippets, as it's primarily a collection of links and resources.

Summary

Front-End-Checklist is a well-organized, regularly updated repository that provides a comprehensive checklist for front-end development best practices. It's ideal for experienced developers looking to ensure they follow industry standards. On the other hand, Awsome-Front-End-learning-resource offers a broader collection of learning materials, which may be more suitable for beginners or those seeking diverse educational resources. The choice between the two depends on the user's specific needs and level of expertise in front-end development.

front-end-guide

15,231

📚 Study guide and introduction to the modern front end stack.

Pros of front-end-guide

More structured and organized learning path
Focuses on modern front-end development practices
Includes practical project ideas and exercises

Cons of front-end-guide

Less comprehensive in terms of resource quantity
Limited to English-language resources
Lacks community contributions and regular updates

Code Comparison

While both repositories primarily contain curated lists of resources rather than code, front-end-guide includes some code snippets for basic setup. Here's an example from front-end-guide:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Awsome-Front-End-learning-resource doesn't include code snippets, focusing instead on categorized links to external resources.

Summary

front-end-guide offers a more structured approach to learning modern front-end development, with practical exercises and a clear learning path. However, it has fewer resources overall and lacks regular updates. Awsome-Front-End-learning-resource provides a more extensive collection of resources, including some in Chinese, but may be overwhelming for beginners due to its less organized structure. The choice between the two depends on the learner's preferences and needs.

Front-end-Developer-Interview-Questions

60,460

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

Pros of Front-end-Developer-Interview-Questions

Focused specifically on interview preparation, providing a comprehensive list of questions
Well-organized into categories (General, HTML, CSS, JS, etc.), making it easy to navigate
Regularly updated and maintained by a large community

Cons of Front-end-Developer-Interview-Questions

Limited learning resources beyond interview questions
Lacks in-depth explanations or tutorials for the topics covered
May not cover all aspects of front-end development comprehensively

Code Comparison

While both repositories primarily focus on resources rather than code, Front-end-Developer-Interview-Questions includes some code snippets in its questions. For example:

// Front-end-Developer-Interview-Questions
function Person(){}
var person = Person()
var person = new Person()

Awsome-Front-End-learning-resource doesn't typically include code snippets, as it's more of a curated list of external resources.

Summary

Front-end-Developer-Interview-Questions is an excellent resource for interview preparation, with a wide range of questions organized by topic. However, it may not be as comprehensive for overall learning compared to Awsome-Front-End-learning-resource, which offers a broader collection of learning materials and resources for front-end development. The choice between the two depends on whether you're specifically preparing for interviews or looking for general learning resources in front-end development.

front-end-interview-handbook

43,351

🌐 Front End interview preparation materials for busy engineers (updated for 2025)

Pros of front-end-interview-handbook

More focused content specifically for interview preparation
Regularly updated with recent commits and active maintenance
Available in multiple languages, improving accessibility

Cons of front-end-interview-handbook

Less comprehensive in terms of general front-end learning resources
Primarily text-based content, lacking variety in resource types (e.g., videos, courses)

Code Comparison

While both repositories are primarily resource collections, front-end-interview-handbook includes some code snippets for explanations. Here's an example from front-end-interview-handbook:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

Awsome-Front-End-learning-resource doesn't typically include code snippets, focusing instead on curating external resources.

Summary

front-end-interview-handbook is more specialized for interview preparation, regularly updated, and multilingual. However, it's less comprehensive for general learning. Awsome-Front-End-learning-resource offers a broader range of resources but may not be as focused or up-to-date. The choice between them depends on whether you're specifically preparing for interviews or seeking general front-end learning materials.

developer-roadmap

332,955

Interactive roadmaps, guides and other educational content to help developers grow in their careers.

Pros of developer-roadmap

Provides comprehensive roadmaps for various tech roles (frontend, backend, DevOps, etc.)
Regularly updated with new content and technologies
Offers interactive versions of roadmaps on the website

Cons of developer-roadmap

Focuses more on career paths rather than specific learning resources
May be overwhelming for beginners due to the breadth of information
Less emphasis on curated lists of learning materials

Code Comparison

While both repositories primarily focus on providing learning resources and guidance, they don't contain significant code samples. However, here's a brief comparison of their README structures:

developer-roadmap:

# Developer Roadmap

[![](https://img.shields.io/badge/-Roadmaps%20-0a0a0a.svg?style=flat&colorA=0a0a0a)](http://roadmap.sh)
...

Awsome-Front-End-learning-resource:

# 前端学习资料大全

## 目录

- [前端学习资料大全](#前端学习资料大全)
  - [目录](#目录)
...

The developer-roadmap README is in English and includes badges, while Awsome-Front-End-learning-resource is primarily in Chinese and has a more traditional table of contents structure.