Learn Web Design: 50+ of the Best Online Educational Resources to Learn to Build Web Sites

[Turk]

Last updated: January 21, 2014.

The very best ways to learn HTML, CSS, JavaScript, and the art of building websites, including free and paid tutorials, courses, instructor-guided courses, and reference material. Fifty resources, selected from a list of over 140.

About This Guide

Between 2010 and 2020, the market for web design jobs is projected to experience a 21.7% year-on-year growth. The prospects are also quite good in the short-term. While the median annual salary for web developers is $77,000, those who can create the topnotch online web experiences that keep web surfers engaged can fetch salaries north of $100,000/year. The demand is so strong that coding bootcamps have popped up around the country to train new front-end web developers, offering the ability for smart young individuals to gain valuable skills in an intense environment, often for a hefty price tag.

In tandem, there has been an explosion in the supply of websites, tutorials, ebooks, and online courses that can help you achieve the same goal for a fraction of the price. So we decided to create a guide for eager learners who dont have $5,000 to $10,000 to spend on training. Weve scoured the web and looked at hundreds of websites that claim to teach web development. Weve seen the good, the bad, and the ugly. The net result is this curated collection of online learning resources that will transform you into a front-end web developer.

These websites and resources come in many shapes and sizes. Here are the types of sites that we have collected:

1) Tutorials & Guides
There are thousands of free web guides and ebooks. Weve hand-picked the best.

2) Online Courses
Courses represent a paradigm shift from guides and tutorials. Structured curricula and use of video will keep you more engaged as well as help you absorb more learning material. The course platforms at the higher end have slick user interfaces, high quality video, community forums, and coding exercises.

3) Live Instruction
The best way to learn is via live interaction and personal training, which can help you break through mental barriers quicker. This is similar to the experience you might get at a bootcamp but at a fraction of the price and basically the same career boost you'll enjoy when looking for a job.

4) Reference Content
Our reference section includes free and searchable repositories of information, where you can get exactly what you need, when you need it.

When I first started out learning HTML and CSS, a lot of the online courses, training guides, and tutorials that exist today hadn’t been created yet. I taught myself the hard way. I just started experimenting with HTML and CSS. I would take existing web pages and deconstruct the source code, trying to figure out everything fit together. When I ran into a problem, I would do a quick search on Google. These days, there’s a wealth of knowledge for anyone who wants to put in the time to learn. Steven Hansen, front-end developer, mrc

When I first started out learning HTML and CSS, a lot of the online courses, training guides, and tutorials that exist today hadnt been created yet. I taught myself the hard way. I just started experimenting with HTML and CSS. I would take existing web pages and deconstruct the source code, trying to figure out everything fit together. When I ran into a problem, I would do a quick search on Google. These days, theres a wealth of knowledge for anyone who wants to put in the time to learn. Steven Hansen, front-end developer, mrc
Every Provider

In the course of creating this comprehensive list, we reviewed more than 140 resources where one could plausibly learn how to code. However, most had outdated content or provided a poor user experience. Many more were simply redundant: offering an experience that is similar to, but certainly not better, than the resources on this list. Those of you who are curious can view the complete list, but in this guide, we only focused on the very best.

1) Tutorials & Guides

2) Online Courses

3) Live Instruction

4) Reference Content
Picking a side project that motivates you to learn how to achieve what you want using code is a great way to force yourself to pick up techniques. The key is that the side project's subject interests you beyond the coding - for instance some of my first websites were around video games websites. As the sites grew an audience this pressed me to expand my knowledge to improve them.
Jason, Self-taught coder & Founder at Potato, a 70-Person Web Development Agency

1) Tutorials & Guides

Free or Lost Cost
Keep your hard-earned dollars in your pocket

Text-Based
Good for those who like to learn via reading and see text code examples

Shay Howe's Guides to HTML & CSS

Shay Howe bundles HTML and CSS into one learning block that is beginner-friendly and well organized. The text-based beginner guide is cleanly formatted for optimum readability and touches on the common elements of web design and development. There are no exercises to help you practice or hone your newly learned skills, though.

