Online Consoles To Practice Java ScriptEditor and compilers to practice coding in a web environment.
|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|
"Edit your code online. Simple, light and fast!"
|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|
|Repl.it||Repl.it gives you an instant IDE to learn, build, collaborate, and host all in one place.||Free
|jsbin||A tool that enables you to learn, experiment and teach using web technologies.||Free
|Codesandbox||An online editor that's built for web application development. ...||Free
Learn Web Design and DevelopmentVarious tutorials and training resources.
|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.|
|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|
|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.
|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|
|Code School||Watch Video||Yes|
|Frontend Masters||Watch Video on JS||Yes|
|Sitepoint Courses||Watch Video||Free/Yes|
|Superhero JS||This 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 ReferenceHTML 5 references, docs, cheat sheets, tutorials.
|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.|
|Computer Language for Beginners: HTML||Beginner's resource from HP Tech Takes.|
CSS3 Reference ResourcesCSS3 Reference Resources, cheat sheets, tutorials, docs.
|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 GridCSS Grid Tutorials
|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.
|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.
|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|
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.
|The Good Parts||JS The Good Parts: Youtube playlist= 82 videos.|
|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.|
scope, inheritance, the head object, etc.
|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.|
The following are free tutorials.
|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).|
Free Web Dev/Design EBooksFree eBooks for those who rather read or want to keep a reference source.
|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 DefinitionsA list of resources that define web design terms, words, and vocabulary.
|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.