AI Mastery for Beginners: From ChatGPT Clone to Order Bots

Learn HTML basics by creating a .html file, saving it, and viewing Hello world in a browser, while exploring boilerplate, head and body tags and basic IDE tools.

Explore how to navigate and customize VS Code, including the file explorer, extensions, sign-in with GitHub, settings, and keyboard shortcuts, and use the command palette to access actions.

Demonstrates common html tags, including h1 to h6, p, br, and a with href, plus lists (ol, ul), span, and key attributes like id, class, and style for page structure.

Explore how to render and customize HTML form elements, including input types, labels, placeholders, selects, radios, and date and file inputs, with form submission basics.

Learn to build a simple HTML blog using headings, paragraphs, images with alt and src, links, and a form with text, email, and phone inputs, styled with a style tag.

Learn how CSS styles HTML using inline CSS, the style tag, and external CSS via the link tag with rel=stylesheet, mastering selectors, declarations, properties, and values such as background color.

Explore CSS selectors, from element selectors for tags like div, p, and input, to the universal and comma-separated variants, and use class .bg-red and id #heading.

Explore popular CSS properties, including color and background color, width and height, margin and padding, borders and border radius, font weight and family, and positioning (absolute and fixed), with examples.

Learn to use the CSS flexbox system with display: flex, wrap, and gap to create responsive blog post layouts, center content, keep posts under 300px wide, and images 100% wide.

Learn to debug css in the browser using the inspector, resolve conflicting styles on an h1, and experiment with live edits and responsive design modes to test layouts.

Master the JavaScript landscape from vanilla JavaScript to Ecmascript, Babel, and TypeScript. Explore popular frameworks like React, Vue, and Angular, plus Node.js, npm, and Webpack.

Explore JavaScript syntax and file structure with practical comments, indentation, and style guides, and learn to run code in the browser console or with Quokka JS in VS Code.

Learn how to use JavaScript with HTML, including script tags, getElementById, innerHTML, and linking external JavaScript as modules.

Learn how to create JavaScript objects with properties and methods. Explore reading and modifying properties with dot and bracket notation, including nested objects.

learn how to define a JavaScript class, instantiate objects with new, and use a constructor with this to set properties like size, color, and date acquired, replacing duplicate object literals.

Use template literals to render HTML from JavaScript and bridge the HTML presentation layer with the script, injecting dynamic values like bottle.id.

Explore the document object model with JavaScript, querying and selecting elements using querySelector and querySelectorAll, manipulating classes, attributes, and inline styles, and injecting new elements.

Explore JavaScript data types and scope, including string, number, boolean, object, array, null, and undefined, plus const versus let and basic operators.

Explore arrays in JavaScript, from instantiation and array versus object to indexing, length, and methods like push, unshift, shift, pop, join, and find.

Learn to define and call functions in JavaScript using the function keyword, parameters, and return values. Compare regular functions with const arrow functions and apply default parameters to prevent NaN.

Master arrow functions and their this context, comparing anonymous functions that access this. Explore curly braces, implicit and explicit returns, and parameter handling with strings and concatenation.

Learn to pass parameters and return values in functions, log messages with prefixes, destructure objects in React, and use callbacks and higher‑order returns to explore functional programming patterns.

Learn conditional logic in JavaScript by writing if statements, applying comparison operators, and combining conditions with and (&&) and or (||), including else and else if branches.

Explore the switch case statement in JavaScript to price vegetables, using tomato and broccoli, and refactor from if statements with a default case.

Master how to loop through arrays and objects in JavaScript using for each, for loop, for-in, for-of, and map, transforming items and creating new arrays for UI in React.

Learn how to listen to browser events in JavaScript using addEventListener, handling mouse down, mouse up, and key up to update the DOM and capture event data.

Learn how promises in JavaScript handle async operations, using resolve and setTimeout, and how async/await coordinates server requests with DOM updates for responsive web behavior.

Learn to debug JavaScript in the browser with console log, error, debug, and info, plus browser developer tools; set breakpoints, inspect variables, and step through index.js to troubleshoot.

Master the command line interface (CLI) basics, using the terminal across Mac, Windows, and Linux, navigate with cd and pwd, and manage files with ls, mkdir, touch, mv, and cp.

Learn to set up Mac terminal workflows by installing and configuring iTerm2 with brew, applying Solarized dark, and enabling powerlevel10k and oh my zsh.

Learn to set up git bash on Windows, install nerd fonts, configure zsh, install oh my zsh, and enable plugins for a richer, colorized terminal experience.

Install Node.js and npm, explore the command line with node and console.log, compare the long-term support and current releases, and create a Node project with package.json and a start script.

Install and use an npm package in a node app, manage dependencies with package.json and package-lock.json, ignore node_modules with gitignore, and document with readme.md.

Explore version control with GitHub, navigating repositories, commits, diffs, readme pages, and CircleCI integration. Learn branch workflows from master and develop to feature merges in a JavaScript project.

Create a GitHub account and sign in, then create a new repository with an owner and a no-spaces name, choose visibility, and clone it locally with GitHub desktop.

Learn to manage git branches with GitHub desktop, commit and push changes (including package.json and index.js), create develop branch, and merge via pull requests into main.

Master git conflicts through branches A and B, merge strategies, and local resolution using Visual Studio and GitHub Desktop, then protect secrets with a .gitignore and .env files.

Learn how TypeScript adds type safety to JavaScript with explicit typing, interfaces, optional properties, and typed functions, enabling safer handling of numbers, strings, arrays, and objects.

Explore the React.js framework by creating a TypeScript project with Create React App, installing dependencies, running npm start, and launching a local server at localhost:3000.

Explore the React app's file structure, including public and src folders, index.html, root div, and essential config like tsconfig and package.json.

Learn to create and render React components with TSX, organize a components folder, and import and render hero and paragraph components in app.tsx using JSX.

Master JSX in React.js by writing HTML inside JavaScript functions, explore the virtual DOM, className and onClick traits, fragments, and rendering JavaScript inside JSX with curly braces.

AI mastery for beginners: learn how props power React components with TypeScript, typing a paragraph component with a message, and destructuring props for cleaner code; explore rest/spread and style handling.

Explore stateful components in React, building a button component with props and children, using useState to toggle state and apply dynamic styles, while learning TypeScript and lifecycle methods.

demonstrates conditional rendering in a React app using use state, a toggle button, and a ternary operator to show one of two paragraphs; explains passing state via props or callbacks.

Learn to implement the React useContext hook by building a logs provider that uses a context to share a log-adding function and a logs array across components.

Learn to build reusable custom hooks in React by wrapping use context with a use logs hook, refactoring components, and extracting business logic like handle click and style.

Explore the React useEffect hook to manage component lifecycle—mount, unmount, and updates—using dependency arrays and isToggle changes to trigger actions.

Explore Chakra UI as a design system to speed UI development, install dependencies, wrap your app with ChakraProvider, and build interfaces using typography, text, lists, icons, and buttons.

Start a new React project with a TypeScript template, add Chakra UI, and implement a sidebar navigation that lists contacts from a context provider with mock data.

Add navigation to a contacts app using React Router Dom, set up create browser router and router provider, and render dynamic contact details with useParams and an outlet.

Build navigation for a contact app using link elements and useNavigate, add a new contact route, and render a Chakra UI form with full name and description fields.

Implement form validation using React Hook Form in a contact app, registering fields, showing error messages via Chakra UI, adding a contact via context, and navigating to the new entry.

Build full crud functionality by adding edit and delete for contacts, reusing the contact form, creating id/edit routes, and wiring navigation, params, and context-based updates.