Those who have the basics can continue with his advanced guide, which expands the concepts previously learned and specifically aims to help designers broaden and shore up their HTML, CSS and jQuery skills. Good content organization but like the material that precedes it lacks any attempt at learning reinforcement through assignments or hands-on coding.
Subject Areas: HTML, CSS, JavaScript
Level: All Levels
Price: Free
http://learn.shayhowe.com

HTML 101 at Berkeley Knight Digital Media Center

While this resource is provided by a very credible source, its intended audience is not hardcore developers but career journalists and communication professionals. This makes the content great for non-techies and complete beginners but not so much for people passionate to learn more about web design and development.
Subject Areas: HTML
Level: Beginner
Price: Free
http://multimedia.journalism.berkeley.edu/tutorials/html

Web Development for Beginners from WebPlatform
Web Development for Beginners is a survey of the essential skills necessary for a web developer to be able to execute code efficiently and effectively, even with little to no skill. It not only goes over a history of web development, but also highlights specifically important elements in HTML, CSS, and JavaScript.
Subject Areas: HTML, CSS
Level: Beginner
Price; Free
http://docs.webplatform.org/wiki/beginners

The HTML & CSS Book from Wiley Books
The HTML and CSS Book is a comprehensive manual to all aspects about CSS3 and HTML5. Similar to any engineering manual, the HTML and CSS Book covers all topics related to web design in an encyclopedic, reference-oriented manner.
Subject Areas:HTML, CSS
Level: Beginner
Price; $23
http://htmlandcssbook.com

I think understanding the flow of CSS elements is a key breakthrough moment. I think the best way to have this breakthrough is a combination of experimenting and reading tutorials, with more emphasis on experimenting. Alex Zorach, Self-Taught Coder, Founder of RateTea.com

Getting Started with HTML5 from Geek Champ

This online, text-based resource is easy to follow and is expertly organized into bite-sized sections. The tutorials aim to help learners master HTML 5 and have an introductory course on CSS3 on standby for users who want to learn CSS3 fundamentals.
Subject Areas: HTML, CSS, JavaScript
Level: Beginner
Price: Free
http://www.geekchamp.com/html5-tutorials/1-html5-overview

Dive Into HTML5 by Mark Pilgrim
Mark Pilgrim's reference book, Dive Into HTML5, is a guide to the new elements unique to HTML5. The author frequently uses puns and humor to make his point, such as "Let's call it a Draw(ing surface)" on the chapter about the canvas element, and provides a witty overview of all things HTML5.
Subject Areas: HTML, CSS, JavaScript
Level: Advanced
Price: Free
http://diveintohtml5.info

A List Apart: The Online Magazine for Web Designers
A List Apart is a compilation of articles and blog entries to help developers get an edge when building custom websites from scratch. With over 380 articles and counting, A List Apart combines professional web development writers and columnists with a reference-style article listing in a modern, blog-like atmosphere.
Subject Areas: HTML, CSS, JavaScript, Design
Level: Intermediate/Advanced
Price: Free
http://alistapart.com/topic/html

Learning Javacript Design Patterns by Addy Osmani
Learning JavaScript Design Patterns is a book with one central purpose: to enlighten the user on typical and classic methods of organizing JavaScript programming flow to facilitate the functionality of the code. The book is aimed at developers looking to organize and streamline their code development.
Subject Areas: JavaScript
Level: Intermediate/Advanced
Price: Free
http://addyosmani.com/resources/essentialjsdesignpatterns/book
Eloquent JavaScript by Marijn Haverbeke

A free gem of a book that's created for absolute newbies. The author surprisingly succeeds at communicating a highly technical subject into something so engagingly simple by being authoritative and casual at the same time. Marijn Haverbeke's smart choice of easy and light words is nothing less than eloquence. Has the makings of a classic.
Subject Areas; JavaScript
Level: Beginner
Price; Free
http://eloquentjavascript.net

JavaScript Enlightenment by Cody Lindley
As opposed to a typical JavaScript book, which would go over a complete cookbook of JS recipes, JavaScript Enlightenment focuses on an examination of native JavaScript objects and nuances, such that the reader can gain a better understanding of the language as a whole. It intends to make it clear to advanced developers that library usage is not always the best or most attractive option in JS development.
Subject Areas: JavaScript
Level: All Levels
Price: Free
http://www.javascriptenlightenment.com

