COURSE GUIDES
Learn Web Design: 50+ of the Best Online Educational Resources to Learn to Build Websites

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 percent 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 top-notch web experiences that keep web surfers engaged can fetch salaries north of $100,000/year. The demand for web design is so strong that coding bootcamps have popped up around the country to train new front-end web developers, offering the opportunity for smart, young individuals to gain valuable skills in an intense environment. However, these bootcamps often include 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 learn web development skills for a fraction of the price, so we decided to create a guide for eager learners who don't have $5,000 to $10,000 to spend on training. We've scoured the web and looked at hundreds of websites that claim to teach web development. We've seen the good, the bad, and the ugly. The net result is this curated collection of online learning resources that will help transform you into a front-end web developer.

These websites and resources come in many shapes and sizes. Here's what we have collected:

Tutorials & Guides

There are thousands of free web guides and ebooks around the web that are great for those who love to read. We've hand-picked the best.

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 best courses often have slick user interfaces, high quality video, community forums, and coding exercises.

Live Instruction

The best way to learn new material is with live interaction and personal training, which can help you break through mental barriers quicker. This experience is similar to what you might get at a bootcamp, but it costs a fraction of the price and while still providing a great career boost.

Reference Content

Our reference section includes free and searchable information repositories where you can get exactly what you need, exactly 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
 
 

Content Providers

In the process 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.

  • Tutorials & Guides
  • Online Courses
  • Live Instruction
  • 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
 
 

Tutorials & Guides

  • Free or Low 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 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.

Those who have mastered the basics can continue with the 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 if you're looking for hands-on coding exercises, this resource might not be for you.

COURSE TYPE: Tutorial | All Levels | HTML, CSS, Javascript

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.

COURSE TYPE: Tutorial | Beginner | HTML

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.

COURSE TYPE: Tutorial | Beginner | HTML, CSS

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.

COURSE TYPE: Book | HTML, CSS
 
 

"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
 
 

This online, text-based resource is easy to follow and is expertly organized into bite-sized sections. The tutorials aim to help learners master HTML5 and have an introductory course on CSS3 on standby for users who want to learn CSS3 fundamentals.

COURSE TYPE: Tutorial | Beginner | HTML, CSS, Javascript

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.

COURSE TYPE: E-Book | Advanced | HTML, CSS, Javascript

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.

COURSE TYPE: Articles | Intermediate, Advanced | HTML, CSS, Javascript, Design
 
 

"I spent a lot of time on sites like A List Apart, Smashing Magazine, and Stack Overflow just absorbing as much information as a I could. Constantly doing tutorials was how I picked up on different skills and techniques."

– Todd Hamilton, developer and founder of OpenKit.io
 
 

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.

COURSE TYPE: E-Book | Intermediate, Advanced | Javascript

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.

COURSE TYPE: E-Book | Beginner | Javascript

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.

COURSE TYPE: E-Book | All Levels | Javascript

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.

COURSE TYPE: Tutorial | Beginner/Intermediate | JQuery
 
 

"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
 
 

Online Courses

  • Beginner friendly
    Highly structured learning paths are great for newbies
  • The full package
    Courses include instruction, exercises, and sometimes discussion forums

At Treehouse you can learn web development from scratch in a number of languages. It has over a thousand video tutorials created by expert developers, quizzes and coding challenges. On top of 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. You'll learn the important functions, techniques, and varieties of JS, and how to code apps.

For more details, check out our full review of Team Treehouse.

COURSE TYPE: Courses | All Levels | HTML, CSS, JavaScript, Design, & more…

lynda offers an HTML essential training video, which covers the basics of HTML programming. The video is more than five hours long and consists of 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.

COURSE TYPE: Course | Beginner | HTML

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, completing markup and verification of a finished website. The videos are ideally organized into a four-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.

COURSE TYPE: Courses | All Levels | HTML, CSS, JavaScript, Design

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 five 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, you'll have access to four supplemental Code TV screencasts that cover advanced topics.

