The Best Free Coding Resources of 2016

12/5/2016

As the year comes to an end, I've rounded up my favourite coding resources from 2016. These ebooks, tutorials and site don't just keep me on my toes as "the freelance writer who gets tech" - they showcase some pretty cool code too.

They'll also help you expand your existing web skills and introduce you to some new tools and technology - all without you spending a penny. From JavaScript to CSS, how the internet works and typography, here are the best coding bits from 2016:

The Basics

Let's ease you in gently to my favourite coding resources with the 100 most hearted CodePens of 2015. CodePen is filled with common coding challenges and this diverse top 100 from last year are an addictive, but brilliant, way to learn to code.

How does the internet work?

t's a fundamental question that most web experts may have trouble answering. So, take a look at this article, which is crammed with great resources to understand the underlying technology behind the internet: Breaking It Down To The Bits: How The Internet, DNS, And HTTPS Work.

CSS, JavaScript and Day-to-Day Code

Whichever syntax you prefer, there are plenty of great basic coding resources out there. If you're a HTML/CSS coder and aren't quite comfortable with writing JavaScript, then the Markapp list of libraries that get by without the need to write a single line of JS from Lea Verou is a vital resource.

It includes 24 libraries to help you design responsive UI elements, build flexible widgets and validate your forms. And it's growing all of the time as you can add your own resources via GitHub.

If you do dabble in JavaScript this React.js tutorial on Plotly Academy will help you get started. In only six chapters the creator of React Boilerplate, Max Stoiber, guides helps you build your very first real-world app.

The @supports rule in CSS, also known as feature queries, is a powerful tool that lets you check if a particular CSS property or value is supported by a browser or not. Jen Simmons shares her tips about feature queries in a comprehensive article over on the Mozilla Hacks blog.

Mark Otto also shares some valuable tips on building friendly and accessible HTML form controls, without any JavaScript and just a splash of CSS to get things working.

It's a great resource filled with useful snippets and tips. For example, he wraps radios and checkboxes in a <label> to increase the hit area for checking the control, which also triggers the state of the <input> without requiring JavaScript.

Michael Scharnagl decided to tackle the task of building a comment form differently and shared his Guide To Progressively Enhancing A Comment Form this year. The basic version is an HTML form that will work in every browser.

Matthew Ström explained how to take the pain out of large data tables with a range of tips and tricks to get things right using typography and alignment, for example.

And, if Sublime is your text editor of choice, then the Sublime Tutor is a great interactive keyboard shortcut tutorial for Sublime Text 3. It gets you learning by doing, with exercises and shortcuts to familiarise you with the editor's features. The tutorial is divided into six modules and 39 chapters that cover 70 features and shortcuts.

The HTTP/2 protocol was also released this year and, if you want to find out more about it, check out this guide: Getting Ready For HTTP/2: A Guide For Web Designers And Developers.

Wordpress

There were plenty of resources available this year to develop clean, smart and fast websites with WordPress. Here are a handful of my favorites from Smashing magazine:

Animations

This year, designers sprinkled more animations and transitions across both their mobile apps and websites. Material Design contributed in this space and their piece Can You Code This Concept?, which gives an interesting insight into five UI concepts and their CodePen implementation. Check out Volume 2 as well.

You don't have to learn news tools or languages to bring motion to your design though, as this CSS Animations Pocket Guide from Val Head explains. The 65-page book gives you a solid foundation to start experimenting and creating animations with good ol’ CSS. Val also shared her insights into how fast UI animations should be.

If you're more interested in integrating animations into your work from a UX perspective, check out this article: How To Integrate Motion Design In The UX Workflow.

If you prefer to work in Photoshop, this tutorial on Creating Advanced Animations In Photoshop shows how this concept has progressed in the last few years. From a revamped Timeline panel, the introduction of video layers and keyframe animation, Photoshop definitely upped its games this year. And these Free Photoshop Tools For Web Designers are a great resource too.

Typefaces and Typography

If you want to understand the basics of typography, check out this guide: Tools And Resources For A More Meaningful Web Typography

I'd also recommend the Type Terms typography cheatsheet if you struggle to differentiate your “counter” from your “terminal”. It will help you understand the basics of typography jargon and uses small, animated graphics to accompany each term's description, which is kind of neat.

A great eBook on this topic was also released by Tim Brown this year. It was originally published in 2013 but, after Five Simple Steps closed their doors, the “Pocket Guide To Combining Typefaces” lived on as a free download.

The physical booklet is a staple across many college curricula and is regularly cited in conference talks by leading designers. Covering the basics of type and typography, the eBook gives you strategies for selecting typefaces and explains why some combinations do work, while others do not.

The Colour and the Shape

Nathan Curtis, founder of UX firm EightShapes, shared his tips to set up two of the key components that belong in every design system: colour and buttons.

It's an interesting read and Nathan also wrote up 16 practical takeaways to help you produce harmonious and engaging palettes that integrate accessibility considerations into the design process early on. His tips on creating a system of buttons also reminds us that the small details count when you're trying to create a user-friendly design.

And, if you're just starting out with colours, this guide introduces you to the basic concepts: A Simple Web Developer’s Guide To Colour.

The eCommerce Business

If you're designing an eCommerce site, this guide tells you how to convert browsers to buyers: How To Improve Conversions By Localising An App. Or, if you're launching a new product, this article How To Launch Anything gives some no-nonsense advice.

Also, did you know that you can build entire eCommerce checkouts in an email without JavaScript and just some CSS trickery? Even though media queries support is limited, you can still use the Fab Four technique by Rémi Parmentier to make it work.

Best of the Rest

If that hasn't quenched your thirst for knowledge, here are a few other top coding resources from this year. You'll notice a certain bias towards Smashing Magazine - it's definitely my site of choice to keep up to date with the latest coding resources - happy learning!

CODING

DESIGN

All images courtesy of Smashing Magazine.

0 Comments

Blog