Build a Chatbot integrated Website using Bootstrap 4

Name: Build a Chatbot integrated Website using Bootstrap 4
Rating: 4.1 (38 reviews)

Learn to build a conversation chatbot and integrate it into a responsive website built using HTML5,CSS3 and Bootstrap 4

Created byAttreya Bhatt

Last updated 4/2017

English

What you'll 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

Course content

6 sections • 27 lectures • 2h 42m total length

Start here1:57
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.
Walkthrough2:48
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!
Section - 1

HTML Level- 15:11
Understand the difference between frontend and backend. Then learn about the structure and tags ( example title tag) that makeup an HTML Page
HTML Level - 27:23
Headings
Paragraphs
Spans
Viewing the source code of any website
Div tags
anchor tags
Adding Images to site
HTML Level - 36:29
Ordered and Unordered Lists
Forms
Input tags
Difference between GET and POST method of sending data to backend
HTML Quiz

Bootstrap Walkthrough0:57
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.
Introduction to Bootstrap5:59
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
Integrating Bootstrap, Buttons and Forms6:00
Integrating bootstrap into our project
Buttons
Forms
Navigationbar11:22
Navbar (Intro,responsive w/o firefox, working of hamburger, fixing the corner,glyphicon)
The GRID System8:18
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.
Understanding the Grid System11:27
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
Migrating to Bootstrap 49:36
Migration from Bootstrap 3 to Bootstrap4
Bootstrap Quiz

Intro to Project1:24
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.
Starting Code and Navbar9:39
In this lecture we will be building our navbar that is, our navigation bar.
Building our first Chatbot9:23
Signup on hellotars platform and building our first chatbot
Understanding the Portfolio Chatbot2:14
Discuss the chatflow of our Chatbot
iFrame and Adding links5:34
We will be using iframes to integrate the chatbot into our portfolio website. We will also add links to href elements of anchor tags.
Buildling the Portfolio Webpage9:48
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.
Building the Udemy Webpage3:57
Building the udemy webpage. This is similar to portfolio page and we will using cards in this webpage too.
Building the Contact form4:35
We will be building the contact form using the inbuilt feature of Bootstrap 4
Hosting the Website2:55
Host a website on the internet
Capstone Quiz

Requirements

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

Description

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 this course is for:

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

Build a Chatbot integrated Website using Bootstrap 4

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 5min

Getting started with HTML53 lectures • 19min

Getting started with CSS33 lectures • 17min

Getting started with Javascript and jQuery3 lectures • 19min

Getting started with Bootstrap 3 and Bootstrap 47 lectures • 54min

Capstone Project : Chatbot and Portfolio Website9 lectures • 49min

Requirements

Description

Who this course is for: