A collection of front end resources, tutorials, codepens and articles
- 📚 - Article
- 💻 - Web Applications
- 🌐 - Website
- 💾 - Software
- 🔗 - Gist / Code example
- 🎉 - Free
- 💰 - Paid
- 💸 - Has free and paid sections
- 📚 getHead - A guide to
<head>elements - 📚 You should use html form validation - Reference and guide about html form validation
- 🌐 Code guide by Mdo - A HTML and CSS code guide for better structure
- 📚 A visual guide to CSS flexbox - A guide on using flexbox
- 📚 Animated SVG loader guide - How to make an animated SVG loading symbol
- 📚 Bootstrap 3 breakpoint media queries - A list of media queries used by bootstrap 3
- 📚 Checkbox trickery with css - Make custom Checkboxes with css
- 📚 Versioning conflicts - Solving CSS versioning conflicts
- 🌐 Code guide by Mdo - A HTML and CSS code guide for better structure
- 🌐 BEM CSS - A CSS methodology that helps you to create reusable components
- 💻 Gradient animator - Web application to make animated gradients
- 📚 Using SASS with the angular cli - A guide on using SASS with the angular cli
- 💻 SassMeister - A web based playground for testing Sass creations
- 🔗 Spacing helper - customizable SCSS class generator for spacing units in web
- 🔗 Triangles Mixin - SCSS mixin to instantly make pure css triangles
- 📚 Deploy Angular 2 CLI app on heroku - Host Your Angular 2 App on Heroku
- 🌐 NodeMailer - Nodemailer is a module for Node.js applications to allow easy as cake email sending
- 🔗 IOS Double tap fix - A jQuery plugin to selectively disable the iOS double-tap-to-zoom action on specific page elements
- 📚 Creating usability with motion guide - How to use motion correctly
- 📚 How microinteractions improve ux - How to improve UX
- 📚 Sketching Interfaces
- 🌐 Dribble - A website which offers design inspiration
- 🌐 Flaticon - A website for free and paid icons
- 💻 MyDevice - A web application that shows you the common widths of mobile devices
- 🎉 GIMP - A totally free image editing suite similar to Photoshop
- 💰 Illustrator - SVG editing tool and website design software
- 💰 Photoshop - SVG editing tool and website design software
- 💰 Sketch - MAC ONLY, SVG editing tool and website design software
This section is for training platforms which offere free/paid courses to learn development. Any platform added here should contain a wide array of courses.
- 💸 Code Academy - A very extensive free section but has a pro upgrade
- 💰 Pluralsight - Online tutorial video platform
- 💰 Treehouse - A vast platform with extremely well built courses in front end ux backend etc