Awesome

Web Resources

Overview of some resources for web devs that could be helpful. I used most of them, some are just added for later reference, meaning the following oscillates somewhere between an "Awesome List" and a dumping ground (just a joke).

Your mileage may vary.

Basics

• Can I Use <feature>…? – First place to look.
• MDN docs

CMS and Static Site Generators

• Kirby – Fast and minimal (database-less!) CMS
• Perch
• TextPattern
• ProcessWire
• Hugo – A static site generator
• Bottle – A micro web-framework for Python
• Flask – dito

Frameworks

Hey! I want a fullblown framework!

Sure buddy! I've got you covered. Have a look at these:

• Foundation – Might be a good starting point
• HTML5 Bones is on the complete different end of the scale, it has the bare minimum
• Hello, CSS! – a simple "CSS template which styles most elements to neutral and aesthetically pleasing defaults" according to its creator, Martin Tournoij
• Yes, there is still the HTML5 Boilerplate, but I think that one is more interesting for its other features, like a .htaccess file, than actually consuming it whole

The most used full blown CSS frameworks currently seem to be

• Bulma and
• Tailwind

There are however some classless, micro-frameworks out there:

• Dropin Minimal CSS
• lit, which is truly micro Similiar to those: YAMB CSS (shameless plug). It has:
• dark & light theme
• even print support! It's a great starting point, so check it out.

CSS

• CSS Normalize – Because to normalize is better than to reset
• Favicon Cheat Sheet
• … and a nice tool for generating those
• Smooth shadow generator (Box shadows)
• More smooth shadows
• CSS clip-path maker
• Fancy-Border-Radius
• URL encoder for svg
• more tiny helpers …
• Browser (compatibility) Hacks

Tools

• Printable mockups – for wireframes and therelike
• noisePNG – A noise generator (as data image available)
• Awesome Design Tools – A REALLY big list of a whole lot of tools you might want to use

Typography

Of course you don't want to rely on ugly fonts like Arial or Times New Roman. There is the well known Google Fonts project. However you should host the fonts you use yourself if possible. To help with this task go to the Google webfonts helper.

Animation

• Sequence.js – CSS animation framework for creating sliders, presentations, banners, and other step-based applications
• Lottie let's you parse AfterEffects animations on the web
• SVGator – SVG animation without coding
• Spirit (MacOS only tool)
• Motion – Free and simple animation editor for SVGs

Icons

• Simple Icons – Brand logos as monochrome SVGs
• Material Design Icons – community lead, one of the most versatile libraries out there
• Material OG – Original Google Material icons in 5 styles
• Ikonate – Highly customizable
• icons8 – Font Awesome competitor, constructed with lines
• Font Awesome – Might be the most known library
• Feather – 200+ extra minimal outline icons
• The Noun Project – "Icons for everything", different styles, mixed bag in terms of quality
• Flaticon – Smaller icon sets, but more variety and more playful
• Streamline – Over 30k icons in three weights
• Nucleo – $99 set of ~30k icons in 3 styles (even colored)
• System UIcons
• Bootstrap Icons – official icon library for Bootstrap

Doing your own?

Illustrations

• Ouch! – Different styles and all free

Color

Color is an important part of every design, so you should take good care of it!

• colorbox.io – Makes it easy to get good looking colors that relate to each other.
• Color Hunt – Ready to use color palettes
• Coolers – Slick color palette generator
• Picular – Google but for colors

Other

• Video.js – HTML5 web video player

Accessibility

• Contrast Ratio (according to WCAG 2.0)
• Color Review – Make your colors accessible!

Fancy stuff

• Doodle CSS – A web component for drawing patterns with CSS
• pattern.css – CSS only library to fill your empty background with beautiful patterns.
• ZeroDivs – Make shapes purely in CSS

Infos

• CSS Stats – Simple Overview.
• FontDrop – See quickly what's in a font file.
• CSS cursors – Because that's handy.

Learning

• Things I Wish I’d Known About CSS
• Laws of UX

How Tos

• How to design a proper landing page

Layout

• No nonsense layouts – good place to start
• Every Layout explained
• CSS grid cheat sheet – A visual guide

Other stuff

• Things that are possible in a browser in 2020 – like an "Awesome"-list of all the possibilites
• CSS for internationalisation
• CSSplus – Collection of CSS Reprocessor plugins that dynamically update CSS variables
• Stage.js – 2D JavaScript library for cross-platform HTML5 game development
• Gov.uk's Design System is a really well thought frontend 'framework', especially in sense of proper accessibility, plus it's open source and you can use it in your project

Meta Tags

• Gist with most (all?) used meta tags
• Open Graph meta tags

Essays and therelike

• Paul Coppletone on Design