Learn Web Development by Creating a Food Ordering App

Explore HTML fundamentals by creating a .html file, viewing it in a browser, and using the Live Server extension in VS Code to render updates in real time.

Master VS Code by exploring the file explorer, installing extensions, customizing themes and settings, and using keyboard shortcuts and the command palette to open and split editors.

Learn common HTML tags, including headings (h1–h6), paragraphs, anchors with href and id, lists (ol and ul), and inline elements like span, with basic class and style attributes.

Learn how HTML form elements render user inputs using the form tag, input types, labels, and action, then build text, number, date, file, select, radio, and checkbox interfaces.

Create a blog page in HTML using h1 and h2, paragraphs, images with alt text, links, and a form with text, phone, and email inputs; style divs with pink background.

Learn how css styles html with inline css, a style tag, and external css via blog.css and the link tag, covering selectors, declarations, and the colon and semicolon syntax.

Explore how css selectors target elements, classes, and IDs to style a web page, including element selectors, comma-separated selectors, the universal selector, and reusable class patterns.

Learn popular CSS properties, including color and background color, width and height with min/max, margin and padding, borders and border radius, font weight and family, and element positioning.

Explore how the css display property becomes flex and use flexbox to arrange posts with wrap, gap, justify content center, and align items center.

Learn to debug css by using the browser inspector to resolve conflicting styles, perform live edits, and test flexbox layouts. Use responsive design mode to preview pages on various devices.

Explore the modern JavaScript landscape from vanilla JavaScript and ECMAScript to TypeScript, React, Vue, and Angular, with insights into Babel, NPM, Webpack, and NodeJS.

Master JavaScript syntax basics—from comments and indentation to semicolons and quotes—while running code in browser dev tools or VS Code with Quokka using a sample bottle object.

Learn to run JavaScript in HTML by adding a script tag, linking external files, and using modules to export and import values like bottle from sample.js.

Explore creating JavaScript objects with properties as key-value pairs, access them via dot or square bracket notation, and add object methods using this, including nesting objects for bottle dimensions.

Learn to replace repetitive object literals with JavaScript classes, instantiate with new, and use constructors to set properties, including date acquired via the date object.

Learn to use template literals to render html from JavaScript, targeting the DOM with document.body.innerHTML and embedding bottle properties like id, size, and color.

Explore the DOM to query and manipulate web page elements with JavaScript, using CSS selectors, and applying class, attribute, and style changes, plus creating and injecting new elements.

Explore JavaScript data types, including strings, numbers, booleans, objects, and arrays, and learn const versus let, strict equality, and arithmetic and logical operators with increment and modulo.

Learn JavaScript arrays: instantiate, index with zero-based positions, and use length. Use push, unshift, shift, pop, join; and loop with forEach and find using predicates.

Explore how to define and call JavaScript functions, pass parameters and arguments, return values, handle defaults, and compare function declarations with arrow functions.

Explore arrow functions, their handling of this vs anonymous functions, and syntax variations like parentheses, curly braces with explicit return, and multi-parameter options.

Learn to pass parameters and return values from functions, using object parameters, destructuring, callbacks, and level-based logs with a date prefix via string interpolation.

Explore how to implement if conditions and logical operators in JavaScript, using comparisons, truthy/falsy values, and and/or logic to control flow with hours.

Learn how to refactor a JavaScript price function from an if-else chain to a switch statement, using tomato and broccoli cases and a default that returns zero.

Explore looping in JavaScript by using forEach, for loop, for-in, and for-of to iterate arrays, then learn how map transforms an array into a new one, with practical examples.

Explore how to use JavaScript events to respond to mouse down, mouse up, and key up, wiring event listeners to the DOM and updating the UI.

Learn how promises manage asynchronous operations in JavaScript, using setTimeout, resolve, and async/await to handle server delays while updating the dom with mouse down and key up events.

Debug JavaScript in the browser with console logs, errors, and info, and use the browser's developer tools to set breakpoints, inspect variables, and step through code to verify dom updates.

Master the command line interface (CLI) basics across macOS, Windows, and Linux, navigating with cd and pwd, listing with ls, and creating files with mkdir and touch.

Learn to set up iTerm2 on macOS, install and customize with Homebrew, solarized themes, oh my zsh and powerlevel10k, and tailor prompts, fonts, and shortcuts for an enhanced terminal.

Guide to setting up git bash on Windows, installing oh my zsh, nerd fonts, and zsh plugins, with config steps for mint thai rc, git prompt, and bash rc.

Learn to install and use Node.js and npm, run JavaScript in the command line interface, create a Node project with package.json, and run a local server via a start script.

Install and manage npm dependencies in a node app, explore package.json, package-lock.json, and node_modules, and use npm start and import syntax for modern workflows.

Explore version control with GitHub by inspecting repositories, commits, diffs, and readme files, and understand how branches such as master and develop enable safe feature work and merging.

Create a GitHub account, sign in, and clone a repository to your local machine using GitHub Desktop, then configure the path to begin coding.

Learn how to create a develop branch, commit and push changes, and merge via a pull request into main using GitHub Desktop and VS Code.

Explore how to create and resolve git conflicts across branches and merge strategies. Learn to use gitignore for secret management, ignore node_modules and dot env files, and push clean changes.

Explore how TypeScript adds types to JavaScript, enforcing consistent data shapes and improving developer experience. Create typed variables, arrays, interfaces, type aliases, and typed functions with code examples.

Bootstrapping a React app with the TypeScript template via Create React App, install dependencies, and run the dev server to view on localhost 3000.

Explore the React app's file and folder structure, including public and src directories, index.html, index.tsx, app.tsx, and assets, with notes on routing, hot reloading, and design system usage.

Learn to build React components, including hero and paragraph, organize a components folder in a TypeScript project, and render with JSX.

Learn JSX in React.js, writing HTML inside JavaScript functions in a single TSX file. Discover virtual DOM basics, JSX attributes like className, onClick, fragments, and embedding JavaScript with curly braces.

Learn how to use props in React by passing a message to a paragraph component, type props with a TypeScript interface, and destructure props in tsx.

Learn how to build stateful React components with props, children, and use state; implement a toggle button, handle on click, and apply background color with a ternary operator.

Explore conditional rendering in React by using useState and onClick to toggle between two paragraphs, demonstrating a boolean state, props, and a ternary pattern for dynamic JSX.

Use the useContext hook to build a logs context and provider in React, sharing a logs array and addLog function across components while avoiding prop drilling.

Learn to create reusable custom hooks in React by wrapping useContext, exporting a useLogs hook, and extracting button behavior with a useButtonProps hook to manage handleClick, toggled state, and styling.

Explore how useEffect controls the React component lifecycle, handling mounting, updating, and unmounting, with empty dependencies triggering on mount and dependencies responding to state changes.

Explore Chakra UI design system integration by wrapping your app with the Chakra provider, installing via npm, then build typography, text, lists, icons, and a styled button using Chakra components.

Build a contact app with Create React App using a TypeScript template, integrate Chakra UI, and implement a context provider to render a mock contact list in the sidebar.

Learn to add navigation to a React app using React Router DOM with create browser router, router provider, outlet, and dynamic id routes.

Wire navigation with useNavigate and currying to open contact routes and the new contact route, then build a Chakra UI contact form for adding new contacts.

Use react-hook-form to implement form validation by registering inputs, handling submit, and showing errors in the contact form, then add the contact to context and navigate to the new entry.

Implement edit and delete functionality for contacts by wiring routes, prefilled forms, and context methods, updating navigation and reflecting changes in the contact list.