https://github.com/zeeshanali90233/frontend_ai_chatbot_evening_weekend
2 Month Frontend Course with AI LLM Integrations for Chatbots
https://github.com/zeeshanali90233/frontend_ai_chatbot_evening_weekend
ai aiagents chatbot css3 html5 interview-questions javascript llm prompt-engineering
Last synced: 3 months ago
JSON representation
2 Month Frontend Course with AI LLM Integrations for Chatbots
- Host: GitHub
- URL: https://github.com/zeeshanali90233/frontend_ai_chatbot_evening_weekend
- Owner: zeeshanali90233
- Created: 2024-12-28T13:39:38.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-03-22T18:01:56.000Z (7 months ago)
- Last Synced: 2025-03-22T19:18:46.092Z (7 months ago)
- Topics: ai, aiagents, chatbot, css3, html5, interview-questions, javascript, llm, prompt-engineering
- Language: HTML
- Homepage:
- Size: 4.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Development with AI Chatbot Course
## Evening Weekend Classes
Welcome to the **Frontend Development with AI Chatbot Course**! This course is designed to help beginners build a strong foundation in frontend web development and AI chatbot creation using APIs like ChatGPT, Gemini, Phind, and Claude LLM. Over 16 lectures, you'll master the essentials of HTML, CSS, JavaScript, version control using Git and GitHub, and gain hands-on experience with AI chatbot integration.
---
## 📚 Course Overview
| Topic | Lectures |
| ---------------- | -------- |
| **HTML** | 4 |
| **Git & GitHub** | Lec 3-16 |
| **JavaScript** | 6 |
| **CSS** | 6 |
### 🖥️ Tools & Technologies Covered:
- **HTML**: Learn the building blocks of web development, including semantic tags, structure, and best practices.
- **CSS**: Style your web pages with modern layouts, animations, and responsive design.
- **JavaScript**: Add interactivity and functionality to your web projects.
- **Git & GitHub**: Master version control to track changes and collaborate effectively.
- **AI Chatbots**: Learn to integrate APIs like ChatGPT, Gemini, Phind, and Claude LLM to create intelligent chatbots.
---
## 📆 Course Outline
### **1. HyperText Markup Language (HTML)**
- Introduction to HTML & Basic Structure
- Semantic HTML & Best Practices
- Forms, Inputs, and Tables
- Embedding Media: Images, Videos, and Audio
### **2. Git & GitHub**
- Introduction to Git: Version Control Basics
- Collaborating with GitHub: Pushing, Pulling, and Merging
- Usability of Github Desktop Application: (Pushing, Pulling, and Merging) using UI
### **3. JavaScript (JS)**
- JavaScript Fundamentals: Variables, Data Types, Naming Conventions, and Operators
- Functions, Loops, and Conditionals
- DOM Manipulation
- API Calling ang Asynchronous Architecture
- Events and Event Handling
- Introduction to ES6 Features
- Debugging & Best Practices
### **4. Cascading Style Sheets (CSS)**
- CSS Basics: Selectors, Properties, and Units
- Box Model & Positioning
- Flexbox and Grid Layouts
- Responsive Design with Media Queries
- Animations and Transitions
- CSS Best Practices and Optimization
- Youtube/Spotify/Netflix Clone
### **5. AI Chatbots**
- Introduction to AI and Chatbots
- Overview of Popular LLM APIs (ChatGPT, Gemini, Phind, Claude LLM)
- Setting Up API Keys and Authentication
- Creating Basic Chatbot Features
- Enhancing Chatbots with Advanced Functionalities(Contexts)
- Integrating with Frontend
---
## 👩🏫 Instructor Profile
**Name**: Zeeshan Ali
**Role**: Software Engineer, Web Instructor
**Experience**:
- Rector's Merit Academic Award Holder (UMT)
- Expertise in **MERN, FERN, Next.js TypeScript, React Native, Dapps, GraphQL, and cloud technologies**
- Certifications in **Amazon EBS, Foundational Generative AI, Responsible AI, and Google Cloud Essentials**
- Industry experience in **web/mobile apps**, **cloud native technologies**, **Dapps** and **Multilingual AI Agents**
**LinkedIn**: [Zeeshan Ali](https://www.linkedin.com/in/zeeshanali90233)
**GitHub**: [zeeshanali90233](https://github.com/zeeshanali90233)
---
## 🌟 Key Features of the Course
- Hands-on practice assignments.
- Real-world projects to build a portfolio.
- Collaborative learning with Git and GitHub.
- Integration of AI APIs for chatbot creation.
- Professional tips and industry best practices.
---
## 🚀 How to Get Started
1. **Pre-requisites**: No prior coding experience required! Just bring your curiosity and enthusiasm.
2. **Tools to Install**:
- Code Editor: [VS Code](https://code.visualstudio.com/)
- Browser: [Google Chrome](https://www.google.com/chrome/)
- Git: [Install Git](https://git-scm.com/)
- Github Desktop: [Install Github Desktop](https://desktop.github.com/download/)
- API Clients: [ThunderClient VS Code Extension](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)
3. **Code**: Take updated code by downloading this Repository as a zip or run the following command in CMD if Git is installed successfully.
```bash
git clone https://github.com/zeeshanali90233/Frontend_AI_Chatbot_Evening_Weekend.git
```
---
## 📖 Helping Material
1. **Consult Books**: Refer to John Duckett's "HTML & CSS" and Svekis's "JavaScript: Beginner to Professional" books for foundational knowledge.
2. **Documentation & AI Help**: Utilize AI tools like ChatGPT, Phind, Gemini, and online documentation resources for assistance. They are just a search away!
3. **YouTube Channel**: Explore additional helping content videos on my [Learn With Ali Engineer](https://www.youtube.com/@learnwithaliengineer) to reinforce your learning.
---
## 📝 Contact & Support
For any questions, feel free to reach out me at any social platform plus through email **zeeshanali90233@gmail.com**.