Full-Stack AI Prompt Web Development Course 2026

Explore html basics, including the html tag, head, and body, how tags tell browsers to display content, save files as .html, and use ai prompts to generate pages.

Explore html elements and tags, with opening and closing brackets, and learn how p, h1–h6, and div create content containers; see how ai prompts help explain and generate related code.

Master the anchor (a) tag for internal and external navigation using href targets. Explore same-page jumps, new-tab links, id-based anchors, and simple examples from about pages to external sites.

Build web forms using HTML inputs for first and last name, email, date, time, and password, and use AI prompts to generate and customize login, registration, and contact forms.

Create HTML tables using table, tr, and td, with headers (first name, last name, email), add rows, borders, and use AI prompts to generate table data.

Learn to use the HTML img tag to display images with src, alt, width, and height, including self-closing syntax; explore generating images with AI prompts.

Master the ul and li HTML tags to display bullet points, and learn how to generate a UL-based list using an AI prompt, with practical coding examples.

Learn semantic HTML and how ai prompts generate semantic HTML using header, nav, main, section, and footer, highlighting seo benefits and cross-browser compatibility for teams.

Discover how CSS applies color, background, padding, margin, border, and font size to HTML elements, while AI prompts streamline styling for your webpages.

Learn how to add CSS to HTML using inline, internal, and external methods. Link CSS files, style with classes and IDs, and preview hover effects.

Style html pages with ai prompts to generate css and apply styling for forms, tables, images, and lists, linking styles and previewing semantic sections.

Learn to build a portfolio website with AI prompts, creating pages home, about me, services, pricing, and contact us, by breaking tasks into small prompts for each component.

Create a software developer portfolio home page using semantic HTML and a chosen primary color, generate CSS and assets, and structure folders for CSS, images, and JavaScript.

Update the navigation bar to include about me, services, and contact pages; style it professionally and generate the about me page with the provided image.

Create a services page with an AI prompt, following the About.me method, and customize the page content, navigation, and styling to be beautiful, professional, and user friendly.

Create a professional pricing page from a prompt, using semantic HTML for SEO and CSS styling to be beautiful and user friendly, including pricing plans and payment options.

Build the contact us page for a full-stack ai prompt site using the same prompt, generate a banner and CSS, and configure the form with name, address, and project details.

The lecture shows updating the portfolio site by replacing the banner image with banner.png, left-aligning the contact form labels, and fixing the submit button visibility through CSS.

learn how bootstrap, a free open source CSS framework, speeds website development with pre-styled components and responsive design, using an AI prompt to build a portfolio site.

Explore what JavaScript is and why it powers interactive websites, using causal IDE and AI prompts to write code, validate forms, show interactive elements, and perform in-browser calculations.

Print messages to the console with console.log and run JavaScript via node or the browser, then link scripts in HTML and explore AI prompts to generate code.

Explore JavaScript variables and data types, including let, const, and var under ES6, and use an AI prompt to generate and print string, number, and boolean values to the console.

Explore JavaScript operators in action—arithmetic, assignment, comparison, and logical operators—through practical examples. Learn to prompt AI to generate two programs: arithmetic operations and a grade checker using scores.

Master JavaScript arrays by declaring variables that hold multiple values, indexing from zero, printing arrays or specific elements with console.log, and exploring AI prompts to generate array-based code.

Learn objects in JavaScript and AI prompts by building object properties, printing values with dot notation, and working with an array of cars to access make and model.

Master if-else statements in JavaScript and learn how to prompt an AI to generate simple, no-function programs for sign checks and student grade evaluation. Explore if-else chains including adult/teen/child logic.

Master JavaScript switch statements to replace if-else chains, with admin vs. user role checks and day-of-week messages, plus prompting AI to generate the corresponding code.

Master for loops in JavaScript to print array items and object properties, initialize counters, and log results with console.log, illustrated by fruits and cars examples.

Explore while loops in JavaScript and how they differ from for loops, through an AI prompt approach that initializes, checks, and increments separately to print even numbers.

Master the forEach method to loop through an array and run a function on each element. Print items and optionally their index using a JavaScript arrow function.

Explore how the JavaScript map function transforms every array item into a new array, using an arrow function to double numbers and plus ten, then print results.

Master JavaScript functions: declarations, parameters, and arrow functions, through practical examples, and see AI prompts generate a sum program and a grade checker using if else or switch.

