UPDATED NOVEMBER 2016: 21 NEW VIDEOS, HOW TO TRANSFORM YOUR SINGLE PAGE WEBSITE INTO A WordPress THEME!
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 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!
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
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
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
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
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
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
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.
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 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
My name is Juan Pablo De la torre Valdez, i´m from Guadalajara. Mexico.
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.
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.