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.
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!
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.
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.
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!
A technique using to manipulate a Webpage live.
Viewing the source code of any website
Adding Images to site
Ordered and Unordered Lists
Difference between GET and POST method of sending data to backend
Forms. Remember them?
Understading Cascading style sheets ( CSS )
Types of CSS -
1) Inline CSS
2) Internal CSS
3) External CSS
Id and Class
Changing fontsize and fontcolor
Changing width and height of an image
Margin and Padding
ID and classes in CSS
Internal and external scripts
Alerts and variables
Adding the external jQuery file
What is this jQuery file
Identifiers and Onclick
Hide and show
Lets see if you remember the function of this piece of code.
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.
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 into our project
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.
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
Migration from Bootstrap 3 to Bootstrap4
This one is about the Grid System.
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.
In this lecture we will be building our navbar that is, our navigation bar.
Discuss the chatflow of our 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.
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 webpage. This is similar to portfolio page and we will using cards in this webpage too.
We will be building the contact form using the inbuilt feature of Bootstrap 4
Host a website on the internet
This one is about the iframes
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.