Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Learning Bootstrap - From HTML to Wordpress Theme

Name: Learning Bootstrap - From HTML to Wordpress Theme
Rating: 4.6 (183 reviews)

Design and develop static websites, and convert them to dynamic Websites using HTML, CSS, Bootstrap and jQuery!

Created byTim Buchalka's Learn Programming Academy, Abul Hossain

Last updated 4/2025

English

What you'll learn

By the end of this course you will have the skills and ability to hand-craft a stunning and powerful website with HTML5 & CSS3
You will also be able to convert your static websites to dynamic websites using Wordpress, allowing your clients to easily update the sites you've developed for them
Most importantly, by the end of the course, you will have dramatically enhanced your web development skills and be able to take on more projects, upgrade your rates and put your career on the fast track to success

Course content

7 sections • 144 lectures • 17h 47m total length

Welcome to the Course16:57
Welcome to the course

Let's Set Up Our Project Folder1:03
In this video we are going to set up our project folder
Let's Download all the Necessary Files7:43
In this video we are going to download all necessary software
Let's Download and Install Brackets Plugins3:53
In this video we are going to download all essential brackets plugins
Let's Plugin All of our CSS and JavaScript Files3:57
In this video we are going to plugin all of our CSS and Javascript files

Learn About the Container Class6:18
In this video we are going to learn about the Container Class
Learn About the Row Class2:19
In this video we are going to learn about the Row Class
Learn About Bootstrap Columns Part 14:12
In this video we are going to learn about the Bootstrap Columns Part 1
Learn About Bootstrap Columns Part 26:38
In this video we are going to learn about the Bootstrap Columns Part 2
Learn About Bootstrap Columns Part 35:35
In this video we are going to learn about the Bootstrap Columns Part 3
Learn About Bootstrap Columns Part 43:19
In this video we are going to learn about the Bootstrap Columns Part 4
Learn About Bootstrap Columns Part 53:12
In this video we are going to learn about the Bootstrap Columns Part 5
Learn About The Bootstrap Grid Part 114:45
In this video we are going to learn to deploy the Bootstrap Grid Part 1
Learn About The Bootstrap Grid Part 22:01
In this video we are going to learn to deploy the Bootstrap Grid Part 2
Learn About The Bootstrap Grid Part 38:30
In this video we are going to learn to deploy the Bootstrap Grid Part 3
Learn About Bootstrap Column Offsetting8:22
In this video we are going to learn how to offset our columns
Learn About Bootstrap Typography Part 111:13
In this video we are going to learn about Bootstrap Typography Part 1
Learn About Bootstrap Typography Part 210:23
In this video we are going to learn about Bootstrap Typography Part 2
Learn About Bootstrap Typography Part 311:33
In this video we are going to learn about Bootstrap Typography Part 3
Learn About Bootstrap Typography Part 48:08
In this video we are going to learn about Bootstrap Typography Part 4
Learn About Bootstrap Typography Part 55:49
In this video we are going to learn about Bootstrap Typography Part 5
Learn About Bootstrap Typography Part 65:07
In this video we are going to learn about Bootstrap Typography Part 6
Learn About Bootstrap Typography Part 74:37
In this video we are going to learn about Bootstrap Typography Part 7
Let's Style Images Using Bootstrap 43:30
In this video we are going to learn how to style images using Bootstrap 4
Learn About Jumbotron2:07
In this video we are going to learn about the Jumbotron class
Explore What Alert Classes Are Part 13:39
In this video we are going to learn about Alert classes Part 1
Explore What Alert Classes Are Part 26:13
In this video we are going to learn about Alert classes Part 2
Explore What Button Classes Are10:41
In this video we are going to explore Button classes
Learn What Group Button Classes Are Part 13:16
In this video we are going to learn what Group Button classes are Part 1
Learn What Group Button Classes Are Part 27:32
In this video we are going to learn what Group Button classes are Part 2
Learn What Group Button Classes Are Part 35:59
In this video we are going to learn what Group Button classes are Part 3
Learn What Group Button Classes Are Part 41:27
In this video we are going to learn what Group Button classes are Part 4
Learn What Badge Classes Are4:09
In this video we are going to explore and learn about Badge classes
Learn What Progressbar Classes Are5:03
In this video we are going to explore and learn about Progressbar classes
Learn What Pagination Classes Are3:19
In this video we are going to explore and learn about Pagination classes
Bootstrap4 Classes for List Items8:19
Learn What Card Classes Are13:10
In this video we are going to explore and learn about Card classes
Learn What Dropdown Classes Are8:02
In this video we are going to explore and learn about Dropdown classes
Learn What Accordion Classes Are7:20
In this video we are going to explore and learn about Accordion classes
Explore What Navbar Classes Are Part 18:15
In this video we are going to explore and learn about Navbar classes Part 1
Explore What Navbar Classes Are Part 23:52
In this video we are going to explore and learn about Navbar classes Part 2
Explore What Navbar Classes Are Part 35:14
In this video we are going to explore and learn about Navbar classes Part 3
Explore What Navbar Classes Are Part 44:59
In this video we are going to explore and learn about Navbar classes Part 4
Explore What Form Classes Are Part 110:24
In this video we are going to explore and learn about Form classes Part 1
Explore What Form Classes Are Part 29:11
In this video we are going to explore and learn about Form classes Part 2
Explore What Form Classes Are Part 37:54
In this video we are going to explore and learn about Form classes Part 3
Learn What Carousel Classes Are7:20
In this video we are going to explore and learn about Carousel classes
Learn What Modal Classes Are7:15
In this video we are going to explore and learn about Modal classes
Learn What Tooltip Classes Are5:00
In this video we are going to explore and learn about Tooltip classes
Learn What Popover Classes Are5:40
In this video we are going to explore and learn about Popover classes
Learn What Border Classes Are8:42
In this video we are going to explore and learn about Border classes
Learn What ClearFix Classes Are4:55
In this video we are going to explore and learn about ClearFix classes
Learn What Responsive Floats Classes Are2:09
In this video we are going to explore and learn about Responsive Floats classes
Learn What Height and Width Classes Are6:46
In this video we are going to explore and learn about Height and Width classes
Learn What Margin and Padding Classes Are3:59
In this video we are going to explore and learn about Padding classes
Learn What Vertical Alignment Classes Are3:19
In this video we are going to explore and learn about Vertical Alignment classes
Learn What Responsive Embade Classes Are5:25
In this video we are going to explore and learn about Responsive Embade classes
Learn What Visibility Classes Are1:40
In this video we are going to explore and learn about Visibility classes
Learn What Navbar Twicking Classes Are5:02
In this video we are going to explore and learn about Navbar Twicking classes
Learn What Flex Box Classes Are Part 123:22
In this video we are going to explore and learn about Flex Box classes Part 1
Learn What Flex Box Classes Are Part 23:00
In this video we are going to explore and learn about Flex Box classes Part 2
Learn What Media Object Classes Are3:59
In this video we are going to explore and learn about Media Object classes
Learn What Filter Classes Are5:19
In this video we are going to explore and learn about Filter classes

