Build a Chatbot integrated Website using Bootstrap 4
4.8 (17 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
183 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build a Chatbot integrated Website using Bootstrap 4 to your Wishlist.

Add to Wishlist

Build a Chatbot integrated Website using Bootstrap 4

Learn to build a conversation chatbot and integrate it into a responsive website built using HTML5,CSS3 and Bootstrap 4
4.8 (17 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
183 students enrolled
Created by Attreya Bhatt
Last updated 4/2017
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a complete portfolio website where I will be able to upload my projects
  • Make a chatbot from scatch without any coding
  • Learn HTML5, CSS3, Javascript, jQuery, Bootstrap 3 and Bootstrap 4
  • Build amazing websites quickly without having to think too much
  • Learn basic things that are required to make a website responsive and make sure it looks good on tablets and mobile phone
  • Build amazing chatbots like - Feedback bot, Customer Support chatbot, Training chatbot etc.
  • 3 hours of Full HD video material divided into 30 downloadable lectures
View Curriculum
  • An Internet connection is required
  • You won’t need to buy any software – everything we are going to use will be free
  • Desire to learn and improve your skills

Have you ever wanted to build a chatbot but didn't know how to? May be you even know HTML and CSS but you have no idea how to take these languages and build a complete website. In this course we will be combining these skills together to make a chatbot integrated website. It will be a portfolio website, where you will be able to showcase your projects and skills.

With this course you will be able to create beautiful looking websites and chatbots quickly. You will learn front end web technologies like HTML5, CSS3, JavaScript, jQuery and Bootstrap 4.

Why choose me as an instructor? Why buy this course among all those other courses?

When i was a kid i saw this YouTube video on how make a folder invisible on Windows I was so fascinated with this idea. Since then my love for technology has only grown. I understand the people who are passionate about learning new things. At the end of each section we will take a quiz to check up on your skills and see if we’re ready for the next section. We will create this project together from start to finish.

So, why wait? If all this sounds great to you, Press on “Take this Course” and start learning today! 100% money-back guarantee!

Who is the target audience?
  • Anyone who wants to make a chatbot without any coding
  • Students who have a basic understanding of HTML and CSS but want to take their skills to the next level
  • Anyone who wants to start a career in chatbot and web development
  • Students who wants to learn web development and design
  • Do NOT take this course if you are a web developer with many years of experience
Students Who Viewed This Course Also Viewed
Curriculum For This Course
28 Lectures
3 Lectures 08:39

Before getting into the serious stuff, In this lecture we will go over a trick which is know as live source code editing. It can be used to prank friends. 

Preview 01:57

Hi guys! I am glad you decided to join the course. In this course we will be building a fully functional chatbot integrated website. The website will be a portfolio website where you can showcase the projects that you have made!

In these type of courses I really like following the from zero approach. The from zero approach is basically teaching everything from scratch and then going on to make a really complex project. We will following a from zero approach in this project too!

The whole course is divided into 6 sections -

1) Section 1 - Installing Python and Pycharm.
Now the code can also be written in simple Notepad or some code editor but I really like coding in Pycharm because it offers a lot of awesome features. Not only that you can literally code anything in Pycharm.

Want to make a website? Can be done in Pycharm
Want to write a python code? or May be learn Machine Learning? All this is so easily implemented in Pycharm. Pycharm requires Python to run and that is why we are also going to be installing Python. The whole process is going to take about 5 minutes max.

2) Section 2 - Introduction to HTML5
It stands for Hyper Text Markup language. Lets compare our website to our human body. In human body we have a skeleton on which we have skin,hair and other stuff which makes us look beautiful. Similarly HTML is a coding language which forms the skeleton of the website which is useful and forms the base of making our website.

3) Section 3 - Introduction to CSS3
It stands for Cascading style sheets. It is like the skin and hair on human body. It covers the skeleton and makes it look beautiful. So CSS beautifies the HTML and makes our website look awesome.

4) Section 4 - Introduction to JavaScript and jQuery
It is used to add dynamism to our website. Using javascript and jquery we can add cool effects to our websites like transitions etc.

5) Section 5 - Introduction to Bootstrap 3 and Bootstrap 4
Bootstrap is a web framework and learning this is going to make your life so much easier as a web developer. We will be learning both versions. Bootstrap 3 as well as bootstrap 4. I won't tell you much about because we will going really in deep with this topic.

6) Section 6 - Capstone Project - Chatbot and Portfolio website
This will be our main project. We will be not only be creating our conversation chatbot but also making a portfolio website where we can integrate our chatbot on.

Now that you know what the course is going to cover. I'll see you in the next video where we will installing Python and Pycharm. I'll see you over there!

Preview 02:48

Installing Python3.6 and Pycharm

Preview 03:54

A technique using to manipulate a Webpage live.

Section - 1
1 question
Getting started with HTML5
3 Lectures 19:03
Understand the difference between frontend and backend. Then learn about the structure and tags ( example title tag) that makeup an HTML Page
Preview 05:11

Viewing the source code of any website
Div tags
anchor tags
Adding Images to site

Preview 07:23

Ordered and Unordered Lists
Input tags
Difference between GET and POST method of sending data to backend

Preview 06:29

Forms. Remember them?

1 question
Getting started with CSS3
3 Lectures 16:35

Understading Cascading style sheets ( CSS )
Style Tags
Types of CSS -
1) Inline CSS
2) Internal CSS
3) External CSS
Link tags

CSS Level - 1