For more details, check out our full review of Code School.

COURSE TYPE: Courses | Intermediate/Advanced | HTML, CSS, JavaScript, Ruby, iOS

Frontend Masters is geared towards web development students who 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.

COURSE TYPE: Courses | Intermediate/Advanced | HTML, CSS, JavaScript, jQuery, Design

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.

COURSE TYPE: Courses | All Levels | HTML, CSS

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.

COURSE TYPE: Courses | Beginner | HTML, CSS, JavaScript, jQuery, PHP, Python, Ruby
 
 

"Being an environmental engineering major, I had very little exposure to web code when I first started learning. I wanted to get into web development because I love the idea of starting out with a blank canvas, writing a few lines and having a web page ready to go. I started by completing the courses on HTML/CSS/JavaScript and jQuery available on Codecademy. I finished these courses in about three weeks while holding a full-time job. They give anyone learning web development a great foundation and laid the foundation for my entry into web development."

– Yatit Thakker, co-founder at Omninox Publishing
 
 

Dash is an interactive online learning program from General Assembly that teaches you how to code via a 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.

COURSE TYPE: Courses | Beginner | HTML, CSS, JavaScript

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.

COURSE TYPE: Courses | Beginner | HTML, CSS, JavaScript

Aquent Gymnasium is an open source 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.

COURSE TYPE: Courses | All Levels | HTML, CSS, JavaScript, jQuery, Design

Pluralsight provides an introductory class on HTML Fundamentals that covers HTML markup, the heart of any web application. The course is split into videos, each one about a different element in the HTML specification, such as Text, Lists and Tables.

COURSE TYPE: Course | Beginner/Intermediate/Advanced | HTML
 
 

"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 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.

COURSE TYPE: Course | Beginner | HTML, CSS

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.

COURSE TYPE: Course | Beginner, Intermediate | HTML, CSS

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 seven video series demonstrates how to create a good-looking website for those artistic types with poorly designed websites looking to revamp.

COURSE TYPE: Videos | Beginner | HTML, CSS

For those absolute beginners wanting to 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.

COURSE TYPE: Videos | Beginner | HTML, CSS
 
 

"My only advice to those looking to find a position in the world of web or front end development is to build up a portfolio -- there aren't any (good) clients that will hire you just because you claim you can produce a great design. Whether it's building/designing a website for yourself (either an interface mockup or an entire HTML/CSS website), or just doing one for fun, you have to prove your worth. I often get client work because of a pre-existing app or website I've built for myself-- the client sees your capabilities in a finished product, and will be willing to work with you."

– Andrew Munsell, founder at Wizard Apps
 
 

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.

COURSE TYPE: Courses | Beginner | HTML

Saylor.org, a free education website that 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 five to seven hours each. A 70% score is required on the final exam to pass the course.

COURSE TYPE: Courses | Beginner | HTML, CSS

Learn To Program.tv's HTML & CSS for Beginners covers all the beginner elements needed to begin programming HTML web pages. 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.

COURSE TYPE: Courses | Beginner | HTML, CSS

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.

COURSE TYPE: Courses | All Levels | HTML, CSS, JavaScript, jQuery, Design

Alison.com has a Diploma in Web Design course, organized in nine 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.

COURSE TYPE: Course | Beginner | HTML, CSS

.appendTo Developer Learning Center provides courses on JavaScript and jQuery without the need for registration or signup. The course is organized into eight 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.

COURSE TYPE: Courses | Beginner | JavaScript, jQuery
 
 

"The first project should be something that is just a basic informational website, maybe four or five pages, basic navigation, limited or no JavaScripting, etc. Just completing a website from start to finish when you have little to no coding experience is a great way of discovering all the little things that come up along the way. Making sure to choose an 'easy/simple' project at the get-go helps solidify the basic concepts without becoming overwhelmed with new concepts or design goals too soon in the learning process."

– Dan Abbate, entrepreneur, investor at Robotaton
 
 

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

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 when building project websites over the stretch of the course. The course is three months long, with seven to 10 hours of coursework per week.

