April 3, 2019

1498 words 8 mins read



A comprehensive collection of front end tutorials and resources for developers

repo name kieranmv95/Front-End-Wizard
repo link https://github.com/kieranmv95/Front-End-Wizard
homepage https://frontendwiz.co.uk
language JavaScript
size (curr.) 2072 kB
stars (curr.) 1606
created 2018-02-28
license MIT License

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

Go to the site where you can filter options

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

Pricing Legend

  • :free: - Free
  • :moneybag: - Paid
  • :money_with_wings: - Has free and paid sections






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: 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: sweetalert2 - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes.
  • :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
  • :link: ESLint - The pluggable linting utility for JavaScript and JSX


  • :globe_with_meridians: kube - A CSS and JS framework
  • :globe_with_meridians: micron - MicroInteraction library built with CSS Animations and controlled by JavaScript Power
  • :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.




  • :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.
  • :moneybag: FrontendMasters - Online video courses platform teaching in-depth JavaScript, React, Angular, Vue and more..
  • :moneybag: LambdaSchool - Free online bootcamp for front-end skills covering basic to advanced programming concepts, including HTML, CSS and JavaScript.
  • :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: Egghead - Learn the best JavaScript tools and frameworks from industry pros.
  • :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.
comments powered by Disqus