AI Web Full-Stack Programming Course Overview
The structure below may be adjusted during the course based on student feedback in scope, focus, detail, and order.
Related courses
Kickoff
- Complete setup guide for the development environment, including Node, NPM, IDE tools, browser extensions, and platform accounts.
- Basic development operations explained to help you get up to speed quickly.
- Learn how to configure and manage development servers to prepare for project work.
Environment Setup
Complete development environment setup guide
- Basic development operations walkthrough
- Node:
- Native install
- nvm install
- nvm configuration
- NPM configuration
- China npm mirror setup
- Chrome and extensions
- Vue extension
- Nuxt extension
- Development IDE:
- Primary: Cursor + Plus
- Alternative: VSCode + Codeium
- Platform accounts:
- Deployment and domains
- GitHub
- Vercel
- Cloudflare
Theories
- Learn core web development concepts from scratch, covering frontend and backend fundamentals.
- Understand the differences between Nuxt and Next and how SSR works.
- Learn Vue and TypeScript basics to build a solid foundation for real projects.
Web Development Fundamentals
Understand core concepts of modern web development
- What is Nuxt?
- What are client (frontend) and server (backend)?
- Nuxt vs Next
- What is SSR?
- What is Vue?
- What is Node.js?
- What is TypeScript?
- …A hundred questions (we'll cover as we go)
Technology Stack
Overview of the main stack in the course
- Frontend frameworks:
- Vue 3
- Nuxt 3
- Next
- Languages:
- JavaScript
- TypeScript
- Styling:
- TailwindCSS
- CSS
- HTML
- Tools:
- Git
- VSCode
- Chrome DevTools
- Deployment platforms:
- Vercel
- Cloudflare
- Backend tech:
- Node.js
Basics
- Deep dive into key technical docs to master HTML, CSS, and JavaScript essentials.
- Study the official docs for Vue, Nuxt, Next, and React to understand framework design.
- Learn SQL basics for later data management.
Core Technical Docs
Quickly review the main stack documentation
- HTML core docs quick through
- CSS core docs quick through
- JavaScript core docs quick through
- Vue official docs quick through
- Nuxt official docs quick through
- Next official docs quick through
- React official docs quick through
- SQL core docs quick through
Tutorial
- Build from scratch using official templates and learn local dev and deployment flow.
- Master componentization and templates to improve reuse and maintainability.
- Learn content management, analytics, and UX optimization for a professional site.
Project Kickoff
Build from scratch
- Local development based on official templates
- Deployment flow with Vercel
- Template structure and local startup
Project Deep Dive
Deeper hands-on development
- Component and template usage
- Content management integration
- Practice with content management module
- Traffic analytics: Vercel Analytics
- User experience
Projects
- Hands-on projects: course site iteration and open-source navigation site.
- Build a Next.js AI chatbot and integrate your preferred LLM.
- Extend Article AI with i18n, data management, user management, and payments.
Course Website Iteration
Hands-on course site development
- FAQ page, Promo page
- Partner page
- Course outline page
- Portfolio showcase page
- Experience optimization
- SEO optimization
Navigation Site Project
End-to-end development for an open-source navigation site
- Base stack (inherits tutorial project)
- Product feature design
- Technical architecture design
- MVP implementation of core features
- AI-assisted content preparation
- Automated content preparation
AI ChatBot Extension
Build a Next.js AI chatbot
- Deploy Next.js AI ChatBot on Vercel
- Integrate AI Chatbot with custom LLM (AI-SDK)
- Next and React basics
Article AI Extension
AI-based article generation system
- Internationalization: Simplified Chinese, English, Japanese
- Data management: Neon
- User management: Neon
- Ads
- Payments
- Analytics
- Growth experiments
Advanced Hands-on Courses
Not included in this course package
Advance
- Build mobile apps with mainstream hybrid solutions.
- Learn Docker and CI with GitHub Actions.
- Complete VPS deployment workflow.
Mobile Development
Build mobile apps with mainstream hybrid solutions
- Client apps (based on mainstream hybrid solutions)
VPS Deployment
Complete server deployment workflow
- Docker related
- Local build
- GitHub Actions build
- Dockerhub
- VPS initialization and installation
- VPS app deployment
Collaborate
- Learn GitHub workflows and collaboration basics.
- Contribute to the open-source navigation site.
- Build and showcase your own open-source projects.
Open-source Collaboration
Participate in open-source development
- GitHub workflow
- Core: navigation site source code
- Other: build your own interesting open-source projects
AI-Powered Web Development
AI-Powered Web Development
Software development course
- Complete setup guide for Node, NPM, IDE tools, browser extensions, and platform accounts.
- Learn core web concepts from scratch, including Vue 3, Nuxt 3, TypeScript, and TailwindCSS.
- Deep dive into HTML, CSS, JavaScript, Vue, and Nuxt docs.
- Build projects from scratch, learn componentization, content management, UX optimization, and deployment.
- Hands-on projects: course site iteration, open-source navigation site, and modern web integrations.
- Advanced content covers mobile development and VPS deployment to master full-stack skills.
