Learning JS

Step 1: Stop Obsessing, Start Building (Week 1)

• Pick one resource and commit. Most tutorials cover the same basics—don’t waste weeks searching for the “perfect” one.
• Aim to get your first “Hello World” running in under an hour. Start coding on day one instead of passively consuming content.

Step 2: Learn the Bare Minimum, Then Build (Weeks 2–3)

• Follow the 80/20 rule: learn the 20% of concepts you’ll use 80% of the time.
• Build with the basics instead of trying to memorize every JavaScript method.
• Get foundations right:
• HTML: headings, paragraphs, divs/spans, forms, inputs, links, images
• CSS: selectors (classes, IDs), Flexbox, media queries
• Git: create a repo, run init, status, add, commit, push

Step 3: Master Core JavaScript (Weeks 4–8)

• Variables & Data Types: var, let, const, primitives vs references
• Operators & Control Flow: arithmetic, === vs ==, &&, ||, ternary, if/else, switch, loops
• Functions: declarations, expressions, arrow functions, and higher-order methods (map, filter, reduce)
• Arrays: create, access, update, and use methods like map, filter, forEach, push, pop
• Objects: create, access properties, and iterate with Object.keys, Object.values, Object.entries

Step 4: Make It Interactive (Weeks 9–12)

• DOM Manipulation:
• querySelector, getElementById
• innerHTML, textContent, .style
• Add/remove classes, create/remove elements
• Handle events with addEventListener(click, form, keyup)
• Local Storage & Async JS:
• localStorage: setItem, getItem, removeItem
• Promises and async/await
• Fetch API with real data (weather, jokes, any JSON API)

Step 5: Build Real Projects, Not Tutorials (Weeks 13–20)

Escape tutorial hell by actively building and modifying projects instead of copying them line by line.

Three suggested projects:

• Personal Finance Tracker
  • Data entry with HTML forms
  • LocalStorage for persistence
  • DOM updates for displaying data
  • Simple charts with Chart.js
  • CSV export option
• Task Management System
  • CRUD operations (Create, Read, Update, Delete)
  • Drag-and-drop functionality
  • LocalStorage with validation
  • Responsive design
  • Search and filter tasks
• Real-Time Weather Dashboard
  • Fetch API + async/await
  • Geolocation API for location-based weather
  • Dynamic DOM updates
  • Error handling for failed requests
  • LocalStorage for favorite cities

Step 6: Think Bigger (Weeks 21+)

• Larger projects teach real-world skills:
• Breaking down complex problems
• Structuring bigger codebases
• Handling messy, unpredictable requirements
• Debugging across multiple files

Step 7: Learn to Read Code (Ongoing)

• Most development time is spent reading code, not writing it.
• Clone open-source projects from GitHub and study patterns.
• Use debugger tools to step through code.
• Master browser dev tools.
• Use editor shortcuts (e.g., Ctrl+Click) to navigate functions.

Step 8: Modern Workflow (Weeks 25–32)

• After building a strong JavaScript foundation:
• Learn React basics: components, JSX, useState, useEffect
• Understand why frameworks exist and what problems they solve
• Learn testing with Jest
• Set up build processes with Vite
• Understand package.json and npm basics
• Accept that modern projects include many dependencies—don’t panic

The AI Integration Strategy

• Use AI wisely—follow the 20-minute rule: try first, then ask.
• Best uses for AI:
  • Explaining confusing concepts
  • Reviewing and improving code
  • Debugging stubborn errors
  • Generating practice problems

Common Mistakes That Kill Progress

1. Productive Procrastination: spending weeks preparing to learn instead of coding.
2. Shiny Object Syndrome: jumping between languages and frameworks too often.
3. Tutorial Hell: consuming tutorials endlessly without applying knowledge.
4. Avoiding Struggle: relying on AI/Stack Overflow instantly instead of problem-solving.

The Learning Strategy That Works

• Build in Public
  • Share progress on Twitter, LinkedIn, or YouTube.
  • Find accountability partners and mentors.
  • Build a visible portfolio.
  • Connect with other learners and devs.
  • Show proof of consistent progress to future employers.
• Daily Consistency Over Intensity
  • Code for 1–2 hours daily.
  • Consistency matters more than occasional long bursts.
  • Missing one day can easily snowball into missing weeks.
• Focus, Then Expand
  • Stick with JavaScript for at least 6 months.
  • Push through difficulties instead of hopping to another stack.
  • Deep knowledge in one ecosystem beats shallow knowledge in many.

These notes were inspired by "How I Would Learn JavaScript If I Could Start Over". If you want to watch the full explanation, check out the original video.