web analytics

Self Learning

Online Consoles To Practice Java Script

Editor and compilers to practice coding in a web environment.
es6consoleInteractive IDE to try out ES6 JavaScript code. Transpile to ES5 using several different compilers. Test code directly using ...Free
PlaycodeThe fastest online Code Sandbox for Quickly and Easily make Frontend Experiments.Free
PlnkrPlunker or plnkr is an integrated web development environment and is completely written in AngularJS.Free
js.doOnline JavaScript Editor.
"Edit your code online. Simple, light and fast!"
Coding GroundOnline Javascript Compiler, Online Javascript Editor, Online Javascript IDE, Javascript Coding Online, Practice Javascript Online, Execute Javascript Online, ...Free
Paiza.ioOnline 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
LiveweaveLiveweave 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
CodePenIt 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
jsfiddleAn online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'.Free
Repl.itRepl.it gives you an instant IDE to learn, build, collaborate, and host all in one place.Free
StackblitzThe online code editor for web apps. Featured Workspaces. React (TS) logo. React (TS). TypeScript · AngularJS logo. AngularJS. JavaScript · JavaScript logo ...Free
jsbinA tool that enables you to learn, experiment and teach using web technologies. Free
CodesandboxAn online editor that's built for web application development. ... Free

Learn Web Design and Development

Various tutorials and training resources.
ScrimbaScrimba 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
Google Web FundamentalsAre you new to web development, or an old pro? We've got resources for both.Free
Web Development 101In 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
FreeCodeCampWatch VideoFree
Learn JSLearn not only JS, Python, PHP, Ruby, Java, and more.Free
Guru99Guru99 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.
Learn to Code from ScratchYou 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 DogHTML, CSS and JS tutorials, references, articles and news.Free
TreehouseLearn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business. Yes
Lynda.comYou 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 AcademyWatch VideoFree/Yes
TutsPlusWatch VideoYes
Code SchoolWatch VideoYes
Frontend MastersWatch Video on JSYes
Sitepoint CoursesWatch VideoFree/Yes
UdacityWatch VideoFree
SoloLearnWatch VideoFree
Superhero JSThis page is a collection of the best articles, videos and presentations we've found on the topic.Free
Web Hosting & Setting up Website on a Budget This guide will explore the steps needed to create your own website, no matter your skill level. It will also provide some money-saving tips for creating a website on a budget. Free

HTML5 Reference

HTML 5 references, docs, cheat sheets, tutorials.
HTML CheatsheetOur 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 SheetSo 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 HTML5Designed 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 HTML5Opera 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 DoctorThe 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 HTML5For 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 VideosFor 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-TutorialWhen 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 SheetWhether 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 SheetSo 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 WGThe 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 ReferenceThis 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 StandardA technical specification for Web developers.
Learning to Love HTML5While 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 StarsCode Review: A Beginner’s Guide to Computer Programming and Web Development.
Computer Language for Beginners: HTMLBeginner's resource from HP Tech Takes.

CSS3 Reference Resources

CSS3 Reference Resources, cheat sheets, tutorials, docs.
Resource Description
Complete CSS Cheat SheetUsing 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 TutorialsMy 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 ReferenceThis CSS Reference shows the basic syntax of a CSS rule; lists all standard CSS properties.......
CSS ReferenceCSSreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
Codrops CSS ReferenceAn extensive CSS reference with all the important properties and info to learn CSS from the basics
CSS AlmanacWonderful resource created by CSS Tricks.
CSS Property ReferenceReference by Tizag.com
Microsoft CSS ReferenceThis 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 ReferenceThis 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 SheetQuick reference guide by Smashing Mag.
CSS3 Quick ReferenceCSS3 quick reference v 1.0

CSS Grid

CSS Grid Tutorials
Updated: 5/4/20
Complete Guide To Grid-CSS TricksA Complete Guide to Grid by CSS-Tricks.Tutorial
Learn All About CSS GridLearn CSS Grid with Wes Bos in 25 pretty good videos.
From fundamentals to Real World in about 4 hours.
Grid By ExampleThis 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 FreeLearn CSS Grid for free
14 interactive screencasts to take you from beginner to advanced. Sign in with Github.
CSS Grid LayoutCSS Grid Layout - Rachel Andrew | February 2017Video
Start Using CSS Grid Layout TodayRachel Andrew: Start Using CSS Grid Layout TodayVideo
Designing with gridJen Simmons Designing with grid.Video
Getting Started with CSS GridCSS-Tricks Screencast #153: Getting Started with CSS Grid.Video
A comprehensive guide ...CSS Grid LayoutA comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.Tutorial
CSS grid layout simple guideCodeburst: css grid layout simple guide.Tutorial
Learning CSS grid layout with the SwissLearning 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 BeginnersFree Code Camp:
134 part, 3hr 42 min course.
30 Day Vanilla JS Coding ChallengeWes Bos: Learn by building 30 projects.
ScrimbaScrimba 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 PartsJS The Good Parts: Youtube playlist= 82 videos.
MDN MozillaDeveloperNetworkThis 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 ScriptThis 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 ScriptHere 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 DaysJavaScript 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 ScriptThis 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 CatsFun guide to learn the basics of programming and JavaScript.
Java Script The Right WayThis is a guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices.
JavaScript GardenJavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language.
JavaScript EnlightenmentIt 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 ES6Upgrade to the next version of JavaScript.
Super Hero JSThis 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 ScriptHere 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.
Node.js Tutorials for Beginners22 Youtube videos by The NewBoston.
Node.js Basics18 Youtube videos by Academind.
Asynchronous Programming9 videos will give you basic patterns and tools that will allow you to master and control asynchronous flow in Node.
Node.Js Tutorial Videos18 Youtube video Edureka.
Node.js Tutorial for Beginners37 Youtube videos byThe Net Ninja.
Node.js & Express From Scratch12 Youtube videos by Traversy Media.
Node.js Tutorial Learn in 3 Days12 Tutorials by Guru 99.
The Node Beginner BookAn online book by Manuel Kiessling.
None.js TutorialAn online tutorial by TutorialsPoint.
Introduction to NodeJSA 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.
Front End Developer HandbookFrontendmasters: This is a guide that anyone could use to learn about the practice of front-end development.
Web Style Guide 3rd EditionWeb 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 CSSCSS 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 PracticesGuide to mobile web design with over 50 proven tips to help you build amazing mobile websites
Designing for the WebThe 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 DesignPrinciples of Web Design, 5th Edition, leads you through the entire web site creation process, from start to finish.....
Speaking Java ScriptThis 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 RightwayThere’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 CanvasThe 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 GuideThis “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 SpeedThe business, psychology and technology of high-performance web apps.
Typograply HandbookThis 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 StyleRobert 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 WebFor things you’ve always wanted to know about the web but were afraid to ask, read on.
Beginning CSS Web DevelopmentThere 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.
Mozilla Development NetworkThis glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.
W3.org | Glossary & DictionaryThis 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.
WebDesignDictionary276 (and counting) terms and acronyms that web developers use.
Glossary for Internet & Web DesignInternet and Web Design terms defined.
Glossary of Website TermsWhile 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 TerminologyTo 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 GlossaryGlossary prepared by University Minnesota Duluth.
Sherpa GlossaryWeb design glossary.
Internet Safety 101 | GlossaryA 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.
WebWisePrepared by BBC, WebWise is making the most of being online A-Z.
Webtivity Glossary and TerminologyGlossary and definitions of web design terminology.
Web Nerd Terminology ExplainedChris 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.