Go to the site where you can filter options
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
<head>elements - 📚 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
- 📚 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
- 🌐 sorttable - VanillaJS table-sorting plugin
- 🌐 sweetalert2 - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes.
- 🌐 Your first PWA - A tutorial for creating your first PWA
- 🔗 IOS Double tap fix - A jQuery plugin to selectively disable the iOS double-tap-to-zoom action on specific page elements
- 🔗 tippyjs - A lightweight, vanilla JS tooltip library
- 🔗 JSON country list - JSON Country List
- 🔗 ESLint - The pluggable linting utility for JavaScript and JSX
- 🌐 kube - A CSS and JS framework
- 🌐 micron - MicroInteraction library built with CSS Animations and controlled by JavaScript Power
- 🌐 Fabricator - Generate a style guide from your toolkit code
- 🌐 stylelint - A mighty, modern CSS linter and fixer that helps you avoid errors
- 💻 CanIUse - a CSS and JS support web app for seeing which browser supports which features
- 🌐 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.
- 💸 Codecademy - A very extensive free section but has a pro upgrade
- 💰 Pluralsight - Online video tutorial platform
- 💰 Treehouse - A vast platform with extremely well-built courses in front-end, UX, backend, etc.
- 💰 FrontendMasters - Online video courses platform teaching in-depth JavaScript, React, Angular, Vue and more..
- 💰 LambdaSchool - Free online bootcamp for front-end skills covering basic to advanced programming concepts, including HTML, CSS and JavaScript.
- 🆓 FreeCodeCamp - A community that helps you learn to code, then get experience by contributing to open source projects used by nonprofits.
- 💸 Codeschool - A well structured interactive platform with learning paths.
- 💰 Egghead - Learn the best JavaScript tools and frameworks from industry pros.
- 💰 Lynda - Learn software, creative, and business skills to achieve your personal and professional goals.
- 💰 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.