Learn Bootstrap 4 The Most Popular HTML5 CSS3 & JS Framework
4.5 (60 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.
480 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn Bootstrap 4 The Most Popular HTML5 CSS3 & JS Framework to your Wishlist.

Add to Wishlist

Learn Bootstrap 4 The Most Popular HTML5 CSS3 & JS Framework

Bootstrap to WordPress just added! Create an amazing website with the new Bootstrap version, 100% practical course!
4.5 (60 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.
480 students enrolled
Last updated 8/2017
English
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 10.5 hours on-demand video
  • 9 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build Websites with the New Bootstrap Version
  • Connect PHP / MySQL with a Bootstrap Website
  • Learn almost all the Components and Bootstrap Classes with a Hands On Training Course
  • Take your existing site into a fully dynamic WordPress site
  • Convert a Bootstrap site into a WordPress Theme!
View Curriculum
Requirements
  • Basic Knowledge of CSS and HTML if you have ever write a little HTML or CSS you will be fine!
  • A Text Editor i will be using ATOM but Visual studio Code, Brackets or Sublime Text are free too and available for Windows, Mac and Linux
  • A Local Server will be needed for the PHP section, i will be using MAMP, for the WordPress section i will show you a great tool called Local
  • 6 Photoshop files are included, but if you don't have photoshop don't worry, i'll provide the images, colors and everything you need to complete the course
  • A great desire to learn with a REAL WORLD PROJECT
Description


UPDATE AUGUST 2017:

I added one video about how to migrate your Bootstrap 4 website into the latest Beta Version!

UPDATE JULY 2017:

Just Added 40 new videos where you will learn how to transform your static bootstrap site into a dynamic WordPress Theme! 

If you're looking for an in depth Bootstrap and WordPress course look no more!!

Learn Bootstrap 4 The Most Popular HTML5 CSS3 & JS Framework!

This Course contains the Basics of the new Bootstrap 4 Framework + Building a Complete Project from Scratch.

The new version of Bootstrap contains a lot of new classes, helper utilities, a Flexbox powered grid and new components which all will be covered in this new course.

We're building a complete Website and i'm gonna show you how to integrate PHP / MySQL with Bootstrap 4.

You will also learn how to extend Bootstrap components with CSS to make them look the way that you need to.

6 Photoshop files (PSD) are included in this course that are going to be converted intro a Bootstrap 4 Website, so if you're looking for a PSD to Bootstrap course, this is the course that you should take!

Who is the target audience?
  • If you're a web designer that's trying to create responsive websites this course is for you
  • Bootstrap is really popular, and the new version is amazing, if you want to add bootstrap to your skills this course is for you
  • If you learn most by building real world projects this course is for you
Students Who Viewed This Course Also Viewed
Curriculum For This Course
121 Lectures
10:31:24
+
Course introduction
4 Lectures 09:52

Let's review the Final Project for this Course

Preview 04:54

Let's review the PSD Files for this Course

Preview 01:26

In this video you can download the starter and ending points for the exercises

The Code for this Course
02:16

In this video you can find the 2 .zip files with the images

Preview 01:16
+
Basics of Bootstrap 4
19 Lectures 01:41:45

One of the most popular components in Bootstrap is the Grid, let's learn more about this

Preview 09:25

Let's review more options in the Grid

Preview 05:21

In this video let's start working with Typography in bootstrap

Preview 05:48

Let's review more classes to work with Typography

More Typography Classes
05:04

Let's see how you can create responsive images and other classes for images

Working with Images
05:46

Let's review some of the classes to apply to tables

Working With Tables
04:53

Bootstrap provides a lot of classes for Buttons and Links, let's see some of them

Working with Buttons
05:37

One of the new components is the Card Component, let's see how it works

Working with the Card Component
05:15

Carousel is another really common Component, let's see the basic syntax

Carousel in Bootstrap 4
05:10

Let's add more code to our carousel

Adding Controls to the Carousel
05:00

In this video let's see how you can add captions to your slider

Adding Captions to the Carousel
03:51

Let's review the accordion component

The Accordion Component
07:13

Let's see how to create Modals in bootstrap

Working with Modals
04:28

You can add any element of the framework into a Modal, let's see a small example

Adding a Grid Inside Modal
03:20

Let's review some of the classes to create menus and navigations

Working with Menus and Navigations
08:19

Let's see what you need to apply the ScrollSpy component

ScrollSpy
06:44

Let's add a Tooltip

Adding a Tooltip
03:20

Dropdowns are really easy to create and the UI is amazing

Adding a Dropdown
03:34

The Jumbotron component is more used to showcase a big marketing message in your site, let's see the HTML and clases required to work with it

The Jumbotron Cumponent
03:37
+
PROJECT: Building the Home Page
24 Lectures 02:03:45

Let's start building the home page of our site

Starting our Project
02:49

Let's add the content to the HTML

Working With The Header
05:09

Time to create the Main Nav :)

Creating the Main Navigation
05:21

Let's override some of the CSS 

Styling the Main Navigation
06:48

Google fonts are great, free and you can choose from a wide variety

Adding Google Fonts
03:15

Let's add our carousel

Adding the Carousel
06:20

Overriden the CSS of the carousel is easy, let's see how

Styling the Carousel
02:13

Let's continue the development of this website

Working with the New Website Section
03:13

Let's add some CSS for this section

Styling the New Website Section
05:05

Let's add the Images that link to other sections of our website

Working With the Image Links Section
06:24

Let's style the Images

Styling the Image Links Section
09:05

You can add any CSS3 Property to your Bootstrap code, let's see an example

Adding CSS3 Transitions
02:45

Let's start working with the Schedule section

Working with the Business Hours Section
03:31

Let's add a table that will contain the working hours

Adding a Table
02:26

Let's style the working hours

Styling the Working Hours Section
05:26

Let's create the HTML for this Products section

Developing the Products Section
05:58

Let's style the Products for this website

Styling the Products
04:42

Let's create the appointment section

Working With The Appointment Section
03:26

Time to add some cool effects to the Appointments section

Styling the Appointments Section
06:23

Let's start working with the footer

Working with the Footer
08:43

Let's add a social networks menu

Working with the Social Networks Menu
02:31

Let's add Font awesome to print our icons

Printing the Social Icons
13:31

Let's move the working project to a Local Serve

make sure that you're opening your project using the localhost url

and finally make sure you're editing those files in your editor

Moving the File to a Local Server
03:35

Let's separate our website into different PHP Files so we can re use some of the components in other pages!

Splitting the Website into different PHP Files
05:06
+
PROJECT: Building the About Us Page
4 Lectures 22:28

Let's add the About Us Page

Adding the Main HTML For this Section
03:41

Let's add a hero image 

Styling the Hero Image & adding the main content
07:14

Let's re use other section of this website, the business hours table

Adding the Business Hours Table
06:03

Let's create a gallery with Modals

Adding a Gallery
05:30
+
PROJECT: Working with the Services Section
5 Lectures 20:50
Creating the services page
02:50

Printing the Services into a Tab / Collapse
07:31

Building the Coupon Sidebar
02:46

Let's add some CSS to the Services Section

Styling the Services Section
06:18

Let's re use the contents from the appointments section from the homepage

Re using the Appointments Section from the home page
01:25
+
PROJECT: Building the Shop / Products Section
2 Lectures 11:02

Let's create the page for the products

Creating the Main Products / Shop Page
05:33

Let's add a single product page

Adding the Single Page Product
05:29
+
PROJECT: Building the Contact Section
2 Lectures 09:00

Let's create a simple contact form for this project

Building the Contact Form
05:58

Let's add some Styling to the Contact Form!

Styling the Contact Form
03:02
+
PROJECT: PHP / MySQL - Creating the Database to display the Products
7 Lectures 35:21

Let's create a Database in PHPMYADMIN

Creating the Database
05:05

Let's add some contents to the database

Populating the Database
02:51

Let's connect a Database with PHP 

Creating the Connection to the Database
04:24

Let's print the Products in our homepage

Printing the Products in the Home Page
09:29

Let's print the products to our Products Page

Printing the Products in the Products page from the Database
01:31

Working with the Single Product Page
06:40

Let's add the code to print the content of the product that we're clicking

Printing the Information from the database to the Single Product Page
05:21
+
PROJECT: Building the Contact Form with jQuery, AJAX and PHP
9 Lectures 45:36

Let's add a simple validation with jQuery

Adding Validation with jQuery
08:36

Let's improve this code :)

Refactoring our Code
03:26

Let's print some feedback to the users of this website when they're filling the form

Printing feedback in the Contact Form
03:44

Let's validate the other fields

Validating the other fields
02:43

Before we send the form, let's check that there're no errors

Checking that there're no errors in our contact form
02:40

Let's add the AJAX Code to this form

Adding AJAX
06:44

Let's create the PHP file that will handle the emails

Building the Send PHP File
07:53

Let's finish our AJAX Function!

Finishing the AJAX function
08:16

Let's make a test to see if everything works!

Testing our Project
01:34
+
Adding a Responsive Navigation (Hamburger Menu)
3 Lectures 18:42

Let's create a hamburger menu for this project

Adding the markup (HTML)
04:33

Let's add some styling to our new hamburger menu

Styling our Hamburger Menu
04:01

Making the Menu Fixed when scrolling to the bottom of the page
10:08
9 More Sections
About the Instructor
Juan Pablo De la torre Valdez
4.5 Average rating
3,757 Reviews
13,422 Students
19 Courses
Freelance Web Developer and Owner of Easy-WebDev

My name is Juan Pablo De la torre Valdez, i´m from Guadalajara. Mexico.
For the last 10 years i been working with the web, i have a lot of experience in modern Web Technologies such as Foundation, Bootstrap, RWD, WordPress, Drupal, PHP, JavaScript & jQuery, HTML5, CSS3, SASS and Photoshop.

I started a company called CreativaWeb where i design and develop WordPress based websites.

I really like to design and develop websites, in the recent years i made hundreds of websites for Government, Universities, Startups and Medium-Size Companies from my city, the whole country and  from another countries.

----------------------------------------------------------------------------------------

Soy diseñador y programador web desde hace más de 10 años, tengo amplia experiencia y trabajo diariamente con tecnologías como Foundation,  Bootstrap, WordPress, Drupal, PHP,JavaScript y jQuery, HTML5, CSS3, SASS y Photoshop.

Comencé una compañia llamada CreativaWeb, donde principalmente diseño y desarrollo sitios web en WordPress.

Me gusta combinar mi trabajo en diseño y programación; en los años anteriores he hecho cientos de páginas para dependencias del Gobierno, Universidades, Pequeños y Medianos de negocios de mi ciudad, a nivel nacional y de otros países.