Vanilla JS Project: Multi Step form in HTML, CSS & OOP Javascript
In this video, we create a multistep form using only HTML, CSS and Javascript. This may also serve as an Object Oriented Programming (OOP) tutorial, for we will be working with Javascript classes.
Multi step forms can be difficult to create, especially if you want to add a progress bar. In this tutorial, we add a progress bar to the design.
This multi step form with a step progress bar is just more of an exercise than an actual implementation of a feature. Sometimes, the code in this OOP example with JS will turn out to be over-engineered. And it is true that the same can be done with fewer…
Watch on YouTube ↗
(saves to browser)
Chapters (4)
Introduction
1:41
HTML and structure
7:56
Style the form with CSS
34:01
Enable pagination with Javascript
Playlist
Uploads from Alejandro AO · Alejandro AO · 6 of 60
1
2
3
4
5
▶
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
![Multimodal RAG: Chat with PDFs (Images & Tables) [2025]](https://i.ytimg.com/vi/uLrReyH5cu0/mqdefault.jpg)
45
![Advanced RAG with LlamaIndex - Metadata Extraction [2025]](https://i.ytimg.com/vi/yzPQaNhuVGU/mqdefault.jpg)
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Linear Regression in R - Full Project for Beginners
Alejandro AO
Configure Webpack 5 in Wordpress (2025) with Typescript and SASS
Alejandro AO
R Programming 101 - Crash Course for beginners
Alejandro AO
Convert HTML template to WordPress Theme (2025) - Full Course
Alejandro AO
Javascript Interactive Map with Leaflet EASY (with Marker Clusters & Popups)
Alejandro AO
Vanilla JS Project: Multi Step form in HTML, CSS & OOP Javascript
Alejandro AO
How to do AJAX in WordPress correctly (2025)
Alejandro AO
React Leaflet Tutorial for Beginners (2025)
Alejandro AO
Linear Regression in Python - Full Project for Beginners
Alejandro AO
Logistic Regression Project: Cancer Prediction with Python
Alejandro AO
Display Equations in ChatGPT
Alejandro AO
Create a Chrome Extension (Manifest V3) for ChatGPT
Alejandro AO
Full-Stack Project | ChatGPT API, React, Node.js, Express
Alejandro AO
Streamlit Python Course: Build a Machine Learning App to Predict Cancer
Alejandro AO
Langchain PDF App (GUI) | Create a ChatGPT For Your PDF in Python
Alejandro AO
LangChain Memory Tutorial | Building a ChatGPT Clone in Python
Alejandro AO
Chat with a CSV | LangChain Agents Tutorial (Beginners)
Alejandro AO
Create a ChatGPT clone using Streamlit and LangChain
Alejandro AO
Chat with Multiple PDFs | LangChain App Tutorial in Python (Free LLMs and Embeddings)
Alejandro AO
Full Python Environment Setup for AI (or other) Apps + Virtual Environments
Alejandro AO
Langchain + Qdrant Cloud | Pinecone FREE Alternative (20GB) | Tutorial
Alejandro AO
LangChain Version 0.1 Explained | New Features & Changes
Alejandro AO
Create a RAG Chain using LangChain 0.1 (New version)
Alejandro AO
Tutorial | Chat with any Website using Python and Langchain (LATEST VERSION)
Alejandro AO
Deploy Your AI Streamlit App for FREE | Step-by-Step (Heroku Alternative)
Alejandro AO
What is Google's Gemini 1.5 Pro | 10 Million Token Window
Alejandro AO
Chat with MySQL Database with Python | LangChain Tutorial
Alejandro AO
Stream LLMs with LangChain + Streamlit | Tutorial
Alejandro AO
Chat with MySQL Database using GPT-4 and Mistral AI | Python GUI App
Alejandro AO
#1 Harrison Chase: LangChain and The Future of LLM Applications | Alejandro AO
Alejandro AO
CrewAI Step-by-Step | Complete Course for Beginners
Alejandro AO
Python: Automating a Marketing Team with AI Agents | Planning and Implementing CrewAI
Alejandro AO
Build a Web App (GUI) for your CrewAI Automation (Easy with Python)
Alejandro AO
Early days of RAG and LlamaIndex - Jerry Liu
Alejandro AO
LlamaParse: Convert PDF (with tables) to Markdown
Alejandro AO
#2 Jerry Liu - What is LlamaIndex, Agents & Advice for AI Engineers
Alejandro AO
CrewAI + Exa: Generate a Newsletter with Research Agents (Part 1)
Alejandro AO
#3 Joe Moura | Multi Agent Systems and CrewAI
Alejandro AO
Python: Create a ReAct Agent from Scratch
Alejandro AO
New Groq Models: Best for Function-Calling Agents
Alejandro AO
Introduction to LlamaIndex with Python (2025)
Alejandro AO
LlamaIndex: How to use LLMs
Alejandro AO
LlamaIndex: How to Get Structured Data from LLMs
Alejandro AO
Multimodal RAG: Chat with PDFs (Images & Tables) [2025]
Alejandro AO
Advanced RAG with LlamaIndex - Metadata Extraction [2025]
Alejandro AO
Learn MCP Servers with Python (EASY)
Alejandro AO
Create MCP Clients in JavaScript - Tutorial
Alejandro AO
Create an MCP Client in Python - FastAPI Tutorial
Alejandro AO
How to Build an MCP Client GUI with Streamlit and FastAPI
Alejandro AO
Vibe Coding For Engineers (make it ACTUALLY work)
Alejandro AO
LlamaExtract Tutorial: Convert PDF & Images into JSON
Alejandro AO
Local MCP Servers for Cursor (Step by step)
Alejandro AO
Anthropic: How to Build Multi Agent Systems
Alejandro AO
Deploy Remote MCP Servers in Python (Step by Step)
Alejandro AO
GPT-5 for Developers: API Changes, Pricing, Model Router & Security
Alejandro AO
Tutorial: Auth for Remote MCP Servers (Step by Step) | OAuth 2.1 with ScaleKit
Alejandro AO
Generate UI Tests with TestSprite MCP Server + TRAE
Alejandro AO
#4 Allan Guo | 19-yo YC Founder - Willow Voice
Alejandro AO
RAG Project: Build an AI Onboarding Chatbot with Streamlit, LangChain, and ChromaDB
Alejandro AO
MCP Security | Malicious MCP Servers (Protect Yourself)
Alejandro AO
DeepCamp AI