Let's Install an XAMPP WebServer6:24
In this video we are going to install an XAMPP server
Let's Install WordPress On Our XAMPP Server8:13
In this video we are going to install WordPress on our server
Let's Design a Logo For Our Website7:53
In this video we are going to design a logo for our fictional website
Let's Build Our Site Navigation System3:51
In this video we are going to build our site navigation system
Let's Build Our Carousel Part 117:23
In this video we are going to build our Carousel Part 1
Let's Build Our Carousel Part 21:37
In this video we are going to build our Carousel Part 2
Let's Build Our Welcome Section11:16
In this video we are going to build our Welcome section
Let's Build Our Practice Section11:42
In this video we are going to build our Practice section
Let’s Tweak Our Design Part 13:55
In this video we are going to tweak our existing design Part 1
Let’s Tweak Our Design Part 23:01
In this video we are going to tweak our existing design Part 2
Let’s Create Our Practice Section10:21
In this video we are going to develop our Practice section
Let’s Create Our Testimonials Section15:17
In this video we are going to develop our Testimonials section
Let’s Create Our Counter Section13:54
In this video we are going to develop our Counter section
Let’s Create Our Contact Section20:45
In this video we are going to develop our Contact section
Let’s Create Our Footer Section14:53
In this video we are going to create Footer section
Congratulations!0:40
Congratulations!
Let’s Add the Smooth Scrolling jQuery Plugin3:04
In this video we are going to add the Smooth Scrolling jQuery Plugin
Let’s Add Some Cool Features to Our Site11:54
In this video we are going to add some cool features to our site
Let’s Implement and Customize Modal9:13
In this video we are going to implement and customize Modal
Let’s Install a Cool jQuery Plugin4:46
In this video we are going to install a cool jQuery plugin
Let’s Fine Tune Our Website Part 13:21
In this video we are going to fine tune our website Part 1
Let’s Fine Tune Our Website Part 26:22
In this video we are going to fine tune our website Part 2
Let’s Fine Tune Our Website Part 32:01
In this video we are going to fine tune our website Part 3
Let’s Fine Tune Our Website Part 41:20
In this video we are going to fine tune our website Part 4
Let's Initiate Our Animation2:34
In this video we are going to initiate our animation
Let’s Add an Animation to Our Site Part 15:33
In this video we are going to add an animation to our site Part 1
Let’s Add an Animation to Our Site Part 216:16
In this video we are going to add an animation to our site Part 2
Let’s Do a Quick Fix To Our Modal Issue2:20
In this video we are going to do a quick fix to our Modal issue

