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.2 (67 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.
389 students enrolled
84% 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 4/2015 English

Course Description


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

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

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.


Section 1: Single Page Design with Bootstrap, CSS, HTML5, JS & Parallax

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

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


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


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


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


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


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


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


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


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


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


Let´s add some responsive images to our design


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


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


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


Let´s start writing the HTML for our contact form


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

Section 3: Working with components

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


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


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


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

Section 4: Working with Custom CSS

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


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


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


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


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


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


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


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


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

Section 5: Adding Advanced Functionality and Libraries to Our Project

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


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


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


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


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


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


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


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


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

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


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


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


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


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


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

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


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


Let´s change a little the appearance in Bootstrap Validator


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

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

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


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


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

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

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


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


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


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


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


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


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


Let's print the main menu into our theme


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


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


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


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


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


Let's print the features into our WordPress Theme!


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


Let's print the Screenshots into our Theme


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


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


Let's add a contact form into our Site


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


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


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


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