jQuery Fundamentals from Bocoup
jQuery Fundamentals is a site solely dedicated to the jQuery expansion of JavaScript, presenting all of the new add-ons. The reference lists useful examples within code snippets, which can be very helpful for new programmers looking for tips on how to use a certain element, and includes a built-in editor for each example. The website is great for fast and easy reference for any jQuery element.
Subject Areas: jQuery
Level: Beginner/Intermediate
Price: Free
http://jqfundamentals.com

View Source on a web browser! - The front end code on a website is inherently open for you to view, so you can easily see how a website is built by inspecting the code. When you're starting out you can spot trends in how people are laying out their pages and what techniques are used, and later on when you've mastered the basics you can see how an innovative website has achieved an interesting effect. Jason, Self-taught coder & Founder at Potato, a 70-Person Web Development Agency
2) Online Courses

Beginner friendly
Highly structured earning paths are great for newbies

The full package
Courses include instruction, exercises, and sometimes discussion forums

Team Treehouse Web Design Training

At Treehouse you can learn web development from the scratch in a number of languages. It has over a thousand video tutorials created by expert developers, quizzes, and coding challenges. On top that, there is a thriving community where you can seek and answers and have relevant discussions. There is also a strong focus on job readiness and it comes with a built-in job board. Deep Dives are available in:

HTML - Learn the critical elements that web professionals need to describe the structure and content of a web page

CSS - Study the language needed to change the visual appearance of your webpage and control color, font, spacing, and more.

JavaScript - Find out how to bring your page to life and interact with users. Youll learn the important functions, techniques, and varieties of JS, and how to code apps.
Subject Areas: HTML, CSS, JavaScript, Design, & more
Level: All Levels
Price: $25/month-Silver; $50/month-Gold
teamtreehouse

HTML Essential Training at lynda.com

lynda offers an HTML essential training video, which covers the basics of HTML programming. The video is more than 5 hours long and consistsof a full overview of HTML programming, including fundamentals, text, images, links, lists, multimedia, HTML5, metadata and the header, and CSS integration. Once you've completed the course, lynda has hundreds more web design courses to choose from.
For more details, check out our full review of lynda.
Subject Areas: HTML
Level: Beginner
Price: Basic $25/month, Premium $37.50/month

Tuts+: Learn HTML & CSS in 30 Days

Tuts Plus is a network of unrivaled learning tutorials written by practicing development and design professionals. Most of the tutorials are completely free. The best tutorials and high quality structured courses are available via Tuts Plus Premium, its in-house training library. Two of the best free tutorials are:

30 Days to Learn HTML and CSS is 30-day course with lessons broken down into 10-minute videos. The course is designed such that on average the student watches one 10 minute video per day, going over topics such as establishing basic HTML coding techniques, to completing markup and verification of a finished website. The videos are ideally organized into a 4-week program, culminating in a final website project.

CSS3 Mastery is an aggregation of some of the networks best CSS tutorials, focusing on the intricacies and special features brought up by the introduction of CSS3. It covers essentials, such as "10 CSS Properties You Need to be Familiar With," to specialty cases such as "Getting Clever with CSS3 Shadows." Each portion of the session is focused into a specialized piece of CSS3 knowledge.
For more details, check out our full review of Tuts+ Premium.
Subject Areas: HTML, CSS, JavaScript, Design
Level: All Levels
Price: $19/month, $180/year

Learn by Doing at Code School

Code School is an interactive learning platform that specializes in HTML/CSS, JavaScript, Ruby, and iOS. The coolest thing about the platform is that each course is set up like a game and has a fun and quirky theme, complete with a theme song. Intermediate and advanced programmers will find it more useful than complete beginners, but there are eight introductory courses well suited for beginners that are completely free.

JavaScript Roadtrip covers the foundations of the language, such as values, variables, and file interactions. Each of the aspects has a corresponding video and 5 challenges with simple coding problems. And the best part is its free! It is part of a larger JavaScript path that is available to premium users

In the HTML/CSS Path you learn the fundamentals of design, front-end development, and crafting user experiences that are easy on the eyes. The path covers HTML5, CSS3, SASS, responsive design, and Compass, the CSS Authority Framework. In addition, youll have access to four supplemental Code TV screencasts that cover advanced topics.
For more details, check out our full review of Code School.
Subject Areas: HTML, CSS, JavaScript, Ruby, iOS
Level: Intermediate/Advanced
Price: $25/month

