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.1 (58 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.
342 students enrolled
$19
$35
46% off
Take This Course
  • Lectures 77
  • Length 6 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2015 English

Course 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!

What are the 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)

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Single Page Design with Bootstrap, CSS, HTML5, JS & Parallax
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

Section 2: Creating the basic Structure (HTML) for our project
03:02

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

03:08

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

01:01

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

01:50

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

02:09

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

02:32

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

03:34

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

07:34

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

03:39

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

02:04

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

02:49

Let´s add some responsive images to our design

00:57

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

02:50

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

03:27

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

03:52

Let´s start writing the HTML for our contact form

04:21

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

Section 3: Working with components
05:40

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

07:08

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

01:19

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

02:45

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

Section 4: Working with Custom CSS
01:17

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

04:59

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

04:18

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

05:54

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

03:20

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

01:06

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

04:08

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

10:35

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

09:28

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

Section 5: Adding Advanced Functionality and Libraries to Our Project
08:26

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

02:15

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

04:09

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

04:15

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

02:16

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

03:50

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

05:59

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

03:56

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

03:30

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

Section 6: Adding CSS Animations to Our Project
03:38

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

03:55

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

03:38

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

04:23

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

03:01

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

02:45

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

Section 7: Adding Validation to our Form
01:37

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

09:41

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

04:33

Let´s change a little the appearance in Bootstrap Validator

05:07

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

Problems sending emails?
Article
Section 8: Working with the Mobile Version of our Project
03:53

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

13:03

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

07:12

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

Section 9: Deploy our Project to a Real Website
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!

Section 10: Converting our Single Page from HTML5 to WordPress
05:52

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

06:14

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

02:40

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

07:26

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

07:53

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

02:32

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

05:17

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

02:58

Let's print the main menu into our theme

03:43

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

10:14

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

07:03

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

08:39

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

07:10

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

07:58

Let's print the features into our WordPress Theme!

04:17

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

02:54

Let's print the Screenshots into our Theme

05:14

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

08:57

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

09:10

Let's add a contact form into our Site

03:43

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

01:23

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

01:53

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

04:01

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Juan Pablo De la torre Valdez, 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.

Ready to start learning?
Take This Course