Github Pages

Did you know that you can use Github Pages to host your websites live?

It’s free and easy to setup whether you are on Windows or Mac.

There are two different types of Github Pages, one for Users & Organizations, and one for Projects. Each User & Organization can only have ONE Github Page. With each Github Page, you can have unlimited Project Pages. Project Pages are located as a subpath to the User Page ( To get more information about the similarities and differences, click here.

To set up a User Page, you first will need to create a new repository called (where username is your Github username). This will be the URL of your website.

Then follow the instructions located here:

To read about setting up a custom domain, go here.
Adding a CNAME file to your repository (for custom domains), go here.

Icons | Gradients | Asset Pipeline

I’ve just completed the first part of Part VII of Rob Dey’s Codermanual course! He recommended some great resources for styling your website and improving site loading speed.

This is what my Rails app looks like so far, after completing the first part of Part VII:
codermanual saas

Font Awesome

If you want to add icons to your website, you can go to Font Awesome where there are tons of free pre-made icons. You can resize the icons, add them to a drop-down menu, and also add animations to the icons.

You can read their Getting Started page here to learn how to integrate it into your Rails app.


UI Gradients Color Design
A great website for getting CSS codes for pre-made color gradients. The website has a beautiful layout, with easy navigation. Click on the gradient you fancy and check out the CSS code. Simply copy and paste into your project!

Asset Pipeline

The asset pipeline in Ruby on Rails combines all your CSS files into one file, and all your JavaScript files into one file. Compressing them for faster loading speeds. In Rails 4, the asset pipeline is automatically added in your Gemfile under:

gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'

If you don’t want your Rails application to automatically load the asset pipeline feature, you can just type this when creating a new Rails app:

$ rails new appname --skip-sprockets

Read more here:

PageSpeed Insights

Enter your website URL here to check how fast your site loads on both mobile and desktop. Google will recommend what improvements you should make as well as let you know what you are doing right.
pageinsights google

63 Awesome Free Website-Building Tools

Source: Skillcrush


Font Awesome
A symbol font that allows you to add symbols to your websites.

Generates icon font packs.

Download vector icons or include icons as webfonts.

The Noun Project
Search a noun, get a free symbol or icon.

Endless Icons
Free icon library.

Perfect Icons
Customize and optimize social media icons for your site.

60 free vector Photoshop icons.

Round Icons
Free quirky and professional icon bundles.


Google Webfonts
Add fonts to your website in just a few clicks.

Font pairing generator.

Font Squirrel
Hundreds of totally free fonts.

Beautiful Web Type
Check out a curated collection of the most beautiful Google Webfonts.

Lost Type
Gorgeous pay-what-you-can fonts.


Generate random domain names based on one word.

Search for a domain name by keyword.


HTML5 Boilerplate
The first and the best. Free HTML5 boilerplate code.

Free fully responsive HTML5 template.

1 Line CSS Grid Framework
A framework for CSS that’s only 1 line long!

960 Grid System
A Skillcrush favorite.

Starkers for WordPress
A basic template for developing your first WordPress theme.

Barebones for WordPress
Free WordPress template for developers.

WordPress template for building out a brand new theme.

Sage for WordPress
A WordPress starter theme based on HTML5 boilerplate and Bootstrap.

Whiteboard for WordPress
A clean, basic WordPress theme for developers.

A responsive HTML, CSS, and JS framework.

Free themes for Bootstrap.


GitHub’s very own code style guide.

Google’s code style guide.

A code style guide from the pros at Mozilla.


Wrap up loose ends in your code by checking to see that it meets standards of accessibility, style, and industry best practices.
Web Design Group HTML Validator
Code Beautify
Free Formatter

More here: