1. We are currently doing on client projects #1 Commenting old style rules and defining new rule for the section we want to change the css rule. #2 Redefining all the style rules in media queries. #3 Using constant values for defining style.

2. Example of Commenting old style rules and defining new rule. Example: body { /*background-color: #f5f5f5;*/ background-color: #fff; color: #1a212b; } We can simply replace the old style with new one instead of commenting it and then redefining it with new style. Example: body { background-color: #fff; color: #1a212b; }

3. Example of Redefining all the style rules in media queries. Example:.home-top { background-color: white; padding: 0px 0; margin-top: -150px; } We can simply define the parameter which is changing instead of redefining the same parameters. Example:.home-top { margin-top: -90px; }

4. We can do following things to change our way of coding projects on the front end #1 We can simply replace the old style rule instead of commenting it out and then defining new style. #2 We can define particular style rules of the desired section in media queries, those we want to change and neglect the other parameters which are same as in the previous media query or the global style. #3 We can use variables instead of constants as suggested by Janis

5. List of courses on Lynda.com which can help us bridge this knowledge gap 1 Css with less and sass http://www.lynda.com/CSS-tutorials/Welcome/107921/115785-4.html 2 Saas essential training http://www.lynda.com/Sass-tutorials/Welcome/375925/435554-4.html http://www.lynda.com/Sass-tutorials/Welcome/375925/435554-4.html 3 Css: Frameworks and Grid http://www.lynda.com/CSS-tutorials/Welcome/112675/120913-4.html (Simply to have an idea about layouts.)

6. Brief introduction about course: #1 Use variables --- define once and use multiple times in style rule Example : If you are using same color in multiple instances and you want to change the color value then you have to change the color in multiple instances. By using variables you can change it at one place. #2 We can define and reuse the common style rules Can create reusable classes(mixins then call them whenever required) #3 Enable us to do calculations. #4 Helps to organise and reduce css.

7. Requirements to do course #1 Knowledge of HTML #2 Knowledge of CSS #3 Knowledge of Programming language Note: Recommended required courses 1 Html5 2 Css fundamentals by james williamson 3 Css core concepts by james williamson 4 Javascript essentials training with simon

8. Note: Many browser does not support css variables. Eg: IE, Chrome (old versions), Safari,Opera etc. To overcome this situation we have to define fallback or default css.