If you have ever wonder how you can become more efficient when developing a website, this course is for you!
Also you will Learn SASS and you will basic and Advanced Features of this CSS with Super Powers!
You Will learn how to:
Also, You will learn how to host your projects in Github the most popular Free Repository
We're building a COMPLETE PROJECT from start to finish!
Let's create a Repository in Git, so we can save our work and re use this Workflow for upcoming projects
Let's install Gulp and Gulp SASS as dependencies for this project
Let's see how you add a Task in your Gulpfile
BrowserSync will change the way you work! let's see how you can install it in you Workflow
Let's see how you can add live reload when you make any change to your files
Prefixing things is boring! so let's install a Node Module that will prefix our CSS when needed
Let's see how you can copy files from one folder to another
Cleaning unused or remove files is important, so let's see how you can integrate this in our workflow
Let's see how you can concatenate different files into one
Let's add browserify so you can import modules like Bootstrap, Mustache or jQuery
Sometimes you want to import a CSS library, and your code is already SCSS, let's see how you can concatenate this together
Let's test if our project is working before we continue
There's one final peace in our Bootstrap Project, let's see how you can move the Fonts
It's time to test if Mustache is working, let's create a small project
Let's finish the project that we started in the previous video
Let's see how you can use gulp to minify your images
Partials are like PHP Includes, so you don't have to copy the same code in different files, they're simply great!
Let's see how you can minify CSS with Gulp
Let's see how you can minify HTML with Gulp
Let's add a task that executes the other 3 tasks for production
Let's push everything to Github, so you can re use this for future projects
Let's clone our web Workflow from the previous Chapter
We're Building a Complete Project, so let's copy some of the images, this are available as resources in this lecture
Let's copy the HTML to develop this project, this way we can focus only in the SCSS part
The first component in our SASS learning are Variables, so let's see how you create this :)
SASS Provides a lot of functions, let's see some of the functions that you can use when working with colors
Let's continue adding more variables and comments in SASS
a Map is like an Array, it contains a lot of content in a single variable, let's create 2 of those
One of the advantages of using SASS is that you can split your files into different modules, so let's do that in this video
Let's create a Typography file, and add some content
Let's add some code to the layout file
Adding Google Fonts it's something that i use in all my websites, let's see how you can import this the SASS way
Since we created a bunch of different SCSS files you need to modify the Workflow a little
Let's create the grid file, in upcoming videos we're building a complete grid like the ones that you find in Bootstrap or Foundation
One of the most powerful features in SASS is the use of mixins, so let's see how you can create, and use mixins
Let's add some of the most popular Mixins that you will need in your everyday work, let's start with the Clearfix
Let's continue working, and let's add the Border Box Mixin
Border Radius are one of my favorite CSS3 Features, so let's add one mixin for those
Let's add the Styles for the Main Navigation
Let's add a Mixin for the Background
We have some classes for the Background, let's add the CSS code
Let's use the Background Image Mixin that we created
Let's add the popular Card Component to our Project
Let's create a Mixin for buttons, so we can re use this one in all our website
Time to use the new Mixin that we created in the last video
Let's use again our mixin for background images
Let's continue Working, and it's time to develop our custom Grid
Let's create a small Grid for our images
Styling Tables is something that's a little confusing, so let's see how you can add SASS to HTML Tables
We're almost done, time to add some SASS to our services section
Let's write some SCSS to our footer
Let's see how you can re use and inherit the values from one class to another with @extend
Let's push the final Project to Github
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.