Frontend Masters

Frontend Masters is geared towards web development students that already know the basics and want to take their craft to the next level. It features intensive courses in HTML5, CSS3, and newer JavaScript libraries like jQuery, AngularJS, and Backbone.JS from seasoned developers and authors. Get started with:

HTML5 & CSS3 - Learn the latest features of the evolving languages HTML and CSS from Christopher Schmidt, author of HTML5 Cookbook.

JavaScript & jQuery - Discover everything you need to know about JavaScript before diving into jQuery from Karl Swedberg, experienced developer and author.
Subject Areas: HTML, CSS, JavaScript, jQuery, Design
Level: Intermediate/Advanced
Price: $39/month

Build your First Website with Learnable

Learnable.com offers the course "Build Your First Website,"" which provides a comprehensive introduction to HTML and CSS, the essential languages for coding websites. The course goes through language fundamentals, developing the website, and publishing a website on the Internet. The course is based on the book Build Your Own Website The Right Way Using HTML & CSS.

For more details, check out our full review of Learnable.
Subject Areas: HTML, CSS
Level: All Levels
Price: $29/month, $149/year

Codecademy
Codecademy is a resource for beginning programmers with little to no experience and provides a constructive learning path for one of five languages. It presents digestible lessons in a community-based, achievement-driven atmosphere and offers courses on jQuery, JavaScript, PHP, Python, and Ruby. Beginners will like its built-in coding console.

For more details, check out our full review of Codeacademy.
Subject Areas: HTML, CSS, JavaScript, jQuery, PHP, Python, Ruby
Level: Beginner
Price: Free

Build a Personal Website with Dash

Dash is an interactive online learning program from General Assembly that teaches you how to code via series of interactive story-based tutorials. You can expect to learn HTML, CSS, and JavaScript through tasks that are similar to what a real developer might do. It was originally an internal training platform but was so good that GA had to share it with everyone.
Subject Areas : HTML, CSS, JavaScript
Level: Beginners
Price: Free

Code Avengers
Code Avengers is a website designed by experts primarily for beginners, with courses in HTML, CSS, and JavaScript. The site is organized in different lessons for each language, which works well for both teachers and independent learners needing to learn about web programming.
Subject Areas : HTML, CSS, JavaScript
Level: Beginner
Price: Free

Aquent Gymnasium

Aquent Gymnasium is an open course platform for front-end web designers that can bolster your understanding of HTML, CSS, UX Design, and responsive design techniques. Different courses cycle every month. The classes are geared towards those early in their career who intend to build professional websites but are still seeking to improve their skills.
Subject Areas: HTML, CSS, JavaScript, jQuery, Design
Level: All Levels
Price: Free

Beginner JavaScript at LearnStreet

Both learners and teachers can use LearnStreet to learn or teach JavaScript, Python, or Ruby. On the student side, LearnStreet uses a code console interface to teach fundamental code structures, and also contains many examples and a deep library of engaging content to learn with, such as games, tools, algorithms, and practice problems. For programming educators, LearnStreet allows a teacher to closely monitor and manage students' progress on the site, as if in a classroom.
Subject Areas: JavaScript
Level: Beginner
Price: Free

HTML Fundamentals from Pluralsight
Pluralsight provides an introductory class on HTML Fundamentals, which covers HTML markup, the heart of any web application. The course is split up into videos, each one about a different element in the HTML specification, such as Text, Lists, and Tables.
Subject Areas: HTML
Level; Beginner/Intermediate/Advanced
Price: $29/month


I think understanding the flow of CSS elements is a key breakthrough moment. I think the best way to have this breakthrough is a combination of experimenting and reading tutorials, with more emphasis on experimenting. Alex Zorach, Self-Taught Coder, Founder of RateTea.com

I would say fluency in web standard technologies is most important. When a designer has a fundamental understanding of HTML, CSS and (perhaps to a lesser degree) JavaScript, he or she will be able to realize their ideas rapidly in the browser. At that point, improvements to workflow can be made - CSS preprocessors, frameworks and libraries, markup alternatives, collaboration tools - they'll all improve a front-ender's process, but not without language fluency in the first place.
Ian Yates, Web Design Editor at Tuts+