For more details, check out our full review of Thinkful.

COURSE TYPE: Mentorship | All Levels | HTML, CSS, JavaScript, Ruby, Python

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.

COURSE TYPE: Mentor-based Course | Beginner | HTML, CSS

CodeMentor is a unique service which instantly connects prospective web developers who need a professional critique on website development. Unlike courses that involve mentorship, Code Mentor 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.

COURSE TYPE: Mentorship | All Levels | HTML, CSS, JavaScript, jQuery, Design
 
 

"Any web project is worth taking on during the learning process. Don't aim too high to begin 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+
 
 

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

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.

COURSE TYPE: Forum | All Levels | HTML, CSS, JavaScript, jQuery, PHP, Ruby, & more
 
 

"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
 
 

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.

COURSE TYPE: Tutorials | Intermediate/Advanced | HTML, CSS, JavaScript

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.

COURSE TYPE: Resources | All Levels | HTML, CSS, JavaScript

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.

COURSE TYPE: Template | Intermediate/Advanced | HTML5

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.

COURSE TYPE: Online Magazine | Intermediate/Advanced | HTML, CSS, JavaScript, jQuery, Design PHP, & more

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 Doctor? Check out our interview with HTML5 Doctor Ian Devlin, seasoned web developer and HTML5 Doctor.

COURSE TYPE: Blog | All Levels | HTML5

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.

COURSE TYPE: Infographic | All Levels | HTML, CSS, JavaScript
 
 

"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
 
 

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 experienced HTML5 developers. In fact, you can even see the exact browser support for each individual HTML5 feature.

COURSE TYPE: Resource | Intermediate/Advanced | HTML, CSS

Mozilla, creator 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.

COURSE TYPE: Wiki | All Levels | HTML, CSS, JavaScript

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 five hours clicking on everything, and bookmarking what you like.

COURSE TYPE: Resources | All Levels | HTML, CSS, JavaScript

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.

COURSE TYPE: E-Book | Advanced | HTML, CSS
 
 

"For HTML, Definitely do not use w3schools! Please sure you check outw3fools. Instead read the the W3 Specifications. WhatWG has published a much friendlier version."

– Francisco Brito, Software Engineer at Oracle
 
 

Mozilla Thimble is a unique website that 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.

COURSE TYPE: Template | All Levels | HTML, CSS, JavaScript

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.

COURSE TYPE: Wiki | Beginner | HTML, CSS
Free

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.

COURSE TYPE: Resources | Intermediate/Advanced | HTML, CSS, JavaScript
Free

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.

COURSE TYPE: Marketplace | Intermediate/Advanced | HTML, CSS, JavaScript
 
 

"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
 
 

Pricing

