Skip to content

Commit 60644d4

Browse files
leonardomsoleonardomso
committed
feat: restructure Getting Started section with SEO optimization
- Create new getting-started/ folder with 4 pages: - about.mdx: Project origin, original 33 concepts, what we changed - how-to-learn.mdx: Page structure, resource types, learning tips - prerequisites.mdx: Tools setup (browser, code editor, Node.js) - learning-paths.mdx: Beginner, intermediate, interview prep paths - Refactor index.mdx as Welcome page: - Add SEO-optimized title and description - Add intro paragraph with keyword placement - Add Web Platform category card (7 categories total) - Update links to new getting-started pages - Delete old introduction.mdx (content moved to new pages) - Update docs.json navigation for new structure - SEO improvements across all pages: - Titles under 60 characters with hooks - Descriptions 140-160 characters with keywords - Question-format H2s for featured snippets
1 parent 4d6adbf commit 60644d4

7 files changed

Lines changed: 814 additions & 208 deletions

File tree

‎docs/docs.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,10 @@
2727
"icon": "rocket",
2828
"pages": [
2929
"index",
30-
"introduction"
30+
"getting-started/about",
31+
"getting-started/how-to-learn",
32+
"getting-started/prerequisites",
33+
"getting-started/learning-paths"
3134
]
3235
},
3336
{

‎docs/getting-started/about.mdx‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
---
2+
title: "About 33 JavaScript Concepts: Origin and Goals"
3+
sidebarTitle: "What is This Project?"
4+
description: "Discover the story behind 33 JavaScript Concepts. Learn what topics are covered, who this guide is for, and how it helps you become a better developer."
5+
---
6+
7+
## The Origin Story
8+
9+
In 2017, Stephen Curtis wrote an article titled ["33 Fundamentals Every JavaScript Developer Should Know"](https://medium.com/@stephenthecurt/33-fundamentals-every-javascript-developer-should-know-13dd720a90d1). It outlined the core concepts that separate developers who *use* JavaScript from developers who truly *understand* it.
10+
11+
[Leonardo Maldonado](https://github.com/leonardomso) took this idea and built something bigger: a curated collection of the best resources for each concept. What started as a personal learning project became one of the most popular JavaScript repositories on GitHub.
12+
13+
<Tip>
14+
**Recognition:** GitHub featured this project as one of the [top open source projects of 2018](https://github.blog/news-insights/octoverse/new-open-source-projects/#top-projects-of-2018).
15+
</Tip>
16+
17+
---
18+
19+
## Who Is This For?
20+
21+
This guide is for anyone who wants to learn JavaScript, regardless of your current level.
22+
23+
| If you are... | This guide will help you... |
24+
|---------------|---------------------------|
25+
| **A complete beginner** | Build a solid foundation from the ground up |
26+
| **Self-taught** | Fill gaps in your knowledge |
27+
| **Preparing for interviews** | Understand concepts interviewers commonly ask about |
28+
| **An experienced developer** | Deepen your understanding of how JavaScript works |
29+
30+
There are no prerequisites. If you've never written a line of code, you can start here.
31+
32+
---
33+
34+
## The Original 33 Concepts
35+
36+
These are the original 33 concepts that inspired this project. We've since reorganized and expanded some topics, but this is the foundation:
37+
38+
<AccordionGroup>
39+
<Accordion title="Fundamentals (Concepts 1-6)">
40+
1. **Call Stack** - How JavaScript tracks function execution
41+
2. **Primitive Types** - String, Number, Boolean, Null, Undefined, Symbol, BigInt
42+
3. **Value Types vs Reference Types** - How data is stored and passed
43+
4. **Type Coercion** - Implicit and explicit type conversion
44+
5. **Equality Operators** - == vs === and how comparisons work
45+
6. **Scope and Closures** - Where variables are accessible and how functions remember their environment
46+
</Accordion>
47+
48+
<Accordion title="Functions & Execution (Concepts 7-10)">
49+
7. **Expression vs Statement** - Understanding the difference
50+
8. **IIFE, Modules, and Namespaces** - Code organization patterns
51+
9. **Message Queue and Event Loop** - JavaScript's concurrency model
52+
10. **Timers** - setTimeout, setInterval, and requestAnimationFrame
53+
</Accordion>
54+
55+
<Accordion title="JavaScript Engines (Concepts 11-13)">
56+
11. **JavaScript Engines** - V8, SpiderMonkey, and how JS runs
57+
12. **Bitwise Operators** - Low-level operations and typed arrays
58+
13. **DOM and Layout Trees** - How browsers render pages
59+
</Accordion>
60+
61+
<Accordion title="Object-Oriented JavaScript (Concepts 14-18)">
62+
14. **Factories and Classes** - Object creation patterns
63+
15. **this, call, apply, and bind** - Context and function binding
64+
16. **new, Constructor, instanceof** - Object instantiation
65+
17. **Prototype Inheritance** - JavaScript's inheritance model
66+
18. **Object.create and Object.assign** - Object manipulation methods
67+
</Accordion>
68+
69+
<Accordion title="Functional Programming (Concepts 19-23)">
70+
19. **map, reduce, filter** - Array transformation methods
71+
20. **Pure Functions and Side Effects** - Functional programming basics
72+
21. **Closures** - Functions that remember their scope
73+
22. **Higher-Order Functions** - Functions that operate on functions
74+
23. **Recursion** - Functions that call themselves
75+
</Accordion>
76+
77+
<Accordion title="Async JavaScript (Concepts 24-26)">
78+
24. **Collections and Generators** - Iterables and lazy evaluation
79+
25. **Promises** - Handling asynchronous operations
80+
26. **async/await** - Modern async syntax
81+
</Accordion>
82+
83+
<Accordion title="Advanced Topics (Concepts 27-33)">
84+
27. **Data Structures** - Arrays, Objects, Maps, Sets, and more
85+
28. **Big O Notation** - Algorithm complexity analysis
86+
29. **Algorithms** - Common algorithms in JavaScript
87+
30. **Inheritance and Polymorphism** - OOP principles
88+
31. **Design Patterns** - Proven solutions to common problems
89+
32. **Currying and Composition** - Advanced functional techniques
90+
33. **Clean Code** - Writing maintainable JavaScript
91+
</Accordion>
92+
</AccordionGroup>
93+
94+
---
95+
96+
## What We've Changed
97+
98+
JavaScript and web development have evolved since the original list was created. We've updated this guide to better reflect what modern developers need to know.
99+
100+
### Concepts We Added
101+
102+
| Concept | Why We Added It |
103+
|---------|-----------------|
104+
| **Callbacks** | Essential for understanding async JavaScript before diving into Promises |
105+
| **HTTP and Fetch** | Every web developer needs to know how to make network requests |
106+
| **Web Workers** | Important for performance and running code off the main thread |
107+
| **Error Handling** | Critical for building reliable applications |
108+
| **Regular Expressions** | A fundamental tool for text processing and validation |
109+
| **Modern JS Syntax** | Destructuring, spread operator, and other ES6+ features are now standard |
110+
| **ES Modules** | The official module system for JavaScript |
111+
112+
### Concepts We Removed or Merged
113+
114+
| Original Concept | What Happened |
115+
|------------------|---------------|
116+
| **Expression vs Statement** | Covered within other concept pages where relevant |
117+
| **Timers** | Merged into the Event Loop concept |
118+
| **Bitwise Operators** | Rarely used in day-to-day JavaScript development |
119+
| **new, Constructor, instanceof** | Merged into Factories and Classes |
120+
| **Object.create and Object.assign** | Merged into Object Creation and Prototypes |
121+
122+
<Info>
123+
The goal isn't to have exactly 33 concepts. It's to give you the knowledge you need to truly understand JavaScript.
124+
</Info>
125+
126+
---
127+
128+
## What Makes This Guide Different?
129+
130+
### Learn the Concept, Then Go Deeper
131+
132+
Each concept page teaches you the topic directly with clear explanations and practical code examples. Once you understand the fundamentals, you'll find a curated list of articles, videos, and books to explore further.
133+
134+
### Curated Resources
135+
136+
Every resource is hand-picked from across the web. Instead of one perspective, you get the best explanations from multiple teachers and sources.
137+
138+
### Community-Driven
139+
140+
Hundreds of developers have contributed to this project. Resources are continuously reviewed, updated, and improved by the community.
141+
142+
### Multiple Formats
143+
144+
Everyone learns differently. Each concept includes:
145+
146+
<CardGroup cols={3}>
147+
<Card title="Articles" icon="newspaper">
148+
In-depth written explanations
149+
</Card>
150+
<Card title="Videos" icon="video">
151+
Visual explanations and talks
152+
</Card>
153+
<Card title="Books" icon="book">
154+
Comprehensive deep-dives
155+
</Card>
156+
</CardGroup>
157+
158+
### Available in 40+ Languages
159+
160+
Thanks to our community of translators, this guide is accessible to developers worldwide. Check out the [translations page](/translations) to find your language.
161+
162+
---
163+
164+
## Ready to Continue?
165+
166+
<CardGroup cols={2}>
167+
<Card title="How to Learn" icon="book-open" href="/getting-started/how-to-learn">
168+
Learn how to use this guide effectively
169+
</Card>
170+
<Card title="Prerequisites" icon="wrench" href="/getting-started/prerequisites">
171+
Set up your learning environment
172+
</Card>
173+
</CardGroup>

‎docs/getting-started/how-to-learn.mdx‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
---
2+
title: "How to Learn JavaScript Effectively with This Guide"
3+
sidebarTitle: "How to Learn"
4+
description: "Learn how to study JavaScript effectively. Tips for practicing code, understanding concepts, and getting the most from each lesson in this guide."
5+
---
6+
7+
## How Each Concept Page Works
8+
9+
Every concept page in this guide follows a consistent structure to help you learn effectively:
10+
11+
<Steps>
12+
<Step title="Overview">
13+
Each page starts with a clear explanation of the concept. We break down what it is, why it matters, and how it works in JavaScript.
14+
</Step>
15+
<Step title="Code Examples">
16+
You'll find practical code examples that demonstrate the concept. Run these in your browser's console or code editor to see them in action.
17+
</Step>
18+
<Step title="Common Mistakes">
19+
We highlight the mistakes developers commonly make so you can avoid them.
20+
</Step>
21+
<Step title="Key Takeaways">
22+
A summary of the most important points to remember.
23+
</Step>
24+
<Step title="Curated Resources">
25+
Hand-picked articles, videos, and book recommendations for deeper learning.
26+
</Step>
27+
</Steps>
28+
29+
---
30+
31+
## Types of Resources
32+
33+
Each concept includes multiple types of learning materials. Choose what works best for your learning style:
34+
35+
<CardGroup cols={3}>
36+
<Card title="Articles" icon="newspaper">
37+
**Best for:** Deep understanding
38+
39+
Written tutorials and explanations you can read at your own pace. Great for reference.
40+
</Card>
41+
<Card title="Videos" icon="video">
42+
**Best for:** Visual learners
43+
44+
Watch concepts explained visually. Many include animations and live coding.
45+
</Card>
46+
<Card title="Books" icon="book">
47+
**Best for:** Comprehensive learning
48+
49+
In-depth coverage for when you want to go deep on a topic.
50+
</Card>
51+
</CardGroup>
52+
53+
<Tip>
54+
**Mix it up.** If an article doesn't click, try watching a video on the same topic. Different explanations work for different people.
55+
</Tip>
56+
57+
---
58+
59+
## Tips for Effective Learning
60+
61+
### 1. Don't Just Read - Practice
62+
63+
Reading about JavaScript isn't enough. You need to write code.
64+
65+
```javascript
66+
// Don't just read this example - type it yourself
67+
const numbers = [1, 2, 3, 4, 5]
68+
const doubled = numbers.map(num => num * 2)
69+
console.log(doubled) // [2, 4, 6, 8, 10]
70+
```
71+
72+
Open your browser's console (press F12) or use a code editor and actually run the examples. Modify them. Break them. See what happens.
73+
74+
### 2. Take Your Time
75+
76+
This isn't a race. Some concepts will click immediately. Others might take days or weeks to fully understand. That's normal.
77+
78+
| Concept Type | Typical Time to Understand |
79+
|--------------|---------------------------|
80+
| Basic syntax | Hours |
81+
| Core concepts (scope, closures) | Days to weeks |
82+
| Advanced patterns | Weeks to months |
83+
84+
### 3. Follow the Order (Especially for Beginners)
85+
86+
The concepts build on each other. If you're new to JavaScript, start from the beginning:
87+
88+
1. **Primitive Types** - What are the basic building blocks?
89+
2. **Value vs Reference Types** - How is data stored?
90+
3. **Scope and Closures** - Where can you access variables?
91+
4. **Call Stack** - How does JavaScript execute code?
92+
93+
Jumping ahead might leave gaps in your understanding.
94+
95+
### 4. Revisit Concepts
96+
97+
You won't master a concept in one sitting. Plan to revisit:
98+
99+
<Steps>
100+
<Step title="First Pass">
101+
Read the overview and try the basic examples
102+
</Step>
103+
<Step title="Second Pass (1 week later)">
104+
Explore the curated resources. Watch a video or read an article.
105+
</Step>
106+
<Step title="Third Pass (1 month later)">
107+
Review and apply the concept in a real project
108+
</Step>
109+
</Steps>
110+
111+
### 5. Explain It to Someone Else
112+
113+
The best way to know if you understand something is to explain it. Try:
114+
115+
- Writing a blog post about a concept you learned
116+
- Explaining it to a friend or colleague
117+
- Answering questions on Stack Overflow or Reddit
118+
119+
If you can't explain it simply, you don't understand it well enough yet.
120+
121+
---
122+
123+
## How Much Time Should You Spend?
124+
125+
There's no "right" answer, but here are some guidelines:
126+
127+
| Your Goal | Suggested Pace |
128+
|-----------|---------------|
129+
| Casual learning | 1 concept per week |
130+
| Active study | 2-3 concepts per week |
131+
| Interview prep | 1 concept per day (review mode) |
132+
133+
<Tip>
134+
**Quality over quantity.** It's better to deeply understand 5 concepts than to skim through all 33.
135+
</Tip>
136+
137+
---
138+
139+
## Using the Browser Console
140+
141+
The fastest way to practice is with your browser's built-in console:
142+
143+
<Steps>
144+
<Step title="Open DevTools">
145+
Press **F12** (or **Cmd+Option+J** on Mac) in any browser
146+
</Step>
147+
<Step title="Go to Console Tab">
148+
Click the "Console" tab
149+
</Step>
150+
<Step title="Type JavaScript">
151+
Type any JavaScript code and press Enter to run it
152+
</Step>
153+
</Steps>
154+
155+
```javascript
156+
// Try this in your console right now
157+
const greeting = "Hello, JavaScript!"
158+
console.log(greeting)
159+
```
160+
161+
---
162+
163+
## Ready to Set Up?
164+
165+
<CardGroup cols={2}>
166+
<Card title="Prerequisites" icon="wrench" href="/getting-started/prerequisites">
167+
Get the tools you need to start learning
168+
</Card>
169+
<Card title="Learning Paths" icon="map" href="/getting-started/learning-paths">
170+
Find the right path for your experience level
171+
</Card>
172+
</CardGroup>

0 commit comments

Comments
 (0)