Objective: Understand where JS runs, how to include it, and use dev tools.

• Where JS runs (browser/Node), <script> placement, defer
• Console, console.log, errors, DevTools
• Strict mode, ES6 overview

Deliverable ✅ app.js linked to portfolio; log site version and greet user.

Objective: Work with primitives, let/const, and basic expressions.

• let, const, var (why to avoid var)
• Types: string, number, boolean, null, undefined, bigint, symbol
• Template literals, arithmetic, comparison, logical operators

Mini-Project ✅ Mini price calculator (subtotal, tax, total) in console + DOM printout.

Objective: Add logic with conditionals and loops.

• if/else, switch, truthy/falsy
• Loops: for, while, for…of, Array.prototype.forEach
• Guard clauses, early returns

Portfolio Task ✅ Feature flags: based on a boolean, show/hide a promo banner or beta badge.

Objective: Write reusable functions; understand scope and closures.

• Function declarations vs expressions, arrow functions
• Parameters, defaults, rest/spread
• Scope (global/block/function), closures (intro)

Deliverable ✅ utils.js with 3+ pure functions (e.g., formatCurrency, slugify, clamp).

Objective: Manipulate structured data cleanly.

• Array methods: map, filter, reduce, find, some/every, sort
• Objects: destructuring, shorthand properties, computed keys
• JSON basics

Mini-Project ✅ Data-driven portfolio grid: render projects from an array of objects.

Objective: Read and update the page dynamically.

• Querying elements, creating nodes, classList, dataset
• Insert/update/remove; performance tips (fragments)
• Measuring and reading attributes

Deliverable ✅ Build “Recent Projects” section entirely via JS from data; lazy add 6+ cards.

Objective: Respond to user actions.

• addEventListener, event object, delegation
• Keyboard and click events; accessibility tips (focus, ARIA)
• UI patterns: mobile nav toggle, tabs, accordion, modal

Mini-Project (choose one) ✅ Mobile menu toggle with outside-click close • Tabs by category • Modal for enlarged screenshots

Objective: Validate user input and give UX feedback.

• Accessing inputs, change/input/submit events
• HTML5 validation APIs, custom messages
• Error states, success states, preventing submit

Deliverable ✅ Contact form validation (name, email, message); inline errors; success reset.

Objective: Get data from the web and persist preferences locally.

• fetch, responses, .json(), error handling
• async/await, try/catch, loading states, basic retries
• localStorage/sessionStorage for theme, menu state, filters

Mini-Projects ✅ “Latest GitHub Repos” widget • Dark Mode toggle persisted to localStorage

Objective: Integrate everything into your live portfolio.

• JS-rendered sections: Projects or Testimonials from a data array
• Interactivity: At least two patterns (e.g., mobile nav + tabs/modal/accordion)
• Forms: Client-side validation with helpful messages
• Async: Fetch external data (e.g., GitHub repos, public JSON placeholder)
• State: Persist at least one preference in localStorage (e.g., dark mode)
• Code Quality: Separate utils.js, data.js, app.js; comments + simple module pattern

Stretch Goals Debounced search • “Back to top” smooth scroll • Intersection Observer to animate cards on scroll