https://github.com/zeeshanali90233/nexskill-frontend-b-5
Frontend Development with AI Chatbot Course - Batch 5 by NeXskill, Lahore. Learn the fundamentals of HTML, CSS, JavaScript, Git/GitHub, and AI chatbot integration using APIs like ChatGPT, Gemini, Phind, and Claude LLM. A beginner-friendly, 16-lecture course to kickstart your journey in frontend development and AI-powered applications. 🚀
https://github.com/zeeshanali90233/nexskill-frontend-b-5
ai animations api chatbot chatgpt clone-website css dom event-loop gemini git github githubdesktop html javascript llm media-queries restful-api weather-app
Last synced: 30 days ago
JSON representation
Frontend Development with AI Chatbot Course - Batch 5 by NeXskill, Lahore. Learn the fundamentals of HTML, CSS, JavaScript, Git/GitHub, and AI chatbot integration using APIs like ChatGPT, Gemini, Phind, and Claude LLM. A beginner-friendly, 16-lecture course to kickstart your journey in frontend development and AI-powered applications. 🚀
- Host: GitHub
- URL: https://github.com/zeeshanali90233/nexskill-frontend-b-5
- Owner: zeeshanali90233
- Created: 2024-11-30T09:05:48.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-20T17:50:40.000Z (3 months ago)
- Last Synced: 2025-01-20T18:35:07.689Z (3 months ago)
- Topics: ai, animations, api, chatbot, chatgpt, clone-website, css, dom, event-loop, gemini, git, github, githubdesktop, html, javascript, llm, media-queries, restful-api, weather-app
- Language: HTML
- Homepage: https://p2pclouds.net/
- Size: 2.52 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
## Batch - 5
## Company: NeXskill Arfa Tower Main Branch, Lahore Pakistan
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/NeXskill-Frontend-B-5.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 **[email protected]**.