Skip to content

README.md

Latest commit

 

History

History
159 lines (106 loc) · 5.86 KB

README.md

File metadata and controls

159 lines (106 loc) · 5.86 KB
Raw

🌐 AI-Powered Web Development with HTML, CSS & JavaScript

Instructor: Waqar Rana

Course Incharge: Muzammil Bilwani

📘 Course Overview

This repository contains all course materials, weekly topics, and resources for the AI-Powered Web Development course.

In this course, students will learn the fundamentals of modern web development — building responsive and interactive websites from scratch using HTML, CSS, and JavaScript, enhanced by AI tools such as ChatGPT and Google Gemini.

The course blends traditional coding skills with AI-assisted development, empowering learners to build websites faster, solve coding challenges efficiently, and leverage generative AI for real-world productivity.

📋 Prerequisites

Before starting this course, learners should have:

  • ✅ Basic computing skills (typing, browsing, file management)
  • ✅ Interest in learning web design and programming
  • ✅ Willingness to explore AI tools for faster development

🎯 Learning Outcomes

By the end of this course, students will be able to:

  • 🧱 Structure web pages using HTML with AI assistance
  • 🎨 Style websites using CSS and AI-generated design suggestions
  • ⚙️ Add interactivity and logic using JavaScript
  • 🤖 Use AI tools (ChatGPT, Gemini, Copilot) to accelerate coding
  • 🧠 Build strong problem-solving and programming logic
  • 🚀 Create and deploy a complete responsive website project

🧭 Course Outline

Week Topics Key Learning Areas
1 Introduction to Web Development & AI-Assisted Coding Web basics, tools setup, using ChatGPT & Gemini
2 Prompt Engineering for Developers Effective AI prompts for HTML/CSS/JS generation
3 HTML & CSS Fundamentals HTML elements, CSS basics, responsive layouts
4 Git & Advanced CSS Version control, animations, transitions
5 Logic Building Fundamentals Variables, operators, conditionals, algorithms
6 Practical Logic & JS Introduction Syntax, data types, basic programs
7 JS Functions & Control Flow Functions, conditionals, error handling
8 DOM Manipulation & Events Selecting elements, event handling, dynamic UI
9 Arrays, Objects & Data Structures map, filter, reduce, JSON, destructuring
10 Asynchronous JavaScript Promises, async/await, Fetch API
11 Generative AI in Development Debugging, optimization, documentation with AI
12 Final Project Full website project, AI-assisted deployment

🧩 Final Project

In the final project, students will design and develop a fully interactive website using HTML, CSS, JavaScript, and AI tools for planning and optimization.

Project Options:

  • 💼 Personal Portfolio Website
  • 🛍️ E-commerce Product Page
  • 📊 Interactive Dashboard
  • 🎮 Mini JavaScript Game

Project Requirements:

  • Responsive design using CSS Flexbox/Grid
  • Interactive features using DOM and JS Events
  • AI-assisted documentation and code generation
  • Deployment to GitHub Pages or Netlify
  • Project presentation and code walkthrough

🧠 AI Tools for Development

Students will learn to use:

  • ChatGPT – For code generation, debugging, and explanations
  • Google Gemini – For idea generation and project guidance
  • GitHub Copilot – For in-editor AI coding suggestions
  • AI-based Design Tools – For quick UI layout and style generation

🧩 Tools & Technologies

  • HTML5
  • CSS3 (Flexbox, Grid, Animations)
  • JavaScript (ES6+)
  • VS Code
  • Git & GitHub
  • ChatGPT / Gemini / Copilot
  • Netlify / GitHub Pages

📊 Grading Criteria

Particulars Marks (%)
Quizzes 20
Class Participation / Attendance 15
Projects 25
Final Project 40
Total 100%

💡 Hands-on Practice

Each week includes guided hands-on exercises such as:

  • Creating web pages with AI-assisted HTML/CSS
  • Practicing prompt engineering for better AI output
  • Using GitHub for version control and collaboration
  • Writing JavaScript programs for interactivity
  • Building and deploying a responsive website

💻 Course Highlights

  • ✨ AI-integrated learning approach
  • 🎯 Focus on real-world, project-based learning
  • 📈 Builds a strong foundation for frontend and backend development
  • 🤝 Encourages collaboration and self-learning with AI

💡 Contribution Guidelines

If you’re a student contributing your code or assignments:

  1. Fork this repository
  2. Create a new branch for your task or week
  3. Commit with clear and descriptive messages
  4. Submit a pull request for review

📫 Contact

For course-related queries or collaboration:

📧 waqarahmed7861234@gmail.com

💼 GitHub: https://github.com/Maksof-waqarahmed

🌐 LinkedIn: https://www.linkedin.com/in/waqarranadev/