This course will fast track you from zero to hero in web design by teaching you the wildly popular Bootstrap 4 web framework.
By learning bootstrap, you are putting yourself ahead of the tech game. You will be able to build beautiful, professional-looking websites extremely quickly.
In this course, you will discover the importance of Bootstrap, and be able to use it for what it's best for, making websites look amazing. We will go step by step to learn how to use various features in Bootstrap 4 (some unique only to bootstrap 4). We will learn the basics and then some.
This course will give you steady ground in bootstrap, and allow for you to keep up with the technology as it evolves. This course will help take you from no bootstrap knowledge whatsoever to using it to build great websites.
The majority of this course will be spent on taking a landing page with absolutely no styling or images, and applying bootstrap to it to make it look amazing. Along the way, we will learn about how bootstrap works and what makes it so great. We will learn basic concepts in design, as well as less prominent bootstrap features.
This course will get you kick started with bootstrap and will help you make beautiful websites. We won't just learn bootstrap, but we will also learn about web design, and key things that make sites look awesome. We will learn about what makes modern websites look so nice, and how to use bootstrap to make our websites look nice.
Overall, this course has everything you need. We will walk you through installation, show you how bootstrap is structured, show you different themes, elements, and so much more. By learning the essentials of bootstrap, this course also teaches you the do's and don'ts of web design. Bootstrap makes web design easy and fast, two things that busy people may need in a course.
I hope that you consider purchasing this course, feel free to DM me with any questions at all.
So what are you waiting for? Let's get started!
Hello everyone! This is just a quick little lecture on getting you introduced to the course before we start learning bootstrap.
A look into the main structure of this course. We will be building a landing page with no styling, then add styling from bootstrap 4 to it to create a beautiful landing page.
This video will be discussing reasons why you should learn bootstrap. Bootstrap is incredibly popular, It is very easy to use and we will be using the latest and greatest bootstrap 4.
This article will teach us about what makes websites look great. Every modern looking site uses these 3 s's to make their site look great. With help from bootstrap, you can implement these design tips to our landing page and make it look great.
Get the example code so we can modify it in the following videos. We will be using GitHub. If you ever have any problems, refer to the github to get the Bootstrap code.
In this video, we will import bootstrap into our bare-bones application, to see what it does. You can get the code from the bootstrap 4 docs. This CDN is a little piece HTML code that you have to put in the head tags of your site. By putting the CDN in the head tag, you can add bootstrap styling to your site.
Let's create a navbar and learn how bootstrap navbars work in the process. A navbar is the center of the sight. It means "navigation bar". By creating a navbar, we have completed one of the essential functions of a modern website. By using Bootstrap 4, we can create a fully functioning and customizable navbar in minutes.
Now that our navbar is finished, let's fill it up with social media links! We will be taking simple HTML links and applying a little bit of HTML into them to show links to Twitter, Youtube and Github, all perfectly centered and styled with pictures.
We will start with the hardest part of the course, creating a slideshow with bootstrap carousel. The bootstrap carousel is going to give life to our website, showing a comfortable and professional display of information to our site.
There is still one thing we have to do to make the carousel work. After fixing the carousel, we will add a little more styling to it, giving it that final vibrant touch.
Just add some last minute details to finish our beautiful carousel. The carousel now makes the website look professional, and leaves a great impression on the user.
You may not know what cards are, but they are extremely useful. Cards are a creative bootstrap feature that allow us to display small content in the best way possible. You've probably seen bootstrap cards before!
Now that we know what cards are, let's create some for our site! These cards will be put in place of the links that we have on our site.
Bootstrap columns will prove to be very useful in making our site look amazing. The bootstrap grid system (what we use columns with) is basically bootstrap's claim to fame, and it is even more useful in Bootstrap 4. By putting things into columns, we can better organize our site.
Now that we know about columns, it's time to apply them to our site. These columns will give the user space (one of the 3 s's of design) and make the site look less cluttered and more professional overall.
We will now take the cards and finish them up. Our cards will finally be done and put into appropriate columns. We have taken two bootstrap features and used them together to show content in the best way possible.
The last element we have to style in our site is the form. Bootstrap 4 makes styling forms quite simple. This lecture will focus on styling text forms, as they are by far the most used.
The bootstrap grid system can be tricky, if you get stuck at any point, please refer to this lecture or the bootstrap docs.
Did you know that bootstrap gives us several different button styles? We can use these styles to communicate to the user what each button is for. Cool huh?
Make text look super legit by giving it a tag. A tag is simply a string of text assigned to a bootstrap element. You can add a take to a user's name who is an admin, stuff like that.
Just like at a sports game, the jumbotron is a big place for us to put in the main content of our site. A jumbotron is like a big card. Originally, the jumbotron was going to be in place of the carousel, but I decided to add both to the course instead.
Bootstrap may seem kind of boring. To give our websites personality, we will add themes to our bootstrap site from bootswatch. There are many websites where you can get bootstrap themes. Bootswatch just happens to be my favourite. If you want a more professional theme, there are many themes that you can purchase online as well.
This is just a quick reference (if you need it) of everything we learned about bootstrap in this section.
Let's make sure that you know everything in this quiz