Learning Resources for Front End Developers

Posted on November 23, 2015 by Susanne Kappler

One of the biggest challenges for front end developers is staying on top of emerging technologies and changes in standards and specifications. The following links will provide resources such as learning tools for both beginners and seasoned developers.

References

Knowing where to look for information may be one of the most valuable skills for developers. The sites below provide references that offer help for specific problems or an overview over more general topics.

Documentations are a developer's best friend when it comes to needing a quick reference or researching details of a specific property. Dash is an API documentation browser and code snippet manager for Mac OS X and iOS users. Dash supports more than 150 documentation sets. Users can also generate their own docsets.

The Mozilla Developer Network, or MDN, provides documentation on Web technology for developers, including a Web Developer Guide, tutorials and references. The Web Developer Guide offers guidance on specific technologies and APIs. The tutorials cover beginner to advanced topics for HTML, CSS and JavaScript. The reference section includes HTML, CSS JavaScript, Web APIs, SVG, WebGL and MathML.

Stack Overflow is a message board that allows users to ask and answer questions about programming. As of September 2015, Stack Overflow has more than 4.3 million users and features more than 10 million questions. The site is a valuable resource for finding answers to specific problems.

WebPlatform is a collaborative project by the World Wide Web Consortium, Adobe, Apple, Facebook, Google, HP, Intel, Microsoft, Mozilla, Nokia, and Opera. The site, which is still a work in progress, aims to provide documentation and teaching resources about open Web standards and Web technologies. The site offers a tutorial on Web design for beginners and reference sections on HTML, CSS, JavaScript, the DOM, SVG, Accessibility and general Web concepts.

Language-specific resources

The sites below focus specifically on tips, tricks and techniques for HTML, CSS and JavaScript.

HTML

The site features articles on how to get started with HTML5, semantics, elements, attributes, forms and other topics. It also includes an element index and a downloadable sectioning element flowchart.

HTML5 Goodies includes articles on markup, building mobile applications, HTML5 and JavaScript, HTML5 and CSS3 as well as a website gallery and an HTML5 discussion board.


CSS         

CSS Tricks was started by Chris Coyier, who is also the co-founder of Codepen. The site contains a blog, video screencasts, a reference section on CSS selectors and properties, code snippets, a user forum and a job board. The site also features a paid section called “The Lodge,” which gives members access to more than 200 video lessons. Paid plans are available for $12.99/month or $100/year and for $19.99/month or $150/year, which includes downloadable videos and course materials.

JavaScript

Egghead offers free and paid video tutorials about JavaScript and related technologies like AngularJS, Node.js and React. Although many videos are accessible for free, a paid account unlocks the entire library. Paid accounts are available for $19.99/month or $169.99/year.

JavaScript Garden is a blog that documents the “quirky parts” of JavaScript. It provides code samples to demonstrate common mistakes, bugs, performance issues and bad practices.


Free e-books 

This list covers free e-books for HTML, CSS and JavaScript. The descriptions are quoted from the publishers’  or authors’ Web sites.

For a comprehensive list of free e-books for programmers, visit https://github.com/vhf/free-programming-books/blob/master/free-programming-books.md

“Aaron Gustafson chronicles the origins of progressive enhancement, its philosophy, and mechanisms, and reveals the countless practical ways that you can apply progressive enhancement principles using HTML, CSS, and JavaScript.” — Easy Readers

“The book covers the basics of web development and it’s a great starting point whether your plan is to make websites, HTML5 mobile apps or games.” — Zenva

“This book provides practical information about how and why the latest version of this markup language will significantly change the way you develop for the Web.” — O’Reilly Media

“Eloquent JavaScript, 2nd Edition dives deep into the JavaScript language to show you how to write beautiful, effective code. Author Marijn Haverbeke immerses you in example code from the start, while exercises and full-chapter projects give you hands-on experience with writing your own programs.” — O’Reilly Media

“This book gets you started with the Canvas element, perhaps HTML5's most exciting feature. Learn how to build interactive multimedia applications using this element to draw, render text, manipulate images, and create animation.” — O’Reilly Media

“Starting from chapter one the reader learns what canvas is, how it works, and the basic functions for drawing shapes. From there it moves on through charts, animation, pixel manipulation, WebGL with ThreeJS, WebAudio and finally a quick introduction to the experimental webcam API. Along the way the reader is walked through hands on exercises that ensure they understand the concepts.” — Josh Marinacci

“With Learning JavaScript Design Patterns, you’ll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you.” — O’Reilly Media

“The material in this textbook is intermediate-to-advanced. It assumes an understanding of the CSS syntax, cascading and inheritance, and commonly used selectors.” —Adam Schwartz

“This guide is meant to provide a quick but thorough introduction to building SVG inline, and while it in no way covers all the available features, it should prove helpful in getting you started. It's intended for designers and developers looking to add SVG to their workflow in the most accessible way possible.” — Joni Trythall

