Build an Advanced Single Page with Bootstrap & WordPress
4.7 (75 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.
472 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build an Advanced Single Page with Bootstrap & WordPress to your Wishlist.

Add to Wishlist

Build an Advanced Single Page with Bootstrap & WordPress

Use Bootstrap, HTML5, CSS3, & JS libraries to build an AMAZING & ADVANCED Single Page, HTML5 to WordPress now INCLUDED!
4.7 (75 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.
472 students enrolled
Last updated 4/2017
English
English
Current price: $10 Original price: $95 Discount: 89% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6 hours on-demand video
  • 1 Article
  • 3 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn from a REAL WORLD PROJECT
  • Create Single Page Design with Amazing Features
  • Single Page Design is the hot thing in web design, so you must have the abilities to create this kind of design and this course will get you in the path
  • Understand Bootstrap terminology and how to achieve any design
  • Integrate Libraries like Font Awesome, Animate CSS, Smooth Scroll JS
  • Code JavaScript to manipulate the DOM
  • Deploy your project to Github
View Curriculum
Requirements
  • a Local Server (But since we´re using .html just a browser)
  • Internet connection, we´re gonna download a lot of libraries
  • Sublime Text, Atom, Adobe Edge Code, Brackets or Visual Studio Code
  • Bitnami, WAMP or MAMP (For the WordPress section)
Description

UPDATED NOVEMBER 2016: 21 NEW VIDEOS, HOW TO TRANSFORM YOUR SINGLE PAGE WEBSITE INTO A WordPress THEME!

In this course we´re gonna BUILD AN AMAZING! and EYE CATCHING Single Page Website, with a lot of functionality that includes: Mobile friendly, Animations with CSS, Scrolls with JavaScript, Forms with HTML5 and PHP, font icons with Font Awesome and a lot more.

Single Page Websites and Bootstrap are HOT and in this course i´m gonna give you everything you need so you´re in the right track.

We will start writing some HTML, then adding a little Bootstrap so you can understand how to integrate Twitter Bootstrap Framework easily and take advantage of it.

Then we´re moving to write our own CSS so our design doesn´t look like normal Twitter Bootstrap. 

If you don´t have any previous experience in Bootstrap or JavaScript, don`t worry i`ll be explaining everything and all the code will be made on screen. (NO MAGICAL COPYING AND PASTING THAT NO ONE UNDERSTAND WHAT IT DOES)

If you have already written some HTML and CSS and you´re ready to take the NEXT STEPS this is the right course for you.

If you´re the kind of person who learns best from REAL WORLD PROJECTS take this course now!

Who is the target audience?
  • Have you done some CSS and HTML and want to give the next step? This course is for you
  • You want to learn from a REAL WORLD PROJECT, this course is for you
  • We will use a LOT of code, so if you´re not afraid of coding, then this course is for you
  • We will use a LOT of code, so a little patience is needed :)
  • if you´re the kind of person who likes Drag & Drop Tools, this course is not for you
Students Who Viewed This Course Also Viewed
Curriculum For This Course
77 Lectures
05:52:33
+
Single Page Design with Bootstrap, CSS, HTML5, JS & Parallax
1 Lecture 04:18

In this video i´m gonna show what we´re gonna be building during this course, at the end of the course you will be able to do the same things, so come in! let´s get started

Preview 04:18
+
Creating the basic Structure (HTML) for our project
16 Lectures 48:49

We will start our project with a solid foundation called HTML5 Boilerplate.

Preview 03:02

In this video we´re gonna download Twitter Bootstrap and link it to our project

Preview 03:08

Let´s review the images that we´re gonna using during this course

About the image files for this Course
01:01

Let´s start writing some HTML, in this video we´re gonna work with our main navigation

Creating the main navigation
01:50

Bootstrap comes with a lot of functions to create a navigation easily, let´s explore them

Preview 02:09

Let´s start writing the HTML for one of our sections, about the app

Coding the About Section
02:32

Let´s complete or about section by adding some bootstrap classes

Adding Bootstrap classes to our about Section
03:34

Let´s start writing the section that will hold all the features of our app

Writing the HTML for our Features section (Part 1)
07:34

In this video we´re gonna finish the features section and i´m gonna show how to work with nester rows, which in my workflow i find really useful

Writing the HTML for our Features section (Part 2)
03:39

Let´s learn about push and pull columns, another amazing bootstrap feature.

Push and Pull Columns in Bootstrap in Our Design with Twitter Bootstrap
02:04

Let´s add some responsive images to our design

Working with responsive images in our screenshots section
02:49

Parallax effects are really eye catching, let´s start adding our own to our project

Building the parallax section
00:57

In this video let´s start writing the HTML for our Download section

Writing the Download section (Part 1)
02:50

In this video let´s finish writing the HTML for our Download section

Writing the Download section (Part 2)
03:27

Let´s start writing the HTML for our contact form

Writing the HTML for our contact form
03:52

In this video we´re gonna work with the classes that bootstrap provides for forms

Adding Bootstrap classes to our Form
04:21
+
Working with components
4 Lectures 16:52

In this video we´re gonna add Carousel, Carousel´s bootstrap Slider, that will help us to show our content in a great way

Adding a carousel or Slider in our project
05:40

Modals are another amazing and really helpful Bootstrap Component, so let´s learn how to integrate in our project

Working with modals
07:08

In this video we´re gonna make some adjustments to our main navigation

Working with our main navigation
01:19

In this video let´s add some HTML and CSS to make our navigation mobile friendly

Making our navigation Mobile Friendly
02:45
+
Working with Custom CSS
9 Lectures 45:05

In this video, let´s discuss where you should place all your custom CSS

Where should i place my CSS??
01:17

In this video we´re gonna start working with the CSS of our main navigation

Adding CSS to the Main Navigation
04:59

In this video we´re gonna add some CSS to our Carousel

Working with the CSS for our Carousel
04:18

Let´s add some more in depth CSS here, let´s work with the about the app section

Working with the CSS for our About the App Section
05:54

In this video we´re gonna add some CSS to our Features Section of our project

Working with the CSS for our Features section
03:20

In this we´re gonna make some adjustments to our modals, let´s see how we can change the appearance of our modals

Working with the CSS for our Modals
01:06

In this video i´m gonna show you how to code an amazing parallax effect

Coding an amazing parallax effect with CSS
04:08

Let´s add some CSS to our Download section, which i find one of trickiest but, this class will show you how to make bootstrap suit your needs

Working with the CSS for our Download Section
10:35

In this video let´s add some CSS to make and amazing Contact Form

Working with the CSS for our Contact Form
09:28
+
Adding Advanced Functionality and Libraries to Our Project
9 Lectures 38:36

In this video we´re gonna add Some JavaScript so we can detect when the user is scrolling the website to add a navigation

Adding JavaScript to detect when we scroll in our Single Page
08:26

Font Awesome is an amazing resource for adding icons easily to your project, let´s see how we can implement it

Adding Font Awesome to our Project
02:15

In this let´s add some icons to our About the App section, then we add some CSS to make it look better

Adding icons to the About the App Section
04:09

Let´s continue working with Font Awesome, let´s add more icons to our Features section

Adding icons to the Features Section
04:15

Let´s continue adding icons in our project, in this video let´s add some icons to our Platforms section

Adding icons to the Platforms and Download Section
02:16

Smooth Scroll is an amazing tool, specially for single page design, in this video i´m gonna show you how to integrate it to your products

Adding Smooth Scroll to our project
03:50

Let´s review some options available in Smooth Scroll JS, so you can easily adapt and make it suit your needs

Options available in Smooth Scroll JS to make it suit your needs
05:59

Scroll Spy is another amazing feature that you must add to your single page design, so in this video i´m gonna show you to integrate in your design

Adding Scroll Spy to our project
03:56

Google Fonts are free and they´re amazing, let´s see how to integrate them in our project

Adding Google Fonts to our project
03:30
+
Adding CSS Animations to Our Project
6 Lectures 21:20

jQuery Waypoints is an amazing Tool, it will recognise when an element is on the viewport of the navigation, so let´s give the first steps with jQuery Waypoints

First steps: adding jQuery Waypoints
03:38

Let´s integrate our tools to create or very first animation

Creating our first animation
03:55

Let´s add some real animations to our project, let´s start working with the about Section

Adding Animations to the About Section
03:38

Let´s continue adding some animations to our features section and learn some useful tips and tricks!

Adding animations to our Features Section
04:23

Let´s continue building this amazing single page by adding more animations

Adding Animation to our Screenshoots
03:01

Let´s add the last animations to our project, in this video we´re gonna work with the download section

Animating elements in the download section
02:45
+
Adding Validation to our Form
5 Lectures 21:18

HTML5 comes with form validation, how you implement and which are the downsides? let´s take a look in this video

Adding Basic HTML5 Validation
01:37

Let´s add Bootstrap Validator to our Project in this video

Adding Bootstrap Validator to our project
09:41

Let´s change a little the appearance in Bootstrap Validator

Editing the CSS in Bootstrap Validator
04:33

Let´s add a PHP to Script that will take care of sending emails

Adding our PHP script to send e-mails
05:07

Problems sending emails?
00:20
+
Working with the Mobile Version of our Project
3 Lectures 24:08

Let´s explore some alternative to develop and test our website for Mobile Friendly

Tools for Developing Mobile Websites
03:53

In this video we´re gonna add some MediaQueries and explain their functionality so you can understand them and apply them for your very own designs

Working with Twitter Bootstrap Media Queries
13:03

In this video we´ll learn how to customize the content in our mediaqueries, and also finish our project.

Adding the final styles for the mobile version
07:12
+
Deploy our Project to a Real Website
1 Lecture 04:58

In this video i´m gonna show how to upload your project to GitHub pages so you can share your project with friends and possible employees!

Preview 04:58
+
Converting our Single Page from HTML5 to WordPress
23 Lectures 02:07:11

Let's start this project installing WordPress Locally, i'm gonna be using MAMP, but in the resources i will add some other tools that you can use

Downloading and Installing WordPress Locally
05:52

Let's create our WordPress theme, you will need at least 2 files, styles.css and index.php, let's create those files now :)

