What is Bootstrap? And Why Mastering It Will Save You Hundreds of Hours

Brad Hussey
A free video tutorial from Brad Hussey
Marketing Consultant at FreelancingFreedom.com
4.5 instructor rating • 11 courses • 490,175 students

Lecture description

Bootstrap is the most popular front-end framework on the web today. In this lecture, I talk about how learning to properly use Bootstrap can save yourself hundreds of hours, and increase your work output by up to 100%.

Learn more from the full course

WordPress Theme Development with Bootstrap

Learn how to confidently develop custom & profitable Responsive WordPress Themes and Websites with no prior experience.

12:02:51 of on-demand video • Updated July 2016

  • Have the skills to start making money on the side, as a casual freelancer, or full time as a work-from-home freelancer
  • Easily create a beautiful HTML & CSS website with Bootstrap (that doesn't look like generic Bootstrap websites!)
  • Convert any static HTML & CSS website into a Custom WordPress Theme
  • Have a thorough understanding of utilizing PHP to create WordPress websites & themes
  • Feel comfortable with the process of turning static websites into dynamic WordPress websites
  • Fully understand how to use Custom Post Types and Advanced Custom Fields in WordPress
  • Allow your clients to update their websites by themselves by creating user accounts
English Hey, everyone. Welcome back to Boost Your Income with Bootstrap to WordPress. This lecture is called What is Bootstrap, and Why Mastering It Will Save You Hundreds of Hours. [MUSIC] So I wanna tell you a little bit about Bootstrap. Bootstrap is a framework. It is the most popular HTML and CSS framework, actually, for developing responsive and mobile first projects on the web. And responsive and mobile first basically means it focuses on websites that are coded to be fully accessible on mobile devices and tablets. So instead of developing your website first for the desktop, and then later on, adding in some media queries and making it work on your iPhone or something, that's not what Bootstrap tries to do. What they're doing is focusing primarily on mobile, and then scaling it up to desktop. So it should work all across the board. So it's really great for that, and it helps you save time, which is what this lecture is about. Before I started using Bootstrap, and I've tried a bunch of other frameworks too, and they're great. But before I started using Bootstrap, I used to just hand-code by HTML and CSS templates. And what I mean by templates is I worked at a studio as a front-end web developer. What front-end web developers do are code templates in HTML, and CSS, and JavaScript or J-Query. And then they hand those templates off to a back-end developer. The back-end developer then integrates those HTML and CSS static templates into the database, makes them dynamic, uses PHP or whatever programming language, and sets the rest of the website up. So basically, takes it from the front-end guy, the back-end guy does the really intense, advanced development. And then you kinda have a well-rounded website. Bootstrap comes into play when you are trying to build templates. So like I said, when I used to code templates by hand, I used to take a long time because I am recoding everything over and over and over again. And a lot of the same elements, I'm just basically reinventing every single time, and it's time consuming. When I discovered Bootstrap, I realized, hey, I can actually use this to save me a massive amount of time because they already have things that you just don't need to recode every single time, like grids, responsive grids. Sure, I can code a responsive grid like nobody's business. But I don't want to every single time I do a project, because it's gonna waste time. And I like to deliver fast and efficiently. Instead of me saying, hey, no, I wanna practice my responsive grids, I could just use Bootstrap to just basically do it for me. Things like form elements, styling typography, components like icons, these are font icons. Things like badges, and alerts, panels, like this, just simple things, little panels like this, or wells where you kind of highlight some texts in a little well. Navigation bars, and tabs, buttons, things like styling images, and things like tables. Tables are a pain in the butt to look good, and they've already just done it for you by just adding a class called table. So it's amazing because there's so much here that you just don't need to recreate over and over and over and over again every single project. So here's a good example, lets say you're self-employed or you work at a company. If you understand Bootstrap and how to develop website layouts with Bootstrap, it's gonna save you and your company precious development time. And what I mean precious development time, I mean hundreds of hours, or thousands of dollars. So if you're self-employed, look at it this way. Two self-employed web developers are each hired to build a small website for let's say, $1,000. Developer number one hand-codes his website, and it takes him about 40 hours to complete, effectively making him $25 an hour. Developer number two uses Bootstrap to build his website, and it takes him 20 hours, because he's saving so much time, effectively making him $50 an hour. So which developer do you wanna be? So in that 40 hours, developer number two could do projects and make $2,000. Rather than developer number one who's hand-coding everything, and he only did the one project in the 40 hours. Imagine how much time you can save and how much more money you can make by using a framework like Bootstrap. That's why I sing its praises so much because it's awesome, and it saves me so much time, and it literally makes me thousands of dollars more because I use Bootstrap. When Bootstrap says, it's the most popular HTML, CSS, and JS framework for developing responsive, mobile first products on the web, they mean it. And I know that because I work with it every single day, and I've developed hundreds of websites using Bootstrap. So that's why we're using Bootstrap in this project. [MUSIC]