Setup SASS/SCSS compiler on a Windows machine

SASS/SCSS is well-known CSS preprocessor used to write your traditional CSS in a very fast and efficient way. It’s almost same with some extra features like Variables, Mixins, Inheritance(extend), Import and many more features. Basically, SASS helps you manage the CSS part on larger projects very easily.

1) Ruby Installation:

To get it working on your Windows machine – you would require one thing:

-> Ruby Installer

You can find the latest Ruby installer from it’s Official website.

Download Page: https://www.ruby-lang.org/en/downloads/

Once Ruby is installed, run below mentioned commands to install SCSS and Compass gems.

2) SASS/SCSS Installation:

Go to Command Prompt (Start > Run > CMD) (You may require to start it with Administrator rights)

enter: gem install sass

This would initiate the SASS installation, you need to have a working internet connection during this process. Once SASS installation is done, install Compass.

enter: gem install compass

This should install Compass on your system.

Troubleshooting:

If something goes wrong during this installation and you see an error related to Certificate and saying “unable to download…” as shown below:

Run these two commands in the Command prompt:

enter: gem sources -a http://rubygems.org/

If the terminal asks for confirmation, type y to say “yes”

then enter: gem install sass

 

If you faced the similar error while installing Compass, write the compass installation command again in here and let it finish.


If the error is different than above mentioned scenario, checkout other common errors shared by users on Stack Overflow:
http://stackoverflow.com/questions/27278966/error-sass-installation-for-windows

Once installed properly, create config.rb file in your project directory and you are ready to work with SASS/SCSS on your windows machine.

Completely Free HTML/CSS Course for Beginners

Learning a completely new thing may be hard, but not impossible. If you have the right resources and will to learn, you will come-out being a Ninja . I don’t even remember, how I learned HTML/CSS, but now this helps me in earning my daily bread-butter.

If you are looking for a completely free course for learning HTML/CSS, there is this new website called InternetingIsHard. The website has been crafted very beautifully along with clear images and clean code examples. It almost covers all the sections of HTML/CSS and more is yet to come.

Go ahead and enjoy your learning.

Website Link: https://internetingishard.com/

A collection of 180 CSS Linear Gradients

A very useful website for web-developers. WebGradients.com offers a wide range of ready-to-use 180 CSS gradients, which can used in developing websites.

The website looks pretty clean with Gradients appearing in a grid-layout. Look for your desired gradient, click on “Copy CSS”, it adds the CSS code to your Clipboard and then just paste it inside your website code.

Although the code provided by Web-Gradients does not provides the vendor prefixes for the code copied, but by using a website like Auto-Prefixer, you can get those missing vendor prefixes.

The website doesn’t end only there, you also get to use these gradients as a Photoshop/Sketch pack. You need to download it via GumRoad website You can make a good donation on GumRoad to show your support also.

They really have a very beautiful collection of gradients. And 180 is really a very good count. You can download it’s CSS file from GitHub and use it in your projects.

I’ve been looking for this from very long time and now will be using it on all my projects as well.

Web Gradients Link: https://webgradients.com/

P.s.: When I tried downloading the PSD pack, it didn’t work for me, the download button wasn’t working. 🙁

Must have Atom Text Editor packages for Web Developers

Atom Text Editor – a completely hack-able editor is a free and open source code editor available for Windows, Mac and Linux. It can be completely modified using Node.js based plugins and community created themes.

If you’re familiar with Sublime-text editor, you’d love Atom Editor. You can modify the Atom Editor to completely resemble sublime text as well.

Below is the list of plugins, I’ve been using for my front-end development purpose.

Atom Auto Indent

This package allows you to auto-indent the code inside your current file. Use the auto-indent:apply command or you also do it from File Menu, go to Packages > Auto Indent > Apply

Bootstrap 3 Support for Atom

This package helps to write Bootstrap 3 code snippets faster using auto-completion. More to that, it also supports Glyphicons and Fontawesome.

Bootstrap 4 Support for Atom

This package is similar to Bootstrap 3 package, it also helps to write Bootstrap 4 code snippets faster using auto-completion. Just write the Bootstrap component tag and hit Tab key and the whole code snippet is appended instantly.

Atom HTML Preview

This package enables live preview for Atom Editor. Makes your coding behave real-time. Write inside the editor and see the live changes on the browser.

Auto Close HTML 

This package automatically adds closing tags when you complete the opening tag in your editor.

CSS Snippets

Provides Shorthand snippets for CSS, SCSS, Sass, and Less.

CanIuse Package

Allows you to quickly access the caniuse.com support tables in the editor itself.

W3C Validation

Allows you to Validate your HTML and CSS files using W3C validators in the editor itself.

SVG Preview

Helps to view the live rendered SVG to the right of the current editor.

Atom CSS Comb

CSScomb is a coding style formatter for CSS (LESS|SASS|SCSS). You can easily write your own configuration to make your style sheets beautiful and consistent or use pre-defined configs like Yandex, Zen or CssComb.

Atom CSS Unit Converter

Performs conversions between different CSS length units. Can help you in converting font-sizes or other lengths units.

Emmet

The famous tool-kit for developers to improve HTML & CSS workflow, which helps you in speeding up your code writing.

Open Terminal Here

Open the Terminal (OSX, Linux) or Command Prompt (Windows) in the given directory via context menu or keyboard shortcut.

Linter

Linter is a base linter provider for the Hackable Atom Editor.

Linter Bootlint

Lint your Bootstrap HTML on the fly. This package shows all your coding/structural errors created while working with Bootstrap framework.

Linter CSS Lint

Lint CSS on the fly. This package alerts you whenever you declare a wrong CSS property or make any typo inside your CSS file.

Linter SCSS Lint

This Linter plugin for Linter provides an interface to SCSS-lint. It will be used with files that have the “SCSS” syntax and it works the same way as above mentioned CSS lint.

Minimap Find And Replace

Mini-map bindings for the find and replace feature similar to Sublime-text editor.

N-panes

Sublime Text-like n-column layout shortcuts. Use shortcuts or choose number of layouts from File Menu itself and divide your editor into n partitions.

Save Workspace

Work with few projects same time this plugin give you the opportunity to change your work-space faster. Save your work-space, all your opened tabs, cursor position, etc. for each task you are working with.

Atom Reveal File In Finder

Reveal file in Finder!(like sublime text). This plugin adds a option to reveal current file in the right click context menu.

Atomic Chrome

This is one of the very powerful features. Download this package and it’s Chrome extension. Once done, you can write inside any website’s textarea using Atom Editor. You can code or even write plain text directly from your editor.

Atom Monokai

If you are a Sublime Text fan, then this theme is for you, this theme package turns the view of editor almost similar to that of Sublime Text. Monokai syntax theme offers few options to choose from, like Atom Dark/light, One Dark/light, Seti UI and other.

File Icons

Assign file extension icons and colors for improved visual grepping in the Editor.

Autoprefixer

 

A very useful plugin if you work a lot with CSS. This package automatically adds vendor-prefix in your CSS and SCSS using Autoprefixer.