Tags: tutorial

52

sparkline

Tuesday, July 30th, 2019

Creating my logo animation - cassie.codes

What a wonderfully in-depth and clear tutorial from Cassie on how she created the animation for her nifty SVG logo!

Also: Cassie is on the indie web now, writing on her own website—yay!

Monday, June 17th, 2019

A Complete Beginner’s Guide to React by Ali Spittel

This really is a most excellent introduction to React. Complete with cheat sheet!

Saturday, November 17th, 2018

Tutorial Markdown

Tim recently gave an excellent talk at FFConf. He mentioned this variation of Markdown, specifically for writing coding tutorials that update as you scroll. You can see it in action on his Generative Artistry site.

Kind of reminds of some of Bret Viktor’s work.

Thursday, July 19th, 2018

React is just JavaScript – YLD Engineering Blog – Medium

I like that this introduction to React doesn’t assume any knowledge (or desire) to create an entire app from scratch through command line invocations. Instead, here’s a clear explanation of how you can add React—which is, after all, some JavaScript—to an existing project. Oh, and you can write your CSS in CSS.

(Caveat: because everything’s happening in script elements in the browser, what’s outlined here will only do client-side rendering.)

Thursday, June 21st, 2018

Generative Artistry

Tutorials for recreating classics of generative art with JavaScript and canvas.

Monday, February 26th, 2018

Reliable Experiences - PWA Roadshow - YouTube

A good hands-on introduction to service workers from Mariko.

Tuesday, October 3rd, 2017

CSS Grid PlayGround | Mozilla

A ten-part tutorial on CSS Grid from Mozilla.

Monday, September 25th, 2017

cassidoo/HTML-CSS-Tutorial: Tutorial for HTML and CSS

Here’s a great free curriculum for teaching HTML and CSS.

Sunday, July 2nd, 2017

Starting a React-Powered Comment Form | CSS-Tricks

This is a really great screencast on getting started with React. I think it works well for a few reasons:

  • Sarah and Chris aren’t necessarily experts yet in React—that’s good; it means they know from experience what “gotchas” people will encounter.
  • They use a practical use-case (a comment form) that’s suited to the technology.
  • By doing it all in CodePen, they avoid the disheartening slog of installation and build tools—compare it to this introduction to React.
  • They make mistakes. There’s so much to be learned from people sharing “Oh, I thought it would work like that, but it actually works like this.”

There’s a little bit of “here’s one I prepared earlier” but, on the whole, it’s a great step-by-step approach, and one I’ll be returning to if and when I dip my toes into React.

Tuesday, April 18th, 2017

Progressive Web Apps - ILT  |  Web  |  Google Developers

A step-by-step guide to building progressive web apps. It covers promises, service workers, fetch, and cache, but seeing as it’s from Google, it also pushes the app-shell model.

This is a handy resource but I strongly disagree with some of the advice in the section on architectures (the same bit that gets all swoonsome for app shells):

Start by forgetting everything you know about conventional web design, and instead imagine designing a native app.

Avoid overly “web-like” design.

What a horribly limiting vision for the web! After all that talk about being progressive and responsive, we’re told to pretend we’re imitating native apps on one device type.

What’s really disgusting is the way that the Chrome team are withholding the “add to home screen” prompt from anyone who dares to make progressive web apps that are actually, y’know …webby.

Tuesday, March 14th, 2017

terminal & command line video training

An online training course that will banish all fear of the command line, expertly delivered by the one and only Remy Sharp.

For designers, new developers, UX, UI, product owners and anyone who’s been asked to “just open the terminal”.

Take advantage of the special launch price—there are some serious price reductions there.

Friday, March 10th, 2017

153 ☞ A Crash Course in React

This is a nice understandable explanation of the basics of React.

There’s a real skill in explaining something so clearly that even n00bs like me can understand it.

Wednesday, February 15th, 2017

CSS Beating Heart Tutorial. – Cassie Codes

A sweet CSS tutorial that Cassie put together for the Valentine’s Day Codebar.

Sunday, February 12th, 2017

Interneting Is Hard | Web Development Tutorials For Complete Beginners

A nice straightforward introduction to web development for anyone starting from scratch.

Saturday, August 6th, 2016

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.

Thursday, July 28th, 2016

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.

Wednesday, June 29th, 2016

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.

Monday, June 6th, 2016

Intro to Flexbox

The slides from Arelia’s flexbox talk.

Saturday, December 5th, 2015

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.

YES!!!

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.

Thursday, April 16th, 2015

100 words 025

I often get asked what resources I’d recommend for someone totally new to making websites. There are surprisingly few tutorials out there aimed at the complete beginner. There’s Jon Duckett’s excellent—and beautiful—book. There’s the Codebar curriculum (which I keep meaning to edit and update; it’s all on Github).

Now there’s a new resource by Damian Wielgosik called How to Code in HTML5 and CSS3. Personally, I would drop the “5” and the “3”, but that’s a minor quibble; this is a great book. It manages to introduce concepts in a logical, understandable way.

And it’s free.