web analytics

Self Learning


Online Consoles To Practice Java Script

Editor and compilers to practice coding in a web environment.

Editor Description Pricing
es6console Interactive IDE to try out ES6 JavaScript code. Transpile to ES5 using several different compilers. Test code directly using ... Free
Playcode The fastest online Code Sandbox for Quickly and Easily make Frontend Experiments. Free
Plnkr Plunker or plnkr is an integrated web development environment and is completely written in AngularJS. Free
js.do Online JavaScript Editor.
"Edit your code online. Simple, light and fast!"
Free
Coding Ground Online Javascript Compiler, Online Javascript Editor, Online Javascript IDE, Javascript Coding Online, Practice Javascript Online, Execute Javascript Online, ... Free
Paiza.io Online editor and compiler where you can write and run code instantly. Whenever you come up with new idea, learn or teach programming, you and others can just write and run code. Free
Liveweave Liveweave is a HTML, CSS & JavaScript editor with real-time (live) preview. It is the ultimate playground for web designers and developers, and a great tool to test, practice and share your creations! Free
CodePen It allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things. Free
Pro
jsfiddle An online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'. Free
Pro
Repl.it Repl.it gives you an instant IDE to learn, build, collaborate, and host all in one place. Free
Premium
Stackblitz The online code editor for web apps. Featured Workspaces. React (TS) logo. React (TS). TypeScript · AngularJS logo. AngularJS. JavaScript · JavaScript logo ... Free
Premium
jsbin A tool that enables you to learn, experiment and teach using web technologies. Free
Pro
Codesandbox An online editor that's built for web application development. ... Free
Pro

Learn Web Design and Development

Various tutorials and training resources.

Provider Description Cost
Scrimba Scrimba lets you play around with the instructor's code directly inside the screencast. As a result, you'll learn faster and have more fun.
See Video
Free
Google Web Fundamentals Are you new to web development, or an old pro? We've got resources for both. Free
Web Development 101 In this course, you'll learn the foundational concepts of web programming. By the end, you will be able to build a simple webpage, style it, and add elements of interactivity while working comfortably from the command line. Free
FreeCodeCamp Watch Video Free
Learn JS Learn not only JS, Python, PHP, Ruby, Java, and more. Free
Guru99 Guru99 is totally new kind of learning experience.
Here you learn by practice. We make tons of efforts to take boredom out of learning and make education a fun experience.
Inside, you will find tons of video tutorials.
Free
Learn to Code from Scratch You can learn how to code for the web without going through the traditional college degree route. There are great free resources online. We've gathered the best ones to guide you on your journey. Free
HTML Dog HTML, CSS and JS tutorials, references, articles and news. Free
Treehouse Learn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business. Yes
Lynda.com You set the pace with online learning. Learn what you want, when you want, and practice with the instructor's files while you watch and listen. Yes
Code Academy Watch Video Free/Yes
TutsPlus Watch Video Yes
Code School Watch Video Yes
Frontend Masters Watch Video on JS Yes
Sitepoint Courses Watch Video Free/Yes
Udacity Watch Video Free
SoloLearn Watch Video Free
Superhero JS This page is a collection of the best articles, videos and presentations we've found on the topic. Free

HTML5 Reference

HTML 5 references, docs, cheat sheets, tutorials.

Resource Description
HTML Cheatsheet Our HTML cheat sheet has a full list of all HTML elements, including descriptions, code examples and live previews. Scroll down to browse all HTML tags alphabetically or by their category, or download it as a PDF.
Mega HTML5 Cheat Sheet So whether you are a web design novice or a seasoned grizzly veteran this will hopefully come in use for your next project.
Mozilla Developer Network HTML5 Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.
Opera Browser HTML5 Opera is providing support for various elements, attributes, and values as the draft matures towards recommendation status. This document points out which new HTML5 elements, attributes, values, and APIs are supported, partially supported, or not supported by Opera. Changes, additions, and removals may occur from time to time.
HTML5 Doctor The idea for the site came about following an HTML5 meetup after Future of Web Design conference in London. We realized there wasn’t a resource for people who wanted to learn more about the hows and whys of implementing HTML5, so we decided to build one!
Introduction to HTML5 For those who hate reading.
Are you interested in HTML 5 and what's coming down the pipeline but haven't had time to read any articles yet?
HTML5 & CSS3 Fundamentals Videos For absolute beginners (videos)
Want to learn a different language? Over the course of 21 episodes, our friend Bob Tabor will teach you the fundamentals of HTML5 & CSS3 programming.
HTML-5-Tutorial When you have completed this tutorial you'll have a basic understanding of HTML and know how to go about getting a domain and building a simple website.
HTML5 Cheat Sheet Whether you are a beginner or more advanced web developer, you can feel free to download the image or .pdf file to your personal desktop.
Smashing Magazine HTML5 Cheat Sheet So in the spirit of the upcoming change we decided to release a handy printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.
What WG The Web Hypertext Application Technology Working Group (WHATWG) is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.
W3C HTML Reference This document explains the syntax, vocabulary and the available APIs for HTML5 documents, focussing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.
HTML: The Living Standard A technical specification for Web developers.
Learning to Love HTML5 While it’s certainly true that HTML5 has the potential to change the web for the better, the reality is that these kinds of major changes can be difficult to grasp and embrace.
Safe Stars Code Review: A Beginner’s Guide to Computer Programming and Web Development.