Build an HTML and CSS Website From Scratch with Skillshare
Build an HTML and CSS Website From Scratch from Skillshare is a course about creating a unique personal unique website without the use of specialized restrictive templates. In addition to learning code, the course goes over different layouts, responsive design for mobile, search engine optimization, and site planning. The course contains 56 video lessons and purchase unlocks lifetime access.
Subject Areas: HTML, CSS
Level: Beginner
Price: $40

Infinite Skills: HTML5 Training Bundle

The HTML5 Training Bundle from Infinite Skills is a course that teaches a comprehensive survey of all things HTML, including the new HTML5 revision. The course is split up into different training videos, going over concepts ranging from simple HTML tags to advanced elements like mobile integration.
Subject Areas: HTML, CSS
Level: Beginner/Intermediate
Price: $100

Don't Fear The Internet: Basic HTML & CSS for Non-Web Designers
Don't Fear the Internet is a site for learning web design specifically geared towards print designers, photographers, or other generally creative people who don't specifically want to become experts at web programming. Instead, the 7 video series demonstrates how to create a good looking website for those artistic types with poorly designed websites looking to revamp their poorly designed websites.
Subject Areas; HTML, CSS
Level: Beginner
Price: Free

MSDN: HTML5 & CSS3 Fundamentals - Development for Absolute Beginners

For those absolute beginners wanting learn web design and programming, Channel 9 on the MSDN has a course dedicated to those who have no experience whatsoever. The course is organized into 21 different videos, beginning with designing your first web page to new HTML5 concepts such as integrated video embedding.
Subject Areas: HTML, CSS
Level: Beginner
Price: Free
I would say fluency in web standard technologies is most important. When a designer has a fundamental understanding of HTML, CSS and (perhaps to a lesser degree) JavaScript, he or she will be able to realize their ideas rapidly in the browser. At that point, improvements to workflow can be made - CSS preprocessors, frameworks and libraries, markup alternatives, collaboration tools - they'll all improve a front-ender's process, but not without language fluency in the first place.
Ian Yates, Web Design Editor at Tuts+

Web Making 101 at P2PU

The School of Webcraft is a set of courses for learning web programming backed by Mozilla, the creators of Firefox. The free set of courses is distinct due to it's peer-powered system in which learning occurs in peer driven study groups and among collaboration between peers and mentors alike. Anyone can signup to learn or become a mentor, and all the courses are also offered in Spanish.
Subject Areas: HTML
Level: Beginner
Price: Free

Saylor University: HTML and CSS for Beginners

Saylor.org, a free education website which provides courses on various topics, has an HTML and CSS course which provides resources for beginner programmers. It is organized similarly to a typical university online course, requiring around 30 hours, with units of about 5-7 hours each. A 70% score is required on the final exam to pass the course.
Subject Areas: HTML, CSS
Level: Beginner
Price: Free

HTML and CSS for Beginners on Learntoprogram.TV
Learntoprogram.tv's HTML & CSS for Beginners covers all the beginner elements needed to begin programming HTML webpages. The course not only covers the newer HTML 5 specification, but also goes over the legacy HTML 4.01 specification. The lessons are split up based on different elements in the HTML code, such as Lists and Links, and weaves in CSS usage into each lesson.
Subject Areas: HTML, CSS
Level: Beginner
Price: $50

Learn Web Design Anytime, Anywhere at Udemy
Udemy is the online marketplace where students can find instruction in any subject you can think of. It offers hundreds of courses in all aspects of web development and design. Anyone can start a course on Udemy, so price and quality varies and each course must be purchased individually. Udemy offers many web design courses. Some of the most popular are:

Become a Web Developer from Scratch! - This crowd favorite from Victor Bastos not only covers HTML, CSS, JavaScript, but also PHP, JSON, AJAX, and jQuery. This extensive course has over 240 tutorials!

HTML5 Beginners Crash Course - Learn the principles of HTML5 quickly and efficiently with Robin Nixon, the author of Learning PHP, MySQL and JavaScript. It assumes no prior knowledge of HTML.

Creating Responsive Web Design - For those craving some advanced content, consider learning to code for responsive design with HTML5 and CSS3 with Chris Converse, an experienced designer, developer, speaker, and author.
Subject Areas: HTML, CSS, JavaScript, jQuery, Design
Level: All Levels
Price; $20-$200/course