Creating our Theme from Scratch
06:14

Let's move the files from our static single site to the WordPress theme

Moving the Files to our WordPress Theme
02:40

Let's add the main.css file into our new WordPress Theme

Adding / Enqueuing the CSS files into our Theme
07:26

Let's add our JavaScript and CSS files into our theme

Enqueuing our Javascript and jQuery files
07:53

Let's create a header and footer files, this way we can split our content into different files

Creating the header and footer files
02:32

We need to create a Dynamic Menu in WordPress, let's see how in this video

Registering a Menu
05:17

Let's print the main menu into our theme

Printing the Main Menu
02:58

Let's add some posts that will work as each image for our Slider

Adding WordPress Posts for the Slider
03:43

WordPress has it's own way to Query the Database, let's see how in this video

Querying the WordPress Database and Creating the Slider
10:14

Let's run another Query, in this video we're creating 4 pages, so we can make the section about the app more dynamic

Printing the About The App section with WP_Query
07:03

We will need some plugins to make our life easier with this project, Better Font Awesome and Advanced Custom Fields.

Installing the plugins Better Font Awesome & Advanced Custom Fields
08:39

Let's add the Main Features posts or pages into our WordPress site

Adding the Main Features pages into WordPress
07:10

Let's print the features into our WordPress Theme!

Printing the features section into our theme
07:58

Let's add the fields and create the pages for the Screenshots

Working with the Screenshots Page
04:17

Let's print the Screenshots into our Theme

Printing the Screenshots into our Theme
02:54

Let's create the page and add the image for the parallax section

Working with the Parallax Section
05:14

Let's create the page and the fields for the Downloads page

Working with the Downloads Page
08:57

Let's add a contact form into our Site

Adding a Contact Form into WordPress with Caldera Forms
09:10

We're almost done, time to add the smooth scroll effect into our theme!

Adding the Smooth Scroll Effect into our menu
03:43

Let's print the site title using some of the functions available in WordPress

Printing the Site Title in the <title> tag
01:23

Let's remove some of the files that we don't need anymore

Cleaning our theme from unnecessary files
01:53

Let's see another features that the Advanced Custom Fields plugin provides

Something else about Advanced Custom Fields
04:01
About the Instructor
Juan Pablo De la torre Valdez
4.6 Average rating
2,373 Reviews
8,869 Students
17 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.