/Front-End-Wizard

A comprehensive collection of front end tutorials and resources for developers

   logo

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

CSS

CSS

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.
  • 🌐 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

SASS

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.
  • 🌐 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

CSS-JS

  • 🌐 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

Icons-SVG

  • 🌐 simplesvg - SVG base icon sets
  • 🌐 octicons - "Your project. GitHub's icons."

UX-Design

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
  • 💸 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

TextEditors

  • 🆓 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

Misc

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

  • 💸 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.

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.