Get a Free Diploma in Web Development from ALISON
Alison.com has a Diploma in Web Design course, organized in 9 parts covering HTML, CSS, Adobe Dreamweaver, and just building, publishing, and designing web pages in general. The free online course is mainly an introductory course that uses a step-by-step approach in teaching how to create basic web pages.
Subject Areas; HTML, CSS
Level: Beginner
Price: Free

.appendTo Developer Learning Center: Introduction to JavaScript and jQuery

.appendTo Developer Learning Center provides courses on JavaScript and jQuery without the need for registration or signup. The course is organized into 8 distinct lessons, starting with JavaScript 101, which goes through syntax and types, and progresses through Selectors, DOM manipulation, and jQuery. Each lesson is a video from around 30-40 minutes long.
Subject Areas: JavaScript, jQuery
Level: Beginner
Price: Free

3) Live Instruction

Mentorship
Direct access to instructors will help you break through major hurdles

Accountability
Having a relationship with the instructor keeps you honest and on point

Mentor Training with Thinkful.com
Thinkful.com is an online mentorship course website with a range of topics, from front end development, to programming with Ruby and Python. Instead of an exclusive course based on videos, Thinkful presents the student with a mentor to help them when building project websites over the stretch of the course. The course is three months long, with 7-10 hours of coursework per week .
Subject Areas: HTML, CSS, JavaScript, Ruby, Python
Level: All Levels
Price: $300/month

O'Reilly School of Technology: Introduction to HTML and CSS
Introduction to HTML and CSS, a course by the O'Reilly School, is a mentor-based course program developed to teach the essentials and fundamentals of HTML and CSS for website design. The course works through different lessons, resulting in project websites that are submitted to mentors for review and grading. The course costs entail the construction of HTML elements and CSS tie-ins.
Subject Areas: HTML, CSS
Level: Beginner
Price: $400

Codementors: Instant help for Coding
CodeMentor is a unique service which instantly connects prospective web developers who need a professional critique on website development. Unlike courses that involve mentorship, CodeMentor allows the user to sign up at any time for advisory and expert help from developers. It is very useful for advanced developers needing an outside viewpoint, and works like a ticket system, reporting parts where a developer needs help.
Subject Areas: HTML, CSS, JavaScript, jQuery, Design
Level: All Levels
Price: $4 per 15-min session

Any web project is worth taking on during the learning process. Don't aim too high to being with; stay within the boundaries of your technical capabilities, but real-world practice will always push you to solve problems and learn as you do so. From a creative standpoint, indulge in the 'boring' projects. Future employers or clients may not necessarily be impressed by how you deal with a juicy, fictional Pixar movie minisite, but you might catch their attention by creatively and professionally solving a local small business' genuine web needs. Ian Yates, Web Design Editor at Tuts+

4) Reference Content

Bottom-line Support
When you don't know where else to go, reference sites have all the answers.

Crowdsourced
Get reliable advice from experienced web developers around the world

Dochub.io's' HTML Knowledge Hub
Dochub is really a way to instantly search for HTML elements, CSS properties and JavaScript classes. For each, you get a Summary, syntax and example code, as well as notes. A great way to learn about each element properly. And a very fast, easy to use site.
Subject Areas: HTML
Level: Beginner
Price: Free

Stack Overflow Forums

Ask any developer in the world and he will likely mention Stack Overflow as an invaluable resource for learning online. It's a question and answer site with reddit-style voting so that the best answers hit the top. Questions are also tagged to make it easier to learn about a specific topic. Stack Overflow is special because people take time to give quality answers, and it is by far the largest source of questions and answers. Deserves a bookmark for sure.
Subject Areas: HTML, CSS, JavaScript, jQuery, PHP, Ruby, & more
Level: All Levels
Price: Free

The number one most valuable resource for teaching yourself any programming language including HTML/CSS/JS is stackoverflow Almost any question you can come up with has been asked and answered there before. The only challenge is to phrase the question the same way someone else might have asked it before so that the answer shows up in your Google search. Klaus Sonnenleiter, CEO of PrintedArt

HTML5 Rocks

Contributors write their own tutorials about new and emerging subjects in HTML5 Rocks, a site that is well-suited for intermediate and advanced users. Recent subjects of tutorials include Antialiasing 101 or Text Compression for Web Developers. Although only one or two tutorials are added each month, the quality of these tutorials is higher than what you see in most places, as is the quality of the contributors, who include developers at top Tech companies. With new topics being added each month, HTML5 Rocks is an excellent collection
Subject Areas: HTML, CSS, JavaScript
Level: Intermediate/Advanced
Price: Free

Move the Web Forward
Move The Web Forward is a website that compiles many different reference and tutorial websites in a central hub, allowing users who need help or reference material to quickly find the information they need. The site provides tips for those who need help in the community as well as those looking to help fellow developers.
Subject Areas: HTML, CSS, JavaScript
Level: All Levels
Price: Free

HTML5 Boilerplate

HTML5 Boilerplate is a popular front-end template that helps developers build fast and responsive websites, combining the knowledge of over 100 developers on the project. The CSS and style, along with jQuery and JavaScript configuration are already pre-built. These resources make it very easy for developers to jump into the fray and make a modern website.
Subject Areas: HTML5
Level: Intermediate/Advanced
Price: Free

Smashing Magazine

Smashing Magazine is a blog-style online magazine that highlights new developments, tips and tricks in web development. The site is a helpful and an acknowledged resource for developers suffering from the so-called "developer's block." The magazine covers a multitude of topics including UX Design, Coding, Graphics, Mobile, and Design, along with respective subcategories, to ensure that developers can easily find what they are looking for.
Subject Areas: HTML, CSS, JavaScript, jQuery, Design PHP, & more
Level: Intermediate/Advanced
Price: Free

HTML5 Doctor

HTML5 Doctor offers two primary resources: an article archive of about 100 articles, which are good for learning HTML5 basics; and the Elements Index, which provides a short one-paragraph summary of each of the the primary HTML5 element. Whereas other resources try to give you everything, HTML5 doctor is all about being concise.

Want to know what its like to live the life of an HTML5 Doctore? Check out our interview with HTML5 Doctor Ian Devlin, seasoned web devloper and HTML5 Doctor.
Subject Areas: HTML
Level; All Levels
Price: Free

Front End Rescue

Front End Rescue is a site specifically dedicated to making sure that fledgling web developers keep up to date in the volatile world of web development and design technologies. The website outlines 4 critical components, which are following important people, bookmarking news sites or blogs, attending design conferences, and finding your own sources. The site compiles a list of important people and sources to frequently reference.
Subject Areas: HTML, CSS, JavaScript
Level: All Levels
Price: Free

The best way to learn client-side web technologies like HTML, CSS, and JavaScript is to look at the source of websites you visit and play around with them in Firebug. Anytime you visit a website and wonder "how did they make that button look that way?" or "how is this text box sizing to content?" just inspect the CSS or JS with Firebug and dig in. Justin Scott, Product Manager at Mozilla

HTML5 Please

So HTML5 is still relatively new and are not yet fully supported by most browsers. This website allows you to look up HTML, CSS and API features and find out they are safe to use from experience HTML5 developers. In fact, you can even see the exact browser support for each individual HTML5 feature.
Subject Areas: HTML, CSS
Level: Intermediate/Advanced
Price: Free

Mozilla Developer Network Knowledge Hub

Mozilla, creators of Firefox browser, has created an open wiki-style site that allows developers to put together resources such as definitions and attributes of all the HTML and CSS elements, lists of tools and tutorials from around the web, as well as a directory of open web apps and even demos. The site is a constant work-in-progress, so some pages are more complete than others.
Subject Areas: HTML, CSS, JavaScript
Level: All Levels
Price: Free

Web Dev Handbook 2.0

This a giant and awesome list of resources, offering CSS showcases, color tools and sites, AJAX JavaScript and jQuery tools, as well as links to daily reading, HTML web tools, various code checkers, and links to some of the best sites that offer content about web design. This is a site where you should spend about 5 hours clicking on everything, and bookmarking what you like.
Subject Areas: HTML, CSS, JavaScript
Level: All Levels
Price: Free

HTML The Living Standard

