This list is outdated and will shortly be removed. To keep updated with the links please go to the Go to the website.
Front end wizard
A collection of front end resources, tutorials, codepens and articles
📚- Article 💻- Web Applications 🌐- Website 💾- Software 🔗- Gist / Code example / Github
🆓- Free 💰- Paid 💸- Has free and paid sections
📚getHead - A guide to
📚You should use html form validation - Reference and guide about html form validation 🌐Code guide by Mdo - An HTML and CSS code guide for better structure 🌐HTML5Pattern - HTML5Pattern is a source of regularly used Input-Patterns. 🌐srishash - SRI Hash generator
📚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 📚Stack motion hover effects - Experimental hover effects that reveal a stack of multiple colored cards 📚Confused about rem and em - Wrapping your heada around rem and em article 🌐Flexbox.io - What TheFlexBox?! A simple, free 20 video course that will help you master CSS Flexbox! 🌐cssgrid.io - Learn CSS Grid with Wes Bos in 25 pretty good videos 🌐Animate.css - A cross-browser library of CSS animations 🌐BEM CSS - A CSS methodology that helps you to create reusable components 🌐Code guide by Mdo - An HTML and CSS code guide for better structure 🌐Epic spinners - Pure CSS and html loading spinners 🌐Normalize.css - A modern alternative to CSS resets 🌐Instagram.css - Pure CSS instagram filters 💻Gradient generator (static) - Web application to make gradients 💻Gradient animator (animated) - Web application to make animated gradients 💻Triangle generator - CSS Triangle Generator 💻Loadin.io spinner - Custom loading animations 💻Animista - Custom CSS animations generator 💻pleeease.io - CSS Autoprefixer
Below is a list of frameworks, however this link is to another repository linking CSS frameworks specifically. awesome css frameworks. It has very good content, so please check it out.
🌐Purecss.io - A set of small, responsive CSS modules that you can use in every web project. 🌐minii.css - A minimal CSS framework designed to be all you need. 🌐spectre - A Lightweight, Responsive and Modern CSS Framework 🌐GetSkeleton - A dead simple, responsive boilerplate. 🌐Bulma - CSS framework based on Flexbox 🌐Material design lite - Material Design Lite 🌐materialize - A responsive front-end framework based on Material Design 🌐Ulkit - Front-end framework for developing fast and powerful web interfaces. 🌐semantic-ui- Semantic is a development framework that helps create beautiful, responsive layouts 🌐base - Lightweight and minimal code. 🌐webui - A fully responsive CSS framework for modern browsers 🌐tachyons - 100% responsive interfaces with as little CSS as possible 🌐rocketcss - A framework that helps build clean, efficient and responsive websites. 🌐cutestrap - A sassy, opinionated CSS Framework. A tiny alternative to Bootstrap. 🌐blazeui - CSS modular toolkit 🌐karmacss - Karma CSS is a great starting point if you only want a barebones boilerplate 🌐mini.css - Minimal, responsive, style-agnostic CSS framework 💻Bootstrap build - Bootstrap 4 Builder
📚Using SASS with the angular cli - A guide on using SASS with the angular cli 🌐Sierra library - The smallest and lightest SCSS library 💻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 🔗Cards - Easy-to-use card UI for your app / project / website design. 🔗Center anything mixin - SASS mixin to center anything without flex
🌐simplesvg - SVG base icon sets 🌐octicons - Your project. GitHub's icons. 🌐unDraw - Updated collection of SVG images that you can use for free.
📚Creating usability with motion guide - How to use motion correctly 📚How microinteractions improve ux - How to improve UX 📚Sketching Interfaces 📚7 Practical Tips for Cheating at Design 📚Stop stealing sheep - A book on how to typography 🌐Dribbble - A website which offers design inspiration 🌐goodweb - A website for design inspiration 🌐Flaticon - A website for free and paid icons 🌐FontPair - A website to help you pair google font fonts together 🌐styleguides.io - A website showing example styleguides 🌐Tyffle - Try google fonts blazing fast 💻MyDevice - A web application that shows you the common widths of mobile devices 💻Am i responsive - A screenshot generator for nice responsive image examples
🆓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 💸Figma - Cross-platform; Design, prototype, and gather feedback all in one place 💰Adobe XD - UX design software application which supports vector design and wireframing, and creating simple interactive click-through prototypes 💸InVision - Digital Product Design, Workflow and Collaboration 💰Framer - MAC ONLY, Design and prototyping tool 💰Principle - MAC ONLY, design animated and interactive user interfaces
🆓Atom - A hackable text editor 💸Sublime text 3 - Free trial text editor with great shortcuts 🆓Visual Studio Code - A fast text editor 🆓Brackets - A modern, open source text editor that understands web design
📚Git Commit - How to write a good git commit message 🌐StaticGen - Open source static site generators list 💻Dillinger.io - Markdown previewer
This section is for training platforms which offer free/paid courses to learn development. Any platform added here should contain a wide array of courses.
💰Coderbyte - A few free questions, but the majority of challenges are locked behind a paywall. 🆓Coderfights - Free coding challenges, including tournaments and duels. 🆓Codewars - A variety of coding challenges, with a range of difficulty posted by users. 💸LeetCode - Mostly free coding challenges with a wide range of complexity. 🆓Project Euler - Archived coding challenges meant for self-study. 🆓Rosetta Code - A massive repository of various challenges housing answers across every language imaginable.