WordPress Theme Development with Bootstrap
4.6 (4,031 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.
27,909 students enrolled
Wishlisted Wishlist

Please confirm that you want to add WordPress Theme Development with Bootstrap to your Wishlist.

Add to Wishlist

WordPress Theme Development with Bootstrap

Learn how to confidently develop custom & profitable Responsive WordPress Themes and Websites with no prior experience.
Best Selling
4.6 (4,031 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.
27,909 students enrolled
Last updated 7/2016
English
English
Curiosity Sale
Current price: $10 Original price: $175 Discount: 94% off
30-Day Money-Back Guarantee
Includes:
  • 12 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • Have a basic understanding of HTML, CSS and PHP (all courses I offer)
  • Have access to a code editor, free or otherwise. I suggest Coda 2, as that's the editor I use exclusively.
  • An Internet connection is required.
  • A fresh copy of Bootstrap and WordPress (we will go over this in the beginning of the course).
  • Download & Install MAMP (or alternatives — we cover this in the course)
  • Your favourite drink.
Description

Course Updated on July 18th, 2016

The final course files now include the latest version of Bootstrap and WordPress, for your convenience.

- - -

Do you want to supercharge your HTML, CSS & PHP knowledge and learn how to turn them into a real business that can make you more money as a freelancer?

Whether you're a freelance designer, entrepreneur, employee for a company, code hobbyist, or looking for a new career — this course gives you an immensely valuable skill that will enable you to either:

Make money on the side

So you can save up for that Hawaiian vacation you've been wanting, help pay off your debt, your car, your mortgage, or simply just to have bonus cash laying around.

Create a full-time income

WordPress developers have options. Many developers make a generous living off of creating custom WordPress themes and selling them on websites like ThemeForest. Freelance designers and developers can also take on WordPress projects and make an extra $1,000 - $5,000+ per month.

Who Should Take This Course?

Graphic & Web Designers

Graphic designers are extremely talented, but ask them to code their designs and they'll freeze up! This leaves them with no other choice but to hire a web developer. Any professional graphic designers knows web developers can be expensive.

If you're a designer, learning to code your own WordPress websites can change your business entirely! Now, not only are you a great designer, but you're a skillful developer, too! This puts you in a position tomake an extra $1,000 – $5,000 per project.

Entrepreneurs

Entrepreneurs have big dreams, and in many cases, shoestring budgets. In order to survive in the cut-throat world of the Startup company, it's a necessity to have a world-class website. However, world-class websites come with a large price tag.

If you can learn how to build a high-quality startup website by yourself, then you've just saved yourself a lot of cash, tens of thousands of dollars in many cases.

Employees of a company

Any company knows the education & training of their employees is key to a thriving team.

Depending on the type of company you work for, if you understand how to code, and can develop CMS driven websites, that gives you negotiating power for a better position, or a higher salary.

Code Hobbyists

It's fun to learn challenging new skills. Code hobbyists can add dynamic websites to their arsenal of tools to play with — you can even sell WordPress themes and plugins for cash! The possibilities are truly endless.

People Looking for a New Career

Are you out of work? Looking for a more rewarding job? Desire a career that can allow you to work almost anywhere in the world? Becoming a Web Developer might be the answer for you.

Web developers are paid well, anywhere from $33,000 to more than $105,000 per year. They get to work at amazing companies that are changing the world, or they enjoy the ability to start their own companies, become location-independent and work from home, from coffee shops, in an airplane, on the beach, or wherever they want!

Final Project Features

Throughout this entire course, you work towards building an incredibly beautiful, 100% custom website using the Bootstrap framework. The coolest part? The Bootstrap website doesn't look anything like the Bootstrap websites you see all over the Internet. It's a highly customized design, and the type of website layout I use when I build custom WordPress websites for my real-life clients.

The final project features:

Sexy & Modern Design

You get to work with a modern, professional quality design & layout.

Quality HTML5 & CSS3

You'll learn how hand-craft a stunning website with valid, semantic and beautiful HTML5 & CSS3.

Easy-to-use CMS

Allow your clients to easily update their websites by converting your static websites to dynamic websites, using WordPress.

You can dramatically increase your efficiency, and supercharge your web development skills. And by doing so, you'll effectively be able to take on more projects, charge higher rates, and make more money as a freelancer.

Why take this course?

I don't mess around. I do this for a living, and I'm sharing you my exact process for making a comfortable living as a work-from-home web developer. There is absolutely no filler in this course, no fluff, just 100% quality content, nothing less. If you take this course, follow my lead, and take action — I guarantee you will not only love the course, but you'll see real results; you will have the skills & confidence to take on WordPress projects for clients, charge more money, and make the value of the course back in a single project. If you hate the course (which you won't) you have 30-days to get a 100% refund — no risk, no problem.

Stop wasting time, and come learn with me! Enroll today!

Who is the target audience?
  • This course is for those who are self-driven and take action! The skills you will learn in this course will allow you to create an income on the side, or build a full-time business creating custom WordPress websites for clients.
  • Do you have a basic understanding of HTML, CSS and PHP? This course will supercharge those skills and turn them into incredibly valuable assets.
  • If you don't have a basic understanding of HTML, CSS or PHP, you're going to have a difficult time with this course, and should brush up on those skills before investing in this course.
  • This course is probably not for you if you don't like humour, fast-paced hands-on learning, or learning skills that can change your life.
  • This course is for those who want to start a web development business on the side, or full-time as a work-from-home freelancer.
  • This course is probably not for you if you don't like humour, fast-paced hands-on learning, or learning skills that can significantly improve your business or even change your life.
  • If you like the idea of creating an income on the side, learning to code custom WordPress websites with a framework like Bootstrap is a surefire way to get yourself some extra freelance gigs.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
83 Lectures
12:03:10
+
Getting Started With This Course
4 Lectures 22:08

Welcome to Boost Your Income with Bootstrap to WordPress!

In this lecture, I'll make it clear to you why you made an incredibly smart decision. I cover a few important points, including:

  1. How learning WordPress can boost your income by $1k - $5k, or more!
  2. How anyone from a graphic designer, to a self-employed entrepreneur can greatly improve their career by taking this course.
  3. How you'll make the value of this course back tenfold in a single, paid WordPress project.
Preview 04:28

In this lecture, we're going to take a look at the final WordPress website we're going to have built by the end of the course. You'll see:

  1. The beautiful, custom home page
  2. Dynamic testimonials
  3. How to edit the logo in the WordPress customizer
  4. The custom blog page
  5. How to add dynamic resources
  6. Contact page
  7. The WordPress admin panel
Preview 08:07

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%.

Preview 05:19

Test your knowledge about Bootstrap.

Bootstrap Pop Quiz
3 questions

With millions of websites powered with it, WordPress is the most popular free CMS software on the web. WordPress powers websites for The New Yorker, Beyoncé, Smart Passive Income with Pat Flynn, John Mayer, and even my own blog! WordPress gives you the ability to create robust websites that allow your clients to update their website by themselves.

Learning it is easy if you have the right person showing you how — that's where I come in!

- - -

Please note:

At the end of this lecture I may mention what's coming up in the next lecture, and then you'll see that you are all of a sudden a few lectures ahead based on the Lecture # - don't worry, those lectures have been moved to the very end of the course. Why? They're not entirely important for learning how to code WordPress websites. This new arrangement just lets you get into the goods quicker!

Preview 04:14

A few questions to keep you make sure you've listened to the past 4 lectures :)

WordPress Pop Quiz
4 questions
+
Environment Setup: Get Your Project Started
3 Lectures 13:53

In this lecture we're going to download the Bootstrap framework. Please keep in mind that this course was built Bootstrap v3.3.1, so we'll be using that version. However, it's always a good idea to use the latest software version for any project, so once you've completed the course, update your Bootstrap version and challenge yourself to make sure everything is compatible!

Free Download: The Bootstrap Framework
04:13

In this lecture, we'll download the course files and I'll explain the contents of each of the folders.

Free Download: The Final Course Files + WordPress Theme!
05:04

In this lecture, I'll show you how to correctly set up your production environment.

Setting Up Your Project Environment
04:36
+
Bootstrap Templates: The Home Page
22 Lectures 03:11:27

In this lecture, we will code the basic HTML skeleton of our web page.

Preview 10:57

In this lecture, we will be adding external Javascript libraries (jQuery, HTMLShiv and Respond.js) to our HTML document.

Adding External Scripts to Your HTML Document
05:42

In this lecture, we learn how to download and install the free icon font library, FontAwesome, to our website.

Preview 05:52

In this lecture, we'll add two free font libraries to our webpage:

  1. Google Fonts
  2. Adobe TypeKit
Install Free Web Fonts with TypeKit & Google Fonts
06:28

In this lecture, we'll code the HTML for the Header and Navigation sections.

Code the Header and Navigation Sections
12:04

In this lecture, we'll code the HTML for the Hero section of our Bootstrap template.

Code the Hero Section
09:37

This lecture is an extension (Part B) of the previous lecture, and we will style the Hero section with CSS.

Style the Hero Section with CSS
13:23

In this lecture, we'll learn how to achieve the popular "Parallax Scrolling Effect" in less than 5-minutes!

Learn How To Create The Parallax Scrolling Effect in Less Than 5-Minutes
06:32

In this lecture, we're going to learn how to code an "opt-in" section in a high-converting location on your web page. Opt-ins are important on your websites, as they allow you to collect email addresses from your visitors.

Learn to Code a High-Converting "Opt-In" Section
07:17

In this lecture, we'll learn how to code a Bootstrap Modal window and add an opt-in form.

Learn How to Create a Modal Popup using Bootstrap
08:24

In this lecture, we'll code the "How You Can Boost Your Income" section of our home page.

Code the "Boost Your Income" Section
05:30

In this lecture, we'll code the HTML & CSS for our "Who Should Take This Course" section of our home page.

Code the "Who Should Take This Course" Section
05:25

In this lecture, we're introduced to a new concept: CSS Sprites. We'll learn how to manipulate a background image using CSS in order to save loading time on our website.

Code the "Course Features" Section Using CSS Sprites
12:22

In this lecture, we'll code the HTML & CSS for our "Final Project Features" section.

Code the "Final Project" Section
07:07

In this lecture, we will:

  1. Code the "Featurette" section
  2. Embed a YouTube video
  3. Add a Parallax background
Code the Featurette Section and Embed a YouTube Video
07:11

In this lecture, we will code the "Instructor" section, and learn how to add big fancy background images!

Code the Instructor Section (Plus BONUS Elvis Impressions!)
12:37

In this lecture, we'll learn how to create beautiful, scalable circles of any size using only CSS3!

Code Beautiful CSS3 Circles
10:14

In this lecture, we'll learn the simple trick to vertically align your content within any element — and we won't be using absolute positioning, or line height!

The Simple Trick to Vertically Align Your Content Within an Element
05:18

In this lecture, we'll code the Testimonials section, and learn how to mask our square HTML images as circles using CSS3.

Code the Testimonials and Learn to Turn Square Images into Circles using CSS3
11:25

In this lecture, we'll code a compelling "Sign Up" section at the bottom of our website. Plus, we'll add a parallax background.

Code the Sign Up Section
09:51

In this lecture, we'll code the final section of our home page — the footer! While it's a simple section, there are some very important elements you can't miss! Footers are fundamental in every website.

Code the Footer
08:56

In this lecture, we'll add the final touches to our home page with some additional CSS, and we'll make sure our home page is bulletproof on mobile devices with some CSS3 Media Queries.

Responsive Media Queries & General CSS Cleanup
09:15
+
Bootstrap Templates: The Blog Overview
4 Lectures 44:48

In this new section, we'll be focusing on the Blog templates. In this lecture, we'll be creating our blog overview page and coding the basic markup & structure for our blog overview.

Code the Basic Markup Structure
05:53

In this lecture, we'll code the blog excerpts.

Code the Blog Excerpts with HTML
10:55

In this lecture, we'll style the Blog Excerpts with CSS.

Style the Blog Excerpts with CSS
15:33

In this lecture, we'll code the Sidebar and Widgets with HTML5, then we'll style them using CSS3.

Code and Style the Sidebar & Widgets
12:27
+
Bootstrap Templates: The Blog Posts
2 Lectures 22:35

In this lecture, we'll code the "full" blog post template.

Code the Blog Post
06:20

In this lecture, we'll code the comments section of our blog.

Code the Comments Section
16:15
+
Bootstrap Templates: The Resources Page
2 Lectures 20:07

In this lecture, we'll learn about the importance of a resources page, why every one of your websites need one, and how your resources page is the most valuable page on your website!

The Importance of a Resources Page
05:09

In this lecture, we'll code the responsive, 3-column layout for our resources template.

Code the 3-Column Layout Resources Page
14:58
+
Bootstrap Templates: The Contact Page
1 Lecture 10:50

In this lecture, we'll code the contact template and contact form.

Code the Contact Form
10:50
+
WordPress Theme: Set Up
8 Lectures 52:07

In this lecture, we're going to download WordPress. At the time of the recording of this course, the latest version of WordPress was 4.0. It is recommended that you also use Version 4.0 while you're following along with the lectures (to avoid running into bugs that haven't yet been addressed in future versions).

However, once you've completed the course, update your WordPress version to the latest stable release (if available)! It is strongly advised that you keep your software up-to-date—including WordPress and all it's plugins—to avoid flaws in the code, and to keep you and your website visitors safe from malware, and hackers.

A zip file containing WordPress 4.0 is available for download in this lecture.

Preview 01:41

In this lecture, we'll create our very first "Underscores" Starter Theme.
Preview 03:53

In this lecture, we'll install WordPress in less than 5 minutes!

Preview 07:18

In this lecture, we'll learn the two ways to install a WordPress Theme, and then we'll install the Underscores Starter Theme in our WordPress website.

Installing Your Underscores Theme
03:23

In this lecture, we'll take the code from our static website and turn it into a dynamic, WordPress header.

Convert Your Static Header to a Dynamic Header
08:33

In this lecture, we'll add our assets folder from our static website into our WordPress website, and make sure our new WordPress website references the correct paths.

Cover Your Assets (Adding Your Styles, Scripts, Fonts & Images)
10:31

In this lecture, we'll clean up and customize the stylesheet that is provided with the Underscores Starter theme in order to work better with our custom theme going forward.

Clean Up Your Stylesheet & Modify Your CSS for WordPress
13:20

In this lecture, we'll turn our static footer into a dynamic WordPress footer.

Convert Your Static Footer to a Dynamic Footer
03:28
+
Convert Your Static Templates: Home Page
11 Lectures 02:29:15

In this lecture, we're going to dive right into WordPress and create our first custom template!

Preview 13:18

In this section, we're going to learn more about Custom Fields, how they work, and how you can use them to further customize your templates.

Code the Hero & Use "Custom Fields" for Extra Info
17:00

In this lecture, you'll be introduced to one of the most amazing WordPress plugins out there: Advanced Custom Fields.

Amazing Plugin: Advanced Custom Fields
04:30

In this lecture, we'll code the Boost Your Income section with Advanced Custom Fields.

Code the "Boost Your Income" Section with Advanced Custom Fields
24:55

In this lecture, we'll use Advanced Custom Fields to code our "Who Should Take This Course" section.

Code the "Who Should Take This Course" Section with Advanced Custom Fields
08:41

In this lecture, you'll be introduced to another amazing WordPress plugin: Custom Post Types UI. When this plugin is coupled with Advanced Custom Fields, there's no stopping what you can come up with in WordPress. Seriously.

Amazing Plugin: Custom Post Types UI
03:50

In this lecture, we'll add the course features using Custom Post Types UI and Advanced Custom Fields.

Add "Course Features" Using CPT & Advanced Custom Fields
22:13

In this lecture, we're going to add each individual project feature using Custom Post Types UI.

Add the "Project Features" with Custom Post Types UI
12:27

In this lecture, we're going to code the Instructor section with all it's fun little details using Advanced Custom Fields.

Code the Instructor Section with Advanced Custom Fields
15:43

In this lecture we're going to code the testimonials section with Custom Post Types UI.

Code the Testimonials with Custom Post Types
08:41

In this lecture we're going to learn how the get_template_part() function can help clean up your templates and make future development more efficient.

Clean Your Template Using get_template_part()
17:57
+
Convert Your Static Templates: Resources Page
3 Lectures 27:35

In this lecture we're going to code a custom template for our resources section.

Create a Custom Resources Template
04:00

In this lecture we're going to learn how to add a feature image in a template, and have a fallback image just in case there's no feature image present.

Add a Feature Image, and a Fallback Image
06:47

In this lecture we're going to add some resources using Custom Post Types UI, then code our resources template to dynamically display each individual resource.

How to Add a Resource and Display It In Your Custom Theme
16:48
6 More Sections
About the Instructor
Brad Hussey
4.5 Average rating
21,552 Reviews
249,169 Students
10 Courses
Freelancing Web Designer @ Code College

A highly skilled professional, Brad Hussey is a passionate and experienced freelancing web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.

Brad's determination and love for what he does has landed him in some pretty interesting places with some neat people. He's had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.

Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

180,000+ Students Don't Lie

Join Brad and adventure into his world of web design, web development, and speaking in code. You won't regret it!

What are people saying about Brad?

"[Brad is] the BEST coding instructor on the planet. Brad has a passion for teaching and he does it with joy. He pours his heart into his lessons and makes you feel at ease. It's just like having your best buddy having a chat with you - only this time, you are learning valuable skills. He's the type of guy who is passionate about transforming people's lives through his lessons. He's not after the money. He truly wants you to succeed.Three hearty cheers to Brad - the best coding instructor on planet Earth."

— Cicero, Brad's student


"...These videos are well created, concise, fast-paced, easy to follow, and just funny enough to keep you chuckling as you're slamming out lines of code. I've taken 3 courses from this instructor. Whenever I have questions he is right there with a simple solution or a helpful suggestion to keep me going forward with the course work."

— Brennan, Brad's student


"...Brad is amazing and I honestly think he's the best tutor of all the courses I have taken on Udemy. Will definitely be following him in the future. Thanks Brad!"

— Brad's student


"...Brad has an infectious enthusiasm, a great eye for detail, and expert-level knowledge of the material."

— Brad's student

Code College
4.6 Average rating
19,822 Reviews
229,954 Students
9 Courses
The Best Coding Courses on the Web

Code College is an online school that provides high quality learning material, courses, and training videos for students looking to learn web design, web development, marketing, online business, and more!

Founded in 2014 by Canadian entrepreneur, successful instructor, and blogger, Brad Hussey, Code College is a growing network of highly skilled instructors who provide the best quality tutorials, courses and learning material on the web.