The Best Sites to Learn Programming

If you are ready to take the plunge, here are some of the best websites that offer courses in a variety of programming languages for free. I have also added a list of companion ebooks that will give you a more in-depth understanding of the language and they don’t cost anything either.

	Online Courses & Screencasts	Programming Books (Free)
JavaScript	Code Academy, Learn Street, Code Combat, Code Avengers	Eloquent JavaScript, JavaScript Guide, Speaking JS, JS The Right Way, Oh My JS, Canvassing
HTML & CSS	Code Academy, Don’t Fear The Internet, Tutsplus, Learn Layout, A to Z CSS, Dash, Web Accessibility, The Hello World, Khan Academy, HTML5 from Scratch	Mozilla, Dive into HTML5, 20 Things I Learned, HTML Dog, HTML & CSS, HTML5 for Designers, DOM Enlightenment, HTML Canvas
jQuery	Code Academy, Tutsplus, Code School	jQuery Fundamentals, Learn jQuery
Python	Code Academy, Google, Learn Street, Python Tutor, IHeartPY	Python for You and Me,  Dive into Python, Learn Python the Hard Way, Think Python, Python for Fun, Tango with Django, Django
Ruby & Ruby on Rails	Code Academy, TryRubyCode Learn, Railscasts, Rubymonk, Learn Street	Why’s (Poignant) Guide to Ruby, Learn Ruby the Hard Way, Learn to Program, Learn Rails by Example
PHP	Code Academy	PHP Programming, Practical PHP
Also see: How to Learn Regular Expressions (RegEx)
Google Apps Script	Getting Started, Office Hours, Google Scripts Examples, Learning Apps Script
WordPress	Treehouse, WordPress TV
Linux & Shell Scripting	Stanford.edu, Explain Shell	Conquer the Command Line
Node.js	Nodetuts, Node School	The Node Beginner Book, Mixu’s Node book, Node Up and Running, Mastering Node.js
Angular JS	Code School, Egg Head, Learn Angular	Angular JS Tutorial, Thinking Angular, Angular Tutorial, Getting Started (Adobe)
Also see: Learn Touch Typing & Code Faster
Git (version control)	Code School, Git Immersion, GitHub Training, Udacity	Pro Git, Learn Git, Gists in Github
Objective-C (iOS & Mac)	Code School, Stanford, iTunesU
Chrome Dev Tools	Code School, Dev Tools Secret, Chrome Dev Tools Tutorial, Udacity, Building Browser Apps
Go Language	Golang.org, GopherCasts	Programming in Go, Go by Example, Learning Go, Building Web Apps with Go, Learning Go
Java	Learn Java, Coding Bat, Java Udemy, Learneroo	Programming in Java, Thinking in Java, O’Reilly Learning Java, Think Java, Java & CS, Java for Python Devs
Android App Development	Udacity (Google Developers), Coursera, The New Boston, Google University, App Development Essentials, Code Learn, App Inventor (Visual)
D3 (data visualization)	Data Visualization for the Web, Dashing D3, D3 Tips & Tricks
Also see: Learn VIM, the text editor for programmers
SQL (Databases)	SQL Zoo, SQL @Stanford, Essential SQL, SQL for Nerds, Intro to SQL, SQL Bolt, PHP & MySQL
Everything Else	Udacity, edX.org, Coursera, Udemy$, Lynda$, Pluralsight$, Treehouse$, Open Consortium, One Month Rails$

How to Add the Facebook Messenger Chat Widget in your Website

https://www.labnol.org/software/facebook-messenger-chat-widget/9583/

Facebook Messenger, with more than a billion monthly users. enables brands to have real-time one-on-one conversations with their customers. Businesses can also embed Facebook messenger buttons on their website and visitors, whether they have a pre-sales question or need to resolve an issue, can initiate a conversation with the simple click of a button.

The only downside with embedded buttons is that visitors will have to exit your website to send a message through Facebook Messenger. Wouldn’t it be nice if people could stay on your website and yet be able to message you through Facebook?

Well, that’s possible with the help of the Facebook chat widget (demo).  The widget sits in the corner of your page and when someone clicks the Facebook Messenger icon, a non-intrusive chat window pops up where visitors can type and send you a private message.

Here’s a live demo of the Facebook chat widget.

Embed Facebook Chat Widget

It takes one easy step to integrate the Facebook Chat widget in your website. 

All you to do is copy-paste the simple piece of code below anywhere in your website template and it will add the widget to all your pages. Remember to replace digitalinspiration with the vanity URL (name) of your own Facebook page.

<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;right:24px;cursor:pointer}.ctrlq.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.ctrlq.fb-button:focus,.ctrlq.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.ctrlq.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.ctrlq.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.ctrlq.fb-close::after{content:'x';font-family:sans-serif}</style>

<div class="fb-livechat">
  <div class="ctrlq fb-overlay"></div>
  <div class="fb-widget">
    <div class="ctrlq fb-close"></div>
    <div class="fb-page" data-href="https://www.facebook.com/digital.inspiration/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">
      <blockquote cite="https://www.facebook.com/digital.inspiration/" class="fb-xfbml-parse-ignore"> </blockquote>
    </div>
    <div class="fb-credit"> 
      <a href="https://www.labnol.org/software/facebook-messenger-chat-widget/9583/" target="_blank">Facebook Chat Widget by Digital Inspiration</a>
    </div>
    <div id="fb-root"></div>
  </div>
  <a href="https://m.me/digital.inspiration" title="Send us a message on Facebook" class="ctrlq fb-button"></a> 
</div>
 
<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(document).ready(function(){var t={delay:125,overlay:$(".fb-overlay"),widget:$(".fb-widget"),button:$(".fb-button")};setTimeout(function(){$("div.fb-livechat").fadeIn()},8*t.delay),$(".ctrlq").on("click",function(e){e.preventDefault(),t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()})):t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"30px",opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>

The widget would work across all sorts of websites including Blogger & WordPress blogs, WooCommerce stores, and most static HTML websites. It would however not work with the new version of Google Sites as they do not offer an option to embed JavaScript in pages.