Learn how to read user input in JavaScript using the prompt function, display personalized messages via the console, and build two programs: information collection and driving eligibility checker.

Learn to implement exception handling in JavaScript using try and catch, throwing errors, and user friendly messages to prevent crashes, log issues, and improve stability and user experience.

Build a pure JavaScript admission checker using an AI prompt to collect user data and evaluate eligibility for the university software engineering program, displaying results in a dynamic HTML interface.

Build an iPhone-like calculator using HTML, CSS, and JavaScript, focusing on the user interface first and then implementing functionality with two AI prompts.

Explore what react is, why to use it, and how to write code with react js using causal IDE, enabling reusable components, a virtual dom, and scalable UIs.

Learn to install react.js with vite, a fast tool for modern web apps, and create a react project using node.js and yarn, then start the dev server.

Explore React components and folder structure, using JSX-based function components in src, public assets, and export-import patterns to build a header and live-reload with yarn dev.

Explore JSX basics in React, writing HTML inside JavaScript, building a blog component, exporting it, and using AI prompts to guide simple component creation.

Learn how props in React.js pass information from a parent to a child component and display user information using an AI prompt.

Master React event handling by wiring onClick, onChange, and onSubmit in camelCase, building interactive components that respond to user actions and trigger AI prompts or alerts.

Explore React state management: store dynamic data in a component, trigger automatic rerenders on user actions, and use useState to build interactive counters and names, guided by an AI prompt.

Master conditional rendering in React.js by using the ternary operator and useState to toggle between rent and sale components, guided by an AI prompt.

Render lists in react by mapping arrays to jsx elements with unique keys, illustrated by fruits and student objects and an ai prompt to generate components.

Learn how forms in React.js use state-driven controlled components to collect user input, validate data, and log submissions generated by an ai prompt, with live feedback.

Understand how the useEffect hook runs code automatically after a component renders. See practical examples of fetching data, updating on value changes, and using AI prompts to generate components.

Explore React hooks and custom hooks, using useState and useEffect to manage state and side effects, then create a reusable hook that returns a configurable car list.

Learn to style React components with inline styles, CSS files, CSS modules, and styled components, and use AI prompts to refactor and beautify UI, including a ten-student display.

Demonstrate using packages in a React project to save time and add features, install via yarn add, import icons, and use an AI prompt to generate a component.

Learn to implement routing in React and AI prompts, enabling navigation between home and about us pages in a single page application using react router dom and a reusable nav.

Learn to fetch data from an API in a React app using get requests with Axios, display comments and users from JSON placeholder, and use AI prompts to generate components.

post data to an api with react and azure's post method. save new users and products to the database using json handling and post requests.

Learn to debug and handle errors in React with browser dev tools, try-catch, and error boundaries. Explore fetching posts, inspecting console errors, and using AI prompts to fix issues.

Create a university website using React with AI prompts, install dependencies, and set up routing with React Router to deliver home, about, courses, blog, contact, login, and register pages.

Style the university website's navbar and layout using bootstrap, implementing a responsive, professional navigation with logo tech University, mobile hamburger menu, and a primary color theme.

Learn to style and populate university home page with React.js and an AI prompt, featuring a hero, headline, subtext, banner placeholder, and CTAs like apply now, explore courses, visit campus.

Build the university's about us page using React.js and an AI prompt to populate and style mission, values, accreditation, leadership, campus life, timeline, and history, ensuring a beautiful, user-friendly design.

Populate and style the university courses page using an ai prompt to showcase software engineering, data science, and cyber security, ensuring a beautiful, user friendly design.

Create and style a university blog page in React.js, populate posts with mock data, render post cards with tags and a tag filter, and a non-functional newsletter signup.

Populate and style the university contact us page using an AI prompt, adding headings, a contact form, campus info, and a map placeholder to create a beautiful, user-friendly interface.

Populate and style the university login and registration pages using simple AI prompts in a React.js workflow, keeping left-aligned labels and a colorful, user-friendly design.

Finalize the university website by fixing bugs, adding a campus banner image, enhancing visuals, and left-aligning login and register labels using AI prompts in React.

Build the student management UI with a login redirect to a dashboard for courses and grades; test with any credentials and refine the layout and logout flow before API integration.

Expand the student management system UI in React.js by adding pages for courses, schedules, online classes, assignments, exams, and grades with a side navigation and logout.