SORT BY:   LOW TO HIGHHIGH TO LOW
Shay Howe's Guides to HTML & xCSS Tutorial Free
HTML 101 at Berkeley Knight Digital Media Center Tutorial Free
Web Development for Beginners from WebPlatform Tutorial Free
Getting Started with HTML5 from Geek Champ Tutorial Free
Dive Into HTML5 by Mark Pilgrim E-Book Free
A List Apart: The Online Magazine for Web Designers Articles Free
Learning Javacript Design Patterns by Addy Osmani E-Book Free
Eloquent JavaScript by Marijn Haverbeke E-Book Free
JavaScript Enlightenment by Cody Lindle E-Book Free
Bocoup Tutorial Free
Codecademy Courses Free
Dash Courses Free
Code Avengers Courses Free
Aquent Gymnasium Free
Don't Fear The Internet: Basic HTML & CSS for Non-Web Designers Video Free
MSDN: HTML5 & CSS3 Fundamentals - Development for Absolute Beginners Video Free
Web Making 101 at P2PU Courses Free
Saylor University: HTML and CSS for Beginners Courses Free
ALISON Courses Free
.appendTo Developer Learning Center: Introduction to JavaScript and jQuery Courses Free
Stack Overflow Forums Forum Free
HTML5 Rocks Tutorial Free
Move the Web Forward Resources Free
HTML5 Boilerplate Template Free
Smashing Magazine Online Magazine Free
HTML5 Doctor Blog Free
Front End Rescue Infographic Free
HTML5 Please Resources Free
Mozilla Developer Network Knowledge Hub Wiki Free
Web Dev Handbook 2.0 Resources Free
HTML The Living Standard E-Book Free
Mozilla Thimble: A Coding Jungle Gym Template Free
Wikiversity Web Design Challenges Wiki Free
Codepen Resources Free
CSS Deck Marketplace Free
Codementors Mentorship $4/15-min session
Tuts+ Courses $19/mo, $180/yr
Udemy Courses $20-$200/course
The HTML & CSS Book Book $23
Lynda.com Courses $25/mo - $37.50/mo
Treehouse Courses $25/mo - $49/mo
Code School Courses $29/mo
Pluralsight Courses $29/mo
Learnable Courses $29/mo, $149/yr
Frontend Masters Courses $39/mo
Skillshare Courses $40
HTML and CSS for Beginners on Learntoprogram.TV Courses $50
Infinite Skills: HTML5 Training Bundle Courses $100
Thinkful.com Mentorship $300
O'Reilly School of Technology Mentor-based Course $400
O'Reilly School of Technology Mentor-based Course $400
Thinkful.com Mentorship $300
Infinite Skills: HTML5 Training Bundle Courses $100
HTML and CSS for Beginners on Learntoprogram.TV Courses $50
Skillshare Courses $40
Frontend Masters Courses $39/mo
Learnable Courses $29/mo, $149/yr
Pluralsight Courses $29/mo
Code School Courses $29/mo
Treehouse Courses $25/mo - $50/mo
Lynda.com Courses $25/mo - $37.50/mo
The HTML & CSS Book Book $23
Udemy Courses $20-$200/course
Tuts+ Courses $19/mo, $180/yr
Codementors Mentorship $4/15-min session
CSS Deck Marketplace Free
Codepen Resources Free
Wikiversity Web Design Challenges Wiki Free
Mozilla Thimble: A Coding Jungle Gym Template Free
HTML The Living Standard E-Book Free
Web Dev Handbook 2.0 Resources Free
Mozilla Developer Network Knowledge Hub Wiki Free
HTML5 Please Resources Free
Front End Rescue Infographic Free
HTML5 Doctor Blog Free
Smashing Magazine Online Magazine Free
HTML5 Boilerplate Template Free
Move the Web Forward Resources Free
HTML5 Rocks Tutorial Free
Stack Overflow Forums Forum Free
.appendTo Developer Learning Center: Introduction to JavaScript and jQuery Courses Free
ALISON Courses Free
Saylor University: HTML and CSS for Beginners Courses Free
Web Making 101 at P2PU Courses Free
MSDN: HTML5 & CSS3 Fundamentals - Development for Absolute Beginners Video Free
Don't Fear The Internet: Basic HTML & CSS for Non-Web Designers Video Free
Aquent Gymnasium Free
Code Avengers Courses Free
Dash Courses Free
Codecademy Courses Free
Bocoup Tutorial Free
JavaScript Enlightenment by Cody Lindle E-Book Free
Eloquent JavaScript by Marijn Haverbeke E-Book Free
Learning Javacript Design Patterns by Addy Osmani E-Book Free
A List Apart: The Online Magazine for Web Designers Articles Free
Dive Into HTML5 by Mark Pilgrim E-Book Free
Getting Started with HTML5 from Geek Champ Tutorial Free
Web Development for Beginners from WebPlatform Tutorial Free
HTML 101 at Berkeley Knight Digital Media Center Tutorial Free
Shay Howe's Guides to HTML & xCSS Tutorial Free
 

Was that helpful? We also have a Ruby on Rails Guide. It has 29 of the best online educational resources for learning how to build web apps.