CSS3 Reference Resources

CSS3 Reference Resources, cheat sheets, tutorials, docs.

Resource Description
Complete CSS Cheat Sheet Using CSS day-to-day? Whether you’re a super savvy web developer or just someone who wants to learn web development, this CSS cheat sheet should help you out.
CSS Video Tutorials My purpose for this website is to create easy to understand CSS instructional video tutorials that will help an ultimate beginner learn everything you needs to know about CSS in under an hour.
Mozilla CSS3 Reference This CSS Reference shows the basic syntax of a CSS rule; lists all standard CSS properties.......
CSS Reference CSSreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
Codrops CSS Reference An extensive CSS reference with all the important properties and info to learn CSS from the basics
CSS Almanac Wonderful resource created by CSS Tricks.
CSS Property Reference Reference by Tizag.com
Microsoft CSS Reference This index lists all supported Cascading Style Sheets (CSS) properties, selectors, functions, at-rules, and so on. Windows Internet Explorer. It is organized by type.
Learning CSS3: A Reference This overview features a hand-picked and organized selection of the most useful Smashing Magazine’s articles related to CSS3 and published here over all the years.
CSS Cheat Sheet Quick reference guide by Smashing Mag.
CSS3 Quick Reference CSS3 quick reference v 1.0

CSS Grid

CSS Grid Tutorials
Updated: 5/4/20

Resource Description Platform
Complete Guide To Grid-CSS Tricks A Complete Guide to Grid by CSS-Tricks. Tutorial
Learn All About CSS Grid Learn CSS Grid with Wes Bos in 25 pretty good videos.
From fundamentals to Real World in about 4 hours.
Video
Grid By Example This site is a collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew. Tutorial and Videos
Learn CSS Grid for Free Learn CSS Grid for free
14 interactive screencasts to take you from beginner to advanced. Sign in with Github.
Screencast
CSS Grid Layout CSS Grid Layout - Rachel Andrew | February 2017 Video
Start Using CSS Grid Layout Today Rachel Andrew: Start Using CSS Grid Layout Today Video
Designing with grid Jen Simmons Designing with grid. Video
Getting Started with CSS Grid CSS-Tricks Screencast #153: Getting Started with CSS Grid. Video
A comprehensive guide ...CSS Grid Layout A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh. Tutorial
CSS grid layout simple guide Codeburst: css grid layout simple guide. Tutorial
Learning CSS grid layout with the Swiss Learning CSS grid layout with the Swiss.
I wrote this article not like a tutorial with a step-by-step detailed explanation, but it’s rather a diary of my experiments with the Grid layout.
Experiments with Grid Layout

Resource Description
Learn JavaScript - Full Course for Beginners Free Code Camp:
134 part, 3hr 42 min course.
30 Day Vanilla JS Coding Challenge Wes Bos: Learn by building 30 projects.
Scrimba Scrimba lets you play around with the instructor's code directly inside the screencast. As a result, you'll learn faster and have more fun.
See Video
The Good Parts JS The Good Parts: Youtube playlist= 82 videos.
MDN MozillaDeveloperNetwork This section of the site is dedicated to the JavaScript language itself, and not the parts that are specific to Web pages or other host environments. For information about APIs specific to Web pages, please see Web APIs and DOM.
Eloquent Java Script This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here, or get your own paperback copy of the book.
Introduction To Java Script Here you will fine a simple and clear introduction to Java Script, focusing on the beginner, by the developers at Guru 99.
JavaScript Tutorial for Beginners: Learn in 5 Days JavaScript is an open source & most popular client side scripting language supported by all browsers. JavaScript is used mainly for enhancing the interaction of a user with the webpage. This online guide is geared to make you a JavaScript pro!
Speaking Java Script This Online book’s target audience is programmers who want to learn JavaScript quickly and properly, and JavaScript programmers who want to deepen their skills and/or look up specific topics.
Java Script for Cats Fun guide to learn the basics of programming and JavaScript.
Java Script The Right Way This is a guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices.
JavaScript Garden JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language.
JavaScript Enlightenment It was my intention to write a book to give the reader an accurate JavaScript worldview through an
examination of native JavaScript objects and supporting nuances: complex values, primitive values,
scope, inheritance, the head object, etc.
Exploring ES6 Upgrade to the next version of JavaScript.
Super Hero JS This page is a continuously updated list of articles that help explain the syntax of JavaScript, how to organize your projects, how to test your code, and what's on the horizon. Have fun!
Introduction To Java Script Here you will fine a simple and clear introduction to Java Script, focusing on the beginner, by the developers at Guru 99.

Node JS Tutorials

Learn all about this runtime environment based on JavaScript.
The following are free tutorials.

