explainx / blog
Complete guide to building full-stack websites with Claude AI in 2026. Learn vibe coding, Claude Projects, Artifacts, database integration, deployment, and best practices for AI-assisted web development.
Jun 27, 2026
HTML is just labelled text. This guide explains it in plain English and walks you through building two real pages โ a photo gallery and a Grumpy Cat tribute โ with the exact Cursor prompts to create them yourself.
Jun 9, 2026
AI marketing agents transform how businesses scale content, SEO, email, and social media. This comprehensive guide shows you how to build production-ready marketing agents with Claude, integrate with Ahrefs and Google Analytics, and measure real ROI from marketing automation.
Jun 9, 2026
Claude connectors transform how you work with AI by connecting Claude directly to your favorite tools and data sources. This complete guide covers MCP server setup, authentication, building custom connectors, and real-world automation workflows.
TL;DR: Build professional full-stack websites using Claude AI and the vibe coding methodology. This complete tutorial covers Claude Projects and Artifacts for multi-component apps, React and Next.js development, database integration, API connections, deployment to Netlify/Vercel, and best practices for AI-assisted web development. No deep coding knowledge required - just clear communication and iteration with Claude. Learn to build everything from landing pages to complete web applications in hours, not weeks.
Vibe coding is a revolutionary approach to software development where you describe what you want in plain English and AI writes the code for you.
Traditional Coding:
Developer โ Learns syntax โ Writes code โ Debugs โ Tests โ Deploys
Vibe Coding:
Developer โ Describes requirements โ AI generates code โ Review โ Deploy
The term "vibe coding" was coined by Andrej Karpathy, former Director of AI at Tesla and co-founder of OpenAI, to describe this new paradigm of AI-assisted development.
Democratizes Development:
Enhances Productivity:
Important Caveat:
"Design thinking, branding, UX strategy, and business logic still require human decision-making. AI is an assistant, not a replacement for learning development fundamentals."
Sources: Bearmybrand Vibe Coding Guide, explainx.ai Claude Code Tutorial
| Tool | Purpose | Cost |
|---|---|---|
| Claude Pro | Access to Projects and Artifacts | $20/month |
| Web Browser | Chrome, Firefox, or Safari | Free |
| Text Editor | VS Code (optional but recommended) | Free |
| Git | Version control (optional) | Free |
| Tool | Purpose | Cost |
|---|---|---|
| Domain Name | Custom URL (example.com) | $10-20/year |
| Netlify Account | Free hosting and deployment | Free tier |
| GitHub Account | Code backup and collaboration | Free |
| Figma | Design mockups (optional) | Free tier |
Required (Minimal):
Helpful (But Not Required):
You Don't Need:
Claude handles all the technical implementation - you provide the vision and requirements.
What Are Projects? Claude Projects allow you to organize multi-file, complex applications with persistent context and knowledge.
Key Features:
When to Use Projects:
How to Create a Project:
Sources: Leon Furze - Building Websites, AI Blew My Mind Tutorial
What Are Artifacts? Interactive code previews that let you see your application running in real-time as Claude generates it.
Supported Artifact Types:
How Artifacts Work:
You: "Create a landing page for a SaaS product with hero section, features, and pricing"
โ Claude generates HTML/CSS/JS in Artifact
โ Preview appears in real-time
โ You can interact with the preview
โ Request changes: "Make the hero section blue with white text"
โ Claude updates the code instantly
โ Preview refreshes automatically
Limitations:
Best Practices:
Objective: Build a professional landing page for a fictional SaaS product.
Step 1: Define Requirements
Write a detailed prompt describing your vision:
Create a modern landing page for "TaskFlow" - a project management tool for remote teams.
Structure:
- Hero section with headline "Streamline Your Remote Workflow" and CTA button
- Features section with 3 features (visual icons, headings, descriptions)
- Pricing section with 3 tiers (Free, Pro, Enterprise)
- Footer with links and social media icons
Design:
- Modern, clean aesthetic
- Purple (#7C3AED) as primary color
- White background with subtle gradients
- Mobile-responsive design
- Professional typography (Inter font)
- Smooth scroll animations
Features to highlight:
1. Real-time collaboration
2. AI-powered task prioritization
3. Integrated video calls
Step 2: Generate Initial Version
Paste your prompt into Claude (in a new Project or Artifact).
Claude will generate:
Step 3: Iterate and Refine
Review the generated code and request changes:
User: "Make the hero section taller with a background gradient from purple to blue"
Claude: [Updates CSS with gradient]
User: "Add customer testimonials section before pricing"
Claude: [Generates testimonials HTML/CSS]
User: "Make pricing cards flip on hover to show feature details on the back"
Claude: [Implements 3D flip animation with CSS]
Step 4: Export and Test
index.htmlStep 5: Deploy
Deploy to Netlify (free):
# Install Netlify CLI
npm install -g netlify-cli
# Deploy
netlify deploy --prod
# Follow prompts, drag/drop your HTML file
Your website is now live with a *.netlify.app URL!
Sources: SynarionIT Tutorial, Bearmybrand Complete Guide
Objective: Build a complete website with multiple pages, shared navigation, and consistent styling.
Step 1: Plan Site Structure
Website: "TechBlog" - A technology blog
Pages:
1. Home (index.html) - Hero, latest posts, featured content
2. About (about.html) - Team info, mission statement
3. Blog (blog.html) - Blog post archive with filters
4. Contact (contact.html) - Contact form with validation
5. Privacy (privacy.html) - Privacy policy
Shared Components:
- Header navigation (logo, menu, search)
- Footer (links, newsletter signup, social media)
- Consistent color scheme and typography
Step 2: Generate Shared Components First
Prompt to Claude:
"Create a reusable header and footer for a tech blog website called TechBlog.
Header should include:
- Logo (text-based: "TechBlog" in bold)
- Navigation menu: Home, About, Blog, Contact
- Search icon button
- Mobile hamburger menu
Footer should include:
- Quick links (same as nav + Privacy)
- Newsletter signup form
- Social media icons (Twitter, LinkedIn, GitHub)
- Copyright notice
Style: Modern, minimal, dark mode friendly
Colors: #1F2937 (dark gray), #10B981 (accent green)
Make it responsive and mobile-friendly"
Step 3: Generate Each Page
For each page, reference the shared components:
"Using the header and footer from our previous conversation, create the Home page for TechBlog.
Home page should have:
- Hero section with tagline and featured image
- 'Latest Posts' section showing 6 recent blog post cards
- 'Featured Topics' section with 4 topic categories
- 'Newsletter' CTA section
Each blog post card should show:
- Featured image
- Title
- Excerpt (2 lines)
- Author, date, read time
- Tags
Make it fully responsive and include hover effects on cards"
Step 4: Create Blog Post Template
"Create a blog post page template (blog-post.html) that matches our TechBlog design.
Include:
- Full-width hero image
- Title, author info, publish date, read time
- Table of contents (auto-generated from H2 headings)
- Article content area with good typography
- Code syntax highlighting blocks
- Social share buttons (Twitter, LinkedIn, Facebook)
- 'Related Posts' section at bottom
- Comments section placeholder
Make the content area comfortable to read (max-width 65ch, good line-height)"
Step 5: Link Pages Together
Ask Claude to:
Step 6: Test Navigation Flow
techblog/
โโโ index.html
โโโ about.html
โโโ blog.html
โโโ contact.html
โโโ privacy.html
โโโ blog-post.html
โโโ css/
โ โโโ style.css
โโโ js/
โ โโโ main.js
โโโ images/
โโโ (your images)
Step 7: Deploy
Deploy entire folder to Netlify or Vercel:
netlify deploy --prod --dir=techblog
Sources: ReadyTo.AI Tutorial, Medium Free Hosting Guide
Objective: Build an interactive React application - a task management app.
Step 1: Define App Requirements
Create a React task management application called "TaskMaster"
Features:
- Add new tasks with title and description
- Mark tasks as complete/incomplete
- Filter tasks (All, Active, Completed)
- Delete tasks
- Edit existing tasks (inline editing)
- Local storage persistence (tasks saved in browser)
- Task count statistics
- Dark/light mode toggle
UI Components:
- App wrapper (main container)
- Header (title, dark mode toggle)
- TaskInput (form to add tasks)
- TaskList (list of all tasks)
- TaskItem (individual task with actions)
- FilterButtons (All/Active/Completed)
- Stats (total tasks, completed count, active count)
Styling:
- Modern design with Tailwind CSS (via CDN)
- Smooth transitions and hover effects
- Mobile responsive
- Accessible (ARIA labels, keyboard navigation)
Step 2: Generate React App
Claude will generate a complete single-file React app:
// Claude generates this structure:
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
function TaskMaster() {
const [tasks, setTasks] = useState([]);
const [filter, setFilter] = useState('all');
const [darkMode, setDarkMode] = useState(false);
// Load tasks from localStorage on mount
useEffect(() => {
const saved = localStorage.getItem('tasks');
if (saved) setTasks(JSON.parse(saved));
}, []);
// Save tasks to localStorage whenever they change
useEffect(() => {
localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]);
const addTask = (task) => { /* ... */ };
const toggleTask = (id) => { /* ... */ };
const deleteTask = (id) => { /* ... */ };
const editTask = (id, newText) => { /* ... */ };
filteredTasks = tasks.( {
(filter === ) !task.;
(filter === ) task.;
;
});
(
);
}
.(, .());
Step 3: Iterate on Features
Add enhancements:
User: "Add drag-and-drop reordering for tasks"
Claude: [Implements drag-and-drop with HTML5 drag API]
User: "Add task categories with color coding"
Claude: [Adds category selection and visual indicators]
User: "Add due dates with calendar picker"
Claude: [Implements date picker and overdue highlighting]
User: "Add export to JSON feature"
Claude: [Adds export button and download functionality]
Step 4: Optimize Performance
Ask Claude to optimize:
"Optimize this React app for performance:
- Use React.memo for TaskItem components
- Implement useMemo for filtered tasks calculation
- Add debouncing to task search
- Lazy load task lists with virtualization if > 100 tasks"
Step 5: Export and Set Up Locally
index.html (with CDN links)npx create-react-app taskmaster
cd taskmaster
# Replace src/App.js with Claude's code (adapted for modules)
# Run development server
npm start
Step 6: Build for Production
# Build optimized bundle
npm run build
# Deploy to Netlify
netlify deploy --prod --dir=build
Sources: Python in Plain English - Full-Stack Dev, HTML.to.Design Tutorial
Objective: Build a complete full-stack application - a note-taking app with database.
Step 1: Define Full Architecture
Build a full-stack note-taking application called "QuickNotes"
Frontend (React):
- User authentication (login/signup)
- Note editor with rich text (bold, italic, lists)
- Note list with search and filters
- Tags for organizing notes
- Real-time auto-save
- Dark mode
Backend (Node.js + Express):
- RESTful API endpoints
- User authentication with JWT
- PostgreSQL database integration
- CRUD operations for notes
- Tag management
- Search functionality
Database Schema:
- Users table (id, email, password_hash, created_at)
- Notes table (id, user_id, title, content, created_at, updated_at)
- Tags table (id, user_id, name)
- Note_Tags table (note_id, tag_id)
Deployment:
- Frontend: Vercel
- Backend: Railway or Render
- Database: Railway PostgreSQL
Step 2: Generate Backend First
"Create a Node.js Express backend for QuickNotes with:
1. User authentication:
- POST /api/auth/signup - Create new user
- POST /api/auth/login - Login and return JWT
- Middleware to verify JWT on protected routes
2. Notes API:
- GET /api/notes - Get all notes for authenticated user
- GET /api/notes/:id - Get specific note
- POST /api/notes - Create new note
- PUT /api/notes/:id - Update note
- DELETE /api/notes/:id - Delete note
3. Tags API:
- GET /api/tags - Get all tags
- POST /api/tags - Create tag
- PUT /api/notes/:id/tags - Update note tags
Use PostgreSQL with pg library. Include:
- Password hashing with bcrypt
- JWT token generation
- Input validation
- Error handling
- CORS configuration
- Environment variables for secrets"
Claude will generate server.js with all endpoints.
Step 3: Generate Database Setup
"Create database schema and migration files for QuickNotes using PostgreSQL.
Include:
- Schema definition SQL
- Migration scripts
- Seed data for testing
- Database connection configuration
- Indexes for performance (user_id, created_at, etc.)"
Step 4: Generate Frontend
"Create a React frontend for QuickNotes that connects to our backend API.
Components:
- AuthForm (login/signup with toggle)
- Dashboard (main app container)
- NoteEditor (rich text editor with formatting toolbar)
- NoteList (sidebar with search and filter)
- TagManager (tag creation and assignment)
- Settings (theme toggle, account settings)
Features:
- JWT token storage in localStorage
- Axios for API requests
- React Router for navigation
- Context API for global state (user, notes, tags)
- Debounced auto-save (save 2 seconds after typing stops)
- Optimistic UI updates
- Loading states and error handling
Use Tailwind CSS and include dark mode support"
Step 5: Connect Frontend to Backend
Ask Claude to:
// Generated API service example
import axios from 'axios';
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';
const api = axios.create({
baseURL: API_URL,
headers: {
'Content-Type': 'application/json'
}
});
// Add JWT to all requests
api.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export const authService = {
signup: (email, password) => api.post('/auth/signup', { email, password }),
login: (email, password) => api.post('/auth/login', { email, password })
};
export const notesService = {
getAll: () => api.get('/notes'),
getById: (id) => api.get(`/notes/${id}`),
create: api.(, note),
: api.(, note),
: api.()
};
tagsService = {
: api.(),
: api.(, { name }),
: api.(, { tagIds })
};
Step 6: Set Up Environment Variables
Backend .env:
PORT=5000
DATABASE_URL=postgresql://user:password@host:5432/quicknotes
JWT_SECRET=your-secret-key-here
NODE_ENV=production
CORS_ORIGIN=https://your-frontend-domain.vercel.app
Frontend .env:
REACT_APP_API_URL=https://your-backend.railway.app/api
Step 7: Deploy
Deploy backend to Railway:
# Install Railway CLI
npm install -g @railway/cli
# Login and initialize
railway login
railway init
# Add PostgreSQL
railway add postgresql
# Deploy
railway up
Deploy frontend to Vercel:
# Install Vercel CLI
npm install -g vercel
# Deploy
vercel --prod
Step 8: Test End-to-End
Sources: DataCamp Claude Code Tutorial, PyDevTools Complete Guide
Bad Prompt:
"Make a website"
Good Prompt:
"Create a landing page for a fitness coaching business called 'FitLife Coaching'.
Target audience: Working professionals aged 25-40
Goal: Generate leads for 1-on-1 coaching
Structure:
- Hero with headline 'Transform Your Body in 12 Weeks' and email capture form
- 'How It Works' section (3 steps with icons)
- Testimonials (3 cards with before/after photos, quotes, names)
- Pricing (2 options: Standard $297/month, Premium $497/month)
- FAQ accordion (5 common questions)
- Footer with social links
Design:
- Energetic, motivating vibe
- Orange (#FF6B35) and dark blue (#003566) color scheme
- High-energy imagery (people exercising)
- Mobile-first design
- Fast loading (optimize images)
Include:
- Google Analytics integration
- Facebook Pixel
- Schema markup for SEO
- Accessibility (ARIA labels, alt text)"
Don't ask for everything at once. Build iteratively:
1. "Create basic structure and layout"
โ Review output
2. "Add hero section with form"
โ Test form functionality
3. "Add testimonials section with carousel"
โ Verify carousel works on mobile
4. "Add pricing section with hover effects"
โ Check animations
5. "Optimize for mobile and add loading states"
โ Final testing
Show Claude what you want:
"Create a navigation bar similar to Stripe.com:
- Logo on the left
- Center menu items (Products, Solutions, Developers, Resources)
- Right side: Login and Sign Up buttons
- Sticky on scroll
- Mega menu dropdowns for Products and Solutions
- Search modal when clicking search icon
Here's a screenshot: [attach image]
Match the spacing and animation style"
Be explicit about your stack:
"Build this using:
- React 18.3 with hooks (no class components)
- Tailwind CSS 3.4 for styling
- React Router 6 for navigation
- Axios for API calls
- React Hook Form for form handling
- Zod for validation
- Lucide React for icons
Use TypeScript for type safety
Follow Airbnb style guide for code formatting"
Understand the code Claude generates:
"Explain how this authentication flow works step-by-step.
Why did you use useContext instead of Redux?
What security measures are in place for the JWT tokens?
How does the auto-save feature prevent data loss?"
"Add comprehensive error handling:
- Network errors (show retry button)
- Validation errors (show field-specific messages)
- Server errors (show user-friendly message)
- Loading states for all async operations
- Empty states when no data
- Success confirmations for user actions
Also add:
- Unit tests for utility functions
- Integration tests for API calls
- E2E tests for critical user flows"
"Optimize this React app for performance:
- Code splitting with React.lazy
- Image optimization (WebP, lazy loading)
- Memoization for expensive calculations
- Virtual scrolling for long lists
- Service worker for offline support
- Bundle size analysis and reduction
- Lighthouse score > 90 for all metrics"
Use Claude Projects with custom instructions:
In Project Settings, add custom instructions:
"For all components in this project:
- Use Tailwind CSS classes (no inline styles)
- Follow our design system colors: primary #7C3AED, secondary #10B981
- Use Inter font family
- Ensure mobile-first responsive design
- Include TypeScript types
- Add PropTypes for runtime validation
- Include JSDoc comments for all functions
- Follow our component structure:
- Imports
- Type definitions
- Component code
- Export
- Styled components (if needed)"
Symptoms:
Solutions:
Share the Error:
"I'm getting this error:
Uncaught TypeError: Cannot read property 'map' of undefined
at TaskList (TaskList.js:23)
Here's line 23:
{tasks.map(task => <TaskItem key={task.id} task={task} />)}
What's wrong and how do I fix it?"
Provide Context:
"The submit button isn't working. When I click it, nothing happens.
No console errors. Here's the form component: [paste code]"
Test Incrementally:
"Let's debug this step by step:
1. Add console.log to verify function is called
2. Check if form data is captured correctly
3. Verify API endpoint is reachable
4. Confirm response is handled properly"
Solutions:
Use Visual References:
Iterate on Design:
"The hero section needs adjustments:
- Increase heading font size to 64px
- Change background to gradient from #667eea to #764ba2
- Add subtle animation when page loads
- Make CTA button larger and more prominent"
Use Design Systems:
"Follow Material Design spacing:
- 8px baseline grid
- Typography scale: 12, 14, 16, 20, 24, 32, 48, 64
- Elevation shadows for cards
- 4px border radius for buttons, 8px for cards"
Solutions:
"Make this fully responsive with these breakpoints:
- Mobile: < 640px (stack all elements vertically)
- Tablet: 640px - 1024px (2-column grid)
- Desktop: > 1024px (3-column grid)
Specific adjustments:
- Hero text: 32px mobile, 48px tablet, 64px desktop
- Navigation: hamburger menu on mobile, full menu on desktop
- Images: full-width on mobile, 50% width on desktop
- Padding: 16px mobile, 32px tablet, 64px desktop"
Symptoms:
Solutions:
"Optimize this application for performance:
1. Code Splitting:
- Split routes into separate bundles
- Lazy load non-critical components
2. Image Optimization:
- Convert to WebP format
- Implement responsive images (srcset)
- Add lazy loading
- Use appropriate sizes (no oversized images)
3. Bundle Optimization:
- Remove unused dependencies
- Tree shake effectively
- Minimize and compress
- Analyze bundle with webpack-bundle-analyzer
4. Runtime Performance:
- Memoize expensive calculations
- Virtualize long lists
- Debounce input handlers
- Use web workers for heavy computations
Target: < 3s load time on 3G, Lighthouse score > 90"
Steps:
Prepare Site:
# Folder structure
my-website/
โโโ index.html
โโโ about.html
โโโ css/
โโโ js/
โโโ images/
Create netlify.toml:
[build]
publish = "."
command = "echo 'No build needed for static site'"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "DENY"
X-XSS-Protection = "1; mode=block"
X-Content-Type-Options = "nosniff"
Deploy:
netlify deploy --prod --dir=.
Custom Domain (Optional):
Netlify Features:
Steps:
Initialize Project:
npx create-next-app my-app
cd my-app
Build and Test:
npm run build
npm run start
Deploy:
vercel --prod
Environment Variables:
vercel env add NEXT_PUBLIC_API_URL production
Vercel Features:
Steps:
Install CLI:
npm install -g @railway/cli
railway login
Initialize Project:
railway init
Add Services:
# Add PostgreSQL database
railway add postgresql
# Deploy backend
railway up
Environment Variables:
railway variables set DATABASE_URL=$DATABASE_URL
railway variables set JWT_SECRET=your-secret
Railway Features:
Steps:
Create Repository:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/repo-name.git
git push -u origin main
Enable GitHub Pages:
Custom Domain (Optional):
GitHub Pages Features:
"Create a Next.js 14 application with:
- App Router (not Pages Router)
- Server Components by default
- Client Components where needed (use 'use client')
- API Routes in app/api directory
- Dynamic routing with catch-all routes
- Metadata API for SEO
- Streaming with Suspense
- Server Actions for form handling
Example structure:
app/
โโโ layout.tsx (root layout)
โโโ page.tsx (home page)
โโโ about/page.tsx
โโโ blog/
โ โโโ page.tsx (blog list)
โ โโโ [slug]/page.tsx (individual post)
โโโ api/
โ โโโ posts/route.ts
โโโ components/
โโโ Header.tsx (Server Component)
โโโ SearchBar.tsx (Client Component with 'use client')"
"Set up Prisma ORM for our Next.js app:
1. Install and initialize:
npm install prisma @prisma/client
npx prisma init
2. Define schema (schema.prisma):
- User model (id, email, password, createdAt)
- Post model (id, title, content, userId, published, createdAt)
- Comment model (id, content, postId, userId, createdAt)
- Relations: User -> Posts, User -> Comments, Post -> Comments
3. Create migration:
npx prisma migrate dev --name init
4. Generate Prisma Client:
npx prisma generate
5. Create database utilities (lib/db.ts):
- Singleton Prisma Client instance
- Helper functions for common queries
6. Implement CRUD operations:
- Create post
- Get all posts
- Get post by ID
- Update post
- Delete post
Use TypeScript for type safety with Prisma's generated types"
"Implement authentication using NextAuth.js:
1. Install:
npm install next-auth @next-auth/prisma-adapter
2. Create [...nextauth]/route.ts:
- Providers: Google, GitHub, Email
- Prisma adapter for database sessions
- JWT strategy
- Session callback to include user data
3. Add authentication pages:
- /signin (custom sign-in page)
- /signup (custom registration)
- /verify-email (email verification)
4. Protect routes:
- Create middleware.ts to protect /dashboard/*
- Redirect unauthenticated users to /signin
- Use getServerSession in Server Components
- Use useSession in Client Components
5. Add user profile:
- View profile information
- Update avatar
- Change password
- Delete account
Include proper error handling and loading states"
"Add real-time chat to our application using Socket.io:
1. Backend (server.js):
- Set up Socket.io server
- Handle connection/disconnection
- Implement rooms for different channels
- Broadcast messages to room members
- Handle typing indicators
- Store messages in database
2. Frontend (React):
- Create socket connection context
- Chat component with message list
- Message input with send button
- Real-time message updates
- Typing indicator ('User is typing...')
- Online/offline status
3. Features:
- Message delivery confirmations
- Read receipts
- File/image sharing
- Emoji reactions
- Message editing and deletion
4. Performance:
- Paginated message loading
- Optimistic UI updates
- Connection recovery
- Rate limiting
Use TypeScript for type-safe socket events"
Week 1-2: Foundations
Week 3-4: React & State Management
Week 5-6: Full-Stack Development
Week 7-8: Advanced Topics
The Complete AI Builder Bootcamp takes you from zero to full-stack developer in 6 weeks using AI-assisted development.
What You'll Build:
Hands-On Projects:
6 weeks. 12 live sessions. Build 8+ portfolio projects.
Learn from Yash Thakker with personalized feedback, lifetime recording access, and career guidance.
View Full Curriculum & Enroll โ
Comprehensive Guides:
Technical Tutorials:
Deployment Guides:
This comprehensive tutorial covers building full-stack websites with Claude AI as of June 2026. Technologies and best practices evolve rapidly. Always refer to official documentation for the latest updates.