kieranmv95/Front-End-Wizard
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
Legend
- :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
Contents
HTML
- :books: getHead - A guide to
<head>elements - :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
CSS
CSS
- :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
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.
- :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
SASS
- :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
JS
- :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
CSS-JS
- :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
Icons-SVG
- :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.
UX-Design
- :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
Applications
Design
- :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
TextEditors
- :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
Misc
- :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
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
- :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.
Challenges
- :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.
