Tags: tutorial



React Isomorphic Demo

It is possible to use React without relying completely on client-side JavaScript to render all your content—though it’s certainly not the default way most tutorials teach React. This ongoing tutorial aims to redress that imbalance.

Besides the main benefit of server rendering giving faster page loads, it also enables large amounts of the site to run without JavaScript. There are many reasons why you would want this, but my personal reasons are that it allows you to completely drop support JavaScript in older browsers, but still have the site function.

Web Design in 4 minutes

This is a wonderful way of progressively explaining the layered approach to building for the web that Charlotte was teaching in her Codebar workshop.

MarkSheet: a free HTML and CSS tutorial - Free tutorial to learn HTML and CSS

This looks like a great resource for beginners looking to learn HTML and CSS.

Intro to Flexbox

The slides from Arelia’s flexbox talk.

Universal React ◆ 24 ways

I have no hands-on experience with React, but this tutorial by Jack Franklin looks like a great place to start. Before the tutorial begins he succinctly and clearly outlines the perfect architecture for building on the web today:

  • The user visits www.yoursite.com and the server executes your JavaScript to generate the HTML it needs to render the page.
  • In the background, the client-side JavaScript is executed and takes over the duty of rendering the page.
  • The next time a user clicks, rather than being sent to the server, the client-side app is in control.
  • If the user doesn’t have JavaScript enabled, each click on a link goes to the server and they get the server-rendered content again.


Y’know, I had a chance to chat briefly with Jack at the Edge conference in London and I congratulated him on the launch of a Go Cardless site that used exactly this technique. He told me that the decision to flip the switch and make it act as a single page app came right at the end of the project. I think that points to a crucial mindset that’s reiterated here:

Now we’ll build the React application entirely on the server, before adding the client-side JavaScript right at the end.

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

flexbox in 5 minutes

A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.


A collection of device APIs—which, despite the title, are all JavaScript, not HTML. Each API in the list has a link to its spec, an explanatory article, a demo, and the current level of support.

How to secure your site in an afternoon - Josh Emerson

Josh walks through the process he took to enabling SSL on his site (with particular attention to securing assets on CloudFront).

How To Use Huffduffer (get audio from internet onto phone) - YouTube

Chase Reeves likes Huffduffer so much, he made a video about it.

Learn CSS layout

A handy step-by-step guide to all the ways you can use CSS for layout.

Front-end performance for web designers and front-end developers by Harry Roberts

A really good introduction to front-end performance techniques. Most of this was already on my radar, but I still picked up a handy tip or two (particularly about DNS prefetching).

At this stage it should go without saying that you should be keeping up with this kind of thing: performance is really, really, really important.

Build a smart mobile navigation without hacks | Tutorial | .net magazine

A really great markup and CSS pattern for “content first, navigation second” from Aaron.

Creating a Mobile-First Responsive Web Design - HTML5 Rocks

A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.

Learn You a Flexbox for Great Good! | The Haystack.

Stephen gives an excellent run-down of flexbox and how you can use it today.


A really nice little primer on getting started with HTML5.

Let the Web move you-CSS3 Animations and Transitions | Web Directions

John tells you everything you need to know about CSS animations and transitions, and then he gives you a tool to help you get started.

Everything I’ve learned about podcasting over the last four years | fortuitous

A very handy “how to” for recording your own podcast.

Accessibility video tutorial - learn Accessibility // Think Vitamin Membership

Think Vitamin have been their accessibility material available for free.

HTML5Rocks - Home

A new HTML5 resource from Paul Irish and other Googlers.