“Take advantage of JavaScript’s power to build robust web-scale or enterprise applications that are easy to extend and maintain. By applying the design patterns outlined in this practical book, experienced JavaScript developers will learn how to write flexible and resilient code that’s easier—yes, easier—to work with as your code base grows.” — O’Reilly Media

“Like it or not, JavaScript is everywhere these days—from browser to server to mobile—and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who once found himself in the same position.” — O’Reilly Media

“It’s easy to learn parts of JavaScript, but much harder to learn it completely—or even sufficiently—whether you’re new to the language or have used it for years. With the "You Don’t Know JS" book series, you’ll get a more complete understanding of JavaScript, including trickier parts of the language that many experienced JavaScript programmers simply avoid.” O’Reilly Media 


Online courses

There is no shortage of online courses for Web developers and designers. The list below includes providers who offer original course material. In addition to the courses listed, some sites like Bento and The Odin Project offer learning tracks that are based on free video and text resources from across the Internet. The list does not include online coding bootcamps that typically require a full-time commitment to learning. For a list of online bootcamps, visit http://www.skilledup.com/articles/online-alternatives-coding-bootcamp

The free courses, hosted by the staffing agency Aquent, are aimed at designers and developers in an effort to teach professionals skills that are currently in demand in the Web industry. Current offerings include classes on JavaScript, jQuery, responsive Web design and UX.  The video courses include reading assignments and coding homework.

Codecademy offers free introductory courses in HTML, CSS, JavaScript and other languages. The lessons include written instructions and tasks to complete in the site's online code editor. Users may also practice their new skills with a variety of projects on the site.

Code Avengers provides beginners’ learning paths for HTML5/CSS3, JavaScript and Python. Unlike most online coding schools, the site charges per individual course with prices ranging from $19 to $39. Students may also purchase access to all existing courses for $165.

Code School, which belongs to Pluralsight, provides teaching paths in HTML/CSS, JavaScript, Ruby, iOS and Git. The classes include video presentations followed by coding challenges. The site also features screencasts that offer steps to apply the skills taught in the courses. Some of the classes on Code School are free, but studying an entire path requires a paid account. Subscriptions cost $29/month.

Dash is a free coding class offered by General Assembly, a coding bootcamp in Washington, DC. The class introduces students to the basics of HTML, CSS and JavaScript by guiding them through five projects.

Frontend Masters primarily targets intermediate to advanced front end developers. Unlike many other coding schools, the courses are more similar to conference talks than to typical classroom instruction. The courses feature industry leaders like Douglas Crockford (author of “JavaScript the Good Parts”) and Misko Hevery (creator of AngularJS). Monthly subscriptions are available for $39, yearly subscriptions cost $390.

This free guide explains how to address common jQuery problems. It is based on Rebecca Murphey’s book of the same title. The guide provides introductions to JavaScript and jQuery before going into scenarios like events and event delegation. The site includes an online editor to code along.

Khan Academy is a free online college that offers classes on a variety of subjects, including six courses in computer programming, covering JavaScript, HTML/CSS and SQL. The classes include coding challenges and quizzes.

The site offers free text-based courses for beginning and advanced HTML and CSS. The course is based on Shaye Howe’s book by the same name and guides learners through the process of creating a complete website. It also contains links to resources and to downloadable code samples.

Lynda offer subscription-based video courses for technical, creative and business skills. The site’s content for developers includes more than 400 courses featuring more than 17,000 video tutorials. The site includes courses for beginners and more advanced developers. Basic subscriptions are available for $25/month or $240/year and include access to all content and learning tools. Premium access for $35/month also provides downloadable practice files. Users who choose the $360/year premium plan get access to offline viewing. Lynda offers a 10-day free trial.

Plural sight offers more than 3,700 courses for developers and designers. The video courses may be taken individually or as part of a learning path. They include exercise files to practice the skills taught. The cost for individuals is $29/month or $299/year for the standard plan and $49/month or $499/year for the extended plan, which offers mobile apps, offline viewing, downloadable exercise files and pre- and post-course assessments. The site offers a 10-day free trial as well as some free programming courses for kids.

Pluralsight.png

Sitepoint, formerly learnable.com, is the publisher of e-books and articles, but also offers video courses and written tutorials. Classes cover topics like HTML&CSS, JavaScript, PHP, Ruby, Mobile, Design & UX and WordPress. Some of the access is free, but paying members get access to extra material, including  more than 5,000 video tutorials for all paid plans and more than 70 e-books for annual subscribers. Premium access is available for $15/month or $9/month for annual plans. 

The site offers free video walkthroughs for specific tasks such as creating a Matrix-style rain animation using HTML5 canvas and JavaScript or creating 3D hover effects for thumbnails and images.

Thinkster primarily targets Angular developers. A free account gives users access to the text of all its courses and progress tracking. A pro account for $19/month includes video courses, source code and an invitation to the site’s Slack channel.

Treehouse offers a variety of different paths, including Front End Web Development, Full-Stack Javascript, and Web Design. The courses are taught by video and include quizzes and coding challenges. Treehouse, which requires a paid subscription after a free introductory period, also has an active forum for members. The basic plan costs $25/month. The pro plan, which includes access to bonus content and conference videos, costs $49/month or $490/year. Treehouse offers a 14-day free trial.