Attempting to create a technical specification of HTML5 for web developers is no small task, but the community of developers at WHATWG decided to take it on. WHATWG is a working group focused on evolving the HTML standard, and their very elegantly designed specification document is like an online textbook explaining all about HTML5 -- from the elements, micro data, loading, APIs, user interaction and more. If you like reading textbook style, this is worth checking out.
Subject Areas: HTML, CSS
Level: Advanced
Price: Free

For HTML, Definitely do not use w3schools! Please sure you check out w3fools. Instead read the the W3 Specifications.. WhatWG has published a much friendlier version. Francisco Brito, Formerly Google and Oracle at Dark Goyle
Mozilla Thimble: A Coding Jungle Gym

Mozilla Thimble is a unique website which provides a blank canvas for testing out different website designs, created by the same developers from Mozilla Firefox. The website is organized in a way that enables the user to easily enter any code needing testing or verification on one side, and get a simulated output on the other half, effectively providing live results for testing new code.
Subject Areas: HTML, CSS, JavaScript
Level: All Levels
Price: Free

Wikiversity Web Design Challenges

Wikiversity is an online learning community similar to Wikipedia except that it is built around learning skills. The learning material is crowd sourced and validated, so much of its content comes from those with experience.. There is a good deal of information on HTML and CSS, which also comes with a series of challenges:

HTML - Expect to test your decision-making skills with challenges that cover commonly confused HTML elements and how to construct common elements like forms, tables, and images.

CSS - Get ready to flex your CSS skills with challenges that include altering fonts and colors, tweaking margins and padding, and adding white space and columns to your layout.
Subject Areas: HTML, CSS
Level: Beginner
Price: Free

Codepen

Codepen is a reference website aimed at advanced web developers, listing solutions for development problems created by the community and other users. It works like a showcase, where developers can show off cool, useful, or interesting web development code snippets, as well as present what they do, similar to a marketplace. There is a Pro option that allows for private "pens" and asset hosting.
Subject Areas: HTML, CSS, JavaScript
Level: Intermediate/Advanced
Price: Free

CSS Deck

CSS Deck is a marketplace-like website with the sole purpose of showing off examples of CSS code and designs, such as different look-and-feel aspects, organizations and layouts, and graphical oddities. The website allows the user to browse different CSS examples and pick interesting ones to use, as well as upload his or her own code to show to other developers.
Subject Areas: HTML, CSS, JavaScript
Level: Intermediate/Advanced
Price: FreeFor HTML, Definitely do not use w3schools! Please sure you check out w3fools. Instead read the the W3 Specifications.. WhatWG has published a much friendlier version. Francisco Brito, Formerly Google and Oracle at Dark Goyle

In my experience, the most important element is a passion for development. You can't fake this, and without it you'll never keep up. Hiring managers and other developers really respond to eagerness and a proven willingness to learn. Taking the time and initiative to complete your own projects goes a long way in the eyes of potential employers. Anna Stout, Owner at Astute Design Studio

About SkilledUp

The creation of this guide was an exhaustive undertaking that required team effort. Special thanks to summer Skilltern, Victoria Meng, who carried out a lot of the research required for this list, Brad Zomick, Chief Content Officer, who organized and polished the text, and Nick Gidwani, CEO, who coded it up.
1More Resources: Over 80,000 Courses from 400+ ProvidersUse our CourseFinder to see online courses in a variety of subject areas, including more specific web design topics like Responsive Design, Wordpress, or others.2Read More: Valuable advice and tipsIf you are ready to start coding you'll want to check out the best HTML editors and When you start exploring some career options, you might want to weigh the value of Web Design Certifications or live a day in the life of a front-end developer or mobile app designer. Before getting to the interview make sure to read the most popular HTML interview questions.. Finally to keep on point with the latest front-end trends, make sureto follow the top 5 Web Design Gurus.3Get Serious: Try a coding bootcamp on for sizeIf you are really serious about your web design career, and you are ready and willing to make a major investment of time and money, your best bet is to look at coding bootcamps, which are short, intense programs meant to give you the skills to be employable. They aren't cheap, and they aren't easy, but they have the best shot of getting you a job. Check out our exhaustive list of coding bootcamps.
Source: http://www.skilledup.com/learn-web-design-guide

Please for more figures see the Source

Edited January 23, 2014 by Turk

[techno45]

Thanks brother