Tutorial Description
Node.js Tutorials for Beginners 22 Youtube videos by The NewBoston.
Node.js Basics 18 Youtube videos by Academind.
Asynchronous Programming 9 videos will give you basic patterns and tools that will allow you to master and control asynchronous flow in Node.
Node.Js Tutorial Videos 18 Youtube video Edureka.
Node.js Tutorial for Beginners 37 Youtube videos byThe Net Ninja.
Node.js & Express From Scratch 12 Youtube videos by Traversy Media.
Node.js Tutorial Learn in 3 Days 12 Tutorials by Guru 99.
The Node Beginner Book An online book by Manuel Kiessling.
None.js Tutorial An online tutorial by TutorialsPoint.
Introduction to NodeJS A 4 week course by EDX (Microsoft).

Training videos from the GIT Team

Free Web Dev/Design EBooks

Free eBooks for those who rather read or want to keep a reference source.

EBook Description
Front End Developer Handbook Frontendmasters: This is a guide that anyone could use to learn about the practice of front-end development.
Web Style Guide 3rd Edition Web Style Guide has presented solid design advice based on classic design principles, acknowledging the possibilities and limitations of current web technology while trying not to let the media confetti overwhelm good sense and an information-oriented aesthetic.
Magic of CSS CSS is a mess. We all love it, but it’s a mess. I liken it to English: there are a bunch of rules, and you can learn them. But sometimes you’re better off just trying shit and seeing what works and what doesn’t. Magic is a codification of what I’ve learned in that crazy process.
50+ Mobile Web Design Best Practices Guide to mobile web design with over 50 proven tips to help you build amazing mobile websites
Designing for the Web The book itself covers a range of techniques for approaching graphic design on the web, split into five sections including typography, colour and layout.
Principles of Web Design Principles of Web Design, 5th Edition, leads you through the entire web site creation process, from start to finish.....
Speaking Java Script This book has been written for programmers, by a programmer. So, in order to understand it, you should already know object-oriented programming, for example, via a mainstream programming language such as Java, PHP, C++, Python, Ruby, Objective-C, C#, or Perl.
PHP the Rightway There’s a lot of outdated information on the Web that leads new PHP users astray, propagating bad practices and insecure code. PHP: The Right Way is an easy-to-read, quick reference for PHP popular coding standards, links to authoritative tutorials around the Web and what the contributors consider to be best practices at the present time.
HTML5 Canvas The second edition of HTML5 Canvas gets you going with HTML5 Canvas, teaching you how to draw, render text, manipulate images, and create animation—all in the course of building several interactive web games throughout the book.
SVG Pocket Guide This “pocket” sized guide provides designers and developers with the base knowledge needed to get started with writing SVG and better understand its overall syntax and behavior through clear examples (with fruit images!) and quick descriptions of properties and attributes.
Book of Speed The business, psychology and technology of high-performance web apps.
Typograply Handbook This is a handbook on best typographic practices through the lens of a web designer. It is meant to be short and concise – used as a reference rather than explanatory.
The Elements of Typographic Style Robert Bringhurst’s book The Elements of Typographic Style is on many a designer’s bookshelf and is considered to be a classic in the field.
20 Things I Learned About Browsers and the Web For things you’ve always wanted to know about the web but were afraid to ask, read on.
Beginning CSS Web Development There are many books out there on CSS, but Beginning CSS Web Development is different-it doesn't waste time discussing theory, and it delves straight into the practical matter.

Web Design Terms and Definitions

A list of resources that define web design terms, words, and vocabulary.

Resource Description
Mozilla Development Network This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.
W3.org | Glossary & Dictionary This tool, developed in 2003, gathers glossaries from W3C specifications and various other sources; as of May 2010, it is no longer maintained, but the archived copy of its content remains available.
WebDesignDictionary 276 (and counting) terms and acronyms that web developers use.
Glossary for Internet & Web Design Internet and Web Design terms defined.
Glossary of Website Terms While the internet has become an integral part of our daily lives, there's still a lot of web terminology that can be confusing to a lot of people.
Glossary of Website Terminology To have a better understanding of how the web works, you will need to become familiar with terms that you may not fully understand the meaning of, so to help you Nigel Brookson complied a list of commonly used website terms with their definition.
Web Design Glossary Glossary prepared by University Minnesota Duluth.
Sherpa Glossary Web design glossary.
Internet Safety 101 | Glossary A multi-media Internet safety resource designed to educate, equip and empower parents, educators and other adults with the knowledge and resources needed to protect children from Internet dangers including pornography, predators, cyberbullies and threats related to online gaming, social networking and mobile devices.
WebWise Prepared by BBC, WebWise is making the most of being online A-Z.
Webtivity Glossary and Terminology Glossary and definitions of web design terminology.
Web Nerd Terminology Explained Chris Coyier - CSS Tricks
As happens with any weird niche societal group, us web nerds have developed some language of our own. Some of this language is perfectly acceptable English, but still sounds weird to an outsider. I thought I'd throw together a list of these words and attempt to explain them in plain English as a reference for non-nerds.