refactor the university sidebar in a react.js student management ui, hiding the public menu when logged in and revealing it after logout, using an ai prompt to style the dashboard.

Build and populate a React.js based student management system UI, starting with the dashboard. Style pages such as courses, schedules, online classes, and assignments to be beautiful and user friendly.

Apply final touches to the university website project by styling all pages with a single prompt, enabling filters for online classes and schedules, and viewing assignments and a 3.75 gpa.

Learn what an API is and how to build and test an API with Nestjs, MySQL, and AI prompts using Postman in a modular Node.js framework.

Install nodejs, postman, and xampp for database; create a back-end NestJS project with nest new and yarn, then start the dev server on port 4000 to build a restful API.

Explore RESTful API design with nestjs, learning CRUD operations via get, post, put, and delete, and navigate the nestjs folder structure including main.ts, controller, service, and app.module.

Learn to build a RESTful get API with NestJS, generate a resource, and fetch mock car data via get requests, then extend to student resources and test endpoints with Postman.

Implement post requests in a NestJS API by creating new data with a post service and DTO, tested via Postman using car and student examples.

Learn how to create and test a put request to update existing data in a NestJS API, using the update method, dto, and mock data, then verify with Postman.

Learn how to implement and test delete requests in a Nestjs API to remove records from mock data, including cars and students, and verify responses.

Learn to connect NestJS to a MySQL database using TypeORM, create a car entity with id, make, model, and year, and update the database when the entity changes.

Refactor NestJS api routes to store car and student data in MySQL, replacing data with dynamic records via repositories, migrations, and seeding, and test create, read, update, delete with Postman.

Refactor the registration page to support student and teacher roles, enabling student course selection and enrollment time, while teachers sign up with email and full name, linked to the api.

Connect the registration page to the backend with NestJS and an AI prompt to create a user table for students and teachers, and redirect to the dashboard after signup.

Connect the NestJS backend to the frontend to build a teacher dashboard and update the sidebar with menus for manage students, courses, assignments, and grades.

Connect the login page to a NestJS API, redirect users to the appropriate dashboard by user type, and call the API from the front end using Axios.

Connect the NestJS api to the university site to power a manage students page with create, read, update, and delete actions; use ai prompts to link courses and assignments.

Connect the manage grid page to a NestJS API, implement CRUD for student grades, and craft a prompt to populate the student page with courses, schedules, and assignments.

Understand how Git tracks changes in code and how GitHub stores it online to enable collaboration and deployment.

Install and configure git across Windows, Mac, and Linux using terminal commands. Verify installation with git --version, set user name and email, and confirm with git config --list.

Create a GitHub account and your first repository, learn what a repository is, sign up with your email, and choose public or private access.

Learn to initialize a git repository, stage changes with git add ., commit with -m to explain what you did and why, and push to GitHub by setting origin main.

Learn how to pull code from GitHub to your dev environment with git pull, explore push vs pull, and understand commits and syncing changes.

Understand git branches and pull requests to develop new features without breaking existing code, create a branch like about us, push it, review, and squash-merge into main.

Clone a GitHub repository to your computer using the git clone command, copying project files and history from a remote repository for local development.

Master a daily git workflow for developers: create a feature branch with git checkout -b, add and commit, switch to main, merge and push to GitHub, then manage pull requests.

Deploy your portfolio website to the cloud by hosting with GitHub and Render, create a repository, push your project, and deploy to Render to go live on the internet.

Create a responsive portfolio website using React and Vite and deploy it to the cloud with Render. Include a clean hero, about, skills, projects, and contact sections.

Create a GitHub repository for your portfolio website and push your project code. Initialize git, add and commit changes, set the remote origin, and push to main.

Deploy your project on render by connecting GitHub, creating a static site, selecting your repository, and configuring build command yarn build and publish directory dist.

Deploy and update a live site by pushing changes to the cloud via render; modify the hero section with cursor, then git add, commit, and push for auto deployment.

Explore what open source is, why it matters, and how to contribute by collaborating on public projects like React.js and Node.js.

Contribute to open source to sharpen coding skills, learn real-world project structure, and collaborate with engineers worldwide. Boost GitHub profile with small contributions to attract recruiters.

Find open source projects on GitHub by searching for good first issues or beginner-friendly repos, read the readme, and contribute via clone and pull request.

Learn to contribute to an open source project by forking, cloning, creating a branch, and pushing a pull request on GitHub, including finding good first issues.