# JavaScript for Web Dev

## Docs

- [Async/await](https://js.maxbraglia.com/async-apis/async-await.md): Write asynchronous code that reads like synchronous code
- [Callbacks](https://js.maxbraglia.com/async-apis/callbacks.md): Understand the original async pattern in JavaScript and why we moved on
- [Error handling](https://js.maxbraglia.com/async-apis/error-handling.md): Handle errors gracefully in your API calls and async code
- [Fetching data from APIs](https://js.maxbraglia.com/async-apis/fetch-basics.md): Make HTTP requests to your FastAPI backend using fetch and async/await
- [Handling responses](https://js.maxbraglia.com/async-apis/handling-responses.md): Parse API responses and work with different response formats
- [Loading states](https://js.maxbraglia.com/async-apis/loading-states.md): Show users what's happening while data is being fetched
- [Promises](https://js.maxbraglia.com/async-apis/promises.md): Handle async operations with JavaScript Promises
- [Why async matters](https://js.maxbraglia.com/async-apis/why-async-matters.md): Understand why JavaScript handles tasks asynchronously and what that means for your code
- [Creating elements](https://js.maxbraglia.com/dom-browser/creating-elements.md): Dynamically add new HTML elements to the page with JavaScript
- [Browser DevTools](https://js.maxbraglia.com/dom-browser/dev-tools.md): Use browser developer tools to inspect, debug, and test your JavaScript
- [Event listeners](https://js.maxbraglia.com/dom-browser/event-listeners.md): Respond to user interactions like clicks, keyboard input, and more
- [Form handling](https://js.maxbraglia.com/dom-browser/form-handling.md): Get form values, validate input, and handle form submissions
- [Local storage](https://js.maxbraglia.com/dom-browser/local-storage.md): Persist data in the browser between page loads using localStorage
- [Modifying elements](https://js.maxbraglia.com/dom-browser/modifying-elements.md): Change text, styles, attributes, and classes of HTML elements
- [Selecting elements](https://js.maxbraglia.com/dom-browser/selecting-elements.md): Find and target HTML elements on the page using JavaScript
- [What is the DOM](https://js.maxbraglia.com/dom-browser/what-is-dom.md): Understand how browsers represent web pages as a tree of objects you can manipulate
- [API client layer](https://js.maxbraglia.com/full-stack/api-client-layer.md): Separate API calls from components for cleaner, more maintainable code
- [Create operation](https://js.maxbraglia.com/full-stack/create-operation.md): Build a form that sends data to your FastAPI backend and creates a new record
- [Delete operation](https://js.maxbraglia.com/full-stack/delete-operation.md): Remove records with confirmation and proper error handling
- [Environment variables](https://js.maxbraglia.com/full-stack/environment-variables.md): Manage configuration and secrets across development and production
- [Error handling across the stack](https://js.maxbraglia.com/full-stack/error-handling-stack.md): Handle errors consistently from FastAPI to React for a great user experience
- [Full example walkthrough](https://js.maxbraglia.com/full-stack/full-example-walkthrough.md): See a complete CRUD application with React and FastAPI working together
- [Loading states everywhere](https://js.maxbraglia.com/full-stack/loading-states-everywhere.md): Provide consistent loading feedback throughout your full-stack application
- [Project structure](https://js.maxbraglia.com/full-stack/project-structure.md): Organize your full-stack project with separate frontend and backend folders
- [Read operation](https://js.maxbraglia.com/full-stack/read-operation.md): Fetch and display data from your FastAPI backend in React components
- [Type safety](https://js.maxbraglia.com/full-stack/type-safety.md): Ensure your frontend and backend agree on data shapes
- [Understanding CORS](https://js.maxbraglia.com/full-stack/understanding-cors.md): Fix cross-origin errors when your React frontend talks to your FastAPI backend
- [Update operation](https://js.maxbraglia.com/full-stack/update-operation.md): Edit existing records with a form that sends PUT requests to your API
- [Your first JavaScript file](https://js.maxbraglia.com/getting-started/first-javascript-file.md): Create and run your first JavaScript program
- [Installing Node.js](https://js.maxbraglia.com/getting-started/installing-node.md): Set up Node.js on your machine so you can run JavaScript outside the browser
- [Project setup](https://js.maxbraglia.com/getting-started/project-setup.md): Initialize a JavaScript project with npm and configure the basics
- [Running JavaScript](https://js.maxbraglia.com/getting-started/running-javascript.md): Different ways to run JavaScript code during development
- [Understanding npm](https://js.maxbraglia.com/getting-started/understanding-npm.md): Learn how npm manages packages and dependencies for JavaScript projects
- [Setting up VS Code](https://js.maxbraglia.com/getting-started/vscode-setup.md): Configure VS Code with the essential extensions for JavaScript development
- [How to follow this course](https://js.maxbraglia.com/introduction/how-to-follow.md): Tips for getting the most out of each lesson
- [Is this for you?](https://js.maxbraglia.com/introduction/is-this-for-you.md): Find out if this course matches your background and goals
- [Welcome to JavaScript for Web Dev](https://js.maxbraglia.com/introduction/welcome.md): What you'll build, what you'll learn, and how this course is structured
- [Arrow functions](https://js.maxbraglia.com/javascript-core/arrow-functions.md): Write shorter, cleaner functions with the modern arrow syntax
- [Closures](https://js.maxbraglia.com/javascript-core/closures.md): Understand how functions remember their surrounding variables
- [Comments](https://js.maxbraglia.com/javascript-core/comments.md): Add notes and documentation to your JavaScript code
- [Data types](https://js.maxbraglia.com/javascript-core/data-types.md): Understand the different types of data JavaScript can work with
- [Functions basics](https://js.maxbraglia.com/javascript-core/functions-basics.md): Write reusable blocks of code with JavaScript functions
- [JavaScript basics](https://js.maxbraglia.com/javascript-core/overview.md): What JavaScript is, how it fits into web development, and essential syntax
- [Parameters and arguments](https://js.maxbraglia.com/javascript-core/parameters-arguments.md): Pass data into functions with default values and destructuring
- [Template literals](https://js.maxbraglia.com/javascript-core/template-literals.md): Build dynamic strings with embedded expressions using backticks
- [Understanding scope](https://js.maxbraglia.com/javascript-core/understanding-scope.md): Learn how JavaScript determines where variables are accessible
- [Variables](https://js.maxbraglia.com/javascript-core/variables.md): Store and manage data in your JavaScript programs using let and const
- [Course wrap-up](https://js.maxbraglia.com/next-steps/course-wrap-up.md): Review what you've learned and how it all connects
- [Deployment basics](https://js.maxbraglia.com/next-steps/deployment-basics.md): Get your full-stack application live on the internet
- [Get help](https://js.maxbraglia.com/next-steps/get-help.md): Join the community, ask questions, and contribute to the course
- [Recommended resources](https://js.maxbraglia.com/next-steps/recommended-resources.md): Continue learning with these curated resources for JavaScript and React
- [The essential 20 percent](https://js.maxbraglia.com/next-steps/the-essential-20-percent.md): A quick reference of the JavaScript concepts you'll use 80% of the time
- [Component composition](https://js.maxbraglia.com/react-essentials/component-composition.md): Structure your React app with smart and presentational components
- [Components and JSX](https://js.maxbraglia.com/react-essentials/components-jsx.md): Build UI with reusable components using JSX syntax
- [Conditional rendering](https://js.maxbraglia.com/react-essentials/conditional-rendering.md): Show different UI based on state and conditions
- [Forms in React](https://js.maxbraglia.com/react-essentials/forms-in-react.md): Build controlled forms that sync input values with React state
- [List rendering](https://js.maxbraglia.com/react-essentials/list-rendering.md): Render arrays of data as lists of components
- [Props](https://js.maxbraglia.com/react-essentials/props.md): Pass data between React components using props
- [Setting up a React project](https://js.maxbraglia.com/react-essentials/setup-react-project.md): Create a new React project with Vite and run it locally
- [Side effects with useEffect](https://js.maxbraglia.com/react-essentials/use-effect.md): Fetch data, set up subscriptions, and run code when your component mounts
- [Managing state with useState](https://js.maxbraglia.com/react-essentials/use-state.md): Add interactive, dynamic data to your React components
- [What is React](https://js.maxbraglia.com/react-essentials/what-is-react.md): Understand what React is, why it exists, and how it helps you build web apps
- [Array methods](https://js.maxbraglia.com/working-with-data/array-methods.md): Transform, filter, and manipulate arrays with the essential 20% of methods
- [Arrays](https://js.maxbraglia.com/working-with-data/arrays.md): Store and access ordered collections of data with JavaScript arrays
- [Conditionals](https://js.maxbraglia.com/working-with-data/conditionals.md): Make decisions in your code with if/else, ternary operators, and logical operators
- [Destructuring](https://js.maxbraglia.com/working-with-data/destructuring.md): Extract values from objects and arrays into individual variables
- [JSON basics](https://js.maxbraglia.com/working-with-data/json-basics.md): Understand JSON format and how to convert between JSON and JavaScript objects
- [Loops](https://js.maxbraglia.com/working-with-data/loops.md): Repeat actions and iterate over data with JavaScript loops
- [Objects](https://js.maxbraglia.com/working-with-data/objects.md): Store data as key-value pairs with JavaScript objects
- [Spread operator](https://js.maxbraglia.com/working-with-data/spread-operator.md): Copy, merge, and expand arrays and objects with the spread syntax

## Optional

- [FastAPI + React Repo](https://github.com/jmedia65/fastapi-react-full-stack)
- [MaxterMedia](https://maxtermedia.com/)