Tuts Plus offers free text-based tutorials and priced video courses for developers, designers as well as creatives and business people. The video courses include more than 600 courses for Web design and more than 600 courses for programming. Courses are available to subscribers or may by purchased individually (prices vary). Subscriptions range from $15/month for the basic plan to $360/year for the pro plan, which includes access to 180 e-books and other subscriber benefits.

Although Udacity offers some free courses, the site’s main focus is on providing courses that lead to nanodegrees. Nanodegrees are certifications that are expected to take between four and 12 months to complete. Current paths include Front-End Web Development, Full-Stack Development, Intro to Programming and Data Analyst. The courses are offered in partnership with tech companies like AT&T and Google. The cost is $200 per month.

 

Test your skills


Online code editors

Online code editors allow users to write HTML, CSS and JavaScript and post the code (or code snippets) online. They are valuable tools for experimenting, testing code, learning and debugging. All the editors listed below are free, but some offer pro accounts with enhanced features.

Codepen supports preprocessors, libraries, frameworks and external resources. Pens are public by default. Codepen also has a blog and iTunes radio show and offers cross-browser testing through a third-party site for saved pens. A pro account, which is available for $9/month or $75/year, offers additional features, including private pens, asset hosting and collaboration. 

JSBin features include using preprocessors, libraries, frameworks and external resources. Bins are public by default. JSBin includes a console by default without using external resources. A pro account, which is available for $19/month or $151/year, includes private bins, using the site in sandbox mode (without saving code to a bin), Dropbox integration and asset hosting. Collaborative mode is currently in alpha testing.

JSFiddle supports preprocessors, libraries, frameworks and external resources. Fiddles are private by default but can be shared with the public. JSFiddle also includes Ajax simulation. The site has a collaboration tool that allows users to work together and chat. 

Liveweave supports preprocessors, libraries and frameworks. Liveweave tools include a color and palette lab and a lorem ipsum generator. Weaves may be downloaded as .zip files. The site also features a CSS code generator that automatically creates shadows, transforms, columns, gradients, borders and backgrounds.

Thimble is a basic code editor for HTML, CSS and JavaScript. The site includes projects that users may “remix” or use for teaching various skills. Each project includes a tutorial that provides ideas on how to use the code.

Repl.it is a code editor and terminal emulator that supports more than 15 languages, including JavaScript, Python3, Ruby and NodeJS. The site provides special accounts for teachers and students that include progress tracking.

Coding Challenges

The following sites provide coding challenges that programmers can work on to enhance their skills or compete with others.The sites offer challenges in various programming languages.

Coderbyte is a free site that offers easy, medium and hard challenges in JavaScript, Python, Ruby, PHP, Java and C++ . The site also offers challenges for members only. To become a member, an annual donation of $10 is suggested.

Programmers have to prove their skills to be able to sign up for the site. Members create challenges, called kata, for other coders. The site also offers a message board where programmers can compare solutions and discuss the challenges. Members are ranked based on the difficulty of the challenges completed and are then paired with new challenges according to their level. 

DevWars pits teams of three developers against each other. The goal is to build the best possible static website in one hour. One team member works on the HTML, another works on the CSS, while the third works on the JavaScript. The challenges are streamed on YouTube, and viewers vote on the winner.

After creating an account, programmers choose a domain (e.g. mathematics, artificial intelligence or functional programming) to select a challenge. HackerRank includes a discussion board for each challenge and an overall leaderboard. Some of the challenges are sponsored by potential employers looking for talent.

Stay informed

Whether you want to keep up with the latest trends or like to read about Web development and design for fun, the following sites have you covered.

A List Apart publishes two in-depth articles every two weeks in addition to columns and blog posts. The main articles are often dealing with cutting-edge topics in Web development like Ethan Marcotte’s 2010 article “Responsive Web Design.” The website is associated with the book series “A Book Apart” and the “An Event Apart” conferences.

Move the Web Forward is a community-created directory of resources. The resources are sorted by skill level into a “Level Up” section for beginners, a “Dig Deep” section for intermediate and a “Virtuoso” section for advanced developers. The site focuses heavily on information about browser development and specifications.

The Germany-based Smashing Magazine covers coding, design, WordPress, mobile and UX topics. The site is updated almost daily with new content. Smashing has also published a number of books and e-books and is hosting developer conferences.

Webdesigner News serves as an aggregate for news articles and blog post concerning design and development. Readers may subscribe to the site’s email newsletter, which delivers the latest stories daily to the inbox. 


Sites for inspiration

If you’re looking for examples of what can be done with HTML, CSS and JavaScript, the following sites offer inspiration to take your coding to the next level.

Codepen was featured as an online code editor above, but it also provides searchable code examples for inspiration.

CSS Zen Garden features more than 200 CSS-generated designs of the same HTML. Designers and developers are invited to submit their code to the site. The site offers the HTML and original CSS files as downloads and includes a short CSS resource guide and case studies for some of the designs.