COURSE UPDATE AUGUST 2017:
Course updated to version 6.4 of the framework and 68 new videos, also new XY Grid Videos just added, plus a complete Project (A Coffee Shop Website) completely done with the XY Grid and Flexbox!
Everything done with the ZURB Template, you will love this update and we're building a really beautiful responsive website.
COURSE UPDATE DECEMBER 2016:
I have added 48 new videos, where i'm gonna show you how to take the static HTML website into a WordPress Theme
COURSE UPDATE AUGUST 2016:
I have Added 52 new Videos where you will learn how to develop a WordPress Theme using Foundation 6, Underscores, Gulp & SASS.
COURSE UPDATE MAY 2016:
I have added 36 new videos where you will Learn the new Flex Grid, ZURB Template, Panini, Handlebars, and much more!
If you wanna build AMAZING websites that look great in smartphones, tablets, laptops, desktop computers and TV`s, you have to make your website RESPONSIVE.
In this course you will be able to build 4 Websites from Start to Finish, adding more complexity, functionality and different versions of Foundation.
We'll Build 4 AMAZING PROJECTS, Two Websites for a Hotel, a Single Page Website for an Online Store and an AMAZING WORDPRESS THEME.
Foundation is the most advanced Responsive Web Design framework in the WORLD! and in this Course you will LEARN EVERYTHING you need to know to start DEVELOPING amazing RESPONSIVE WEBSITES.
You will Learn the newest version FOUNDATION 6 with SASS, Foundation 6 is powerful and the syntax is really easy. Also you will learn version 5.
You WILL LEARN ZURB Foundation 6 in this course, and we´re gonna learn it with his best friend SASS!
SASS is a really powerful CSS preprocessor and we´re gonna be using Mixins, extending classes, so you can really take advantage of the most powerful features of Foundation 6 and SASS.
Responsive Web Design is HOT, SASS and Foundation 6 are the best tools that you can choose to start building websites right away.
This is the first project that we're building in this course
This is the final project that we´re building in this Course.
The PSD files are designed using Photoshop CS6, if you have an older version of Photoshop i can save them in earlier versions but some of the elements may lose
This is the second project of the course, once you start feeling comfortable with Foundation, we´re gonna develop a Single Page with Flexbox, SASS, Gulp Workflow, Handlebars, Panini and More
Let's review the 3rd Project for this Course, here we're building a complete WordPress Theme from Scratch using Foundation 6 and SASS with Underscores
Let´s check the how the final website is gonna look
Foundation Projects are small projects that can be done with Foundation, if you have an idea send a message :)
If this is your first time working with Foundation, this video will get you up and running really quickly, we will install a bunch of software, git, node, npm, foundation-cli, bower, gulp :)
If you´re already using Foundation 4 or 5 and you wanna upgrade to the latest version, follow this instructions :D
to get you up and running with Foundation, you will need Git and Node JS, let´s see how to install them in this video.
If you have Foundation already installed and need to upgrade to the latest version, check this video.
Foundation 6.4 introduced the XY Grid, let's see the basics
Let's create the project, and let's learn about foundation templates
Let's review the Horizontal Grids
Let's review vertical grids in the xy grid
The grid frame is really special, let's see a quick example :)
Using mixins, you can import the Styling and make a more semantic HTML!
You can align elements really easily in the XY Grid
You can also align elements independently, let's see some examples
Let's see how to align child elements with mixins
In this video, we're playing with the mixins to align self elements
Let's learn the basics of Mixins in foundation
Let's see some of the mixins that you will find in the framework
Second video with some mixins :)
RemCalc is by far the most common mixin that you will be using, so let's see what is exactly
Let's review the project that we're developing
So let's review the Images and Photoshop Files included in this Project
Here's the Source Code for the Final Project, this way if you run into any problem, i hope this can help you to find a typo or something
Of course remember that you can send a question in the udemy panel :)
So let's create the project from the CLI
Let's print the logo into the header
Let's add the social menu and the main menu into the project
Let's a tagline or slogan in the header
Let's create a custom scss file that will contain all our CSS
Let's add a image into the header
Let's add the XY Grid into our header, we're using mixins and in all the course we will use them
Let's style the header :)
Let's add some google fonts into our project
Let's add some styling into the main navigation
Let's add some styling and elements to make our navigation responsive
Let's add font awesome to print our social media icons
Let's print the social media icons in our social media
Let's finish the header of our website
Let's add motion ui into our nav menu!
Let's start working with the footer of our site
Let's add some styling to our footer
Time to start creating the content of the internal pages
Let's add the HTML for this page
Let's style the headings
Now we have everything in place, let's add some Styling
Let's style the main container (the one that we're going to use in all the pages)
So let's create the Basic Structure for the Process page
So let's add the content to this new page
Let's style this page with SASS, plus you will learn some nice tricks!
So let's create a new page for this website, the menu page!
Let's style the top section of our menu page
Let's add the container for the menu
We're almost done with the menu container, so let's add some styling
Let's see some of the coolest features in the ZURB Template, reading JSON data
Let's add some styling to our menu
Let's finish the menu!
Time to finish the Menu Page!
So let's create the Gallery page
Let's create a class to apply some animations in our modal window with Motion UI
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.