A comprehensive collection of front end tutorials and resources for developers
|size (curr.)||2072 kB|
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
- :books: - Article
- :computer: - Web Applications
- :globe_with_meridians: - Website
- :floppy_disk: - Software
- :link: - Gist / Code example / Github
- :free: - Free
- :moneybag: - Paid
- :money_with_wings: - Has free and paid sections
- :books: getHead - A guide to
- :books: You should use html form validation - Reference and guide about html form validation
- :globe_with_meridians: Code guide by Mdo - An HTML and CSS code guide for better structure
- :globe_with_meridians: HTML5Pattern - HTML5Pattern is a source of regularly used Input-Patterns.
- :globe_with_meridians: srishash - SRI Hash generator
- :books: A visual guide to CSS flexbox - A guide on using flexbox
- :books: Animated SVG loader guide - How to make an animated SVG loading symbol
- :books: Bootstrap 3 breakpoint media queries - A list of media queries used by bootstrap 3
- :books: Checkbox trickery with css - Make custom Checkboxes with CSS
- :books: Versioning conflicts - Solving CSS versioning conflicts
- :books: Stack motion hover effects - Experimental hover effects that reveal a stack of multiple colored cards
- :books: Confused about rem and em - Wrapping your heada around rem and em article
- :globe_with_meridians: Flexbox.io - What TheFlexBox?! A simple, free 20 video course that will help you master CSS Flexbox!
- :globe_with_meridians: cssgrid.io - Learn CSS Grid with Wes Bos in 25 pretty good videos
- :globe_with_meridians: Animate.css - A cross-browser library of CSS animations
- :globe_with_meridians: BEM CSS - A CSS methodology that helps you to create reusable components
- :globe_with_meridians: Code guide by Mdo - An HTML and CSS code guide for better structure
- :globe_with_meridians: Epic spinners - Pure CSS and html loading spinners
- :globe_with_meridians: Normalize.css - A modern alternative to CSS resets
- :globe_with_meridians: Instagram.css - Pure CSS instagram filters
- :computer: Gradient generator (static) - Web application to make gradients
- :computer: Gradient animator (animated) - Web application to make animated gradients
- :computer: Triangle generator - CSS Triangle Generator
- :computer: Loadin.io spinner - Custom loading animations
- :computer: Animista - Custom CSS animations generator
- :computer: 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.
- :globe_with_meridians: Purecss.io - A set of small, responsive CSS modules that you can use in every web project.
- :globe_with_meridians: minii.css - A minimal CSS framework designed to be all you need.
- :globe_with_meridians: spectre - A Lightweight, Responsive and Modern CSS Framework
- :globe_with_meridians: GetSkeleton - A dead simple, responsive boilerplate.
- :globe_with_meridians: Bulma - CSS framework based on Flexbox
- :globe_with_meridians: Material design lite - Material Design Lite
- :globe_with_meridians: materialize - A responsive front-end framework based on Material Design
- :globe_with_meridians: Ulkit - Front-end framework for developing fast and powerful web interfaces.
- :globe_with_meridians: semantic-ui- Semantic is a development framework that helps create beautiful, responsive layouts
- :globe_with_meridians: base - Lightweight and minimal code.
- :globe_with_meridians: webui - A fully responsive CSS framework for modern browsers
- :globe_with_meridians: tachyons - 100% responsive interfaces with as little CSS as possible
- :globe_with_meridians: rocketcss - A framework that helps build clean, efficient and responsive websites.
- :globe_with_meridians: cutestrap - A sassy, opinionated CSS Framework. A tiny alternative to Bootstrap.
- :globe_with_meridians: blazeui - CSS modular toolkit
- :globe_with_meridians: karmacss - Karma CSS is a great starting point if you only want a barebones boilerplate
- :globe_with_meridians: mini.css - Minimal, responsive, style-agnostic CSS framework
- :computer: Bootstrap build - Bootstrap 4 Builder
- :books: Using SASS with the angular cli - A guide on using SASS with the angular cli
- :globe_with_meridians: Sierra library - The smallest and lightest SCSS library
- :computer: SassMeister - A web based playground for testing Sass creations
- :link: Spacing helper - Customizable SCSS class generator for spacing units in web
- :link: Triangles Mixin - SCSS mixin to instantly make pure css triangles
- :link: Cards - Easy-to-use card UI for your app / project / website design.
- :link: Center anything mixin - SASS mixin to center anything without flex
- :books: Deploy Angular 2 CLI app on heroku - Host Your Angular 2 App on Heroku
- :globe_with_meridians: NodeMailer - Nodemailer is a module for Node.js applications to allow easy as cake email sending
- :globe_with_meridians: sorttable - VanillaJS table-sorting plugin
- :globe_with_meridians: Your first PWA - A tutorial for creating your first PWA
- :link: IOS Double tap fix - A jQuery plugin to selectively disable the iOS double-tap-to-zoom action on specific page elements
- :link: tippyjs - A lightweight, vanilla JS tooltip library
- :link: JSON country list - JSON Country List
- :globe_with_meridians: kube - A CSS and JS framework
- :globe_with_meridians: Fabricator - Generate a style guide from your toolkit code
- :globe_with_meridians: stylelint - A mighty, modern CSS linter and fixer that helps you avoid errors
- :computer: CanIUse - a CSS and JS support web app for seeing which browser supports which features
- :globe_with_meridians: simplesvg - SVG base icon sets
- :globe_with_meridians: octicons - Your project. GitHub’s icons.
- :globe_with_meridians: unDraw - Updated collection of SVG images that you can use for free.
- :books: Creating usability with motion guide - How to use motion correctly
- :books: How microinteractions improve ux - How to improve UX
- :books: Sketching Interfaces
- :books: 7 Practical Tips for Cheating at Design
- :books: Stop stealing sheep - A book on how to typography
- :globe_with_meridians: Dribbble - A website which offers design inspiration
- :globe_with_meridians: goodweb - A website for design inspiration
- :globe_with_meridians: Flaticon - A website for free and paid icons
- :globe_with_meridians: FontPair - A website to help you pair google font fonts together
- :globe_with_meridians: styleguides.io - A website showing example styleguides
- :globe_with_meridians: Tyffle - Try google fonts blazing fast
- :computer: MyDevice - A web application that shows you the common widths of mobile devices
- :computer: Am i responsive - A screenshot generator for nice responsive image examples
- :free: GIMP - A totally free image editing suite similar to Photoshop
- :moneybag: Illustrator - SVG editing tool and website design software
- :moneybag: Photoshop - SVG editing tool and website design software
- :moneybag: Sketch - MAC ONLY, SVG editing tool and website design software
- :money_with_wings: Figma - Cross-platform; Design, prototype, and gather feedback all in one place
- :moneybag: Adobe XD - UX design software application which supports vector design and wireframing, and creating simple interactive click-through prototypes
- :money_with_wings: InVision - Digital Product Design, Workflow and Collaboration
- :moneybag: Framer - MAC ONLY, Design and prototyping tool
- :moneybag: Principle - MAC ONLY, design animated and interactive user interfaces
- :free: Atom - A hackable text editor
- :money_with_wings: Sublime text 3 - Free trial text editor with great shortcuts
- :free: Visual Studio Code - A fast text editor
- :free: Brackets - A modern, open source text editor that understands web design
- :books: Git Commit - How to write a good git commit message
- :globe_with_meridians: StaticGen - Open source static site generators list
- :computer: 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.
- :money_with_wings: Codecademy - A very extensive free section but has a pro upgrade
- :moneybag: Pluralsight - Online video tutorial platform
- :moneybag: Treehouse - A vast platform with extremely well-built courses in front-end, UX, backend, etc.
- :free: FreeCodeCamp - A community that helps you learn to code, then get experience by contributing to open source projects used by nonprofits.
- :money_with_wings: Codeschool - A well structured interactive platform with learning paths.
- :moneybag: Lynda - Learn software, creative, and business skills to achieve your personal and professional goals.
- :moneybag: Coderbyte - A few free questions, but the majority of challenges are locked behind a paywall.
- :free: Coderfights - Free coding challenges, including tournaments and duels.
- :free: Codewars - A variety of coding challenges, with a range of difficulty posted by users.
- :money_with_wings: LeetCode - Mostly free coding challenges with a wide range of complexity.
- :free: Project Euler - Archived coding challenges meant for self-study.
- :free: Rosetta Code - A massive repository of various challenges housing answers across every language imaginable.