Overview:

• What is JavaScript?: Purpose, history, and use in web development.
• Setting Up Your Environment: Using the browser console, code editors (VS Code).
• Embedding JavaScript: Inline, internal, and external scripts in HTML.
• Variables and Data Types: let, const, var, data types (number, string, boolean, null, undefined, symbol).
• Operators: Arithmetic, assignment, comparison, logical, and conditional (? :) operators.
• Conditionals: if, else if, else, and switch.
• Loops: for, while, do...while, and for...of.
• Exercises

Javascript Objects:

• Javascript objects basics
• Object Creation: Different ways to create objects (object literals, Object() constructor, Object.create()).
• Properties and Methods: Understanding properties (key-value pairs) and methods (functions as values in objects).
• Accessing Properties: Dot notation (object.property) and bracket notation (object['property']).
• Object Manipulation: Adding properties, Updating properties, Deleting properties.
• Object Methods: Object.keys(), Object.values().

Javascript Arrays:

• Javascript arrays basics
• Array creation, manipulation (push, pop, shift, unshift etc...)
• Array Iteration: for, forEach, for...of
• Searching and Filtering Arrays
• Other Array methods

Overview:

• Build an application that makes use of arrays and objects

Possible Options:

• Todo List
• Contact Book
• Flashcard App
• Budget Tracker
• Recipe App

Overview:

• Introduction to the Document Object Model (DOM): Understanding the DOM tree.
• Selecting Elements: Using getElementById, querySelector, and querySelectorAll.
• Modifying Elements: Changing text content, styles, attributes, and adding/removing classes.
• Creating and Deleting Elements.
• Events: Event listeners, types of events (click, mouseover, keyUp, etc.), and event propagation (bubbling vs. capturing).
• Exercises

Overview:

• Browser APIs: window, document, console, alert, confirm, prompt.
• Working with Forms: Accessing form data, form validation.
• Timers: setTimeout, setInterval, and clearing them.
• Exercises

Modern JavaScript (ES6+):

• Spread and rest operators.
• Template literals
• Modules in JavaScript: import and export.
• NPM and Packages: Installing and using external libraries with npm.
• Local Storage vs Session Storage
• Exercises

Asynchronous JavaScript:

• Introduction to callbacks, Promises, and async/await.
• Making API requests with Fetch.

Error Handling and Debugging:

• Using try, catch for error handling.

Project: Build an app using the Fetch API.

React Basics:

• Setting up a React project with Create React App.
• Setting up a React project with Vite.
• Understanding JSX and the component-based architecture.

Components and Props:

• Building functional components and passing props.

Exercise

State Management:

• Using useState to manage component state.
• Updating state and handling user interactions.

React Events and Forms:

• Handling events in React and managing forms.

Exercises

React Router Basics:

• Setting up React Router for single-page applications.
• Routing between pages and components.

Component Lifecycle and Side Effects

• Using useEffect for side effects and data fetching.

Project

• Create a single-page React app with basic routing and interactive components.

Hooks and Advanced State Management:

• Understanding custom hooks.
• Intro to useReducer for more complex state management.

Context API for Global State:

• Using React Context for shared state.

Advanced React Router:

• Nested routes and route parameters.

Project:

• Build a feature-rich React application, such as a blog or e-commerce site, with dynamic routing and global state.

Full-Stack Project:

• Front-end integration with back-end APIs (optional REST API or Firebase)..

Deployment and Optimization

• Building and optimizing for production
• Deployment strategies: hosting on platforms like Netlify, Vercel, or GitHub Pages.

Project:

• Complete and deploy the capstone project.

Resume tips for front-end developers