Front end collection
A collection of front end resources, tutorials, codepens and articles
Legend
- 📚 - Article
- 💻 - Web Applications
- 🌐 - Website
- 💾 - Software
- 🔗 - Gist / Code example / Github
Pricing Legend
- 🆓 - Free
- 💰 - Paid
- 💸 - Has free and paid sections
Contents
HTML
- 📚 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
- 🌐 HTML5Pattern - HTML5Pattern is a source of regularly used Input-Patterns.
- 🌐 srishash - SRI Hash generator
CSS
CSS
- 📚 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
- 🌐 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 - A 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
CSS FRAMEWORKS
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.
- 🌐 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
SASS
- 📚 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
JS
- 📚 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.
- 🔗 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
CSS-JS
- 🌐 kube - A CSS and JS framework
- 🌐 micron - microInteraction library built with CSS Animations and controlled by JavaScript Power
Icons-SVG
UX-Design
- 📚 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
- 🌐 Dribble - A website which offers design inspiration
- 🌐 goodweb - A website for design inspiration
- 🌐 Flaticon - A website for free and paid icons
- 💻 MyDevice - A web application that shows you the common widths of mobile devices
Applications
Design
- 🆓 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
TextEditors
- 🆓 Atom - A hackable text editor
- 💸 Sublime text 3 - Free trial text editor with great shortcuts
- 🆓 Visual Studio Code - A fast text editor
Training
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.
Platforms
- 💸 Code Academy - 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..
- 🆓 FreeCodeCamp - A community that helps you learn to code, then get experience by contributing to open source projects used by nonprofits.
- 💰 FrontendMasters - Online video courses platform teaching in-depth JavaScript, React, Angular, Vue and more..
Challenges
- 💰 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent