30 open-source projects similar to frontendmasters/front-end-handbook-2018, ranked by shared indexed features. Tags may describe platforms or build tools rather than the same primary purpose. Check each project’s use case, license, and deployment requirements before treating it as a replacement.
This project is a comprehensive front-end engineering guide and web development curriculum. It serves as a reference for the languages, tools, and architectural patterns used to build web applications, including a dedicated manual for web security and performance. The repository provides a curated tooling catalog for code editing, version control, and deployment workflows. It also includes structured learning paths covering user interface design, state management, and browser performance optimization. The content covers a broad range of engineering domains, including security risk analysis,
This project is a software engineering style guide and a curated collection of architectural patterns and coding standards. It provides a multi-language coding standard to ensure maintainable software across Ruby, Python, JavaScript, and Swift. The project establishes a development workflow specification for version control, continuous integration, and peer review to maintain a linear project history. It also includes a web accessibility framework based on ARIA and WCAG standards, using design tokens and semantic HTML patterns to build inclusive interfaces. The guides cover a broad range of
North is a responsive web design methodology and Sass-based CSS architecture framework. It provides a system for building mobile-first user interfaces using fluid grids and progressive enhancement techniques to ensure a consistent experience across different browser capabilities and screen sizes. The project features a standardized CSS naming system that uses Sass mixins to programmatically generate class names, distinguishing between components, layouts, and states. It also functions as a frontend project scaffolding tool, providing a generator to bootstrap new environments with pre-configur
Agent-skills is a collection of structured instructions and behavioral personas designed to standardize how AI coding agents perform engineering tasks. It functions as a workflow orchestrator that maps natural language intent to repeatable technical sequences and verification checklists. The project distinguishes itself through the use of specialized markdown-defined roles, such as security auditors or test engineers, to apply targeted domain expertise. It employs an evidence-based verification model that requires runtime data or passing tests as mandatory exit criteria to ensure AI-generated
This project is a front-end development guide and web engineering curriculum. It serves as a comprehensive reference for the tools, technical competencies, and engineering practices required to build professional user interfaces. The resource includes a technical skill roadmap and a software tooling catalog. These materials define the baseline and advanced competencies needed for professional software engineering roles and provide a curated list of utilities to streamline developer workflows. The content covers a broad range of educational areas, including professional competency frameworks,
This project is a Node.js learning roadmap and developer skill map designed to guide learners from beginner to advanced levels. It serves as a backend development curriculum and an interactive technology guide that charts the specific tools, libraries, and architectural patterns required to master the Node.js runtime. The project uses a graph-based visualization to represent technical competencies and their dependencies. By mapping these skills as a structured sequence of topics, it provides a visual guide for identifying the necessary prerequisites and learning milestones needed for backend
ife is a front-end resource directory and web development knowledge base designed for technical skill development. It functions as a static site generator that transforms JSON metadata and markdown files into a navigable website. The project organizes educational materials and engineering references into a structured index, rendering plain text files as technical articles and guides. It utilizes a component-based UI library to maintain consistent layout patterns across the documentation site. The system handles technical knowledge management through categorized resource indexing and client-s
This project is a structured learning roadmap and curriculum guide designed to map the essential technologies and skill sets required for professional web development. It functions as a technical career path planner, providing organized educational sequences that help individuals track their progress toward specific engineering roles. The platform utilizes a static site generator to produce pre-rendered HTML files, ensuring high search engine visibility and efficient page loading. By employing declarative visual mapping, the project transforms complex technical requirements into interactive d
React Portfolio Template is a static site generator template and component-based UI library designed for building personal portfolio websites and blogs. It constructs user interfaces through isolated, reusable view components and manages user interactions and interface preferences locally in the browser via client-side state reactivity. The application includes built-in capabilities for displaying professional experience, past projects, services, and contact details through structured layouts. It supports personal blog management by organizing journal entries and articles using flat files sto
Yui3 is a JavaScript UI framework and frontend application framework designed for building interactive web applications and dynamic user interfaces. It functions as a component-based UI library that organizes interface elements into reusable, modular units with encapsulated state and behavior. The framework includes a module-based loading system that resolves and executes scripts on demand through a dependency-aware mechanism. It provides a DOM abstraction layer to standardize cross-browser interactions and a pub-sub event bus for decoupled communication between independent modules. The tool
Publii is a local static site generator and offline content management system. It operates as a desktop application that renders content into HTML files on a local machine, removing server-side vulnerabilities and eliminating the need for a live database or active internet connection during the authoring process. The system is distinguished by a focus on privacy and search engine optimization. It includes built-in tools for GDPR compliance, such as cookie consent management and the ability to restrict third-party embeds until user consent is provided. For visibility, it automates the generati
This project is a pre-configured static site template and web performance starter for building blogs using the Eleventy static site generator. It provides a foundation for creating high-performance websites through an automated build pipeline that transforms templates and content into optimized HTML files. The framework distinguishes itself by implementing a strict security posture using hash-based content security policies and a privacy-centric analytics setup that proxies tracking requests through edge functions. It further emphasizes performance through the localization of remote images an
This project is a web accessibility checklist and inclusive design framework. It serves as a digital inclusion guide and audit tool for verifying that web content is perceivable, operable, and welcoming to a diverse global audience. The project provides a structured review process for WCAG compliance, focusing on auditing HTML structure, ARIA roles, keyboard navigation, and visual accessibility. It includes specific standards for reviewing language, typography, and color contrast to ensure inclusive content design. The framework covers broader capability areas including device compatibility
This project is a markdown-based static site generator and technical blogging platform designed to convert markdown files and templates into static HTML pages. It functions as a personal blog and frontend engineering portfolio for publishing software engineering guides and technical articles. The system operates as a client-side hydrated web app, serving pre-rendered static HTML and attaching interactive JavaScript listeners upon page load. It utilizes a markdown-based content pipeline to transform raw text into structured web pages for distributing long-form technical writing and tutorials.
Techguide is a markdown-based documentation site and professional development guide designed to map the competencies and learning milestones required for technical career growth. It functions as a static site generator that converts structured markdown content and data into a navigable layout for technical learning. The project features a schema-driven roadmap visualizer that transforms JSON or YAML data structures into interactive visual paths. This system facilitates the creation of a T-shaped skill matrix, allowing for the development of deep expertise in specific areas alongside broad kno
LoveIt is a Hugo static site theme and markdown documentation framework designed for creating high-performance blogs and technical documentation sites. It functions as a responsive web template that transforms markdown files into pre-rendered static pages. The project is distinguished by its built-in internationalization support for multilingual content management and a client-side search implementation that enables full-text indexing without a backend server. It includes an SEO-optimized front-end featuring JSON-LD structured data and lazy-loading asset management to improve page speed and s
This project is a comprehensive reference guide for writing clean, semantic, and maintainable HTML markup based on modern web standards. It provides a set of rules for implementing semantic HTML standards, using meaningful structural elements instead of generic containers to improve document hierarchy and machine readability. The guide establishes specific conventions for HTML formatting, covering indentation, tag casing, and source code organization to improve codebase maintainability. It also serves as a web accessibility reference, detailing the implementation of ARIA roles, alternative te
axe-core is an automated accessibility testing engine and compliance auditor designed to scan web and mobile interfaces for violations of industry accessibility standards. It functions as a programmatic scanner and linter that analyzes HTML and source code to identify barriers and verify compliance with accessibility guidelines. The project distinguishes itself by combining a DOM-based rule engine with computer vision and machine learning to detect complex violations that evade traditional analysis, such as visual heading discrepancies and informative images. It provides specialized capabilit
MDN Web Docs is the official source for comprehensive documentation about HTML, CSS, JavaScript, HTTP, and Web APIs for web developers. It serves as both a complete reference for web browser technologies and a structured learning platform that guides users from beginner to advanced levels through tutorials covering core web standards. The project distinguishes itself by providing a complete reference documentation for standard browser APIs alongside guidance for building accessible websites that work with assistive technologies. It offers documented security techniques and best practices for
This project is a web development tutorial site and a Ruby on Rails learning resource designed as a beginner programming guide. It serves as a technical workshop curriculum and a structured framework for organizing and coaching community-led programming events. The site functions as a static site generator that converts Markdown content and templates into pre-rendered HTML pages. This architecture supports the delivery of step-by-step guides and instructional materials used to teach new learners how to build web applications. The content covers a broad range of capabilities, including Ruby o
This is the comprehensive documentation website for the Vue 2 progressive JavaScript framework. It serves as a technical reference and development guide for building reactive user interfaces and single-page applications. The site provides a detailed JavaScript API reference and a web component directory. It covers the implementation of component-based architectures, reactive state management, and the use of a virtual DOM to synchronize application state with the browser. The documentation details capabilities including client-side routing, declarative DOM manipulation, and frontend build opt
Vue Material is a comprehensive UI toolkit and framework for Vue.js that implements the Material Design specification. It provides a suite of pre-built, themed components designed to create consistent and responsive web applications. The library features dynamic theme support for runtime color scheme changes and automatic accessibility contrast management. It is designed for compatibility with server-side rendering to improve initial load times and search engine optimization, and it includes internationalization support for locale translation and text direction adjustments. The toolkit cover
Vue is a progressive, component-based JavaScript framework designed for building reactive user interfaces and single-page applications. It centers on a declarative template system that transforms HTML into efficient render functions, allowing developers to organize complex interfaces into isolated, reusable units that synchronize automatically with application state. The framework distinguishes itself through a dependency-tracking reactivity system that monitors data access during rendering to trigger precise updates. It provides a flexible architecture that supports both incremental adoption
This project is a comprehensive collection of Python programming education materials, including tutorials, exercises, and curated code samples. It serves as a learning curriculum and software engineering toolkit, utilizing Jupyter Notebooks to combine executable code with descriptive educational text. The repository provides practical implementation guides for building large language model applications, such as retrieval-augmented generation systems, stateful AI agents, and machine learning workflows. It distinguishes itself by offering a structured approach to agentic coding workflows, cover
webpack-bundle-analyzer is a bundle size analysis tool and Webpack build plugin that visualizes the composition of web application assets. It generates an interactive treemap to identify large dependencies and analyze the distribution of modules within the final payload. The tool functions as a bundle visualizer and a static report generator, exporting analysis data as standalone HTML and JSON files. It supports live bundle tracking via WebSockets during development and allows for the analysis of existing static stats files through a command line interface. The project provides capabilities
The A11y Project is a community-driven initiative that serves as a centralized repository for web accessibility documentation, design principles, and educational resources. It provides technical guidance and best practices to help developers and designers build digital products that meet international accessibility standards and accommodate users with diverse sensory and motor needs. The platform distinguishes itself through a commitment to inclusive content strategy and rigorous technical standards. It enforces consistent tone, reading levels, and inclusive language across all documentation
Developer Roadmap is a community-driven platform that provides structured, graph-based learning paths for software engineering. It serves as a comprehensive knowledge repository where technical domains are organized into visual sequences to guide professional skill acquisition and career growth. The project distinguishes itself through a collaborative ecosystem that enables users to contribute roadmaps, curate industry best practices, and maintain professional profiles. It integrates diagnostic assessment frameworks to evaluate technical proficiency, helping developers identify knowledge gaps
Pluto.jl is a reactive computing environment for Julia that functions as a programmable document format. It serves as an interactive data science IDE and a polyglot computational notebook that stores Julia code and environment dependencies as versionable source files. The system is distinguished by its reactive execution model, which uses a directed acyclic graph to track variable dependencies and automatically re-evaluate affected downstream cells when a value changes. It ensures reproducibility by integrating isolated package environments directly within the notebook file and persisting con
next-learn is a collection of educational resources and reference implementations for building full-stack web applications. It serves as a learning resource and tutorial for the Next.js framework, providing starter code and example projects that demonstrate server-side rendering and the React-based ecosystem. The project provides a full-stack web template that showcases a complete implementation of database integration, user authentication, and server-side logic. It includes reference examples for web performance optimization, specifically demonstrating the use of server components, server ac
This project is a localized educational resource for learning the Rust programming language, providing a comprehensive guide and technical specifications translated into Simplified Chinese. It serves as an instructional tool for studying language idioms, memory management, and type systems. The repository focuses on software documentation localization, converting official guides into Simplified Chinese to increase accessibility for non-English speakers. It utilizes a markdown-based system to organize content and supports multi-format export to static HTML, PDF, and EPUB formats for both web a