Register
Information Technology

AI-Powered Web Development course

This beginner-friendly course introduces the fundamentals of web development and AI integration through a hands-on project. You'll build a Portfolio website for yourself, learning how to create a responsive web application and enhance it with AI features. No prior experience is needed, making it the perfect course for beginners eager to dive into both web development and AI.

42 hours
28 Lessons
Beginner

This course includes:

28Lessons
Access to laptops
Real-Time Project
Certificate of completion

Course Content

  • Introduction and making students familiar with the system
  • Course Overview & Roadmap
  • Generative AI & Prompt Engineering
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Web Development Essentials
  • Basics of HTML
  • How to install VS Code
  • Tags and Syntax
  • Inline and Block-level Element
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Forms and Table
  • Media, Emojis and icons in HTML
  • Navigation in HTML
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Miscellaneous feature (Download, E-mail, phone, etc.)
  • Real World Project (RWP) 1- Create a structure of Portfolio using HTML
  • Quiz 1
  • Quiz 2
  • Quiz 3
  • Open to questions
  • Basics of CSS and MDN Documentation
  • Selectors
  • Box Model
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Positioning
  • Flexbox
  • Project 1 - Profile Card
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Project 2 - Product Card
  • RWP 1 - Add CSS to your Portfolio
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Basics of Responsive Web Design
  • Mobile First vs Desktop First
  • Media Query
  • RWP 1 - Continue Adding CSS to your Portfolio
  • Recap of previous class & Overview of today's class
  • Linking JavaScript to HTML
  • Variable Declaration & Explanation
  • Primitive & Non-Primitive Datatypes
  • Differences between Let, Var and Const
  • Number methods
  • Arithmetic Operators & Practice case study
  • Comparison Operators
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Working with Strings
  • Quiz
  • Function Basics & Declaration
  • Function Parameters, Arguments and Return keyword
  • Function Expressions & Arrow Functions
  • Parameters vs Arguments
  • Anonymous Function & Default Parameters
  • Open to questions
  • Recap of previous class & Overview of today's class
  • (Coding Challenge) Build a Simple Calculator
  • (Coding Challenge) Build a Character tool
  • (Coding Challenge) Build a string formatter
  • (Coding Challenge) Build a student grading system
  • (Project) Build a Dynamic Colour changer
  • (Project) Build Music Player (Sound Board)
  • (Project) Build Counter Project
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Introducing the Section & DOM Tree
  • Anatomy of a basic Web page
  • LIVE DOM Inspection
  • Element Nodes & the window object
  • Using getElementById & getElementsByClassName
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Using querySelector and querySelectorAll
  • Child vs Children Nodes
  • Using getElementByName
  • Accessing Parent & Child elements
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Using Data Attributes
  • Practice Project: Number Adder
  • Quiz
  • Control Structures (IF Statement)
  • (Project) Age Checker
  • Open to questions
  • Recap of previous class & Overview of today's class
  • (Project) Temperature Converter
  • Control Structure - Switch Statement
  • (Project) Know your Animal Sound
  • Control Structure - For Loop
  • (Project) Count Down Timer
  • Control Structure - While Loop
  • (Project) Guess the Number
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Creating and Adding Properties to Objects
  • Understanding Arrays & Array Methods
  • Accessing Object Parameters
  • Understanding Object Methods
  • Nesting Objects & Array of Objects
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Array Transformation - forEach() Map() Reduce() Find() methods
  • (Project) Profile card Generator | Creating HTML Element using Javascript
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Smart Loan Calculator
  • Simple Counter Project
  • Tip Calculator
  • Auto Typed Project
  • Accordion Component
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Percentage Calculator
  • Savings Calculator
  • Task Manager Pro
  • Build HTML/CSS/JS portfolio Website Part 1
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Build HTML/CSS/JS portfolio Website Part 1
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Introduction & ES6 Overview
  • Arrow Functions
  • “let“ and “const“
  • Destructuring in JavaScript
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Introduction and DOM Traversal Overview
  • Using parentNode in DOM Traversal
  • Using childNodes previousSibling nextSibling previousElementSibling textContent innerHTML & innerText
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Using setAttribute and getAttribute
  • Using createElement appendChild() and insertBefore
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Using removeChild and classList
  • DOM Events & common DOM event types
  • Inline VS Traditional event handlers
  • Using Inline & Traditional event handlers
  • Open to questions
  • Recap of previous class & Overview of today's class
  • addEventListener() and removeEventListener() methods
  • Event Flow | Bubble-Capturing-Target Phases
  • event.stopPropogation() method
  • Event Delegators
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Using Multiple event listeners on an element
  • Creating and Triggering Custom Events
  • Synchronous Programming and code examples
  • Async Programming Basics
  • Event Loop & Understanding HTTP Requests
  • API Basics
  • Callback Function & Code Example
  • HTTP Request Components & Making first HTTP Request
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Callback function in Real Example
  • Understanding Promise with a Real example
  • Understanding Async Await
  • (Async Project) Awesome Posts
  • (Async Project) Country Explorer
  • (Async API Project) Movie Finder
  • Open to questions
  • Recap of previous class & Overview of today's class
  • (GenAI Project) Build an AI Chat App using HTML/CSS/JS
  • (Async Project) Build AI Background Remover
  • Open to questions

What You Will Learn

Basics of HTML, CSS, and JavaScript.
How to design and build a responsive web page.
Integration of simple AI models into a web project.
Deploying a web page.
Learn JavaScript
Design to learn Chatapp
Design to learn Country Explorer
Design to learn Movie Finder

Skills You Will Gain

HTML
CSS
JavaScript
GitHub
GitHub Pages
Deployment
BootStrap Design
Share: