Getting Started with LESS - Beginner Crash Course

Learn to write better and more maintainable CSS with LESS
4.9 (40 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.
1,643 students enrolled
$19
$25
24% off
Take This Course
  • Lectures 21
  • Length 1.5 hours
  • Skill Level Beginner 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 2/2015 English

Course Description

What is LESS ?

Less is a CSS is a superset of CSS and a pre-processor programming language, often referred as "Dynamic CSS".

  • LESS syntax is modelled after traditional CSS
  • LESS compiles into standard CSS3
  • LESS allows you to extend your CSS with great features such as :
    • Variables for faster maintenance
    • Mixins as re-usable objects
    • Nesting for a cleaner stylesheet structure
    • Math calculations with the Operators.
  • Less code and more work done !

Why use LESS ?

While CSS is a great language, it has its limitations.

For example, if you have a color code used multiple times in your stylesheet, you need to edit this one multiple times to update your design. Very tedious process!

LESS is great for the following reasons. :

  • Allows to cut down one code and save time
  • Reduce repetition (DRY) and mistakes
  • It makes logical sense to break out CSS into multiple files with the feature

Every web developer or front-end UI engineer should use LESS over traditional CSS

=> 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 Guarded 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.

What are the requirements?

  • A working knowledge of HTML, CSS and Javascript is preferred

What am I going to get from this course?

  • You will be able to use the application SimpLess to easily compile your less files into beautiful CSS
  • You will be able to write and easily maintain object-oriented CSS with variables, mixins and functions
  • You will understand how to work faster with mixin libraries such as the Semantic Grid and LESS elements that includes a collection of the most commonly mixins

What is the target audience?

  • Any beginner making their first steps with a pre-processor language
  • Anyone willing to work on the client-side - NO knowledge of the command lines or server configuration is required
  • Some coding skills are required for the best learning experience

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.

Curriculum

Section 1: Introduction
Welcome!
Preview
01:08
Course Instructions
Article
Section 2: LESS Basics
Introduction
Preview
00:39
Course Materials & Online Resources
Article
08:10

online resources on CodePen: http://codepen.io/SandyL/pen/pvdYmW

10:13

online resources on CodePen: http://codepen.io/SandyL/pen/EaQarJ

10:52

online resources on CodePen: http://codepen.io/SandyL/pen/JoOzqw

Operators
06:03
Section 3: LESS Advanced
Intro Advanced Less features
00:47
13:01

online resources on CodePen:http://codepen.io/SandyL/pen/EaYJPQ

06:10

online resources on CodePen: http://codepen.io/SandyL/pen/LEYwaM

02:36

online resources on CodePen: http://codepen.io/SandyL/pen/EaaYYe

07:22

online resources on CodePen: http://codepen.io/SandyL/pen/VYYZvo

Section 4: Project Demo
Introduction
01:08
Project Overview
02:10
Instructions
Article
The Grid
10:14
Header
05:47
Body - Main Section
08:47
Footer
02:16
More
03:50

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Sandy Ludosky, Web Designer & Developer

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

On top of being a Udemy instructor, I am an avid learner of new technologies and digital stuff.

Ready to start learning?
Take This Course