Introducing PHP3:11
In this video we are going to have in introduction to PHP
Learn About The Reasons Why We Need PHP3:48
In this video we are going to learn about the reasons why we need PHP
Learn About What Variable Is in PHP6:54
In this video we are going to learn about what a variable is in PHP
Learn About PHP Data Types13:18
In this video we are going to learn about PHP data types
Learn About Creating a Function in PHP3:17
In this video we are going to learn about a creating a function in PHP
Learn About the Differences Between Echo, Print, Print_r and Var_dump Function2:24
In this video we are going to learn about the differences between Echo, Print, Print_r and Var_dump Function
Learn About Operators in PHP Part 18:58
In this video we are going to learn about Operators in PHP Part 1
Learn About Operators in PHP Part 24:23
In this video we are going to learn about Operators in PHP Part 2
Learn About Operators in PHP Part 33:10
In this video we are going to learn about Operators in PHP Part 3
Learn About Conditional Statement in PHP8:35
In this video we are going to learn about Conditional statement in PHP
Learn About the Way PHP While Loop Works5:46
In this video we are going to learn about the way PHP While Loop works
Learn About the Way PHP Foreach Loop Works3:40
In this video we are going to learn about the way PHP Foreach Loop works

Let's Transplant Our Project Folder Inside WordPress8:51
In this video we are going to transplant our project folder inside WordPress
Let’s Create All the Necessary PHP Files3:30
In this video we are going to create all the necessary PHP files
Let's Enable WordPress to Load Our Style and Script Files Part 114:40
In this video we are going to enable WordPress to load our style and script files Part 1
Let's Enable WordPress to Load Our Style and Script Files Part 210:49
In this video we are going to enable WordPress to load our style and script files Part 2
Let's Split Our Index Content9:49
In this video we are going to split our Index content
Learn About Calling Images Dynamically5:57
In this video we are going to learn about Calling Images dynamically
Learn About Editing the Footer Section1:57
In this video we are going to learn about editing the Footer section
Learn About Enabling a Logo to Return Back to the Home Page1:23
In this video we are going to learn about enabling a Logo to return back to the home page
Learn About Enabling Our Search Engine3:58
In this video we are going to learn about enabling our Search Engine
Learn About Making Our Navigation Dynamic Part 18:54
In this video we are going to learn about making our Navigation dynamic Part 1
Learn About Making Our Navigation Dynamic Part 28:17
In this video we are going to learn about making our Navigation dynamic Part 2
Learn About Making Our Navigation Dynamic Part 34:52
In this video we are going to learn about making our Navigation dynamic Part 3
Learn About Enabling Modal on Our Navigation9:23
In this video we are going to learn about enabling Modal on our Navigation
Learn About Making Our Slider Text Dynamic18:05
In this video we are going to learn about making our Slider text dynamic
Learn About Converting Our Welcome Section From Being Static to Dynamic4:48
In this video we are going to learn about converting our Welcome section from being static to dynamic
Learn About Converting Our Area of Practice Section From Being Static to Dynamic18:11
In this video we are going to learn about converting our area of Practice section from being static to dynamic
Learn About Converting Our Team Section From Being Static to Dynamic22:05
In this video we are going to learn about converting our Team section from being static to dynamic
Learn About Installing Essential Plugins3:35
In this video we are going to learn about installing essential Plugins
Learn About Converting Our Testimonial Section From Static to Dynamic9:51
In this video we are going to learn about converting our Testimonial section from static to dynamic
Learn About Converting Our Counter Section From Static to Dynamic13:00
In this video we are going to learn about converting our Counter section from static to dynamic
Learn About Converting Our Contact Section From Static to Dynamic Part 113:29
In this video we are going to learn about converting our Contact section from static to dynamic Part 1
Learn About Converting Our Contact Section From Static to Dynamic Part 25:01
In this video we are going to learn about converting our Contact section from static to dynamic Part 2
Learn About Converting Our Footer Section From Static to Dynamic9:43
In this video we are going to learn about converting our Footer section from static to dynamic
Learn About Making Our Footer Global8:46
In this video we are going to learn about making our Footer global
Learn About Building Our Blog Page Part 17:11
In this video we are going to learn about building our Blog Page Part 1
Learn About Building Our Blog Page Part 212:03
In this video we are going to learn about building our Blog Page Part 2
Learn About Building Our Blog Page Part 311:25
In this video we are going to learn about building our Blog Page Part 3
Learn About Building Our Blog Page Part 49:12
In this video we are going to learn about building our Blog Page Part 4
Learn About Building Our Blog Page Part 57:32
In this video we are going to learn about building our Blog Page Part 5
Learn About Building Our Blog Page Part 615:53
In this video we are going to learn about building our Blog Page Part 6
Learn About Building Our Blog Page Part 79:57
In this video we are going to learn about building our Blog Page Part 7
Learn About Building Our Generic Page Template13:57
In this video we are going to learn about building our Generic Page template
Learn About Building Our Case Status App6:08
In this video we are going to learn about building our Case Status app
Learn About Building Our Case Status App Part 116:28
In this video we are going to learn about building our Case Status app Part 1
Learn About Building Our Case Status App Part 218:39
In this video we are going to learn about building our Case Status app Part 2
Learn About Building Our Search Page16:22
In this video we are going to learn about building our Search Page
Learn About Adding a Favicon to Our Application4:19
In this video we are going to learn about adding a Favicon to our application
Learn About Adding a Custom Logo to Our Backend Login Page3:58
In this video we are going to learn about adding a custom logo to our backend Login Page
Congratulations!1:03
Congratulations!
Download Resources0:05

