Write better CSS with {LESS}

Sandy Ludosky

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Lessons (1h 40m)
    • 1. Welcome!

    • 2. Introduction

    • 3. Variables

    • 4. Nesting

    • 5. Mixins

    • 6. Operators

    • 7. Introduction

    • 8. Parametized mixins

    • 9. Guarded mixins

    • 10. Built in Functions

    • 11. @import

    • 12. ProjectOverview

    • 13. Grid

    • 14. Header

    • 15. Main

    • 16. Footer

    • 17. More


Project Description

Build Faster with LESS | Project Assignment

===== INDEX =======

  1. Student's Guide | Set Up & Getting Ready
  2. Learning Objectives
  3. Project Assignment Guide | CREATE YOUR OWN PAGE


Hi Fellow Students,Thank you for joining my class!

Here are few instructions to make the learning experience as enjoyable as possible

The tools you need

1- Student's Guide | Set Up & Getting Ready

        1 - Install a Modern Browser 

        My recommendation is to use a modern browser like Chrome.The Chrome web developer tools are         excellent. We will get a change to use them in the developement process. Firefox is fine too.



        link to download Chrome

        link to make Chrome the default browser

        2 - Code editor 

       My recommendation is to use Sublime text. I will use it for the video tutorials, but feel to use any              other one of your liking.



       link to download Sublime Text (Mac & PC)

        3 - Codepen.io    

-    link to codepen.io

-    All the demonstrations will be done with the online application Codepen. You will need to create an account if you are a fist time user.

link to the online resources: http://codepen.io/SandyL/full/GgOeLg/





2 - Learning Objectives

=> What you will learn:

In the first section, you will :

  • learn how to define Variables for faster maintenance.
  • learn how to declare Mixins as reusable objects
  • learn about Nesting for a cleaner stylesheet structure.
  • learn how to perform mathematical calculations with the Operators

On a more advanced level, we will discuss about:

  • Built-in functions
  • Parametized and Guardes mixins
  • The @import directive to include external stylesheets in one single document.

In a last chapter, you will apply what you have learned with a hand-on project.

=> The objectives of this course is to help you

  • create smarter and cleanerer stylesheets,
  • cut down on code,
  • keep your code DRY (Don’t Repeat Yourself) and organized.

=> By the end of the course,

  1. you will understand how to use the LESS features and compile the less stylesheets into standard CSS
  2. you will understand how to easily integrate mixins libraries as well as external resources such as Font Awesome and Google Font into your project.
  3. You will also be able to install and use the application SimpLESS to compile your less files into beautiful CSS.
    1. SimpLESS is a GUI application for Less and Sass compilation.
    2. SimpLESS is simple to learn for first-time users and it is compatible with both PC and MAC.

In Getting Started with LESS, learn to take your CSS to the next level and write better styling code. With several demonstrations and examples. you will see the power of the pre-processor language.


3 - Project Assignment Guide | CREATE YOUR OWN PAGE

It is now time to create your responsive page with LESS.

You can create:

  • a landing page to promote your services or products
  • a portfolio to showcase your works and get hired
  • a personal page to introduce yourself to the world
  • The sky is the limit......

A few recommandations to get you started:

  • Apply what you have learned and use the LESS features just like  in the Project demo section
  • Validate the code with the W3C validation service to make your page error-free
  • Test your HTML and CSS with codepen.io 
  • Use SimpLess to compile your less code into standard CSS
  • Use extra resources like mixins libraries and framework to help you build faster: view the full list on lesscss.org:

              = > Mixins Libraries

             = >  Frameworks

             = > Grid Systemns 


  • Share with other students in the Project Gallery to receive feedback
  • You can use a similar template as shown in the tutorial and customize to it your liking.
  • Here are a few examples below for inspiration:

My name is Sandy and I am available if you have any questions.

I am here to make your learning experience as pleasant as possible, so do not hesitate to use the course discussions dashboard to leave your questions.



Student Projects