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