Id and Class
Changing fontsize and fontcolor
Changing width and height of an image

CSS Level - 2

Margin and Padding
HTML Comments

CSS Level - 3

ID and classes in CSS

CSS Quiz
1 question
Getting started with Javascript and jQuery
3 Lectures 19:21

What is jQuery and JavaScript
Internal and external scripts
Alerts and variables

Javascript and jQuery - Level 1

Adding the external jQuery file
What is this jQuery file
Identifiers and Onclick

Javascript and jQuery - Level 2

Hide and show
Form Value

Javascript and jQuery - Level 3

Lets see if you remember the function of this piece of code.

jQuery Quiz
1 question
Getting started with Bootstrap 3 and Bootstrap 4
7 Lectures 53:39

Hi guys! Welcome back. In this section we are going to be learning about a web framework called Bootstrap. Learning this is going to make your life so much easier.

First we are going to understand what is bootstrap and why it is important to learn about it. We are going go over some basic terms like responsivity. After that we are going to actually integrate bootstrap into our website and integrate elements like navbar, forms. Then we are going to understand the concept of grid system which is the most important part of bootstrap.

Now, during the making of this video, stable version of bootstrap4 had not been realeased so we are going to learn about bootstrap 3 but there is an alpha version of bootstrap4 so here is what we are going to do. We will first learn about boostrap3 and then we are going to learn how to migrate our website from bootstrap 3 to bootstrap4. And Therefore, you will be able to learn both versions of bootstrap in this section.

Bootstrap Walkthrough

Framework for rapid prototyping
Gives a lot of plug and play features
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Made by twitter development team
Responsive - Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Containers and container fluids

Introduction to Bootstrap

Integrating bootstrap into our project

Integrating Bootstrap, Buttons and Forms

Navbar (Intro,responsive w/o firefox, working of hamburger, fixing the corner,glyphicon)


GRID System is the most important part of bootstrap. This is what makes a website responsive. So you only have to create the website once and it is going to look good on all kind of devices, irrespective of their height or width.

Lets do an excercise. Imagine a room with a lot of books just lying on the floor. The whole floor is just covered by books. Suddently the room starts shrinking and therefore the height and width of the floor of the room also starts decreasing. Now if there wasn't a way to handle the books lying on the floor. The books would just get squashed and become unusable as the size of the room decreased more and more.

Bootstrap provides a way to handle all those books. What it does is as the floor size decreases it starts stacking the books on top of each other. Which prevents the books from getting squashed. This is system of boostrap is called the grid system.

The GRID System

Stack of books as GRID
What the bootstrap website has to say?
Container -> Row -> Columns
You have to concentrate only on col-sm-*
Target website example
Make the website with grid
Responsive Images

Understanding the Grid System

Migration from Bootstrap 3 to Bootstrap4

Migrating to Bootstrap 4

This one is about the Grid System.

Bootstrap Quiz
1 question
Capstone Project : Chatbot and Portfolio Website
9 Lectures 49:58

Hi guys! Welcome back. In this section we are going to be talking about our capstone project of building a portfolio website. Before you start watching videos after this one, I want you to do one thing. I want you take all the knowledge that I have given you in the previous videos and try to make your own about me/portfolio website.

This will is help you internalize all the things that I have taught you in the previous videos. If you are still having problems with web development and want to understand more of it before actually starting to make your own website. You can watch further. And just to give you an idea, here is what we are going to be making in the coming videos.

Intro to Project

In this lecture we will be building our navbar that is, our navigation bar.

Starting Code and Navbar

Signup on hellotars platform and building our first chatbot
Building our first Chatbot

Discuss the chatflow of our Chatbot

Understanding the Portfolio Chatbot

We will be using iframes to integrate the chatbot into our portfolio website. We will also add links to href elements of anchor tags.

iFrame and Adding links

We will be using cards feature of Bootstrap 4 to implement the Portfolio webpage. We will also add an external font to this page as a heading.

Buildling the Portfolio Webpage

Building the udemy webpage. This is similar to portfolio page and we will using cards in this webpage too.

Building the Udemy Webpage

We will be building the contact form using the inbuilt feature of Bootstrap 4

Building the Contact form

Host a website on the internet

Hosting the Website

This one is about the iframes

Capstone Quiz
1 question
About the Instructor
Attreya Bhatt
4.2 Average rating
221 Reviews
4,042 Students
3 Courses
Web and Android Developer (Best selling instructor on Udemy)

When I was a kid I saw this YouTube video on how to make a folder invisible on Windows. I have never looked back since then. My love for technology has only grown.

I started with security since that was one of the areas that fascinated me. Then i went on to win the award for designing using Photoshop at Cofas '2012. On the destructive side, I always made scripts that used to mess up the systems at my school. I was almost suspended. I learned my lesson and vowed to do only constructive things. To make people aware of security issues, along with 2 friends started a Facebook page and group called YAP

To make things more interesting Web development came into my life which helped me get into the most prestigious chapter at my college IEEE. This helped me master different things that got my attention

- Android Development
- Machine learning
- Designing ( Photoshop and Illustrator)
- Internet of things ( IOT )
- Software Development

I never really wanted to go to a college. Still against it but it made me realize that the joy of creating something with a team of people is unparalleled. I created a blog called hackstories which helps people who are not so familiar with technology get familiar with it and benefit from it. It has more 2,00,000 views today.

Things I learned and am still learning from it are Writing,Wordpress CMS, SEO, Google Analytics and Adsense and how to market a product after creating it.