Working on the web means you can never let your skill set stand still. While the fundamental tools and languages that have been around for years will serve you well, newer technologies, libraries and frameworks are turning up all the time, and while you can't possibly keep track of all of them, it pays to be up to speed with the most popular additions to the web toolkit.
- The hottest web design trends of 2019 (opens in new tab)
01. Create a WebGL 3D landing page
A WebGL 3D landing page is an excellent way to grab people's attention as soon as they hit your site. With WebGL you can create amazing 3D content in the browser without the need for plugins, and your site will work on all modern browsers as well as mobile devices and tablets. This WebGL 3D tutorial (opens in new tab) demonstrates how to make a dramatic landing page featuring a 3D object that moves in response to the mouse, plus colourful particle effects.
02. Get started with WebVR
03. React crash course
04. How to create an app with Vue.js
05. How to quickly add microinteractions to your website
Microinteractions are a brilliant way to add visual interest to your site as well as improving accessibility. They're small, subtle animations that you can add to elements to provide visual feedback when they're clicked on or moused over. And while adding animation to your site might feel like a lot of effort – especially if you know nothing about animation – here's an easy way to do it (opens in new tab) using Micron.js.
06. Flexbox step by step
For creating responsive sites that look good in every browser, Flexbox is the tool you need to know about. It enables you to create magazine-style layouts without the limitations of floats or, lest we forget, tables, and gives you complete control over the alignment, direction, order and size of your page elements. This step by step Flexbox tutorial (opens in new tab) will take you through everything you need to know.
07. Create animated CSS art
Creating CSS imagery in the browser isn't as easy as, say, simply drawing it in Photoshop; you're basically drawing vector artwork using CSS code, and it can take a fair bit of head-scratching and experimentation before you get it right. The benefit of creating CSS shapes, though, is that they're lightweight and, once you've figured out what you're doing, easy to animate. This CSS animation tutorial (opens in new tab) will get you started.
08. How to add animation to SVG with CSS
Here's another way to create great-looking web animations. Using CSS you can control individual paths within an SVG image to create assorted effects, and if you know the basics you can use these techniques to turn ordinary icons into something more impressive. It's a good way to implement microinteractions on your site, and the possibilities are endless; follow this guide to adding animation to SVG with CSS (opens in new tab) to find out more.
09. HTML Canvas tutorial
A third way to generate visuals in the browser is by using the HTML canvas element. With it you can draw graphics and text, create colour gradients and animate everything, as well as adding interactive elements. It's suitable for everything from basic graphics through to HTML games, and this tutorial from W3Schools (opens in new tab) covers all these applications.
10. How to start with variable fonts on the web
The biggest development in web typography since web fonts, variable fonts are fonts that can behave like multiple fonts, giving you all the weights and styles you need in a single, relatively small file that you can control through style sheets. This online primer (opens in new tab) will explain all the things you need to know in order to start making the most out of them. You can also read more about variable fonts here (opens in new tab).
11. Create a PWA from scratch
If you want to create lightweight sites that'll work on every device and don't even need a internet connection to function, Progressive Web Apps are the way to go. This quick guide to PWAs (opens in new tab) by Yassine Benabbas will walk you through the four main steps you need to know about – preparing an app shell, adding a manifest, implementing a service worker and caching – in order to build a PWA from scratch.
12. Build an AI-powered chatbot
Artificial intelligence is a vast and complex subject, but it's surprisingly easy to implement it in ways that can make your life a lot easier. In this AI chatbot tutorial (opens in new tab) you'll learn how use AI to build a natural-language chatbot that'll help users interact with your site. Powered by Google's Dialogflow toolset, it uses machine learning and speech-to-text, and can be customised to your needs and added to your site in the form of a widget.