🌐 18-Day Web Development
@padmatutorials
🧠 WEEK 1: INTRO TO WEB + TECH FOUNDATION
📅 Day 1: Introduction to Web Development & AI Tools
• What is Web Development? Why is it important today?
• Full Stack vs Full Body Development
• Full Stack = Frontend + Backend + Database
• Full Body = Domain + Hosting + Deployment + Maintenance
• Web Development Lifecycle: Idea → Execution → Deployment → Client Delivery
• Client Communication & Behaviour
• Integrating AI tools into development
• Tools: ChatGPT, Gemini, Claude, Notion AI, Bolt AI
📅 Day 2: HTML – Complete In-Depth
• Structure of an HTML Document
• Semantic Tags, Media, Tables, Forms
• SEO-Friendly HTML
• HTML required for React (JSX Compatibility)
• Practical: Create sample webpage skeleton
📅 Day 3: CSS – Deep Dive
• CSS Selectors, Box Model
• Flex box, Grid
• Animations, Transitions
• Responsive Design
• TailwindCSS (Intro only)
• Practical: Styling HTML page from Day 2
📅 Day 4: JavaScript Basics + First Complete Web Page
• JS Syntax: Variables, Data Types, Operators
• Functions, Loops, Conditions
• DOM Manipulation Basics
• Events & Interactivity
• 📄 Project: Create a small responsive website using HTML + CSS + JavaScript
• Example: A simple portfolio or landing page
🛠️ WEEK 2: MODERN TOOLS + REACT BASICS
📅 Day 5: GitHub + LinkedIn Setup & Version Control
• What is Git & GitHub?
• Git Initialization, Commits, Push/Pull
• Creating GitHub Profiles & Repositories
• Creating Developer Portfolios on LinkedIn
• Uploading Day 4 project to GitHub
• Best practices for public profiles
📅 Day 6: Prompt Engineering + AI Prompt Power
• What is Prompt Engineering?
• Structure of Effective Prompts
• AI for:
• Website Layouts
• Code Generation
• Content Writing
• Bug Fixing
• Practice using ChatGPT + Notion AI to generate a basic web page idea
📅 Day 7: Environment Setup for React & Node.js
• Installing Node.js and npm
• What is package.json and its role
• Setting up first React app (npx create-react-app)
• File structure explanation
• Installing TailwindCSS in React
• Environment setup best practices
📅 Day 8: React Basics + Hands-On
• What is React & Why Use It?
• Components, Props, State
• JSX Explained
• React Hooks (Intro: useState, useEffect)
•⚒️ Practice: Build a counter or basic layout using React components
📅 Day 9: Practical Day – React Page Building
• Create your personal homepage (Hero + About + Projects)
• Use Tailwind for design
• Use AI to generate content and layout suggestions
• Push code to GitHub
📅 Day 10: Deployment + Domains + Hosting
• What is a Domain? What is DNS?
• Platforms: GitHub Pages, Vercel, Netlify
• Deploying a React App
• What is Bolt AI? How to integrate in your app
• Connecting Frontend with Deployment Services
• Live Project Hosting Demo
🔥 WEEK 3: PROJECT EXECUTION + PRESENTATION
📅 Day 11: Practical Day – Personal Portfolio Mini Project
• Full project with About, Skills, Contact
• Use AI to write bio, content
• Host it live + GitHub commits
•💡 Bonus: Add animation using Framer Motion / CSS
📅 Day 12: Project Review + Client Demo Training
• Everyone presents their portfolio
• Peer review and trainer feedback
• Train how to talk like a developer to clients
• Explain code and approach
• Fix bugs based on feedback
📅 Day 13: Team Discussion + Major Project Planning
• Students are grouped into teams
• Brainstorm: E-commerce, Food Delivery, Job Portal, Blog CMS, etc.
• Use AI for mockups and structure
• Assign team roles (frontend, design, deployment, etc.)
📅 Day 14–15: Team Project Execution (Major Project)
• Work in teams
• Build actual working app
• Use React + Tailwind + AI tools
• Push to GitHub regularly
• Version control best practices
📅 Day 16: Final Touches & Deployment
• Add animations, polish UI/UX
• Test mobile responsiveness
• Deploy the site
• Prepare for final presentation
📅 Day 17: Project Submission & Final Rehearsals
• Submit final links (GitHub + Live Site)
• Practice presenting like a pro
• Run through Q&A round
• Fix final bugs if needed
📅 Day 18: Final Presentations + Certification 🎓
• Each team presents their project
• Trainer & Peer Feedback
• Leaderboard: Best Design, Best Functionality, Best Use of AI
• Distribute Certificates
• Group photo + Final thoughts + Internship/Freelance guidance