Requirements

Knowledge of HTML and CSS
A computer (Desktop or Laptop) and access to the Internet
Adobe Brackets Code Editor (or alternatives — we cover this in the course)
XAMPP Web Server (or alternatives — we cover this in the course)

Description

If you're a web or graphic designer who has the desire to revamp your skills and take them it to a whole new level, learning to code your own static and dynamic websites can totally change the game!

Maybe you an entrepreneur or a startup owner who aims to have a world-class website to build your web presence? You can save yourself from the expense of hiring a web developer by learning how to put together a high-quality startup website by yourself!

Or perhaps you might be working now as an employee of a company and you're aiming for a better position and a higher salary.

Learning how to code and develop CMS driven websites will improve your career opportunities, giving you the negotiating power for the position you're aiming for.

Whether you are a professional or simply code as a hobby, it's always fun and challenging to learn a new skill. This course will allow you to add dynamic websites to your skillset, create Wordpress themes that can be sold on popular websites, and so much more!

Building both static and dynamic websites is a skill upgrade which can open doors of career opportunities for you! And you will learn how to do just that in this course.

Web developers are in high demand and get paid well, giving them the ability to start their own companies, work anywhere and whenever they want. If this is the career you're aiming for, then this course is definitely for you!

No matter what your reason is, you're in the right place and on the right track to becoming a professional web developer. It doesn't matter what your age and your educational background is, after finishing this course you will have sufficient knowledge to start your own web design and development business, or even start a new career as a freelance web designer and developer.

