Bi-Weekly Frontend News

Collective #47

Inspirational Website of the Week


Libertine Libertine is a very minimal and clean online store with a super-easy navigation. It makes shopping a real breeze; only the necessary information is shown.

Get inspired

Implementing Off-Canvas Navigation For A Responsive Website


An in-depth tutorial by David Bushell on how to create a off-canvas navigation for a responsive website.

Check it out

An Advanced Guide to HTML & CSS


Shay Howe started to create a very useful and practical guide to advanced HTML and CSS covering various important topic. You also might want to check out A Beginner's Guide to HTML & CSS.

Check it out

Browser Awareness Day


Browser Awareness Day is a social campaign by teamgeek that aims to educate people about the importance of updated browsers for techies and non-techies alike. They also offer a JS snippet that you can use to add to your site for alerting users if they have an outdated browser.

Check it out

Live Tools


A brilliant collection of generators that allow you to easily create your own UI elements with little coding knowledge. You can also download your creations for use in your websites and online applications.

Check it out

The Accessibility Project


The Accessibility Project is a community-driven effort to make web accessibility easier. You will find helpful articles, a web accessibility checklist and some great resources that will help you maximize the accessibility of a website.

Check it out

The jQuery Plugin Registry


The new jQuery plugin site that will make finding, downloading and registering plugins easier and better.

Check it out

xy.css – Responsive Grid Design


xy.css is a lightweight CSS template for building responsive liquid-grid designs. It brings together the best CSS techniques from around the Web and integrates them into a single, powerful style sheet template.

Check it out

The Absolute Beginner's Guide to Sass


If you'd like to start out with Sass, you'll definitely find this introduction by Andrew Chalkley helpful.

Read it

Testing jQuery Plugins Cross-Version With Grunt


In the light of the recent news that jQuery will be dropping support for IE8 and below in the new version, Mark Dalgleish shows how to test the cross-version capabilities of a jQuery plugin with Grunt.

Read it

HTML5 Drag and Drop Avatar Changer with Resizing and Cropping


Learn how to create a drag and drop avatar uploader and resizer in this in-depth tutorial by Chris Coyier.

Read it

What No One Told You About Z-Index


Philip Walton explains how the z-index is often not fully understood and gives some examples that will teach you some things that you probably did not know.

Read it

Source Maps 101


Learn about source maps in this introduction by Sayanee Basu. In the tutorial you'll take a very simple bit of JavaScript and SASS code, run them through various compilers, and then view the original files in the browser with the help of source maps.

Read it

Voice Driven Web Apps: Introduction to the Web Speech API


Glen Shires shows us how the new JavaScript Web Speech API can be used to easily add speech recognition to a website.

Read it

Twitter Button Concept


Bennett Feely shares his pen of the beautiful Twitter button concept by Erik Deiner.

Check it out

Using Unprefixed CSS3 Gradients in Modern Browsers


Jennifer Yu from the Internet Explorer team gives us an overview of the changes for the unprefixed CSS3 gradients syntax in this WebAppers article.

Read it

Free Font: V.GER Grotesque


A beautiful font that came out of a students project.

Get it

Sharp Pixel-Icons


For his debut, Natko Hasić shares these tiny pixel gems with us. The set contains 20 sharp pixel icons.

Get it



Marco Lago created flowtime.js, an HTML5/CSS3/JS presentation framework for easily building HTML presentations.

Check it out

Empty States


For his brilliant article "Designing for the Empty States", Craig Dennis created this collection of empty states in apps. You can submit your screenshots and get inspired for how to design the empty states of your app.

Check it out



Maxmertkit is a CSS framework that is based on a widget-modifier coding style. Combining widgets with a status, size and modifier you can get your ready-to-use code.

Check it out



voxel.js is a collection of projects that make it easy to create 3D voxel games like Minecraft in the browser based on WebGL. It is written by James Halliday and Max Odgen and you can contribute on GitHub.

Check it out

Mini Keyboard Game


Tastatour is a very minimal but fun keyboard game to train your reaction with some rad sound. It was created by Jan Oelze and Dominik Johann.

Check it out

Front-end performance for web designers and front-end developers

An excellent in-depth article on performance of websites and apps by Harry Roberts that aims to give first-hand performance techniques that will help you understand front-end performance and help you make your apps faster.

Read it

Flat UI is not the only way forward

Max Rudberg writes about the latest discussion around the "flat look" and why he believes that it is just a stylistic choice and not the only way to design apps in the future.

Read it