Scribd
Upload
5 views

18-Day Web Development Schedule

The document outlines an 18-day web development course covering foundational topics such as HTML, CSS, JavaScript, and React, along with modern tools like GitHub and AI integration. It includes practical projects, team collaboration, and culminates in final presentations and certification. The course emphasizes hands-on learning and client communication skills throughout the curriculum.

Uploaded by

learnlab2025
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

18-Day Web Development Schedule

The document outlines an 18-day web development course covering foundational topics such as HTML, CSS, JavaScript, and React, along with modern tools like GitHub and AI integration. It includes practical projects, team collaboration, and culminates in final presentations and certification. The course emphasizes hands-on learning and client communication skills throughout the curriculum.

Uploaded by

learnlab2025
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

🌐 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

You might also like