Web development
Understanding the basics of code is an essential skill for a UX designer.
Articles
HTML: The Inaccessible Parts
– 28 February 2020
I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up.” In a lot places this is very true and by just using a suitable HTML element instead of a generic div or span we can have a big Accessibility impact.
Truly fluid typography
Design + Sketch
– 25 October 2019
You are probably used to setting typography manually within breakpoints, which usually leads to a somewhat bumpy result. Fluid typography using viewport width (“vw”) automatically adjusts the font size to the width of the screen.
A Complete Guide to Flexbox
CSS Tricks
– 3 September 2019
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
Understanding CSS grid
Design + Sketch
– 26 August 2019
CSS Grid is a new way to create two-dimensional layouts on the web. With just a few lines of CSS, you can create a grid that was hardly possible before without JavaScript. No plugin or complicated installs, no heavy additional files, no more design limitations.
Tools
Hugo
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
Flywheel
Whatever your work environment, Flywheel's powerful WordPress platform removes all the hassles of hosting, streamlines your processes, and lets you get back to doing your best work.
Netlify
Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more.
Storybook
An open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Catalog
Combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.
Fractal
Build. Document. Integrate. Powerful component libraries & styleguides that fit the way you work.
Lottie
An iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
Keyframes
Keyframes helps you write better CSS. Dead simple visual tools to help you generate CSS for your projects.
HTML Sketchapp
HTML Sketchapp turns HTML nodes into Sketch layers or symbols. Additionally, it allows to export shared text styles and document colors.
Courses
Dynamic user experience: design and usability
This course will equip you with an understanding of how to use Javascript to turn a static webpage into a dynamic one.