Free Code Camp - A Community Where You Can Learn To Code And Help Nonprofits

Today I wanted to share with everyone a website that I came across and that I have started using: http://www.freecodecamp.com/

Free Code Camp is a community that provides to you hundreds of hours of coding lessons, a way to build your portfolio, and they will put you in touch with non-profit organizations that will allow you to apply your new skills.

Some of the skills you can learn include:

• HTML5
• CSS3
• JavaScript
• Databases
• Git and GitHub
• Node.js
• React.js
• D3.js

The best part of this community, is that it is free, and you can access all of the lessons without having to sign up. However, I do recommend that you join because then you can save your progress, and you will also gain access to their online community that has over 100,000 users, which allows you to network and have people you can talk to about your code.

With the coding lessons, you are able to select any lesson at any time, which means you can work on the particular skills that you are interested in learning without having to go through all of the lessons in a particular order. However, if you are new to coding, then you can definitely start with the earlier lessons and work your way up to the harder concepts.

Here is an example of what their map looks like:

So far, I have worked on some of the lessons in my free time over the past few weeks, and I have enjoyed the experience. If you are interested in picking up new skills, I would definitely recommend that you check out this site.

I hope you enjoyed this post. If you have any questions or comments, please feel free to post them below.

LiveEngage - Using CSS To Modify Embedded Chat Buttons

Update: With the new HTML engagements in LiveEngage, this method is now outdated. It is recommended that you use the supported method listed above.
The purpose of this tutorial is to show you how to use your own custom CSS to modify your embedded chat buttons from LiveEngage.

Currently in LiveEngage, the only options you have for an embedded button is to use an image or the few text styling elements that are available in the engagement studio. There is no way to use your own fonts, CSS, or HTML elements for your chat button, which can sometimes make it hard for your chat button to match the rest of the theme of your site.

For example, if the rest of the links on your site have hover effects, or if the font family of the text in the links is 'Comic Sans MS', your embedded chat button will not match the feel of your site. In order to fix this, you can use custom CSS on your site to modify the default styling of the button.

The embedded chat buttons have a class called 'LPMlabel', so by adding a CSS styling to the page with the !important attribute, it will override the default CSS.

In the first example, we are going to use CSS to change the font-family of the embedded chat button, and in the second example we are going to use CSS to add a hoover effect to the embedded chat button. 

Let's get started:

Example 1: Change the default font-family

Code:


Result:

Before	After

Example 2: Add Hover Effect

Code:


Result:

Before	After

Summary: This tutorial showed you how to use custom CSS to modify the default styling of your embedded chat buttons.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.