Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 36 additions & 5 deletions docs/docs.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,45 @@
{
"$schema": "https://mintlify.com/docs.json",
"theme": "maple",
"appearance": {
"default": "dark",
"strict": true
},
"name": "33 JavaScript Concepts",
"description": "33 concepts every JavaScript developer should know",
"description": "Learn JavaScript with 33 essential concepts every developer should know. Free guide with clear explanations, practical code examples, and curated resources.",
"colors": {
"primary": "#F7DF1E",
"light": "#FAFAFA",
"dark": "#1A1A1A"
"primary": "#F0DB4F",
"light": "#F0DB4F",
"dark": "#C9B83C"
},
"favicon": "/favicon.ico",
"seo": {
"indexing": "navigable",
"metatags": {
"og:type": "website",
"og:site_name": "33 JavaScript Concepts",
"og:locale": "en_US",
"og:image": "/og-image.png",
"twitter:card": "summary_large_image",
"twitter:site": "@leonardomso",
"twitter:creator": "@leonardomso",
"twitter:image": "/og-image.png",
"author": "Leonardo Maldonado",
"keywords": "JavaScript, JS, learn JavaScript, JavaScript tutorial, JavaScript concepts, JavaScript fundamentals, web development, programming, coding, closures, promises, async await, event loop, DOM, prototypes",
"language": "en",
"coverage": "Worldwide",
"distribution": "global",
"rating": "general",
"revisit-after": "7 days",
"category": "Technology, Education, Programming"
}
},
"search": {
"prompt": "Search concept..."
},
"metadata": {
"timestamp": true
},
"favicon": "/favicon.svg",
"navbar": {
"links": [
{
Expand Down
Binary file added docs/favicon.ico
Binary file not shown.
86 changes: 40 additions & 46 deletions docs/index.mdx
Original file line number Diff line number Diff line change
@@ -1,98 +1,92 @@
---
title: "33 JavaScript Concepts Every Developer Should Know"
title: "33 JavaScript Concepts - Learn JS Fundamentals in 2025"
sidebarTitle: "Welcome"
description: "Learn the 33 essential JavaScript concepts every developer needs. Free guide with explanations, code examples, and curated resources for all skill levels."
description: "Learn JavaScript with 33 essential concepts every developer should know. Free guide with clear explanations, practical code examples, and curated resources for beginners to senior developers."
---

<div className="not-prose">
<div className="text-center py-12">
<h1 className="text-5xl font-bold mb-4">33 JavaScript Concepts</h1>
<p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
Every JavaScript developer should know these fundamental concepts
</p>
<div className="flex justify-center gap-4 mb-8">
<a href="/getting-started/about" className="px-6 py-3 bg-primary text-black font-semibold rounded-lg hover:opacity-90 transition">
Get Started
</a>
<a href="https://github.com/leonardomso/33-js-concepts" className="px-6 py-3 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition">
View on GitHub
</a>
</div>
</div>
</div>
Want to truly understand how JavaScript works? Not just copy-paste code, but actually know what's happening under the hood?

---
These 33 concepts are the foundation. Whether you're debugging a tricky closure, optimizing async code, or preparing for technical interviews, this is the knowledge that separates developers who struggle from those who ship with confidence.

JavaScript is the language of the web. Whether you're just starting out or have years of experience, understanding these 33 core concepts will make you a stronger developer. This guide breaks down each topic with clear explanations, practical code examples, and hand-picked resources to help you learn.
<Info>
**What you'll find in this guide:**
- Clear explanations written for humans, not textbooks
- Practical code examples you can run and modify
- Visual diagrams that make abstract concepts click
- Curated resources (articles, videos, docs) for deeper learning
- Knowledge checks to test your understanding
</Info>

---

## Why These 33 Concepts?
## Who Is This For?

This isn't just another tutorial. It's a roadmap to truly understanding how JavaScript works under the hood. Whether you're building websites, mobile apps, or servers, these concepts are the foundation.
This guide meets you where you are. Whether you're writing your first line of JavaScript or you've been shipping code for years, there's something here for you.

<CardGroup cols={2}>
<Card title="For Beginners" icon="seedling">
No prior JavaScript knowledge required. Start from the fundamentals and build a solid foundation.
<Card title="Beginners" icon="seedling">
New to JavaScript? Start from the fundamentals and build real understanding, not just syntax memorization.
</Card>
<Card title="For Experienced Devs" icon="rocket">
Fill in the gaps and deepen your understanding of concepts you use every day.
<Card title="Self-Taught Developers" icon="lightbulb">
Fill the gaps in your knowledge. Finally understand the "why" behind patterns you've been using.
</Card>
<Card title="For Interview Prep" icon="briefcase">
These concepts are commonly asked in technical interviews. Be ready to explain them.
<Card title="Interview Prep" icon="briefcase">
These concepts come up constantly in technical interviews. Know them cold.
</Card>
<Card title="For Everyone" icon="globe">
Available in 40+ languages thanks to our community of contributors.
<Card title="Experienced Devs" icon="rocket">
Solidify your mental models. Teach others with confidence.
</Card>
</CardGroup>

---

## What You'll Learn
## The 33 Concepts

Each concept builds on the others. Start from the beginning or jump to what you need. Every page includes explanations, code examples, and resources to go deeper.

<CardGroup cols={2}>
<Card title="Fundamentals" icon="cube" href="/concepts/primitive-types">
Types, Scope, Closures, Call Stack, and how JavaScript really works
Types, Scope, Closures, Call Stack, and how JavaScript actually executes your code
</Card>
<Card title="Functions & Execution" icon="code" href="/concepts/event-loop">
Event Loop, IIFE, Modules, and how code gets executed
The Event Loop, IIFE, Modules, and why JavaScript can be both single-threaded and non-blocking
</Card>
<Card title="Web Platform" icon="browser" href="/concepts/dom">
DOM manipulation, HTTP requests with Fetch, and Web Workers
DOM manipulation, HTTP requests with Fetch, and Web Workers for background processing
</Card>
<Card title="Object-Oriented JS" icon="sitemap" href="/concepts/factories-classes">
Classes, Prototypes, `this` keyword, and inheritance
Classes, Prototypes, the `this` keyword, and how inheritance really works
</Card>
<Card title="Async JavaScript" icon="clock" href="/concepts/promises">
Callbacks, Promises, async/await, and handling asynchronous code
Callbacks, Promises, async/await, and patterns for handling asynchronous operations
</Card>
<Card title="Functional Programming" icon="filter" href="/concepts/higher-order-functions">
Pure functions, Higher-order functions, map/reduce/filter, and recursion
Pure functions, Higher-order functions, map/reduce/filter, recursion, and composition
</Card>
<Card title="Advanced Topics" icon="graduation-cap" href="/concepts/data-structures">
Data structures, Algorithms, Design patterns, and clean code
Data structures, Algorithms, Design patterns, and writing clean, maintainable code
</Card>
</CardGroup>

---

## A Community Effort
## A Community Project

<Tip>
**Recognized by GitHub** as one of the [top open source projects of 2018](https://github.blog/news-insights/octoverse/new-open-source-projects/#top-projects-of-2018)!
**Recognized by GitHub** as one of the [top open source projects of 2018](https://github.blog/news-insights/octoverse/new-open-source-projects/#top-projects-of-2018).
</Tip>

This project was created by [Leonardo Maldonado](https://github.com/leonardomso) and has grown through contributions from hundreds of developers worldwide. It has been translated into over 40 languages, making JavaScript education accessible to everyone.
Created by [Leonardo Maldonado](https://github.com/leonardomso) and improved by hundreds of contributors worldwide. Translated into 40+ languages, making JavaScript education accessible to developers everywhere.

---

## Ready to Begin?
## Start Learning

<CardGroup cols={2}>
<Card title="What is This Project?" icon="circle-info" href="/getting-started/about">
Learn about the project's origin and what makes it different
<Card title="About This Project" icon="circle-info" href="/getting-started/about">
The story behind the project and how to get the most out of it
</Card>
<Card title="Start Learning" icon="play" href="/concepts/primitive-types">
Jump straight into the first concept
<Card title="Begin with Concept #1" icon="play" href="/concepts/primitive-types">
Start with Primitive Types and work your way through
</Card>
</CardGroup>
Binary file added docs/og-image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified github-image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.