Memory Game ala Super Mario mit JavaScript // Tutorial

Memory Game ala Super Mario mit JavaScript // Tutorial

In dem Tutorial „How to Create a Memory Game (ala Super Mario 3) with Plain JavaScript“ erklärt Tania Rascia wie man ein einfaches Memory Spiel mit JavaScript und Basis-Wissen von HTML und CSS realisiert. Hier die fertige Demo. Kann man mit individuellen Grafiken sicherlich auch auf der eigenen Website als Schmankerl einbinden.  

Design Systems Handbook

Wahnsinn, was Invision hier mit Hilfe von Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, und Roy Stanfield zusammengetragen hat. Das „Design Systems Handbook“ beschreibt und veranschaulicht im Detail wirklich alles was man zum Thema Design Systeme / Style Guides / Frontend Boilerplates wissen muss. Die Kapitel sind dabei unterteilt in folgende Themen: Introducing Design Systems, Designing your design system, Building your design system, Putting your design system into practice, Expanding your design system und The future of design systems. Neben detaillierten Beschreibungen und Beispielen, gibt es außerdem noch zahlreiche Podcasts, Videos und weiterführende Links zum Thema. A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. Learn how you can create your design system and help your team improve product quality while reducing design debt.

Mashup Template // kostenlose HTML5 Website Templates

Mit Mashup Template bietet das Orson.io Team zur Zeit 7 komplett kostenlose und anpassbare HTML5 / CSS3 Website Templates an. Neben HTML gibt’s obendrauf bei Bedarf noch eine Sketch oder npm Version. Die minimalistischen und responsiven Vorlagen sollten ideal sein, um vor allem Landing Pages, Microsites oder Portfolios aufzubauen. Mashup template is a collection of 100% free and customizable HTML5/CSS3 templates based on ready-to-use blocks and a light version of the Bootstrap Framework 3.3.7. Mashup Template also provides a full automated development workflow based on Webpack and Handlebars. with live reload to customise your CSS with the SCSS framework. Mashup Template is a side project made by our team at Orson.io, creators of a website builder specialised in SEO.

Moving Letters // Animated Text with JavaScript and anime.js

Moving Letters ist ein schönes, kleines Side-Projekt von Tobias Ahlin: Animierte Text Effekte via JavaScript und anime.js, die sich vor allem für Headlines in diversen Projekten eignen. Den Sourcecode gibt’s kostenlos unter MIT Lizenz. If you’re into animation, I made a collection of open source text effects animated with JavaScript & anime.js https://t.co/wsMTHwSswx ❤️ pic.twitter.com/rTN3SFddtH — Tobias Ahlin (@tobiasahlin) October 3, 2017

OAK // Kostenloses HTML Portfolio Template

OAK ist ein kostenloses HTML Template von EliteFingers, welches sich vor allem für minimalistische Portfolio Websites eignet. Live-Demo: oak.elitefingers.com/html/ Direktdownload: freebiesbug.com/download/OAK-HTML-Template.zip Premium WordPress Version: themeforest.net/item/oak-creative-multipurpose-portfolio-wordpress-theme/15879027 OAK is built on the top of Bootstrap 3 and comes with 15 pre-made pages a bunch of amazing features: it makes use of modern jQuery and CSS3 techniques to create superb eye-catching animations and make your visitors love you and your work. It is simple, modern and responsive. » via Freebiesbug

Trendy CSS Text Shadows

Praktische Website, wenn man gerade auf der Suche nach einer stylishen Headline für’s nächste Projekt ist: mixfont.com/shadows Looking for inspiration to make your headlines stand out? Look no further! This free collection of beautiful long text shadows includes the fonts, colors, and CSS code to render it for your own site.

Animista // CSS Animations on demand

Mit dem Browser-Tool Animista kann man mühelos CSS Animationen ausprobieren und mittels diverser Einstellungen anpassen. Sobald man mit dem Ergebnis zufrieden ist, lässt sich der benötigte Code dann einfach kopieren und für eigene Projekte verwenden. Die Erstellerin des Tools Ana Travas dazu: Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea was to create a playground of a sorts where a collection of pre-made animations could be tested and tweaked before actually using them. Seeing how various options like easing, delay, duration and others affect the animation proved to be very useful. And basically that is how Animista was born. I have been using Animista for a while now and I hope some of you will find it useful as well. It is still very much a work in progress and hopefully it will evolve over the time :) Ach ja […]

Isometric & 3D Grids

Tolles, neues isometrisches 3D-Experiment von Codrops: Isometric and 3D Grids Vielleicht kann das ja jemand in einem zukünftigen Web-Projekt gebrauchen?

Bootstrap Zero // kostenlose Themes & Templates

Bootstrap hat sich in den letzten Monaten und Jahren zum De-facto-Standard Html- / CSS- / JS- Frontend-Framework für die Umsetzung von responsiven, mobile first Web-Projekten entwickelt. Und auch wenn Bootstrap so ziemlich alles an Modulen bietet, die eine moderne Website benötigt, so fehlt es doch oft an wirklich individuellen Anpassungen – darum sehen Bootstrap-Projekte leider oft ziemlich ähnlich aus. Free, responsive Bootstrap themes for designers & frontend developers Hier kommt Bootstrap Zero in´s Spiel und bietet eine Sammlung von ein paar Dutzend kostenlosen Bootstrap-Templates an. Diese sind unterteilt in die Kategorien Bootstrap 4 Themes, Portfolio Themes, WordPress Themes, Landing Pages, One Page Themes, Custom Themes, Starter Templates und Admin Templates. Es sollte also für so ziemlich jeden Frontend-Entwickler etwas passendes dabei sein.

NavNav // Responsive Navigation Sammlung

NavNav ist eine nützliche Sammlung diverser responsiver Website-Navigationen, die von Mills Digital kuratiert wird. In der Auflistung befinden sich unter anderem Tutorials, Beispiele und Demos auf Basis von CSS, JavaScript und jQuery.