This course gives you immensely valuable skills that will enable you to work full time as a web developer if you want.

What will you learn from this course?

You will develop a rock-solid foundation on Bootstrap 4 framework, which will enable you to develop any kind of front-end web application you can think of.
You will learn to design web applications in the browser, which is a great approach when it comes to designing web applications as it will reduce your workload significantly.
You will learn to develop mobile-responsive, powerful websites using Bootstrap 4.
You will learn to install jQuery and other relevant third party plugins on your project which will bring added functional to your web applications.
You will learn how to use CSS3 to add a custom look and feel to your Bootstrap 4 driven Web applications making them standout from generic looking bland websites.
You will learn to design a premium website using HTML5, CSS3, jQuery and Bootstrap 4 including adding animation.
You will learn the process of turning static websites into dynamic WordPress websites.
You’ll have a thorough understanding of implementing WordPress specific PHP to create WordPress-driven websites & themes.
You will learn how to use Custom Post Types and Advanced Custom Fields in WordPress to create anything you desire.
You will learn the core principles of WordPress theme development.

Why taking this course is the best decision you’ll make today.

This is the only course on Udemy that covers all the areas of the latest Bootstrap 4 framework. The ability to develop web interfaces with Bootstrap has become a de-facto norm of the web industry due to the power and versatility of the Bootstrap 4 framework.

Abul Hossain, your instructor in this course, will be sharing his web design and development techniques, skills, and experience with you.

Abul is a Web Designer and Developer who is very passionate in what he does. He started learning about HTML, CSS, jQuery, jQuery UI, Photoshop, Fireworks, Illustrator, Premier pro, and Dreamweaver back in 2005, and has worked in various freelancing marketplaces.

He covers and answers there major questions you will have, so that you can dramatically shortcut the amount of time it takes to become proficient.

By the end of this course you will have the skills and ability to hand-craft a stunning and powerful website with HTML5 & CSS3.

And from there, you will also be able to convert your static websites to dynamic websites using Wordpress.

The skills you learn in this course will dramatically improve your web development skills and career options, allowing you to take on more projects, upgrade your rates (or salary) and put your career onto the fast track to success.

If you’re ready to jumpstart your career on web design and development, just click the Enroll button and we’ll see you on the inside!

Who this course is for:

Anyone who wants to start their career journey in web design and development
Anyone who has a basic knowledge of HTML and CSS and wants to take their skills to a whole new level

Learning Bootstrap - From HTML to Wordpress Theme

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 17min

Let's Set Up Our Working Environment4 lectures • 17min

Master Bootstrap 458 lectures • 6hr 8min

Let's Create a Static Website Using Bootstrap28 lectures • 3hr 40min

PHP for WordPress12 lectures • 1hr 7min

Converting our Static Website into WordPress40 lectures • 6hr 13min

Extra Information - Source code, and other stuff1 lecture • 5min

Requirements

Description

Who this course is for: